function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: "How long does install take?",
      a: "Most installs are done in a single day. You'll be charging at full speed by the next night." },
    { q: "Do I need a panel upgrade too?",
      a: "Maybe. Most older Sacramento homes can't safely handle a Fast Level 2 charger on the existing panel. That's why we include a free panel capacity check with every estimate." },
    { q: "Are you licensed?",
      a: "Yes — California license #1141115. We pull all permits and handle code compliance for you." },
    { q: "What does the estimate cost?",
      a: "Nothing. The estimate and the panel capacity check are both free." },
    { q: "What chargers do you install?",
      a: "Fast Level 2 chargers compatible with Tesla, Rivian, Ford, Hyundai, and every major EV brand." },
  ];
  return (
    <section className="section section--soft" id="faq">
      <div className="container">
        <div className="section-head section-head--center">
          <span className="eyebrow">Frequently asked</span>
          <h2 className="h2">Everything you're probably wondering.</h2>
        </div>
        <div className="faq-wrap">
          {items.map((it, i) => (
            <div key={i} className={"faq-item " + (open === i ? "is-open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="ico"><Ic.plus size={14} /></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
        <div style={{display:'flex', justifyContent:'center', marginTop:48}}>
          <button className="btn btn-primary btn-lg" onClick={() => document.dispatchEvent(new CustomEvent('open-estimate'))}>
            Get My Free Estimate <Ic.arrow />
          </button>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;