// es/faq-page-es.jsx — Spanish FAQ Page.
// Defines window.FaqPage — a new component not present in English.

const FAQ_DATA_ES = [
  {
    q: "¿Qué es un tanque probador y cuál es su función?",
    a: "Un tanque probador es un recipiente volumétrico de acero inoxidable calibrado con precisión, utilizado como instrumento de referencia para verificar la exactitud de los medidores de caudal de líquidos. Un volumen conocido de líquido pasa a través del medidor bajo prueba y se recolecta en el tanque probador — si la lectura del medidor coincide con el volumen certificado del tanque, el medidor es exacto. Se utilizan principalmente en industrias donde la exactitud de la medición es legalmente obligatoria, como en el custody transfer de petróleo y productos derivados.",
  },
  {
    q: "¿Cuál es la diferencia entre un tanque probador y una medida de prueba?",
    a: "Un tanque probador es un recipiente grande, generalmente estacionario o montado en tráiler, con capacidades de 50L a más de 5.000L. Se utiliza para calibrar medidores de flujo industriales en terminales, refinerías y aplicaciones de custody transfer. Una medida de prueba es un recipiente portátil más pequeño (1L–50L), diseñado para uso en campo por inspectores de pesas y medidas o para verificar expendedores de combustible en estaciones de servicio.",
  },
  {
    q: "¿Qué normas internacionales rigen la fabricación de tanques probadores?",
    a: "Las principales normas que rigen los tanques probadores son: OIML R117 (Sistemas de Medición Dinámica de Líquidos), API MPMS Capítulo 4.4 (Tank Provers — diseño, construcción y uso) y NIST Handbook 105-3 (Especificaciones para instrumentos de medición de campo). Lonetti fabrica todos sus productos cumpliendo estas normas, con certificación de calibración emitida en coordinación con el INTI, trazable a referencias metrológicas internacionales.",
  },
  {
    q: "¿Qué es el sistema water draw y cuándo se utiliza?",
    a: "El water draw es el procedimiento para determinar el volumen base de un probador de tubería (pipe prover). Consiste en extraer agua a través del probador entre los interruptores detectores y recolectarla en recipientes volumétricos de referencia certificados. El volumen base del probador se calcula a partir de esa extracción. Es el método estándar especificado por API MPMS Capítulo 4.9 y se utiliza para la calibración de probadores de tubería en terminales petroleras y oleoductos.",
  },
  {
    q: "¿Qué es el MINILAB® y para qué sirve?",
    a: "El MINILAB® es un producto propio de Lonetti — un laboratorio de calibración de líquidos completamente equipado instalado en un furgón o camión. Contiene un tanque probador de referencia certificado, medidor maestro, bomba, instrumentación y fuente de energía. Permite la calibración trazable de medidores de flujo directamente en campo, sin necesidad de retirar los equipos del servicio. Es especialmente útil para empresas petroleras, organismos reguladores y empresas de calibración que operan en sitios remotos.",
  },
  {
    q: "¿Lonetti puede fabricar equipos en acero inoxidable 316 para fluidos agresivos?",
    a: "Sí. Los tanques probadores, medidas de prueba y demás equipos de Lonetti están disponibles en acero inoxidable 316, que ofrece mayor resistencia a la corrosión por ácidos, cloruros y solventes en comparación con el 304 SS estándar. Para aplicaciones con fluidos especialmente agresivos, también están disponibles aleaciones dúplex y otros materiales especiales. Contacte a nuestro equipo de ingeniería con la ficha técnica del fluido de proceso.",
  },
  {
    q: "¿Qué certificaciones emite Lonetti con sus equipos?",
    a: "Cada producto Lonetti se entrega con un certificado de calibración emitido en coordinación con el INTI (Instituto Nacional de Tecnología Industrial de Argentina), trazable a las normas internacionales OIML, NIST y API. Para licitaciones o proyectos que requieran inspección por terceros, también ofrecemos la posibilidad de solicitar inspección testigo por Bureau Veritas o SGS.",
  },
  {
    q: "¿Lonetti realiza envíos internacionales y qué documentación incluye?",
    a: "Sí. Lonetti exporta a 47 países. Cada envío internacional incluye: embalaje para transporte internacional (generalmente en cajón de madera), certificado de calibración INTI, certificado de origen, ficha técnica del producto y factura comercial. Coordinamos con agentes de carga a los puertos de destino de todo el mundo. Para requisitos específicos de importación, contáctenos con anticipación.",
  },
  {
    q: "¿Cuáles son los plazos de entrega típicos para equipos Lonetti?",
    a: "Los plazos varían según el tipo de producto: medidas de prueba estándar (4–8 semanas), tanques probadores estándar (8–14 semanas), tanques probadores grandes o personalizados (16–24 semanas), sistemas water draw (12–20 semanas), torres de calibración para cisternas (14–22 semanas), bancos de calibración (12–20 semanas), MINILAB® (16–28 semanas, incluye adquisición del vehículo). Contáctenos para un plazo específico para su proyecto.",
  },
  {
    q: "¿Cómo puedo obtener una cotización?",
    a: "Puede solicitar una cotización completando el formulario en nuestra página de contacto, enviando un email a info@lonetti.com.ar o escribiéndonos por WhatsApp al +54 9 11 2788 4190. Para acelerar el proceso, indíquenos el tipo de producto, la capacidad requerida, la clase de exactitud y las normas que debe cumplir. Nuestro equipo de ingeniería responde en dos días hábiles.",
  },
];

function FaqPageES() {
  const [openIdx, setOpenIdx] = 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 }}>Soporte técnico</div>
            <h1 style={{ color: "#fff", maxWidth: "18ch", marginBottom: 24 }}>
              Preguntas <span style={{ color: "var(--red)" }}>Frecuentes</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", maxWidth: "56ch" }}>
              Respuestas a las preguntas más frecuentes sobre tanques probadores, medidas de prueba, sistemas water draw y calibración de medidores de flujo.
            </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" }}>
                  Preguntas comunes.
                </h2>
                <p style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 24, maxWidth: "44ch" }}>
                  ¿No encuentra su pregunta? Hable con nuestro equipo de ingeniería — responden dentro de un día hábil.
                </p>
                <a className="btn btn-ghost-dark" href="es/contacto">Preguntar a ingeniería <Icon name="arrow" size={16}/></a>
              </div>
              <div>
                {FAQ_DATA_ES.map((qa, i) => (
                  <div key={qa.q} style={{
                    borderBottom: i < FAQ_DATA_ES.length - 1 ? "1px solid var(--line)" : 0,
                  }}>
                    <button onClick={() => setOpenIdx(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 }}>
              ¿Tiene una pregunta que no está aquí?
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", margin: "0 auto 36px", maxWidth: "56ch" }}>
              Nuestros ingenieros responden consultas técnicas directamente en dos días hábiles. Cuéntenos sobre su aplicación.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn" style={{ background: "#fff", color: "var(--red)", fontWeight: 700 }} href="es/contacto">
                Contactar ingeniería <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: FaqPageES });
