/* global React */
const { useState: useStateF } = React;

function FAQ() {
  const items = [
    {
      q: 'How fast is the first shortlist?',
      a: '72 hours from kickoff call. You get 5 pre-qualified candidates with match scores, comp expectations, and availability — every one already spoken to.'
    },
    {
      q: 'What roles do you cover?',
      a: 'Engineering, product, design, GTM, operations, and finance leadership. Series Seed through Series C is our sweet spot. We do not run executive search above VP.'
    },
    {
      q: 'How is this different from a traditional agency?',
      a: 'Agencies get paid per placement and optimize for volume. We charge a flat fee and optimize for fit. Our AI does in 4 hours what a recruiter would do in 4 weeks — then humans handle the part that matters.'
    },
    {
      q: 'What happens if a hire does not work out?',
      a: 'If a placed candidate leaves or is let go in the first 60 days, we replace them at no cost. Most of our placements stay past year 2.'
    },
    {
      q: 'Do you integrate with our ATS?',
      a: 'Yes. Greenhouse, Ashby, Lever, Workable, and custom APIs. Candidates flow into your system the moment you accept the shortlist.'
    },
    {
      q: 'How do you price?',
      a: 'Three options: pay per placement, quarterly subscription for high-volume teams, or embedded recruiter for Series B+ companies. See the pricing section.'
    },
  ];
  const [open, setOpen] = useStateF(0);
  return (
    <section id="faq" className="section section--light faq">
      <div className="container">
        <div className="faq__layout">
          <div className="faq__head">
            <div className="eyebrow">FAQ</div>
            <h2 className="h2">Questions, answered.</h2>
            <p className="faq__sub">
              Still curious? <a href="#cta">Talk to a recruiter</a> &mdash; we&rsquo;ll answer in plain English, no demo theatre.
            </p>
          </div>
          <div className="faq__list">
            {items.map((it, i) => (
              <div className={"faq__item" + (open === i ? " is-open" : "")} key={i}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{it.q}</span>
                  <i data-lucide={open === i ? "minus" : "plus"}></i>
                </button>
                <div className="faq__a"><p>{it.a}</p></div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;