// Shared FAQ accordion — rendered on the homepage (under the engine section) and on /pricing.
// Data lives here so both pages stay in sync. Closed by default; one panel open at a time.
const FAQS = [
  {
    q: 'Do I really need this?',
    a: [
      'It is easy to file AI visibility under nice-to-have, until you see where software buyers now decide. In G2\'s 2026 AI Search report, AI chatbots were the single biggest influence on which vendors make the buyer\'s shortlist, and 69% of buyers said an AI led them to choose a different vendor than they had planned. Half now start their research in a chatbot more often than on Google. If the models are not naming you, you are not losing a little exposure. You are being left off the shortlist before the buyer ever reaches your site.',
    ],
  },
  {
    q: 'Why $5,000 a month?',
    a: [
      'Because doing it properly is not one hire. Being named by the models takes content, technical schema, source-page engineering, and constant measurement across every major engine, parts of several roles rather than one person\'s job. A team that could cover it costs well beyond this fee, and for most companies it would still be a side project rather than a system. Set against what it costs to stay invisible, deals lost to whoever the AI names instead of you, one managed program at this price is the cheaper side of the equation.',
    ],
  },
  {
    q: 'How long does it take to see results?',
    a: [
      'It is an ongoing process, not a one-time fix. Every company starts from a different place, and the AI models take time to pick up new material, verify it against other sources, and begin citing you. We set a clear baseline in your first month, then keep working and measuring as the models respond. Meaningful movement builds over the months as the work compounds, which is why the program is continuous. The AI landscape keeps shifting, and we keep adapting with it.',
    ],
  },
  {
    q: 'How does it actually work?',
    a: [
      'Two stages. First, our Origo Engine does the measurement: it runs the questions your buyers ask across every major AI model, records who gets named, tracks your competitors\' share of those answers, and pinpoints exactly where and why you are being left out. That is the diagnosis, and it is the part software does well.',
      'Then the software stops and our team takes over. People read the findings, decide what will actually move the needle, and do the work by hand: writing the content, building the source pages the way models read them, and implementing the technical changes. Every change is reviewed before it ships. We use AI to find the problem, not to fix it, because the fixes are what your reputation rests on and they need human judgment.',
    ],
  },
  {
    q: 'Do I still need SEO if I do GEO?',
    a: [
      'Yes, they do different jobs. SEO gets you ranked on Google\'s results page, where a person still chooses which link to click. GEO determines whether the AI models name you at all when a buyer asks them directly, often before they open a search engine. More buyers now start with an AI assistant and act on the answer it gives, so being invisible there costs you deals that never show up in your search traffic. SEO wins the click. GEO wins the recommendation. You need both because your buyers use both.',
    ],
  },
  {
    q: 'How many prompts do you track, and why 100?',
    a: [
      'We track 100 buyer-intent prompts, the questions your customers actually ask when choosing who to buy from. The number matters for accuracy: a smaller set gives a noisy reading that swings from run to run, while 100 produces a stable, reliable measure of where you stand and lets us track real movement over time. We focus on the queries that drive decisions, not volume.',
    ],
  },
  {
    q: 'What results can I expect?',
    a: [
      'It depends on where you start and how competitive your category is, so we do not promise a number we cannot stand behind. What we commit to is the process: a clear baseline in month one, measured movement you can see, and human review on every change we make. You will always know exactly what is shifting and why.',
    ],
  },
];

function FAQItem({ item, open, onToggle }) {
  const wrapRef = React.useRef(null);
  // Animate max-height to the panel's MEASURED height. A fixed max-height cannot work:
  // a 0->420px run finishes revealing ~125px of text in its first third, so opening
  // looked instant while closing looked animated.
  React.useEffect(() => {
    const el = wrapRef.current;
    if (!el) return;
    el.style.maxHeight = open ? el.scrollHeight + 'px' : '0px';
  }, [open]);
  // keep an open panel correct if the text reflows (resize / font swap)
  React.useEffect(() => {
    if (!open) return;
    const el = wrapRef.current;
    const sync = () => { if (el) el.style.maxHeight = el.scrollHeight + 'px'; };
    window.addEventListener('resize', sync);
    return () => window.removeEventListener('resize', sync);
  }, [open]);
  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button className="faq-q" aria-expanded={open} onClick={onToggle}>
        <span className="faq-qt">{item.q}</span>
        <span className="faq-chev" aria-hidden="true"></span>
      </button>
      <div className="faq-a-wrap" ref={wrapRef}><div className="faq-a-inner">
        {(Array.isArray(item.a) ? item.a : [item.a]).map((para, n) => <p className="faq-a" key={n}>{para}</p>)}
      </div></div>
    </div>
  );
}

function FAQList() {
  const [open, setOpen] = React.useState(-1);
  return (
    <div className="faq-list">
      {FAQS.map((f, i) => (
        <FAQItem key={f.q} item={f} open={open === i} onToggle={() => {
          const next = open === i ? -1 : i;
          setOpen(next);
          if (next === i && window.otrack) window.otrack('faq_open', { faq_question: f.q });
        }} />
      ))}
    </div>
  );
}

// bare = drop the section/wrap shell (the pricing page supplies its own).
function FAQ({ bare }) {
  const inner = (
    <div className="faq reveal">
      <h2 className="faq-h">Questions, answered.</h2>
      <FAQList />
    </div>
  );
  if (bare) return inner;
  return <section className="sec faq-sec" id="faq"><div className="wrap">{inner}</div></section>;
}

Object.assign(window, { FAQS, FAQItem, FAQList, FAQ });
