// pt/homepage-pt.jsx — Portuguese Homepage override.
// Loaded AFTER homepage.jsx. Replaces window.Homepage with Portuguese version.

const PRODUCTS_PT = [
  { name: "Tanques Provadores",            tag: "50L – 5.000L+",  desc: "Recipientes volumétricos em aço inoxidável para calibração de medidores e transferência de custódia.",                    art: "tank",    photo: LONETTI_PHOTOS.proverTank,          href: "pt/tanques-provadores" },
  { name: "Medidas de Teste",              tag: "1L – 50L",        desc: "Medidas portáteis de calibração para verificação de abastecedores e medidores em campo.",                                  art: "measure", photo: LONETTI_PHOTOS.testMeasure_polished, href: "pt/medidas-de-teste" },
  { name: "Sistemas Water Draw",           tag: "Provadores",      desc: "Sistemas completos de water draw gravimétrico e volumétrico para calibração de provadores de tubulação.",                  art: "water",   photo: LONETTI_PHOTOS.waterDraw,            href: "pt/sistemas-water-draw" },
  { name: "Torres para Caminhões-Tanque", tag: "Multicâmara",     desc: "Torres multicâmara para verificação de caminhões-tanque de transporte de líquidos.",                                        art: "tower",   photo: LONETTI_PHOTOS.tankerTower,          href: "pt/torres-calibracao-cisternas" },
  { name: "Bancadas de Calibração",       tag: "Fixo / móvel",   desc: "Bancadas de teste sob medida para verificação de medidores em laboratório e oficina.",                                        art: "bench",   photo: LONETTI_PHOTOS.testBench,            href: "pt/bancadas-calibracao" },
  { name: "Furgões MINILAB®",             tag: "Lab móvel",       desc: "Laboratórios de calibração móveis autônomos instalados em um furgão. Rastreáveis, em qualquer lugar.",                      art: "lab",     photo: LONETTI_PHOTOS.minilab,              href: "pt/minilab" },
];

const ART_MAP_PT = {
  tank: ProverTankArt, measure: TestMeasureArt, water: WaterDrawArt,
  tower: TankerTowerArt, bench: TestBenchArt, lab: MinilabArt,
};

const INDUSTRIES_PT = [
  { name: "Petróleo e Gás",       blurb: "Transferência de custódia, medição fiscal e conformidade API MPMS para refinarias e terminais. Conformidade ANP.",    icon: "factory", n: "01", href: "pt/industrias/petroleo-gas" },
  { name: "Indústria Química",    blurb: "Calibração de processo em aço inoxidável 304/316 para líquidos agressivos e corrosivos.",                              icon: "droplet", n: "02", href: "pt/industrias/industria-quimica" },
  { name: "Água e Saneamento",    blurb: "Verificação da medição volumétrica de água para companhias de saneamento e estações de tratamento.",                   icon: "droplet", n: "03", href: "pt/industrias/agua-saneamento" },
];

const WHY_PT = [
  { title: "Fabricação Sob Medida",        n: "01", body: "Cada tanque Lonetti é fabricado conforme suas especificações exatas. Qualquer capacidade, geometria e norma." },
  { title: "Conformidade OIML e API",      n: "02", body: "Todos os produtos atendem à OIML R117, API MPMS Cap. 4.4 e aos requisitos do NIST Handbook 105-3." },
  { title: "Envios Internacionais",        n: "03", body: "Exportamos para 47 países — embalagem completa, certificados de origem e coordenação de frete incluídos." },
  { title: "Certificação Rastreável",      n: "04", body: "Certificados de calibração emitidos com rastreabilidade ao INMETRO (Brasil) ou INTI (Argentina), conformes às normas internacionais." },
];

const CERTS_PT = ["OIML", "API MPMS", "INMETRO", "INTI", "ISO 9001", "NIST"];

const BLOG_PT = [
  { tag: "Guia de compra", date: "28 Abr 2026", read: "9 min",
    title: "Como selecionar o tanque provador adequado: Guia completo para o comprador",
    excerpt: "Capacidade, classe de exatidão, especificação de material e certificação — as quatro decisões que determinam se seu tanque provador servirá para uma aplicação de transferência de custódia." },
  { tag: "Técnico",         date: "14 Abr 2026", read: "12 min",
    title: "API MPMS Capítulo 4.4 explicado: O que os operadores precisam saber",
    excerpt: "O capítulo que rege a construção, calibração e uso de tanques provadores — traduzido da linguagem normativa para um guia prático para operadores." },
  { tag: "Comparativo",     date: "30 Mar 2026", read: "7 min",
    title: "Water draw vs. provação volumétrica: Diferenças fundamentais",
    excerpt: "Quando utilizar cada método e quais equipamentos Lonetti são compatíveis com ambos — escrito para engenheiros de medição de refinarias e técnicos de oficinas de medidores." },
];

/* ─── Hero PT ─────────────────────────────────────────────────────────── */
function HeroPT({ heroVariant }) {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 0, position: "relative", overflow: "hidden" }}>
      {heroVariant === "photo" && (
        <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
          <img src={LONETTI_PHOTOS.proverTank} alt="Tanque provador Lonetti sobre reboque"
            style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(100deg, rgba(11,15,26,0.94) 0%, rgba(11,15,26,0.82) 36%, rgba(11,15,26,0.45) 66%, rgba(11,15,26,0.12) 100%)" }}/>
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 65%, rgba(11,15,26,0.7) 100%)" }}/>
        </div>
      )}
      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 56 }}>
          <span className="chip on-dark"><span className="chip-dot"/> Exportando para o mundo inteiro</span>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "rgba(255,255,255,0.5)", textTransform: "uppercase" }}>
            Cat. 2026 · Rev 04
          </span>
        </div>
        <HeroPhotoPT/>
      </div>
      {/* Trust bar */}
      <div style={{
        marginTop: 96,
        borderTop: "1px solid rgba(255,255,255,0.12)",
        borderBottom: "1px solid rgba(255,255,255,0.12)",
        background: "rgba(0,0,0,0.5)",
        backdropFilter: "blur(8px)",
        WebkitBackdropFilter: "blur(8px)",
        position: "relative", zIndex: 1,
      }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
            {[
              { stat: "Desde 1960",       label: "Fundados em Buenos Aires" },
              { stat: "47",               label: "Países em todo o mundo" },
              { stat: "Certificado OIML", label: "R117 / API MPMS certificado" },
              { stat: "Aço Inox 304",     label: "Material de construção padrão" },
            ].map((s, i) => (
              <div key={s.stat} style={{
                padding: "28px 24px",
                borderLeft: i === 0 ? 0 : "1px solid rgba(255,255,255,0.1)",
              }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 26, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff", lineHeight: 1 }}>
                  {s.stat}
                </div>
                <div style={{ marginTop: 8, fontSize: 13, color: "rgba(255,255,255,0.6)" }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroPhotoPT() {
  return (
    <div style={{ position: "relative", minHeight: 560, padding: "56px 0 64px" }}>
      <div style={{ maxWidth: 720 }}>
        <div className="eyebrow on-dark" style={{ marginBottom: 24 }}>Instrumentos de precisão · Fund. 1960</div>
        <h1 style={{ color: "#fff", maxWidth: "12ch" }}>
          Equipamentos de Calibração de Líquidos com Precisão{" "}
          <span style={{ color: "var(--red)" }}>Desde 1960</span>.
        </h1>
        <p className="lede" style={{ marginTop: 28, color: "rgba(255,255,255,0.72)", maxWidth: "52ch" }}>
          Tanques Provadores · Medidas de Teste · Sistemas Water Draw · Torres de Calibração
        </p>
        <div style={{ display: "flex", gap: 14, marginTop: 40, flexWrap: "wrap" }}>
          <a className="btn btn-primary" href="#quote">
            Solicitar Cotação <Icon name="arrow" size={16} stroke="#fff" />
          </a>
          <a className="btn btn-ghost-light" href="#products">
            Ver Produtos <Icon name="arrow" size={16} />
          </a>
        </div>
      </div>
    </div>
  );
}

/* ─── Products Section PT ─────────────────────────────────────────────── */
function ProductsSectionPT() {
  return (
    <section id="products">
      <div className="container">
        <SectionHead
          eyebrow="Linha de produtos"
          h2="Equipamentos de calibração para cada aplicação."
          lede="De medidas de teste portáteis de 1L a torres de calibração multicâmara para frotas de caminhões-tanque — cada produto Lonetti é fabricado em aço inoxidável, certificado conforme normas internacionais e personalizado para sua aplicação."
          cta={{ label: "Catálogo completo", href: "#" }}
        />
        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 0,
          border: "1px solid var(--line)",
          borderRadius: 6,
          overflow: "hidden",
        }}>
          {PRODUCTS_PT.map((p, i) => {
            const ArtComp = ART_MAP_PT[p.art];
            const isRightEdge = (i + 1) % 3 === 0;
            const isBottomRow = i >= 3;
            return (
              <a key={p.name} href={p.href} className="prod-card" style={{
                display: "flex", flexDirection: "column",
                padding: "0 0 28px",
                background: "#fff",
                borderRight: isRightEdge ? 0 : "1px solid var(--line)",
                borderTop: isBottomRow ? "1px solid var(--line)" : 0,
                position: "relative", overflow: "hidden",
                transition: "background 200ms ease",
              }}>
                <div style={{
                  height: 240,
                  background: p.photo ? "var(--bg-mid)" : "var(--bg-alt)",
                  position: "relative", overflow: "hidden",
                  borderBottom: "1px solid var(--line)",
                }}>
                  {p.photo ? (
                    <img src={p.photo} alt={p.name} loading="lazy"
                      style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
                  ) : (
                    <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "var(--charcoal)" }}>
                      <ArtComp size={200}/>
                    </div>
                  )}
                  <span className="chip" style={{
                    position: "absolute", top: 14, left: 14, background: "rgba(255,255,255,0.95)",
                    backdropFilter: "blur(4px)",
                  }}>
                    0{i + 1} / {p.tag}
                  </span>
                </div>
                <div style={{ padding: "24px 28px 0", display: "flex", flexDirection: "column", gap: 8, flex: 1 }}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                    <h3 className="h3" style={{ margin: 0 }}>{p.name}</h3>
                    <Icon name="arrow" size={16} stroke="var(--text-3)"/>
                  </div>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.6 }}>{p.desc}</p>
                </div>
              </a>
            );
          })}
        </div>
      </div>
      <style>{`
        .prod-card:hover { background: var(--bg-alt) !important; }
        .prod-card:hover h3 { color: var(--red); }
      `}</style>
    </section>
  );
}

/* ─── Industries Section PT ───────────────────────────────────────────── */
function IndustriesSectionPT() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Indústrias"
          h2="Atendemos as indústrias que exigem exatidão."
          lede="Equipamentos Lonetti em operação na Petrobras, ExxonMobil, Shell e refinarias TotalEnergies — além de institutos nacionais de metrologia e companhias de água em quatro continentes."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {INDUSTRIES_PT.map((ind, i) => (
            <a key={ind.name} href={ind.href} style={{
              display: "flex", flexDirection: "column",
              padding: 28,
              background: "#fff",
              border: "1px solid var(--line)",
              borderRadius: 6,
              position: "relative",
              transition: "all 200ms ease",
              minHeight: 280,
              textDecoration: "none",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--navy)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
            >
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 32 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)" }}>{ind.n}</span>
                <div style={{ width: 44, height: 44, borderRadius: 4, background: "var(--bg-alt)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--navy)" }}>
                  <Icon name={ind.icon} size={22}/>
                </div>
              </div>
              <div style={{ flex: 1 }}/>
              <h3 className="h3" style={{ fontSize: 20, marginBottom: 10 }}>{ind.name}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.55 }}>{ind.blurb}</p>
              <div style={{ marginTop: 20, display: "flex", alignItems: "center", gap: 8, color: "var(--red)", fontSize: 13, fontWeight: 500 }}>
                <span>Ver indústria</span><Icon name="arrow" size={14} stroke="var(--red)"/>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Why Section PT ──────────────────────────────────────────────────── */
function WhySectionPT() {
  return (
    <section className="surface-dark" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} className="grid-bg"/>
      <div className="container" style={{ position: "relative" }}>
        <SectionHead
          dark
          eyebrow="Por que Lonetti?"
          h2="Precisão, confiabilidade e fabricação sob medida — de Buenos Aires para o mundo."
          lede="Nossos clientes retornam porque o equipamento dura mais do que os contratos. Fabricado sob medida, certificado e revisado pelo mesmo taller que entregou o primeiro provador da Exxon Mobil em 1960."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid rgba(255,255,255,0.14)" }}>
          {WHY_PT.map((w, i) => (
            <div key={w.title} style={{
              padding: "40px 28px 32px",
              borderRight: i < WHY_PT.length - 1 ? "1px solid rgba(255,255,255,0.1)" : 0,
              borderBottom: "1px solid rgba(255,255,255,0.14)",
            }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)", marginBottom: 36 }}>{w.n}</div>
              <h3 style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 22, color: "#fff", marginBottom: 14, letterSpacing: "-0.01em" }}>
                {w.title}
              </h3>
              <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,0.65)" }}>{w.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── Certifications Section PT ───────────────────────────────────────── */
function CertificationsSectionPT() {
  return (
    <section style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ maxWidth: 360 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Certificações e normas</div>
            <h3 style={{ fontFamily: "var(--f-display)", fontSize: 24, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--text)", margin: 0, lineHeight: 1.3 }}>
              Todos os produtos Lonetti são rastreáveis a normas metrológicas nacionais e internacionais.
            </h3>
          </div>
          <div data-mobile-cols="2" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
            {CERTS_PT.map((c, i) => (
              <div key={c} style={{
                padding: "28px 12px", textAlign: "center",
                borderRight: i < CERTS_PT.length - 1 ? "1px solid var(--line)" : 0,
                fontFamily: "var(--f-display)", fontWeight: 700, fontSize: 18, letterSpacing: "0.04em",
                color: "var(--text)",
              }}>{c}</div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── Reference Section PT ────────────────────────────────────────────── */
function ReferenceSectionPT() {
  return (
    <section style={{ background: "var(--bg-alt)", paddingTop: 96, paddingBottom: 96 }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Instalações de referência</div>
            <h2 className="h2" style={{ fontSize: 40, maxWidth: "18ch", marginBottom: 24 }}>
              Confiado por empresas de petróleo em 47 países.
            </h2>
            <p className="lede" style={{ marginBottom: 32 }}>
              Do primeiro pedido da Exxon Mobil em 1960 até as implantações atuais com Petrobras, Shell e TotalEnergies —
              os equipamentos Lonetti atuam em refinarias, terminais e institutos de metrologia em quatro continentes.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
              {["Petrobras", "ExxonMobil", "Shell", "TotalEnergies", "YPF", "Pluspetrol", "Axion", "INMETRO"].map((n) => (
                <span key={n} className="chip">{n}</span>
              ))}
            </div>
          </div>
          <WorldMap/>
        </div>
      </div>
    </section>
  );
}

/* ─── Blog Section PT ─────────────────────────────────────────────────── */
function BlogSectionPT() {
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Blog e base de conhecimento"
          h2="Perspectivas técnicas da equipe de engenharia."
          lede="Normas explicadas em linguagem clara, guias de compra e notas de campo de seis décadas de prática de calibração."
          cta={{ label: "Todos os artigos", href: "#" }}
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {BLOG_PT.map((b, i) => {
            const blogPhoto = [LONETTI_PHOTOS.proverTank, LONETTI_PHOTOS.waterDraw, LONETTI_PHOTOS.testMeasure][i];
            return (
              <a key={b.title} href="#" style={{
                display: "flex", flexDirection: "column",
                border: "1px solid var(--line)",
                borderRadius: 6,
                background: "#fff",
                overflow: "hidden",
                transition: "all 200ms ease",
                textDecoration: "none",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--charcoal)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                <div style={{ aspectRatio: "16/10", background: "var(--bg-mid)", position: "relative", overflow: "hidden" }}>
                  <img src={blogPhoto} alt={b.title} loading="lazy"
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 40%, transparent 100%)" }}/>
                  <span className="chip on-dark" style={{ position: "absolute", top: 16, left: 16, background: "rgba(11,15,26,0.7)", backdropFilter: "blur(6px)" }}>{b.tag}</span>
                </div>
                <div style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "var(--text-3)", textTransform: "uppercase" }}>
                    {b.date} · {b.read} de leitura
                  </div>
                  <h3 className="h3" style={{ fontSize: 19, lineHeight: 1.3 }}>{b.title}</h3>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.55 }}>{b.excerpt}</p>
                  <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 8, color: "var(--red)", fontSize: 13, fontWeight: 500 }}>
                    <span>Continuar lendo</span><Icon name="arrow" size={14} stroke="var(--red)"/>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ─── CTA Quote Section PT ────────────────────────────────────────────── */
function CtaQuoteSectionPT() {
  const [submitted, setSubmittedPT] = React.useState(false);
  const [loading, setLoadingPT] = React.useState(false);
  const [serverError, setServerErrorPT] = React.useState(null);
  const [errors, setErrorsPT] = React.useState({});
  const [data, setDataPT] = React.useState({ name: "", company: "", country: "", email: "", product: "", message: "" });

  const onSubmit = async (e) => {
    e.preventDefault();
    const next = {};
    ["name", "company", "country", "email"].forEach((k) => { if (!data[k]) next[k] = "Obrigatório"; });
    if (data.email && !/^\S+@\S+\.\S+$/.test(data.email)) next.email = "E-mail inválido";
    setErrorsPT(next);
    if (Object.keys(next).length > 0) return;
    setLoadingPT(true);
    setServerErrorPT(null);
    try {
      await submitForm({ ...data, _subject: `Solicitação de cotação — ${data.product || "Geral"} — ${data.company}` });
      setSubmittedPT(true);
    } catch {
      setServerErrorPT("Ocorreu um erro. Por favor, tente novamente ou envie um e-mail para info@lonetti.com.ar");
    } finally {
      setLoadingPT(false);
    }
  };

  const field = (k, label, type = "text") => (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>{label}</span>
      <input type={type} value={data[k]} onChange={(e) => setDataPT({...data, [k]: e.target.value})}
        style={{
          padding: "12px 14px", background: "rgba(255,255,255,0.08)",
          border: `1px solid ${errors[k] ? "#FFDC8A" : "rgba(255,255,255,0.2)"}`,
          borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)",
        }}/>
      {errors[k] && <span style={{ fontSize: 11, color: "#FFDC8A" }}>{errors[k]}</span>}
    </label>
  );

  return (
    <section id="quote" style={{ background: "var(--red)", color: "#fff", padding: "120px 0", position: "relative", overflow: "hidden" }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.08, pointerEvents: "none",
        backgroundImage: "linear-gradient(45deg, #fff 1px, transparent 1px)",
        backgroundSize: "10px 10px",
      }}/>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow on-dark" style={{ color: "#fff", opacity: 0.7, marginBottom: 24 }}>Falar com engenharia</div>
            <h2 className="h2" style={{ color: "#fff", maxWidth: "14ch", marginBottom: 28, fontSize: "clamp(40px, 4.4vw, 64px)" }}>
              Pronto para elevar sua medição de líquidos?
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", marginBottom: 36 }}>
              Envie-nos sua vazão nominal, classe de exatidão e as normas que deve atender. Retornamos com uma configuração e cotação em dois dias úteis.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, color: "rgba(255,255,255,0.9)", fontSize: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="whatsapp" size={20}/>
                <span><b>WhatsApp:</b> +54 9 11 2788 4190 · EN / ES / PT</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="mail" size={20}/>
                <span><b>E-mail:</b> info@lonetti.com.ar</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <Icon name="pin" size={20}/>
                <span><b>Fábrica:</b> Buenos Aires, Argentina</span>
              </div>
            </div>
          </div>

          {submitted ? (
            <div style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 6, padding: 36, minHeight: 480, display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "#fff", color: "var(--red)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
                <Icon name="check" size={28} stroke="var(--red)" strokeWidth={2}/>
              </div>
              <h3 style={{ fontFamily: "var(--f-display)", fontSize: 28, color: "#fff", marginBottom: 12 }}>Solicitação recebida.</h3>
              <p style={{ margin: 0, color: "rgba(255,255,255,0.85)" }}>Um engenheiro entrará em contato dentro de dois dias úteis. Para requisitos urgentes, escreva-nos pelo WhatsApp.</p>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ background: "rgba(0,0,0,0.18)", border: "1px solid rgba(255,255,255,0.18)", borderRadius: 6, padding: 36, display: "flex", flexDirection: "column", gap: 18 }}>
              <div className="eyebrow on-dark" style={{ color: "#fff", opacity: 0.85, marginBottom: 4 }}>Solicitar cotação</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {field("name", "Nome completo")}
                {field("company", "Empresa")}
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
                {field("country", "País")}
                {field("email", "E-mail profissional", "email")}
              </div>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Produto de interesse</span>
                <select value={data.product} onChange={(e) => setDataPT({...data, product: e.target.value})}
                  style={{ padding: "12px 14px", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)" }}>
                  <option value="" style={{ color: "#333" }}>Selecionar…</option>
                  {PRODUCTS_PT.map((p) => <option key={p.name} value={p.name} style={{ color: "#333" }}>{p.name}</option>)}
                  <option value="Outro" style={{ color: "#333" }}>Outro / não tenho certeza</option>
                </select>
              </label>
              <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontSize: 11, fontFamily: "var(--f-mono)", letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)" }}>Requisitos (opcional)</span>
                <textarea rows="3" value={data.message} onChange={(e) => setDataPT({...data, message: e.target.value})}
                  placeholder="Capacidade, classe de exatidão, normas exigidas, aplicação…"
                  style={{ padding: "12px 14px", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 4, color: "#fff", fontSize: 14, fontFamily: "var(--f-body)", resize: "vertical" }}/>
              </label>
              {serverError && (
                <p style={{ margin: 0, fontSize: 13, color: "#FFDC8A", background: "rgba(255,220,138,0.1)", padding: "10px 14px", borderRadius: 4 }}>{serverError}</p>
              )}
              <button type="submit" disabled={loading} style={{
                marginTop: 6, padding: "14px 22px", background: loading ? "rgba(255,255,255,0.6)" : "#fff", color: "var(--red)",
                border: 0, borderRadius: 4, fontFamily: "var(--f-body)", fontSize: 14,
                fontWeight: 700, letterSpacing: "0.01em", display: "inline-flex", justifyContent: "center", alignItems: "center", gap: 10,
                cursor: loading ? "not-allowed" : "pointer",
              }}>
                {loading ? "Enviando…" : <><span>Enviar solicitação</span><Icon name="arrow" size={16} stroke="var(--red)"/></>}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─── Homepage PT root ────────────────────────────────────────────────── */
function HomepagePT({ tweaks }) {
  return (
    <>
      <Nav active="home"/>
      <main>
        <HeroPT heroVariant={tweaks ? tweaks.heroVariant : "photo"}/>
        <ProductsSectionPT/>
        <IndustriesSectionPT/>
        <WhySectionPT/>
        <CertificationsSectionPT/>
        <ReferenceSectionPT/>
        <BlogSectionPT/>
        <CtaQuoteSectionPT/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { Homepage: HomepagePT, CtaQuoteSection: CtaQuoteSectionPT });
