// about-page.jsx — /about/ Lonetti page.

const TIMELINE = [
  { year: "1960", title: "Founded in Buenos Aires", body: "Lonetti is founded. First sale: two 4,000-liter measures on trailers to Exxon Mobil, equipped with a heating system for both light and heavy products." },
  { year: "1970s",title: "Domestic petroleum standard", body: "Standard supplier to YPF — Argentina's state oil company — for prover tanks and field measures across the national fleet." },
  { year: "1990s",title: "Regional expansion", body: "Begin exporting across South America. INTI partnership formalized; Lonetti products become OIML R117 / API MPMS reference standards in the region." },
  { year: "2000s",title: "MINILAB® launch", body: "Lonetti develops the MINILAB® — a self-contained mobile calibration laboratory built into a van. Used by petroleum companies and national metrology institutes." },
  { year: "2010s",title: "Global exports", body: "Exports reach 30+ countries across the Americas, Middle East, Europe, and Africa. Tanker-truck calibration tower line introduced." },
  { year: "2026", title: "47 countries", body: "Lonetti exports to 47 countries. The company remains family-run, custom-shop, with engineering and manufacturing still in Buenos Aires." },
];

const VALUES = [
  { n: "01", title: "Precision over volume", body: "Every Lonetti unit is custom-built. We don't run production lines — we run a workshop. Each tank is engineered for one specific deployment." },
  { n: "02", title: "Traceability is the product", body: "A prover tank without a traceable certificate is a vessel. With it, it's a measurement reference. We sell the certificate as much as the steel." },
  { n: "03", title: "Decades, not quarters",  body: "We've been doing this since 1960. Our customers come back because the equipment outlasts the contracts." },
  { n: "04", title: "Engineering accessibility", body: "Talk to the people who build the tanks. No layered sales process — our engineers respond directly within two business days." },
];

function AboutHero() {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 100, position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>About Lonetti</div>
            <h1 style={{ color: "#fff", maxWidth: "14ch" }}>
              Over 60 years of <span style={{ color: "var(--red)" }}>liquid calibration expertise</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "54ch" }}>
              We've been calibrating liquid measurement worldwide since 1960. From a single Buenos Aires workshop
              to exports across 47 countries — still family-run, still custom-shop, still measuring success one drop at a time.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <a className="btn btn-primary" href="#timeline">Read the story <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="services.html">Our services</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.history_1959} alt="Lonetti's first 4,000-liter measure for YPF Argentina, 1959"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 60%, rgba(11,15,26,0.85) 100%)" }}/>
            <div style={{ position: "absolute", bottom: 20, left: 20, right: 20, color: "#fff" }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 6 }}>1959</div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18 }}>
                Proving calibration tank made for YPF Argentina
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutNumbers() {
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Numbers speak for themselves"
          h2="The story in three figures."
          lede="Driven by a legacy of precision and fueled by unwavering commitment, we measure success one drop at a time — empowering industries worldwide with tailored, accurate solutions."
        />
        <div className="about-numbers" style={{
          marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        }}>
          {[
            { stat: "500+", label: "Satisfied clients" },
            { stat: "47",   label: "Countries served" },
            { stat: "66",   label: "Years calibrating" },
          ].map((s, i) => (
            <div key={s.label} style={{
              padding: "44px 32px",
              borderLeft: i === 0 ? 0 : "1px solid var(--line)",
            }}>
              <div style={{
                fontFamily: "var(--f-display)", fontSize: 80, fontWeight: 700,
                lineHeight: 1, letterSpacing: "-0.03em", color: "var(--red)", marginBottom: 16,
              }}>
                {s.stat}
              </div>
              <div style={{ fontSize: 15, color: "var(--text-2)" }}>{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutStorySection() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>The story</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 28, maxWidth: "16ch" }}>
              Precision meets legacy.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text)", marginBottom: 22 }}>
              Since 1960, Lonetti has been dedicated to manufacturing liquid measurement systems.
              Our journey began with the first sale of two 4,000-liter measures on trailers to Exxon Mobil
              Corporation — specifically designed for both light and heavy products, equipped with a heating system.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 22 }}>
              Today, we proudly export to 47 countries, primarily serving petroleum companies for the control
              of their derivatives. Many of our clients are state-owned enterprises — and given their preference
              for local suppliers, we establish sales agreements based on order volume to meet their requirements.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 0 }}>
              For those interested, we offer the opportunity to become distributors of our brand,
              starting with an initial confirmed order.
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
            <div style={{ aspectRatio: "3/4", borderRadius: 6, overflow: "hidden", background: "var(--navy-2)" }}>
              <img src={LONETTI_PHOTOS.welders_bench} alt="Lonetti welders at the bench"
                style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ aspectRatio: "1/1", borderRadius: 6, overflow: "hidden", background: "var(--navy-2)" }}>
                <img src={LONETTI_PHOTOS.welder_sparks} alt="Welding sparks in the Lonetti workshop"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
              <div style={{ aspectRatio: "1/1", borderRadius: 6, overflow: "hidden", background: "var(--navy-2)" }}>
                <img src={LONETTI_PHOTOS.metal_worker} alt="Lonetti technician in PPE"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TimelineSection() {
  return (
    <section id="timeline">
      <div className="container">
        <SectionHead
          eyebrow="The timeline"
          h2="Six decades, one workshop."
        />
        <div style={{ marginTop: 64, position: "relative" }}>
          {/* Vertical line */}
          <div className="timeline-line" style={{ position: "absolute", left: 80, top: 0, bottom: 0, width: 1, background: "var(--line)" }}/>
          {TIMELINE.map((t, i) => (
            <div key={t.year} className="timeline-row" style={{ display: "grid", gridTemplateColumns: "120px 40px 1fr", gap: 32, alignItems: "start", paddingBottom: 48, position: "relative" }}>
              <div style={{
                fontFamily: "var(--f-display)", fontSize: 32, fontWeight: 700,
                color: "var(--red)", letterSpacing: "-0.02em", lineHeight: 1,
              }}>
                {t.year}
              </div>
              <div className="timeline-dot" style={{ position: "relative", display: "flex", justifyContent: "center" }}>
                <div style={{
                  width: 16, height: 16, borderRadius: "50%",
                  background: "#fff", border: "2px solid var(--red)",
                  marginTop: 6, zIndex: 1, position: "relative",
                }}/>
              </div>
              <div style={{ maxWidth: "60ch" }}>
                <h3 className="h3" style={{ fontSize: 22, marginBottom: 10 }}>{t.title}</h3>
                <p style={{ margin: 0, fontSize: 15, color: "var(--text-2)", lineHeight: 1.6 }}>{t.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ValuesSection() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="What we believe"
          h2="How a calibration shop survives 66 years."
          lede="Lonetti isn't a startup, and isn't trying to scale fast. We've stayed in business by being narrowly specialized, very technical, and accountable to our clients over decades — not quarters."
        />
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.14)", borderBottom: "1px solid rgba(255,255,255,0.14)" }}>
          {VALUES.map((v, i) => (
            <div key={v.title} style={{
              padding: "40px 28px",
              borderRight: i < VALUES.length - 1 ? "1px solid rgba(255,255,255,0.1)" : 0,
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)", marginBottom: 32 }}>{v.n}</div>
              <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 20, color: "#fff", marginBottom: 14 }}>{v.title}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "rgba(255,255,255,0.66)", lineHeight: 1.6 }}>{v.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function GlobalReachSection() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Global reach</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 28, maxWidth: "16ch" }}>
              From Buenos Aires to 47 countries.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 20 }}>
              At our core, we pride ourselves on the exceptional flexibility we offer in delivering customized standard measurements.
              Whether it's tailoring instruments to meet unique requirements or accommodating specific regulations imposed by various countries,
              we go above and beyond to ensure seamless adaptation.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 28 }}>
              With our versatile capabilities, customers measure in liters, gallons, or imperial gallons —
              providing the flexibility needed to comply with diverse regional standards.
            </p>
            <a className="btn btn-ghost-dark" href="services.html">Become a distributor <Icon name="arrow" size={16}/></a>
          </div>
          <div style={{ position: "relative", aspectRatio: "5/4", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.expoADIPEC} alt="Lonetti at the ADIPEC expo, Abu Dhabi"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(11,15,26,0.7) 100%)" }}/>
            <div style={{ position: "absolute", bottom: 20, left: 20, color: "#fff" }}>
              <div className="eyebrow on-dark" style={{ marginBottom: 6 }}>ADIPEC · Abu Dhabi</div>
              <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18 }}>
                Representing Argentine precision manufacturing
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ClientLogoStrip() {
  return (
    <section style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div className="eyebrow" style={{ textAlign: "center", marginBottom: 36 }}>
          Trusted by
        </div>
        <div data-mobile-cols="2" style={{
          display: "grid", gridTemplateColumns: `repeat(${Math.min(CLIENT_LOGOS.length, 11)}, 1fr)`,
          gap: 24, alignItems: "center", justifyItems: "center",
          padding: "20px 0", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        }}>
          {CLIENT_LOGOS.map((c) => (
            <img key={c.name} src={c.src} alt={c.name}
              style={{ maxHeight: 36, maxWidth: 100, objectFit: "contain", filter: "grayscale(1)", opacity: 0.7, transition: "filter 200ms, opacity 200ms" }}
              onMouseEnter={(e) => { e.currentTarget.style.filter = "grayscale(0)"; e.currentTarget.style.opacity = 1; }}
              onMouseLeave={(e) => { e.currentTarget.style.filter = "grayscale(1)"; e.currentTarget.style.opacity = 0.7; }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <>
      <Nav active="about"/>
      <main>
        <AboutHero/>
        <AboutNumbers/>
        <AboutStorySection/>
        <TimelineSection/>
        <ValuesSection/>
        <GlobalReachSection/>
        <ClientLogoStrip/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { AboutPage, ClientLogoStrip });