// How It Works page (/how-it-works). Mirrors PricingApp: same Nav, Footer and audit modal wiring.
// Copy is verbatim from _materials/2026-09-20_jeff_website-copy.md, "Page 2, How It Works". Do not paraphrase.
// Term (tooltip) comes from the shared Sections.jsx, loaded before this file.

function HowItWorks({ onSelect }) {
  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="wrap">
          <div className="page-head">
            <h1>How Origo <i>works.</i></h1>
            <p>Two stages. Measure, then close. Here is exactly what happens.</p>
          </div>
        </div>
      </section>

      <section className="sec sec-text" id="website">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow">1, It starts with your website.</span>
            <h2>One <i>URL.</i></h2>
            <p>That's all we need. The engine reads every page, in a real browser, including the text sitting inside images that most crawlers skip entirely.</p>
            <p>Out of that comes your knowledge base, your competitor set, your ideal customer profile, and a prompt set built from the questions your buyers actually ask. It also tells you which AI crawlers your site currently blocks, and how much of your content disappears for engines that don't run JavaScript.</p>
            <p>Nothing is invented. Everything the engine knows about you came off your own site.</p>
          </div>
        </div>
      </section>

      <section className="sec sec-text" id="answers">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow">2, We read the answers</span>
            <h2>Every day. Every <i>engine.</i></h2>
            <p>Your prompts run daily across the engines in your plan, and the engine reads the full answer that comes back.</p>
            <p>For each one it records whether you were named, where in the answer you landed, how the engine described you, and which competitors were named instead.</p>
            <p>The headline number is <Term t="Citations per prompt" as="citations per prompt" />. For each question that matters to you, how often and where you come up. It beats a single blended percentage, because it is tied to the exact questions your buyers ask, not an average across questions nobody asks.</p>
          </div>
        </div>
      </section>

      <section className="sec sec-text" id="fix">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow">3</span>
            <h2>Every gap comes with its fix.</h2>
            <p>A gap you can't act on is worth nothing. So every gap comes back with the solution to close it.</p>
            <p>The content brief tells you what to write, how to structure it, how long, and which competitors are winning the answer you want. Press generate and the finished piece is written for you, in your voice, from facts already on your site. Schema block. <Term t="llms.txt" /> line. Ready to publish.</p>
            <p>Every fact comes from what the engine learned about your business. No invented numbers, no invented customers, no claims you'd have to walk back.</p>
          </div>
        </div>
      </section>

      <section className="sec sec-text" id="publish">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow">4</span>
            <h2>You publish. We check.</h2>
            <p>You publish the work yourself, on every tier. Mark it published, and every run after that watches for it.</p>
            <p>When an engine starts citing the page you shipped, you see it on the next run. The loop closes, or it doesn't, and you find out either way.</p>
          </div>
        </div>
      </section>

      <section className="sec sec-text" id="why-daily">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow">Why daily</span>
            <h2>One engine decides whether a gap is <i>confirmed.</i></h2>
            <p>Perplexity, Google AI Overviews and AI Mode search the live web every time. Gemini grounds its answers and shows its sources. ChatGPT is the variable. Most of the time it searches first. Sometimes it answers from memory.</p>
            <p>That single difference is what the labels read.</p>
            <p><strong>Actionable.</strong> The engine searched the web, came back with sources, and still didn't name you. Confirmed. Act on it now.</p>
            <p><strong>Monitor.</strong> The engine answered from memory this time. The other engines confirm the gap, so it's almost certainly real, but we won't call it confirmed until it is.</p>
            <p>A recommendation usually covers several questions at once. If any one of them comes back confirmed, the whole recommendation is <Term t="Actionable" />, and the card tells you how many. Confirmed live on 3 of 5. Only a recommendation with nothing confirmed sits in <Term t="Monitor" />, and the next day's run gives it another chance.</p>
            <p>Daily isn't about a fresher number. It's about how fast an unconfirmed gap becomes one you can act on.</p>
            <div className="sec-cta">
              <button className="btn btn-primary btn-lg" onClick={onSelect}>Get a free audit</button>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function HowItWorksApp() {
  const [modal, setModal] = React.useState(false);
  const [apply, setApply] = React.useState(false);
  const open = () => setModal(true);
  const openApply = () => setApply(true);
  React.useEffect(() => {
    document.title = 'How It Works — Origo Labs';
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
  return (
    <React.Fragment>
      <Nav onDemo={open} onApply={openApply} base="/" />
      <main id="main">
        <HowItWorks onSelect={open} />
      </main>
      <Footer />
      {modal && <AuditModal onClose={() => setModal(false)} />}
      {apply && <ApplyModal onClose={() => setApply(false)} />}
    </React.Fragment>
  );
}

Object.assign(window, { HowItWorks, HowItWorksApp });

ReactDOM.createRoot(document.getElementById('root')).render(<HowItWorksApp />);