// pt/faq-page-pt.jsx — Portuguese FAQ Page.
// Defines window.FaqPage — Portuguese version.

const FAQ_DATA_PT = [
  {
    q: "O que é um tanque provador e como funciona?",
    a: "Um tanque provador é um recipiente de aço inoxidável calibrado com precisão, utilizado para verificar a exatidão de medidores de vazão de líquidos. Um volume conhecido de líquido é direcionado pelo medidor e coletado no tanque provador; a comparação entre a leitura do medidor e o volume certificado do tanque permite determinar se o medidor está medindo corretamente. A Lonetti fabrica tanques provadores de 50L a mais de 5.000L, com precisão de ±0,05%, certificados conforme OIML R117 e API MPMS Capítulo 4.4.",
  },
  {
    q: "Qual é a diferença entre um tanque provador e uma medida de teste?",
    a: "Um tanque provador é um recipiente grande, geralmente estacionário ou montado em reboque, utilizado para calibrar medidores de vazão industriais e sistemas de medição a granel. Uma medida de teste é um recipiente portátil menor (1L a 50L) utilizado em campo ou em postos de combustível para verificar a exatidão de bombas e medidores de menor escala. Ambos são referências volumétricas certificadas, mas se aplicam em escalas e contextos diferentes.",
  },
  {
    q: "Qual é a precisão dos tanques provadores da Lonetti?",
    a: "Os tanques provadores da Lonetti atingem uma precisão volumétrica de ±0,05% ou melhor. Todas as unidades são calibradas com rastreabilidade ao INMETRO (Brasil) ou ao INTI (Argentina), conforme a exigência do cliente, e atendem às normas internacionais OIML, API e NIST.",
  },
  {
    q: "Com quais normas os produtos da Lonetti estão em conformidade?",
    a: "Os produtos da Lonetti são projetados e fabricados em conformidade com OIML R117 (sistemas de medição dinâmica de líquidos), API MPMS Capítulo 4.4 (tanques provadores volumétricos), NIST Handbook 105-3 e INMETRO (Brasil). Todos os equipamentos são calibrados com rastreabilidade metrológica nacional.",
  },
  {
    q: "O que é um sistema de calibração water draw?",
    a: "Um sistema water draw é um equipamento utilizado para calibrar provadores de tubulação (pipe provers), determinando seu volume base. O método consiste em fazer passar água pelo provador e coletá-la em recipientes volumétricos de referência certificados (tanques provadores ou medidas de teste) para calcular o volume do provador. A Lonetti fabrica sistemas water draw completos, tanto gravimétricos quanto volumétricos.",
  },
  {
    q: "A Lonetti fabrica tanques provadores com capacidade customizada?",
    a: "Sim. Todos os tanques provadores da Lonetti são fabricados conforme as especificações do cliente. Produzimos de 50 litros a mais de 5.000 litros, em configurações estacionárias, montadas em skid ou em reboque. Para solicitar uma cotação, entre em contato informando sua vazão nominal, as normas aplicáveis e eventuais restrições de instalação.",
  },
  {
    q: "Quais indústrias utilizam tanques provadores e medidas de teste?",
    a: "Os principais usuários são terminais de petróleo, refinarias, transportadoras de combustível e empresas de dutos onde a precisão na medição de transferência de custódia é legalmente obrigatória pela ANP. Outras indústrias incluem plantas de processamento químico, empresas de saneamento, distribuição de GLP, manuseio de combustível de aviação e organismos governamentais de metrologia (INMETRO, IPEM).",
  },
  {
    q: "A Lonetti emite certificados de calibração com rastreabilidade INMETRO?",
    a: "Sim. A Lonetti emite certificados de calibração rastreáveis ao INMETRO (Brasil) ou ao INTI (Argentina) para todos os seus produtos. Os certificados atendem aos requisitos da OIML e às normas nacionais aplicáveis no país de destino.",
  },
  {
    q: "Qual é o prazo de fabricação de um tanque provador customizado?",
    a: "Os prazos variam conforme a complexidade e o tamanho. Configurações padrão são entregues em 8 a 14 semanas. Sistemas grandes ou altamente customizados (como torres de calibração para caminhões-tanque ou bancadas de múltiplos provadores) podem exigir de 16 a 24 semanas. Entre em contato para obter um prazo específico para seu projeto.",
  },
  {
    q: "A Lonetti realiza envios internacionais para o Brasil?",
    a: "Sim. A Lonetti exporta para o Brasil e outros 46 países. Gerenciamos a embalagem industrial, a documentação de exportação completa (fatura comercial, certificado de origem, certificado de calibração) e podemos coordinar o transporte até o porto de destino ou endereço final no Brasil.",
  },
];

function FaqPagePT() {
  const [openIdx, setOpenIdxPT] = React.useState(null);

  return (
    <>
      <Nav active="home"/>
      <main>
        {/* Hero */}
        <section className="surface-dark grid-bg" style={{ paddingTop: 80, paddingBottom: 80 }}>
          <div className="container">
            <div className="eyebrow on-dark" style={{ marginBottom: 22 }}>Suporte técnico</div>
            <h1 style={{ color: "#fff", maxWidth: "18ch", marginBottom: 24 }}>
              Perguntas <span style={{ color: "var(--red)" }}>Frequentes</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", maxWidth: "56ch" }}>
              Respostas às perguntas mais frequentes sobre tanques provadores, medidas de teste, sistemas water draw e calibração de medidores de vazão.
            </p>
          </div>
        </section>

        {/* FAQ Accordion */}
        <section style={{ paddingTop: 96, paddingBottom: 96 }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, alignItems: "start" }}>
              <div style={{ position: "sticky", top: 100 }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}>FAQ</div>
                <h2 className="h2" style={{ fontSize: 40, marginBottom: 18, maxWidth: "14ch" }}>
                  Perguntas comuns.
                </h2>
                <p style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 24, maxWidth: "44ch" }}>
                  Não encontrou sua pergunta? Fale com nossa equipe de engenharia — respondemos dentro de um dia útil.
                </p>
                <a className="btn btn-ghost-dark" href="pt/contato">Perguntar à engenharia <Icon name="arrow" size={16}/></a>
              </div>
              <div>
                {FAQ_DATA_PT.map((qa, i) => (
                  <div key={qa.q} style={{
                    borderBottom: i < FAQ_DATA_PT.length - 1 ? "1px solid var(--line)" : 0,
                  }}>
                    <button onClick={() => setOpenIdxPT(openIdx === i ? -1 : i)} style={{
                      width: "100%", textAlign: "left", padding: "24px 0",
                      display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24,
                      border: 0, background: "transparent",
                      fontFamily: "var(--f-display)", fontWeight: 600, fontSize: 19, color: "var(--text)", letterSpacing: "-0.01em",
                      lineHeight: 1.3,
                    }}>
                      <span>{qa.q}</span>
                      <span style={{ flexShrink: 0, width: 36, height: 36, borderRadius: "50%",
                        background: openIdx === i ? "var(--red)" : "var(--bg-alt)",
                        color: openIdx === i ? "#fff" : "var(--text)",
                        display: "flex", alignItems: "center", justifyContent: "center",
                        transition: "all 200ms ease",
                      }}>
                        <Icon name={openIdx === i ? "minus" : "plus"} size={16} stroke="currentColor"/>
                      </span>
                    </button>
                    {openIdx === i && (
                      <div style={{ padding: "0 0 28px", fontSize: 15.5, color: "var(--text-2)", lineHeight: 1.65, maxWidth: "60ch" }}>
                        {qa.a}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        {/* CTA */}
        <section style={{ background: "var(--red)", color: "#fff", padding: "96px 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", textAlign: "center" }}>
            <h2 className="h2" style={{ color: "#fff", maxWidth: "22ch", margin: "0 auto", fontSize: "clamp(36px, 4vw, 52px)", marginBottom: 24 }}>
              Tem uma pergunta que não está aqui?
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", margin: "0 auto 36px", maxWidth: "56ch" }}>
              Nossos engenheiros respondem consultas técnicas diretamente em dois dias úteis. Conte-nos sobre sua aplicação.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn" style={{ background: "#fff", color: "var(--red)", fontWeight: 700 }} href="pt/contato">
                Contatar engenharia <Icon name="arrow" size={16} stroke="var(--red)"/>
              </a>
              <a className="btn btn-ghost-light" href="https://wa.me/5491127884190" target="_blank" rel="noopener noreferrer">
                <Icon name="whatsapp" size={16}/> WhatsApp
              </a>
            </div>
          </div>
        </section>
      </main>
      <Footer/>
      <FloatingWhatsApp/>
    </>
  );
}

Object.assign(window, { FaqPage: FaqPagePT });