// Faq.jsx — big bold accordion
function Faq() {
  const faqs = [
    { q: 'What services does Myra offer?', a: 'End-to-end data engineering, advanced analytics, and AI-driven automation — tailored to your business, not a template.' },
    { q: 'Can you help with cloud migration?', a: 'That\u2019s a core service. We migrate legacy systems to the cloud securely and incrementally, with a cloud-first approach that minimizes downtime.' },
    { q: 'Off-the-shelf or custom?', a: 'Custom, always. We build against your architecture, systems and goals so the result fits — rather than forcing you to fit the tool.' },
    { q: 'What makes Myra different?', a: 'We\u2019re senior engineers, not a sales funnel. We prioritize transparency, teach as we go, and leave you independent. A senior engineer reads every message you send.' },
    { q: 'How do you handle privacy & compliance?', a: 'We follow established data-governance and security best practices, mapped to the regulatory requirements your industry and region demand.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="w-section w-section--cream" id="faq">
      <span className="w-ov w-ov-aster w-ov-faq1" aria-hidden></span>
      <div className="w-wrap">
        <div className="w-section__head" data-reveal>
          <p className="w-eyebrow w-section__eyebrow">Questions</p>
          <h2 className="w-section__title">We have<br />the <span className="w-hl w-hl--pop">answer</span></h2>
        </div>
        <ul className="w-faq__list" data-reveal>
          {faqs.map((f, i) => (
            <li className={`w-faq__item${open === i ? ' is-open' : ''}`} key={i}>
              <button className="w-faq__q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="w-faq__qtext">{f.q}</span>
                <span className="w-faq__toggle" aria-hidden>+</span>
              </button>
              <div className="w-faq__a-wrap"><div className="w-faq__a"><p>{f.a}</p></div></div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
Object.assign(window, { Faq });