// faq-page.jsx — English FAQ Page.
// Defines window.FaqPage for the English locale.

const FAQ_DATA_EN = [
  {
    q: "What is a prover tank and how does it work?",
    a: "A prover tank is a precision-calibrated stainless steel vessel used as a reference instrument to verify the accuracy of liquid flow meters. A known volume of liquid is passed through the meter under test and collected in the prover tank — if the meter reading matches the tank's certified volume, the meter is accurate. Prover tanks are used primarily in industries where measurement accuracy is legally required, such as custody transfer of petroleum and petroleum products.",
  },
  {
    q: "What is the difference between a prover tank and a test measure?",
    a: "A prover tank is a large vessel, typically stationary or trailer-mounted, with capacities from 50L to over 5,000L. It is used to calibrate industrial flow meters at terminals, refineries, and custody transfer facilities. A test measure is a smaller, portable vessel (1L–50L) designed for field use by weights and measures inspectors or for verifying fuel dispensers at service stations.",
  },
  {
    q: "What international standards apply to prover tank manufacturing?",
    a: "The principal standards governing prover tanks are: OIML R117 (Dynamic Measuring Systems for Liquids), API MPMS Chapter 4.4 (Tank Provers — design, construction, and use), and NIST Handbook 105-3 (Specifications for field standard measuring equipment). Lonetti manufactures all products in compliance with these standards, with calibration certification issued in coordination with INTI and traceable to international metrology references.",
  },
  {
    q: "What is a water draw calibration system and when is it used?",
    a: "Water draw is the procedure for determining the base volume of a pipe prover. It involves drawing water through the prover between the detector switches and collecting it in certified volumetric reference vessels. The prover's base volume is calculated from that extraction. It is the standard method specified by API MPMS Chapter 4.9 and is used to calibrate pipe provers at petroleum terminals and pipelines.",
  },
  {
    q: "What is the MINILAB® and who needs one?",
    a: "The MINILAB® is a Lonetti proprietary product — a fully equipped liquid calibration laboratory installed in a van or truck. It contains a certified reference prover tank, master meter, pump, instrumentation, and power source. It enables traceable calibration of flow meters directly in the field, without removing equipment from service. It is especially useful for oil companies, regulatory agencies, and calibration companies operating at remote sites.",
  },
  {
    q: "Can Lonetti manufacture equipment in 316 stainless steel for aggressive fluids?",
    a: "Yes. Lonetti prover tanks, test measures, and other equipment are available in 316 stainless steel, which offers greater corrosion resistance to acids, chlorides, and solvents compared to standard 304 SS. For applications with particularly aggressive process fluids, duplex alloys and other special materials are also available. Contact our engineering team with the process fluid data sheet.",
  },
  {
    q: "What certifications does Lonetti issue with its equipment?",
    a: "Every Lonetti product is delivered with a calibration certificate issued in coordination with INTI (Argentina's National Institute of Industrial Technology), traceable to international OIML, NIST, and API standards. For tenders or projects requiring third-party inspection, we also offer the option of witnessed inspection by Bureau Veritas or SGS.",
  },
  {
    q: "Does Lonetti ship internationally?",
    a: "Yes. Lonetti exports to 47 countries. Each international shipment includes: international transport packaging (typically a wooden crate), INTI calibration certificate, certificate of origin, product data sheet, and commercial invoice. We coordinate with freight forwarders to destination ports worldwide. For specific import requirements, please contact us in advance.",
  },
  {
    q: "What are typical lead times for Lonetti equipment?",
    a: "Lead times vary by product type: standard test measures (4–8 weeks), standard prover tanks (8–14 weeks), large or custom prover tanks (16–24 weeks), water draw systems (12–20 weeks), tanker truck calibration towers (14–22 weeks), calibration test benches (12–20 weeks), MINILAB® (16–28 weeks, including vehicle acquisition). Contact us for a specific timeline for your project.",
  },
  {
    q: "How do I request a quote?",
    a: "You can request a quote by completing the form on our contact page, sending an email to info@lonetti.com.ar, or messaging us on WhatsApp at +54 9 11 2788 4190. To speed up the process, please tell us the product type, required capacity, accuracy class, and applicable standards. Our engineering team responds within two business days.",
  },
];

function FaqPageEN() {
  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 }}>Technical support</div>
            <h1 style={{ color: "#fff", maxWidth: "18ch", marginBottom: 24 }}>
              Frequently Asked <span style={{ color: "var(--red)" }}>Questions</span>.
            </h1>
            <p className="lede" style={{ color: "rgba(255,255,255,0.72)", maxWidth: "56ch" }}>
              Answers to common questions about prover tanks, test measures, water draw systems, and liquid flow meter calibration.
            </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" }}>
                  Common questions.
                </h2>
                <p style={{ fontSize: 15, color: "var(--text-2)", lineHeight: 1.6, marginBottom: 24, maxWidth: "44ch" }}>
                  Don't see your question? Talk to our engineering team — they respond within one business day.
                </p>
                <a className="btn btn-ghost-dark" href="/contact">Ask engineering <Icon name="arrow" size={16}/></a>
              </div>
              <div>
                {FAQ_DATA_EN.map((qa, i) => (
                  <div key={qa.q} style={{
                    borderBottom: i < FAQ_DATA_EN.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 }}>
              Have a question that's not here?
            </h2>
            <p className="lede" style={{ color: "rgba(255,255,255,0.85)", margin: "0 auto 36px", maxWidth: "56ch" }}>
              Our engineers respond to technical enquiries directly within two business days. Tell us about your application.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn" style={{ background: "#fff", color: "var(--red)", fontWeight: 700 }} href="/contact">
                Contact engineering <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: FaqPageEN });
