// Nav + Hero + EngineStrip
function Nav({ onDemo, base = '' }) {
  const [open, setOpen] = React.useState(false);
  const toggleRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    document.body.style.overflow = 'hidden';
    const onKey = e => { if (e.key === 'Escape') { e.stopPropagation(); setOpen(false); } };
    document.addEventListener('keydown', onKey, true);
    const first = document.querySelector('.navmenu-links a');
    if (first) first.focus();
    return () => {
      document.body.style.overflow = '';
      document.removeEventListener('keydown', onKey, true);
      if (toggleRef.current) toggleRef.current.focus();
    };
  }, [open]);
  // base = '' on home (in-page anchors, smooth scroll); base = '/' on the pricing page (cross-page anchors to home).
  const links = [
    { t: 'Method', h: base + '#method' },
    { t: 'Results', h: base + '#work' },
    { t: 'The Engine', h: base + '#platform' },
    { t: 'Pricing', h: '/pricing' },
  ];
  const onBrand = e => { if (!base) { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); } };
  return (
    <React.Fragment>
      <nav className="nav">
        <div className="wrap nav-in">
          <a className="brand" href={base ? '/' : '#'} onClick={onBrand} aria-label="Origo Labs"><img src="assets/origo-o.svg?v=4" alt="" className="brand-mark" />rigo Labs</a>
          <span className="nav-links">
            {links.map(lk => <a key={lk.t} href={lk.h}>{lk.t}</a>)}
          </span>
          <span className="nav-sp"></span>
          <span className="nav-actions">
            <button className="btn btn-primary btn-sm" onClick={onDemo}>Get a free audit</button>
          </span>
          <button ref={toggleRef} className="nav-toggle" aria-label="Menu" aria-expanded={open} aria-controls="navmenu" onClick={() => setOpen(o => !o)}>
            <span className="nav-toggle-bars" aria-hidden="true"></span>
          </button>
        </div>
      </nav>
      {open && (
        <div className="navmenu" id="navmenu" aria-label="Site menu">
          <nav className="navmenu-links" aria-label="Primary">
            {links.map(lk => <a key={lk.t} href={lk.h} onClick={() => setOpen(false)}>{lk.t}</a>)}
          </nav>
          <button className="btn btn-primary btn-lg" onClick={() => { setOpen(false); onDemo(); }}>Get a free audit</button>
        </div>
      )}
    </React.Fragment>
  );
}

function Hero({ onDemo, onVideo }) {
  return (
    <section className="hero">
      <div className="hero-glow"></div>
      <div className="wrap">
        <span className="eyebrow">Generative Engine Optimization</span>
        <h1>
          <span className="w">Be</span>{' '}
          <span className="w">the</span>{' '}
          <i className="w">source.</i>
        </h1>
        <p className="hero-sub">We get B2B SaaS and fintech brands cited by ChatGPT, Perplexity, Gemini and Claude. Engineers ship every fix. We verify every citation by hand.</p>
        <div className="hero-cta">
          <button className="btn btn-primary btn-lg" onClick={onDemo}>Get a free audit</button>
          <button className="btn-watch" onClick={onVideo}>
            <span className="play"><svg viewBox="0 0 24 24" width="12" height="12" fill="#000"><path d="M5 3.5v17l14-8.5z"/></svg></span>
            <span className="wl">Watch how it works</span>
            <span className="dur">0:45</span>
          </button>
        </div>
        <div className="hero-demo">
          <AnswerDemo />
        </div>
      </div>
    </section>
  );
}

function EngineStrip() {
  const names = ['ChatGPT','Perplexity','Gemini','Claude','& more'];
  return (
    <section className="engines">
      <div className="wrap engines-in">
        <span className="lbl">Tracked across</span>
        <span className="names">{names.map(n => <span key={n}>{n}</span>)}</span>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, EngineStrip });