const faqs = [
  { q: "What is included in the free trial?", a: "Full access to every feature on the Pro plan for 14 days — no credit card required. You can track up to 500 keywords, run unlimited site audits, and connect your Google Search Console." },
  { q: "Can I cancel anytime?", a: "Yes. Plans are month-to-month and you can cancel from your billing dashboard in two clicks. We don't ask why and there are no exit fees." },
  { q: "Do you support agencies?", a: "The Premium plan is built for agencies — multi-domain projects, white-label PDF and link-shared reports, and a dedicated success manager included." },
  { q: "Is my data safe?", a: "All data is encrypted at rest and in transit. We're SOC 2 Type II audited and never share crawl or rank data with third parties." },
  { q: "How can I contact you?", a: "Live chat from inside the app weekdays 9am–9pm CET, or email support@rankly.app. Premium customers also get a private Slack channel." },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" data-screen-label="FAQ">
      <div className="shell">
        <div className="faq-wrap">
          <div>
            <span className="kicker"><span className="pip" /> FAQ</span>
            <h2 className="title metal">
              Your Questions<br/>
              Answered
            </h2>
            <p className="section-sub">
              We've got answers to everything anyone's asked us — and the things they will ask once they get going.
            </p>
          </div>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <div className={"faq-item " + (open === i ? "open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="ic"><Plus /></span>
                </button>
                <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;