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

const TIMELINE_PT = [
  { year: "1960",  title: "Fundação em Buenos Aires",    body: "A Lonetti é fundada. Primeira venda: duas medidas de 4.000 litros montadas em reboque para a Exxon Mobil Corporation — especialmente projetadas para produtos leves e pesados, equipadas com sistema de aquecimento." },
  { year: "1970s", title: "Padrão nacional do petróleo", body: "Fornecedor padrão da YPF — empresa estatal de petróleo da Argentina — para tanques provadores e medidas de campo em toda a frota nacional." },
  { year: "1990s", title: "Expansão regional",           body: "Início das exportações para toda a América do Sul. Parceria com o INTI formalizada; os produtos Lonetti tornam-se referências OIML R117 / API MPMS na região." },
  { year: "2000s", title: "Lançamento do MINILAB®",     body: "A Lonetti desenvolve o MINILAB® — um laboratório de calibração móvel completamente autônomo instalado em um furgão. Utilizado por empresas de petróleo e institutos nacionais de metrologia." },
  { year: "2010s", title: "Exportações globais",        body: "As exportações alcançam mais de 30 países nas Américas, Oriente Médio, Europa e África. É introduzida a linha de torres de calibração para caminhões-tanque." },
  { year: "2026",  title: "47 países",                  body: "A Lonetti exporta para 47 países. A empresa permanece como empresa familiar, fábrica sob medida, com engenharia e fabricação ainda em Buenos Aires." },
];

const VALUES_PT = [
  { n: "01", title: "Precisão antes do volume",       body: "Cada unidade Lonetti é fabricada sob medida. Não temos linhas de produção — temos uma fábrica. Cada tanque é projetado para uma aplicação específica." },
  { n: "02", title: "A rastreabilidade é o produto",  body: "Um tanque provador sem certificado rastreável é apenas um recipiente. Com ele, é uma referência de medição. Vendemos o certificado tanto quanto o aço." },
  { n: "03", title: "Décadas, não trimestres",        body: "Fazemos isso desde 1960. Nossos clientes retornam porque o equipamento dura mais do que os contratos." },
  { n: "04", title: "Engenharia acessível",           body: "Fale diretamente com quem fabrica os tanques. Sem camadas de processos de vendas — nossos engenheiros respondem diretamente em dois dias úteis." },
];

function AboutHeroPT() {
  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 a Lonetti</div>
            <h1 style={{ color: "#fff", maxWidth: "14ch" }}>
              Mais de 65 Anos de <span style={{ color: "var(--red)" }}>Experiência em Metrologia de Líquidos</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "54ch" }}>
              Calibrando a medição de líquidos no mundo inteiro desde 1960. De uma única fábrica em Buenos Aires
              a exportações para 47 países — ainda empresa familiar, ainda fábrica sob medida, medindo o sucesso gota a gota.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
              <a className="btn btn-primary" href="#timeline">Ler a história <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="pt/servicos">Nossos serviços</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.history_1959} alt="Primeiro tanque provador de 4.000 litros da 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 provador fabricado para YPF Argentina
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutNumbersPT() {
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Os números falam por si"
          h2="A história em três números."
          lede="Impulsionados por um legado de precisão e movidos por um compromisso inabalável, medimos o sucesso gota a gota — capacitando indústrias em todo o mundo com soluções precisas e sob 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 satisfeitos" },
            { stat: "47",   label: "Países atendidos" },
            { stat: "66",   label: "Anos 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 AboutStorySectionPT() {
  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 }}>A história</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 28, maxWidth: "16ch" }}>
              Precisão e legado.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--text)", marginBottom: 22 }}>
              A Lonetti foi fundada em Buenos Aires em 1960. Nossa primeira venda foram duas medidas de teste de 4.000 litros montadas em reboque para a Exxon Mobil Corporation — especificamente projetadas para produtos leves e pesados, equipadas com um sistema de aquecimento.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 22 }}>
              Hoje, mais de 65 anos depois, exportamos para 47 países, atendendo principalmente empresas de petróleo para o controle de seus derivados. Atendemos o mercado brasileiro há décadas, com produtos compatíveis com os requisitos da ANP e rastreabilidade ao INMETRO.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 0 }}>
              Para aqueles interessados, oferecemos a oportunidade de se tornarem distribuidores de nossa marca, começando com um 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 na bancada"
                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="Faíscas de solda na fábrica 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 com EPI"
                  style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TimelineSectionPT() {
  return (
    <section id="timeline">
      <div className="container">
        <SectionHead
          eyebrow="A linha do tempo"
          h2="Seis décadas, uma fábrica."
        />
        <div style={{ marginTop: 64, position: "relative" }}>
          <div style={{ position: "absolute", left: 80, top: 0, bottom: 0, width: 1, background: "var(--line)" }}/>
          {TIMELINE_PT.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 ValuesSectionPT() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="No que acreditamos"
          h2="Como uma fábrica de calibração sobrevive 66 anos."
          lede="A Lonetti não é uma startup e não tenta crescer rapidamente. Permanecemos no negócio sendo altamente especializados, muito técnicos e responsáveis perante nossos clientes por décadas — não por 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_PT.map((v, i) => (
            <div key={v.title} style={{
              padding: "40px 28px",
              borderRight: i < VALUES_PT.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 GlobalReachSectionPT() {
  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" }}>
              De Buenos Aires a 47 países.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 20 }}>
              Em nosso núcleo, temos orgulho da excepcional flexibilidade que oferecemos para entregar medidas padrão personalizadas.
              Seja adaptando instrumentos para atender requisitos únicos ou acomodando regulamentações específicas impostas por diferentes países,
              fazemos o possível para garantir uma adaptação sem dificuldades.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", marginBottom: 28 }}>
              Com nossas capacidades versáteis, os clientes medem em litros, galões ou galões imperiais —
              oferecendo a flexibilidade necessária para atender a diversas normas regionais.
            </p>
            <a className="btn btn-ghost-dark" href="pt/servicos">Torne-se um 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 na exposição 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 a fabricação de precisão argentina
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutPagePT() {
  return (
    <>
      <Nav active="about"/>
      <main>
        <AboutHeroPT/>
        <AboutNumbersPT/>
        <AboutStorySectionPT/>
        <TimelineSectionPT/>
        <ValuesSectionPT/>
        <GlobalReachSectionPT/>
        <ClientLogoStrip/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

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