const FAQS = [
  {
    q: "When do trailers actually ship?",
    a: "First production cohort is June 2026. Reserved slots are sequenced in deposit order — you'll get a confirmed despatch window inside two business days of reserving. Stock configurations build in 4–6 weeks; bespoke configurations 8–12.",
  },
  {
    q: "What does the $500 reservation buy me?",
    a: "A held production slot in the launch cohort, launch-parity pricing locked against any future RRP changes, and priority access to the configurator when it opens in Q1 2026. Fully refundable up to 14 days before despatch — no questions, no fees.",
  },
  {
    q: "Will it actually run my site?",
    a: "Use the calculator above with your real fuel spend and load profile — it sizes the right tier for your draw. Tier 02 covers a typical 8-house residential build, mid-size festival, or dairy support. If your draw exceeds Tier 03, we'll spec a paired pair or recommend a different solution. We won't oversell you.",
  },
  {
    q: "What happens on a week of bad weather?",
    a: "Every tier ships with battery storage sized for 1.5–2 days of typical site load with zero solar input. For multi-week deployments in the dead of winter, we offer hybrid module rental (small LPG generator) on top of any trailer. Or — pair two trailers, common on festivals.",
  },
  {
    q: "Is it road-legal? Who certifies it?",
    a: "Yes. Every unit is transport-engineer certified, NZTA-registered as a Class TD trailer, with a current WoF and CoF where applicable. The electrical stack carries an NZ Electrical Safety Certificate. Tier 01 tows behind a 1-tonne ute on a normal car licence; Tier 03 needs a Class 1 with HT endorsement for braked tandem.",
  },
  {
    q: "Warranty if something fails?",
    a: "2-year workmanship warranty on the trailer and electrical stack, 5-year warranty on LiFePO₄ batteries (10-year @ 80% capacity expected service life). On-fleet hires get same-day swap if a unit fails on site. Bought units: we ship a loaner within 48 hours and collect the failed unit for repair.",
  },
  {
    q: "How does it compare to just buying a generator?",
    a: "On day-one capex, a Tier 02 trailer is roughly 4× a comparable diesel. By year three, total cost crosses over and you're banking ~$8k/year in saved fuel + servicing. By year five, you're ~$24k ahead and the trailer has a real residual value — the diesel is a depreciating noise box.",
  },
  {
    q: "Can I retrofit modules later?",
    a: "Yes. Every trailer ships with a standardised internal mounting rail and DC bus. Modules — extra battery, EV charger, lighting tower, refrigeration, comms — can be specified at order, fitted later, or rented separately on top of a trailer hire. The trailer is the platform; the modules are how it earns a living.",
  },
  {
    q: "Do you do white-label or fleet supply?",
    a: "Yes. Civil contractors, hire-yard chains, councils, and iwi groups have asked. Minimum order is 4 units in matching configuration; we'll co-brand panels and cargo bay. Get in touch and we'll send the fleet pricing pack.",
  },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq section-pad" id="faq">
      <div className="shell">
        <div className="faq-head">
          <div>
            <div className="eyebrow">§ 14 — Frequently asked</div>
            <h2 className="kicker" style={{marginTop:14, color:'var(--bone)'}}>Straight<br/>answers.</h2>
          </div>
          <p className="body-lg" style={{opacity:0.78}}>
            What people actually ask before reserving. Don't see yours? Drop it in the form below — we reply within one business day.
          </p>
        </div>

        <div className="faq-list">
          {FAQS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-row ${isOpen ? 'open' : ''}`}>
                <button
                  className="faq-q"
                  aria-expanded={isOpen}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                >
                  <span className="faq-num">{String(i+1).padStart(2,'0')}</span>
                  <span className="faq-q-text">{item.q}</span>
                  <span className="faq-toggle" aria-hidden>
                    <span/><span/>
                  </span>
                </button>
                <div className="faq-a-wrap">
                  <div className="faq-a">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;