// Content sections: Method, Stats, Features, CTA, Footer
function Method() {
  const steps = [
    { n:'01', t:'Measure', d:'We run your brand against every major engine and map exactly which answers cite you, which cite competitors, and where the gaps are.' },
    { n:'02', t:'Implement', d:'Our engineers rebuild your content to get quoted: clear semantic structure, validated technical data, and none of the marketing fluff the models skip. Structured data, source pages, all shipped by our team.' },
    { n:'03', t:'Verify', d:'Every new citation is confirmed by hand across engines, then tracked live.' },
  ];
  return (
    <section className="sec" id="method">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">The method</span>
          <h2>Measure, then <i>change</i> the answer.</h2>
          <p>The shift is from ranking on Google to being the source the models quote. A closed loop run by people, not a dashboard you operate alone.</p>
        </div>
        <div className="method-grid reveal">
          {steps.map(s => (
            <div className="method-cell" key={s.n}>
              <span className="method-num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  const data = [
    { b:'+38%', s:'Citations / 90 days' },
    { b:'5', s:'Engines tracked' },
    { b:'100%', s:'Verified by hand' },
    { b:'14d', s:'To first new citation' },
  ];
  return (
    <section className="stats reveal" id="work">
      {data.map(d => (
        <div className="stat" key={d.s}><b>{d.b}</b><span>{d.s}</span></div>
      ))}
    </section>
  );
}

function Features() {
  const feats = [
    { ic:'radar', t:'Answer monitoring', d:'Regular reads of every engine for the prompts your buyers actually ask. See your share of citation move over time.', more:'Alerts the moment a competitor overtakes you on a tracked prompt.' },
    { ic:'git-pull-request-arrow', t:'Shipped by engineers', d:'We implement the changes in your stack and content. You review the diff, we own the work.', more:'Schema, content, and entity work committed straight to your repo or CMS.' },
    { ic:'badge-check', t:'Hand verified citations', d:'No automated guesswork. A human confirms each citation across engines before we report it as won.', more:'Screenshots and timestamps for every win, across all five engines.' },
    { ic:'file-text', t:'Source pages', d:'We build the canonical, citable pages that engines pull from, structured the way models read.', more:'Built to match how each model parses, quotes, and attributes.' },
  ];
  const [open, setOpen] = React.useState(null);
  return (
    <section className="sec" id="platform" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Platform</span>
          <h2>Everything it takes to <i>be the source</i>.</h2>
          <p>Measurement and implementation in one place, so the loop never breaks between insight and shipped change.</p>
        </div>
        <div className="feat-grid reveal">
          {feats.map((f, i) => (
            <div className="feat" key={f.t} data-open={open === i} onClick={() => setOpen(open === i ? null : i)}>
              <div className="feat-head">
                <i className="ic" data-lucide={f.ic}></i>
                <span className="feat-toggle">+</span>
              </div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
              <div className="feat-more"><p>{f.more}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTA({ onDemo }) {
  return (
    <section className="cta" id="pricing">
      <div className="cta-glow"></div>
      <div className="wrap">
        <span className="eyebrow">Engineered from origin</span>
        <h2 style={{marginTop:'20px'}}>Be the answer.</h2>
        <p>Tell us your category and the prompts that matter. We will show you where you stand today.</p>
        <div className="cta-cta">
          <button className="btn btn-primary btn-lg" onClick={onDemo}>Get a free audit</button>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h:'Product', links:['The Engine','Method','Pricing','Changelog'] },
    { h:'Company', links:['About','Work','Careers','Contact'] },
    { h:'Resources', links:['GEO guide','Benchmarks','Docs','Privacy'] },
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="brand-row">
            <span className="brand" aria-label="Origo Labs"><img src="assets/origo-o.svg?v=4" alt="" className="brand-mark" />rigo Labs</span>
            <p>Be the source.</p>
            <address className="footer-addr">72 Anson Road #07-04, Anson House,<br />Singapore 079911</address>
          </div>
          <div className="footer-cols">
            {cols.map(c => (
              <div className="footer-col" key={c.h}>
                <h4>{c.h}</h4>
                {c.links.map(l => {
                  const map = { 'Pricing': '/pricing', 'The Engine': '/#platform', 'Method': '/#method' };
                  return <a key={l} href={map[l] || '#'}>{l}</a>;
                })}
              </div>
            ))}
          </div>
        </div>
        <div className="footer-bot">
          <span>© 2026 Origo Labs PTE. LTD.</span>
          <span>Be the source</span>
        </div>
      </div>
    </footer>
  );
}

function Count({ to, go, delay = 0 }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!go) return;
    let raf; const start = performance.now() + delay; const dur = 800;
    const tick = now => { const p = Math.min(1, Math.max(0, (now - start) / dur)); setN(Math.round(p * to)); if (p < 1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [go]);
  return <React.Fragment>{n}</React.Fragment>;
}

function ShareBars() {
  const data = [
    { l: 'Competitor A', v: 34 },
    { l: 'Competitor B', v: 41 },
    { l: 'Your brand', v: 78, you: true },
    { l: 'Competitor C', v: 29 },
  ];
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(es => es.forEach(e => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }), { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <section className="sec sharebars" id="work">
      <div className="wrap">
        <div className="sec-head reveal" style={{ textAlign: 'center', maxWidth: '640px', margin: '0 auto' }}>
          <span className="eyebrow" style={{ display: 'inline-flex', justifyContent: 'center' }}>Share of voice</span>
          <h2>Be the most cited name in your <i>category</i>.</h2>
          <p style={{ marginLeft: 'auto', marginRight: 'auto' }}>We track how often each engine names you against your competitors, then move you to the top.</p>
        </div>
        <div className="bars" ref={ref}>
          {data.map((d, i) => (
            <div className={'bar-col' + (d.you ? ' you' : '')} key={d.l}>
              <div className="bar-track">
                <div className="bar-fill" style={{ height: on ? d.v + '%' : '0%', transitionDelay: (i * 0.1) + 's' }}>
                  {d.you && <span className="bar-tip">Most cited</span>}
                  <span className="bar-val"><Count to={d.v} go={on} delay={i * 100} />%</span>
                </div>
              </div>
              <span className="bar-label">{d.l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Method, Stats, Features, CTA, Footer, ShareBars, Count });