/* FAQ — Anti-big-firm objection handling */

const FAQS = [
  {
    q: "You're only two founders. Can you deliver at our scale?",
    a: "We've shipped a working e-commerce ads platform for a 30-person team in 12 weeks, and we run two of our own products with 15,000+ combined users. If your problem is bigger than that, we'll be the first to say we're not the right fit."
  },
  {
    q: "What happens after 12 weeks? Do you disappear?",
    a: "30 days of on-call support is included. No lock-in, no retainer creep. The engagement is designed to finish — extensions happen only if you want us back, never because you need us."
  },
  {
    q: "Why is your pricing so much lower than larger firms?",
    a: "No global overhead, no partner pyramid, no travel-and-expense layer. $2,500 / $4,000 per month covers two senior operators shipping — not the infrastructure of a 20,000-person firm."
  },
  {
    q: "Can you work alongside our existing consultants or internal team?",
    a: "We pair with internal teams by default — it's how the handover works. If another consultant is already involved, we'll scope accordingly. What we won't do is pure advisory without building alongside your people."
  }
];

function FAQ() {
  const [open, setOpen] = React.useState(0);

  return (
    <section id="faq" style={{ background: "var(--bg-1)" }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <div className="eyebrow">Frequently asked</div>
            <h2>Questions buyers ask before they book a call.</h2>
            <p className="sub">
              The five things every serious buyer wants to know about working with a two-person
              firm instead of a global one — answered plainly.
            </p>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <div className="faq-list">
            {FAQS.map((item, i) => {
              const isOpen = open === i;
              const id = `faq-${i}`;
              return (
                <div className={`faq-row ${isOpen ? "open" : ""}`} key={id}>
                  <button
                    className="faq-question"
                    aria-expanded={isOpen}
                    aria-controls={`${id}-body`}
                    id={`${id}-q`}
                    onClick={() => setOpen(isOpen ? -1 : i)}
                  >
                    <span className="faq-q-num">0{i + 1}</span>
                    <span className="faq-q-text">{item.q}</span>
                    <span className="faq-toggle" aria-hidden="true">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M3 8h10M8 3v10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                      </svg>
                    </span>
                  </button>
                  <div
                    className="faq-answer"
                    id={`${id}-body`}
                    role="region"
                    aria-labelledby={`${id}-q`}
                    hidden={!isOpen}
                  >
                    <p>{item.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FAQ });