// FAQ — accordion. Accepts an `items` prop (array of {q, a}); falls back to homepage defaults.
const DEFAULT_FAQS = [
  { q: 'How long does it take to switch?', a: 'Most switches complete within 1–3 business days. There is no interruption to your power — the same lines and meter stay in place; only the company that bills you changes.' },
  { q: 'How does comparing electricity rates work?', a: 'Enter your ZIP code and we pull every plan available at your address from our partner providers. You filter by term length, price, and plan type, then enroll directly with the provider you choose.' },
  { q: 'What are the cheapest electricity rates today?', a: 'Rates change daily based on wholesale market conditions. As of today, plans start at 9.8¢ per kWh for 12–month fixed terms in most Texas service areas.' },
  { q: 'How does Power Texas make money?', a: 'Providers pay us a referral fee when you enroll — the same fee, regardless of which plan you pick. That keeps our recommendations honest.' },
  { q: 'What is the difference between fixed and variable rates?', a: 'Fixed rates lock your price per kWh for the entire contract term. Variable rates can change month to month based on market conditions — lower upside, but real downside risk.' },
  { q: 'What is the best month to shop for electricity in Texas?', a: 'Spring (March–May) and fall (September–October) tend to have the lowest rates because demand is lower than summer or winter peak.' },
  { q: 'How long does it take to switch?', a: 'Most enrollments complete in 1–3 business days. Power continues uninterrupted — only your retail electric provider changes.' },
  { q: 'Is Power Texas a REP or a broker?', a: 'We’re an independent broker certified by the Public Utility Commission of Texas (PUCT). We don’t generate or sell power — we help you compare and enroll with retail electric providers.' }
];

function FAQ(props) {
  const { items, title = 'Texas Electricity FAQs' } = props || {};
  const list = items && items.length ? items : DEFAULT_FAQS;
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section className="sec">
      <div className="container">
        <div className="sec-head">
          <h2 className="sec-title">{title}</h2>
        </div>
        <div className="faq-list">
          {list.map((f, i) =>
            <div key={i} className={`faq-item ${openIdx === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpenIdx(openIdx === i ? -1 : i)} aria-expanded={openIdx === i}>
                <span>{f.q}</span>
                <span className="chev"><I.Chev /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner" dangerouslySetInnerHTML={{ __html: f.a }} />
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;
window.DEFAULT_FAQS = DEFAULT_FAQS;