// es/about-page-es.jsx — Spanish About Page override.
// Loaded AFTER about-page.jsx. Replaces window.AboutPage with Spanish version.

const TIMELINE_ES = [
  { year: "1960",  title: "Fundación en Buenos Aires",   body: "Lonetti es fundada. Primera venta: dos medidas de 4.000 litros sobre tráilers a Exxon Mobil Corporation — especialmente diseñadas para productos livianos y pesados, equipadas con sistema de calefacción." },
  { year: "1970s", title: "Estándar nacional del petróleo", body: "Proveedor estándar de YPF — la empresa estatal de petróleo de Argentina — para tanques probadores y medidas de campo en toda la flota nacional." },
  { year: "1990s", title: "Expansión regional",           body: "Inicio de exportaciones a toda América del Sur. Asociación con INTI formalizada; los productos Lonetti se convierten en referencias OIML R117 / API MPMS en la región." },
  { year: "2000s", title: "Lanzamiento del MINILAB®",    body: "Lonetti desarrolla el MINILAB® — un laboratorio de calibración móvil completamente autónomo instalado en un furgón. Utilizado por empresas petroleras e institutos nacionales de metrología." },
  { year: "2010s", title: "Exportaciones globales",      body: "Las exportaciones alcanzan más de 30 países en América, Medio Oriente, Europa y África. Se introduce la línea de torres de calibración para camiones cisterna." },
  { year: "2026",  title: "47 países",                   body: "Lonetti exporta a 47 países. La empresa se mantiene como empresa familiar, taller a medida, con ingeniería y fabricación aún en Buenos Aires." },
];

const VALUES_ES = [
  { n: "01", title: "Precisión antes que volumen",      body: "Cada unidad Lonetti se fabrica a medida. No tenemos líneas de producción — tenemos un taller. Cada tanque se diseña para un despliegue específico." },
  { n: "02", title: "La trazabilidad es el producto",   body: "Un tanque probador sin certificado trazable es un recipiente. Con él, es una referencia de medición. Vendemos el certificado tanto como el acero." },
  { n: "03", title: "Décadas, no trimestres",           body: "Llevamos haciendo esto desde 1960. Nuestros clientes vuelven porque el equipo dura más que los contratos." },
  { n: "04", title: "Ingeniería accesible",             body: "Hable directamente con quienes fabrican los tanques. Sin capas de procesos de venta — nuestros ingenieros responden directamente en dos días hábiles." },
];

function AboutHeroES() {
  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 }}>Sobre Lonetti</div>
            <h1 style={{ color: "#fff", maxWidth: "14ch" }}>
              Más de 65 Años de <span style={{ color: "var(--red)" }}>Experiencia en Metrología de Líquidos</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "54ch" }}>
              Calibrando la medición de líquidos a nivel mundial desde 1960. Desde un único taller en Buenos Aires
              hasta exportaciones a 47 países — todavía empresa familiar, todavía taller a medida, midiendo el éxito gota a gota.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <a className="btn btn-primary" href="#timeline">Leer la historia <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="es/servicios">Nuestros servicios</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.history_1959} alt="Primera medida de 4.000 litros de Lonetti para 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 }}>
                Tanque probador fabricado para YPF Argentina
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutNumbersES() {
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Los números hablan solos"
          h2="La historia en tres cifras."
          lede="Impulsados por un legado de precisión y alimentados por un compromiso inquebrantable, medimos el éxito gota a gota — empoderando a industrias en todo el mundo con soluciones precisas y a medida."
        />
        <div style={{
          marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)",
        }}>
          {[
            { stat: "500+", label: "Clientes satisfechos" },
            { stat: "47",   label: "Países atendidos" },
            { stat: "66",   label: "Años calibrando" },
          ].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 AboutStorySectionES() {
  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 }}>La historia</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 28, maxWidth: "16ch" }}>
              Precisión y legado.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text)", marginBottom: 22 }}>
              Lonetti fue fundada en Buenos Aires en 1960 — nuestra primera venta fueron dos medidas de prueba de 4.000 litros sobre tráiler a Exxon Mobil Corporation — específicamente diseñadas para productos livianos y pesados, equipadas con un sistema de calefacción.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 22 }}>
              Hoy, más de 65 años después, exportamos a 47 países, sirviendo principalmente a empresas petroleras para el control de sus derivados. Muchos de nuestros clientes son empresas estatales — y dada su preferencia por proveedores locales, establecemos acuerdos de venta basados en el volumen de pedidos para satisfacer sus requisitos.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 0 }}>
              Para quienes estén interesados, ofrecemos la oportunidad de convertirse en distribuidores de nuestra marca, comenzando con un pedido inicial confirmado.
            </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="Soldadores Lonetti en el banco"
                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="Chispas de soldadura en el taller Lonetti"
                  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="Técnico Lonetti con EPP"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TimelineSectionES() {
  return (
    <section id="timeline">
      <div className="container">
        <SectionHead
          eyebrow="La línea de tiempo"
          h2="Seis décadas, un taller."
        />
        <div style={{ marginTop: 64, position: "relative" }}>
          <div style={{ position: "absolute", left: 80, top: 0, bottom: 0, width: 1, background: "var(--line)" }}/>
          {TIMELINE_ES.map((t, i) => (
            <div key={t.year} 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 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 ValuesSectionES() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="En qué creemos"
          h2="Cómo sobrevive un taller de calibración 66 años."
          lede="Lonetti no es una startup y no intenta escalar rápido. Nos mantenemos en el negocio siendo estrechamente especializados, muy técnicos y responsables ante nuestros clientes durante décadas — no trimestres."
        />
        <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_ES.map((v, i) => (
            <div key={v.title} style={{
              padding: "40px 28px",
              borderRight: i < VALUES_ES.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 GlobalReachSectionES() {
  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 }}>Alcance global</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 28, maxWidth: "16ch" }}>
              Desde Buenos Aires a 47 países.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 20 }}>
              En nuestro núcleo, nos enorgullecemos de la excepcional flexibilidad que ofrecemos para entregar medidas estándar personalizadas.
              Ya sea adaptando instrumentos para cumplir requisitos únicos o acomodando regulaciones específicas impuestas por distintos países,
              hacemos todo lo posible para asegurar una adaptación sin inconvenientes.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 28 }}>
              Con nuestras capacidades versátiles, los clientes miden en litros, galones o galones imperiales —
              brindando la flexibilidad necesaria para cumplir con diversas normas regionales.
            </p>
            <a className="btn btn-ghost-dark" href="es/servicios">Conviértase en distribuidor <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 en la exposición ADIPEC, 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 }}>
                Representando la manufactura de precisión argentina
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutPageES() {
  return (
    <>
      <Nav active="about"/>
      <main>
        <AboutHeroES/>
        <AboutNumbersES/>
        <AboutStorySectionES/>
        <TimelineSectionES/>
        <ValuesSectionES/>
        <GlobalReachSectionES/>
        <ClientLogoStrip/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { AboutPage: AboutPageES });