// pt/services-page-pt.jsx — Portuguese Services Page override.
// Loaded AFTER services-page.jsx. Replaces window.ServicesPage with Portuguese version.

const SERVICE_OFFERINGS_PT = [
  {
    n: "01",
    title: "Certificações Rastreáveis",
    body: "Certificados de calibração rastreáveis para tanques provadores, medidas de teste, sistemas water draw e equipamentos do cliente — emitidos com rastreabilidade ao INMETRO (Brasil) ou INTI (Argentina), conformes à OIML R117, API MPMS e NIST Handbook 105-3.",
    bullets: ["Rastreabilidade ao INMETRO (Brasil)", "Conformidade OIML R117 / API / NIST", "Sob pedido: inspeção testemunha Bureau Veritas ou SGS"],
    icon: "seal",
  },
  {
    n: "02",
    title: "Treinamentos Técnicos",
    body: "Treinamentos práticos de calibração para operadores de planta, técnicos de oficinas de medidores e equipes de metrologia. Inclui uso de tanques provadores, procedimento water draw, avaliação de exatidão e normas aplicáveis.",
    bullets: ["Programas de treinamento para operadores", "Revisão de normas (OIML / API MPMS)", "No local ou na fábrica em Buenos Aires"],
    icon: "document",
  },
  {
    n: "03",
    title: "Engenharia Customizada",
    body: "Cada produto Lonetti é sob medida. Informe nossa equipe de engenharia a restrição — peso, altura, diâmetro, exatidão, tipo de válvula, montagem, jurisdição — e projetaremos a configuração.",
    bullets: ["Limites de peso / altura / diâmetro", "Escalas graduadas especializadas", "Montagem em skid, reboque ou carrinho", "Preços FOB / CIF"],
    icon: "cog",
  },
  {
    n: "04",
    title: "Envios Internacionais",
    body: "Embalado para transporte internacional. Fatura comercial, certificado de origem, certificado de calibração e fichas técnicas incluídos. Coordenamos com agentes de carga para portos de destino em todo o mundo, incluindo portos brasileiros.",
    bullets: ["Embalagem para transporte internacional", "Kit completo de documentação", "Acompanhamento de pedido semanal / quinzenal"],
    icon: "shipping",
  },
  {
    n: "05",
    title: "Armazenamento Portuário",
    body: "Planta com tanques de armazenamento para aluguel às margens do Rio Paraná, Argentina. 45.000 m³ com modulação conforme necessidade, porto com profundidade natural para navios Panamax, plataforma de carregamento para caminhões-tanque.",
    bullets: ["45.000 m³ às margens do Rio Paraná", "Porto apto para Panamax", "Plataforma de carregamento para caminhões-tanque"],
    icon: "factory",
  },
  {
    n: "06",
    title: "Parcerias de Distribuição",
    body: "A Lonetti trabalha com empresas estabelecidas nos países de destino para representar a marca localmente. Acesso a toda a linha de produtos, recursos de marketing, treinamento e a rede global Lonetti.",
    bullets: ["Exclusividade por país / região", "Suporte de marketing e técnico", "Treinamento e integração"],
    icon: "globe",
  },
];

const TRACEABILITY_FLOW_PT = [
  { label: "Norma internacional",  body: "OIML R117 · NIST Handbook 105-3 · API MPMS Cap. 4.4" },
  { label: "Instituto nacional",   body: "INMETRO (Brasil) / INTI (Argentina) — mantém os padrões de referência nacionais" },
  { label: "Fábrica Lonetti",      body: "Cada instrumento calibrado contra referências rastreáveis ao INMETRO" },
  { label: "Seu medidor",          body: "Certificado, rastreável, pronto para auditoria de transferência de custódia" },
];

function ServicesHeroPT() {
  return (
    <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 80, position: "relative" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>Nossos serviços</div>
            <h1 style={{ color: "#fff", maxWidth: "16ch" }}>
              Serviços de Calibração e <span style={{ color: "var(--red)" }}>Certificação Rastreável</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", marginTop: 28, maxWidth: "52ch" }}>
              Além da fabricação. A Lonetti oferece calibração rastreável ao INMETRO, treinamentos técnicos,
              engenharia customizada, envios internacionais e capacidade de armazenamento em nossa planta no Rio Paraná.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 36, flexWrap: "wrap" }}>
              <a className="btn btn-primary" href="#contact">Fale conosco <Icon name="arrow" size={16} stroke="#fff"/></a>
              <a className="btn btn-ghost-light" href="#offerings">Explorar serviços</a>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "4/3", borderRadius: 6, overflow: "hidden" }}>
            <img src={LONETTI_PHOTOS.technicians} alt="Técnicos Lonetti na fábrica de Buenos Aires"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(11,15,26,0.5) 100%)" }}/>
            <div style={{ position: "absolute", bottom: 18, left: 18, color: "#fff", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
              Fábrica Buenos Aires
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceOfferingsPT() {
  return (
    <section id="offerings">
      <div className="container">
        <SectionHead
          eyebrow="Portfólio de serviços"
          h2="Seis formas em que a Lonetti apoia seu programa de medição."
          lede="Do certificado de calibração que acompanha cada produto às parcerias de representação e aluguel de armazenamento — a Lonetti é muito mais do que um fabricante de tanques."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {SERVICE_OFFERINGS_PT.map((s) => (
            <div key={s.title} style={{
              padding: "36px 32px",
              borderRight: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              background: "#fff",
            }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)" }}>{s.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={s.icon} size={22}/>
                </div>
              </div>
              <h3 className="h3" style={{ fontSize: 22, marginBottom: 14 }}>{s.title}</h3>
              <p style={{ margin: 0, fontSize: 14, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 20 }}>{s.body}</p>
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                {s.bullets.map((b) => (
                  <li key={b} style={{ display: "flex", gap: 10, fontSize: 13, color: "var(--text-2)" }}>
                    <Icon name="check" size={14} stroke="var(--red)" strokeWidth={2}/>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertificationOptionsPT() {
  const certs = [
    {
      name: "Certificação Lonetti®",
      logo: "images/Lonetti-logo-red.png",
      body: "Na Lonetti, os testes e a calibração meticulosa de cada produto são nossa máxima prioridade. Nosso rigoroso processo de calibração segue normas rastreáveis ao NIST e ao INMETRO. Cada medida de teste, tanque provador, sistema water draw e demais produtos é entregue com um certificado de calibração de fábrica.",
      url: "info@lonetti.com.ar",
    },
    {
      name: "INMETRO",
      logo: "images/INTI-logo.png",
      body: "A Lonetti emite certificados de calibração com rastreabilidade ao INMETRO (Brasil) para clientes brasileiros. Nossa certificação atende à OIML R-120, API e NIST Handbook 105-3, sendo aceita pelos IPEMs e pela ANP.",
      url: "gov.br/inmetro",
    },
    {
      name: "Bureau Veritas",
      logo: "images/Bureau-Veritas-logo.png",
      body: "A Lonetti faz parcerias com o Bureau Veritas para testes e análises abrangentes. Os produtos passam por exame rigoroso seguindo OIML R-120, API e NIST Handbook 105-3. Os laudos Bureau Veritas fornecem garantia de qualidade e conformidade internacional.",
      url: "bureauveritas.com.br",
    },
    {
      name: "SGS",
      logo: "images/SGS-logo.png",
      body: "Sob pedido, a Lonetti colabora com a SGS para serviços de inspeção, teste e certificação — assegurando a conformidade com OIML R-120, API e NIST Handbook 105-3. Qualidade, segurança e desempenho garantidos.",
      url: "sgs.com.br",
    },
  ];
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <SectionHead
          eyebrow="Opções de certificação"
          h2="Escolha o organismo de certificação que atenda ao seu requisito de auditoria."
          lede="Cada produto Lonetti é entregue com um certificado de calibração de fábrica. Para licitações reguladas, solicite inspeção testemunha adicional por terceiro independente."
        />
        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
          {certs.map((c) => (
            <div key={c.name} style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 6, padding: 28, display: "flex", flexDirection: "column", gap: 18 }}>
              <div style={{ height: 56, display: "flex", alignItems: "center" }}>
                <img src={c.logo} alt={c.name} style={{ maxHeight: 56, maxWidth: 140, objectFit: "contain" }}/>
              </div>
              <h3 className="h3" style={{ fontSize: 19 }}>{c.name}</h3>
              <p style={{ margin: 0, fontSize: 13.5, color: "var(--text-2)", lineHeight: 1.6 }}>{c.body}</p>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.08em", color: "var(--text-3)", marginTop: "auto" }}>{c.url}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TraceabilitySectionPT() {
  return (
    <section className="surface-dark">
      <div className="container">
        <SectionHead
          dark
          eyebrow="O caminho da precisão"
          h2="Entendendo a rastreabilidade na medição."
          lede="A rastreabilidade é a cadeia documentada que vincula a leitura do seu instrumento a uma norma internacional reconhecida. É assim que você sabe que sua medição é real, e como um auditor pode verificá-la."
        />
        <div style={{
          marginTop: 64, display: "grid", gridTemplateColumns: `repeat(${TRACEABILITY_FLOW_PT.length}, 1fr) auto`,
          alignItems: "stretch",
        }}>
          {TRACEABILITY_FLOW_PT.map((step, i) => (
            <React.Fragment key={step.label}>
              <div style={{
                padding: "28px 24px",
                border: "1px solid rgba(255,255,255,0.18)",
                borderRadius: 6,
                background: "rgba(255,255,255,0.04)",
                display: "flex", flexDirection: "column",
              }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--red)", marginBottom: 18 }}>ETAPA 0{i + 1}</div>
                <div style={{ fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 18, color: "#fff", marginBottom: 12 }}>{step.label}</div>
                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)", lineHeight: 1.5 }}>{step.body}</div>
              </div>
              {i < TRACEABILITY_FLOW_PT.length - 1 && (
                <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "0 8px", color: "var(--red)" }}>
                  <Icon name="arrow" size={18}/>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function StorageRentalSectionPT() {
  return (
    <section style={{ background: "var(--bg-alt)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "4/3", borderRadius: 6, overflow: "hidden", background: "var(--navy-2)" }}>
            <img src={LONETTI_PHOTOS.fuelStorage} alt="Tanques de armazenamento às margens do Rio Paraná, Argentina"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Armazenamento para aluguel</div>
            <h2 className="h2" style={{ fontSize: 44, marginBottom: 24, maxWidth: "16ch" }}>
              Precisa de um tanque de armazenamento no Paraná?
            </h2>
            <p className="lede" style={{ marginBottom: 28 }}>
              45.000 m³ com modulação conforme necessidade. A planta possui um porto com profundidade natural que permite
              a atracação de navios Panamax, e está localizada às margens de uma rodovia federal importante com acesso a todas as rotas argentinas.
              Ideal para transferência a balsas de menor calado para navegação rumo ao Paraguai e ao Brasil.
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              {[
                "45.000 m³ capacidade de tanques",
                "Porto apto para Panamax",
                "Plataforma de carregamento para caminhões",
                "Rodovia federal adjacente",
                "Transferência a balsas Paraguai / Brasil",
                "Pacotes de volume modulares",
              ].map((b) => (
                <li key={b} style={{ display: "flex", gap: 10, fontSize: 14, color: "var(--text)" }}>
                  <Icon name="check" size={16} stroke="var(--red)" strokeWidth={2}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <a className="btn btn-ghost-dark" href="#contact" style={{ marginTop: 32 }}>
              Consultar armazenamento <Icon name="arrow" size={16}/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CustomCapabilitiesSectionPT() {
  const items = [
    "Limites de peso, altura, diâmetro",
    "Leituras intermediárias (ex.: tanque de 500L com marcas de ~100L)",
    "Capacidade de carga inferior",
    "Leitura nominal zero",
    "Bomba de retorno integrada",
    "Sistemas pressurizados",
    "Maior exatidão e sensibilidade (pescoços mais estreitos)",
    "Válvulas esféricas ou borboleta, flangeadas ou roscadas",
    "Incerteza reduzida",
    "Escalas graduadas especializadas",
    "Tubos de enchimento opcionais (antiespuma)",
    "Recipientes com pescoço (antisalpicos)",
    "Corpo flangeado para acesso de limpeza",
    "Placas de identificação / escalas em qualquer idioma",
    "Montagem em skid, reboque ou carrinho",
    "Reboque + suspensão, freios, iluminação",
    "Serviços de instalação local",
    "Conjuntos personalizados com capacidades variadas",
    "Preços FOB / CIF",
    "Acompanhamento de pedido semanal ou quinzenal",
  ];
  return (
    <section>
      <div className="container">
        <SectionHead
          eyebrow="Soluções sob medida"
          h2="Descubra a abordagem flexível da Lonetti."
          lede="Na Lonetti, temos orgulho de oferecer soluções flexíveis e personalizadas para cada necessidade de medição de precisão. Com profundo conhecimento de diversas indústrias, adaptamos os instrumentos às suas normas e regulamentações."
        />
        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
          borderTop: "1px solid var(--line)", borderLeft: "1px solid var(--line)" }}>
          {items.map((it, i) => (
            <div key={it} style={{
              padding: "20px 22px",
              borderRight: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              background: "#fff",
              display: "flex", alignItems: "center", gap: 12,
              fontSize: 14, color: "var(--text-2)",
            }}>
              <span className="mono" style={{ fontSize: 10, color: "var(--text-3)", minWidth: 22 }}>
                {String(i + 1).padStart(2, "0")}
              </span>
              <span>{it}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesPagePT() {
  return (
    <>
      <Nav active="services"/>
      <main>
        <ServicesHeroPT/>
        <ServiceOfferingsPT/>
        <CertificationOptionsPT/>
        <TraceabilitySectionPT/>
        <StorageRentalSectionPT/>
        <CustomCapabilitiesSectionPT/>
        <CtaQuoteSection/>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { ServicesPage: ServicesPagePT });