/* EOMA landing v3 · FAQ (§9) · 5 questions max */

const { useState: faqUseState } = React;

const FAQ_ITEMS = [
  {
    q: "Do I need a developer to use EOMA?",
    a: "No. EOMA connects to WordPress, Webflow, GitHub and similar via 1-click integrations. The technical work — schema, llms.txt, sitemap updates — happens server-side after you grant access. If you have a CMS you can log into, you have what you need.",
  },
  {
    q: "Is this just SEO?",
    a: "No. SEO is about ranking on Google's results page. EOMA is about being recommended inside an AI assistant's answer. The signals overlap (good content, schema, social proof) but the outputs are different — and AI search is growing faster than Google search is shrinking.",
  },
  {
    q: "How fast do I see results?",
    a: "Most customers see their first new AI mention inside 2 weeks. The visibility score typically lifts 10–20 points in the first 60 days. We don't promise specific numbers — your starting baseline, category competitiveness and pace of action shipping all matter.",
  },
  {
    q: "What plans do you offer?",
    a: "Three plans: Starter $79/mo (one brand, agent-assisted execution), Practice $229/mo (up to 5 brands, full multi-channel) and Enterprise (custom — unlimited brands, SSO, custom corpus). Cancel anytime in the dashboard. No setup fee. Contact us for Enterprise.",
    rich: true,
  },
  {
    q: "What if it doesn't work for me?",
    a: 'Cancel anytime in the dashboard. We email a final visibility snapshot so you keep the report. No "call to cancel" games, no annual commitment, no setup fees.',
  },
];

function FAQ() {
  const [open, setOpen] = faqUseState(0);
  return (
    <section id="faq" className="faq-section">
      <div className="faq-head">
        <span className="eyebrow">
          <span className="dot dot-mint" />
          <span>FAQ</span>
        </span>
        <h2 className="t-display-lg">Five questions before you start.</h2>
      </div>
      <div className="faq-list">
        {FAQ_ITEMS.map((item, i) => (
          <article key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
            <button
              className="faq-q"
              onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
            >
              <span>{item.q}</span>
              <span className="faq-icon" aria-hidden="true">
                +
              </span>
            </button>
            <div className="faq-a">
              <p>{item.rich ? renderRich(item.a) : item.a}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function renderRich(s) {
  // Light bolding for plan names + prices
  const parts = s.split(/(Starter \$79\/mo|Practice \$229\/mo|Enterprise)/g);
  return parts.map((p, i) =>
    p === "Starter $79/mo" || p === "Practice $229/mo" || p === "Enterprise" ? (
      <strong key={i}>{p}</strong>
    ) : (
      <React.Fragment key={i}>{p}</React.Fragment>
    ),
  );
}

Object.assign(window, { FAQ });