// FAQ.jsx — light gray section, centered title + 5 expandable rows

function FAQItem({ q, a, open, onToggle }) {
  return (
    <div className={"rd-faq__item" + (open ? " is-open" : "")}>
      <button type="button" onClick={onToggle}>
        <span>{q}</span>
        <svg className="rd-faq__chev" viewBox="0 0 12 7.4" fill="#E51937">
          <path d="M6 7.4L0 1.4L1.4 0L6 4.6L10.6 0L12 1.4L6 7.4Z" />
        </svg>
      </button>
      {open && <div className="rd-faq__answer">{a}</div>}
    </div>
  );
}

function FAQ() {
  const items = [
    { q: "How long does a typical repair take?", a: "Most cosmetic and small structural repairs take 3–5 business days. Larger collision and frame work can run 1–3 weeks. Your estimator gives you a detailed timeline at intake." },
    { q: "Do you work with all insurance companies?", a: "Yes. We're ICBC-accredited and accept claims from every major Canadian insurer. We'll handle the paperwork for you." },
    { q: "Do you offer a warranty on your repairs?", a: "Every repair is backed by our lifetime guarantee on workmanship for as long as you own the vehicle." },
    { q: "Can I get a loaner vehicle while my car is being fixed?", a: "We have a fleet of courtesy vehicles available at no cost during covered repairs. Reserve one when you book your estimate." },
    { q: "What is Paintless Dent Repair (PDR)?", a: "PDR is a specialty technique that reshapes minor dents from inside the panel — preserving your factory paint, no filler or repaint needed." },
  ];
  const [open, setOpen] = React.useState(2);
  return (
    <section className="rd-faq" data-screen-label="01 Home / FAQ">
      <header>
        <h2>Have a Question?</h2>
        <div className="rd-bar" />
      </header>
      <div className="rd-faq__list">
        {items.map((it, i) => (
          <FAQItem key={i} q={it.q} a={it.a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
        ))}
      </div>
    </section>
  );
}

window.FAQ = FAQ;