/* ============================================================
   app.jsx, Nav, Hero, and the composed page.
   ============================================================ */
function Nav() {
  const [prog, setProg] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProg(max > 0 ? (h.scrollTop / max) * 100 : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className="nav">
      <div className="wrap-wide nav-inner">
        <a className="brand" href="#top">
          <img className="brand-logo" src="assets/logo-pseo-builder-wordmark.png" alt="PSEO Builder" />
        </a>
        <div className="nav-links">
          <a href="#pipeline">The pipeline</a>
          <a href="#principles">Principles</a>
          <a href="#compare">Compare</a>
          <a href="#paths">Paths</a>
        </div>
        <div className="nav-right">
          <a className="nav-url" href={FREE_TRIAL_URL} target="_blank" rel="noopener">pseo.nl/<b>builder</b></a>
          <a className="btn btn-primary btn-sm" href={FREE_TRIAL_URL} target="_blank" rel="noopener">Free Trial <Icon name="arrowUpRight" /></a>
        </div>
      </div>
      <span className="nav-progress" style={{ width: prog + "%" }} />
    </nav>
  );
}

function Hero() {
  return (
    <header className="hero" id="top">
      <span className="glow" />
      <span className="dots" />
      <div className="wrap hero-inner">
        <div className="hero-meta">
          <span>PSEO Builder</span><span className="dot-sep" />
          <span>A field report · 2026</span><span className="dot-sep" />
          <span>12 min read</span>
        </div>
        <h1>The Ahrefs AI content pipeline, <span className="gr">decoded.</span></h1>
        <p className="hero-sub">
          How a $100M ARR SEO company quietly automated its blog, and what most teams will miss about replicating it. A breakdown of what Ryan Law built, why it works, and how to run the same approach without a content-engineering team.
        </p>
        <div className="hero-ctas">
          <FreeTrial size="btn-lg" dark />
          <a className="btn btn-ghost-dark btn-lg" href="#pipeline">Read the breakdown <Icon name="arrowUpRight" /></a>
        </div>

        <div className="hero-stats">
          <div className="cell">
            <div className="v"><em>8</em><span className="u">min</span></div>
            <div className="l">From topic to publish-ready article</div>
          </div>
          <div className="cell">
            <div className="v">15<span className="u">+ 30</span></div>
            <div className="l">Articles published &amp; updated this way</div>
          </div>
          <div className="cell">
            <div className="v">23</div>
            <div className="l">Custom skill files behind the system</div>
          </div>
        </div>

        <div className="hero-attr">
          <Icon name="info" />
          <span>A field analysis based on the public Ahrefs Podcast episode with Ryan Law &amp; Tim Soulo, and Soulo's LinkedIn post. The principles are public; the exact skill files are not.</span>
        </div>
      </div>
    </header>
  );
}

function App() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <PipelineSection />
      <PrinciplesSection />
      <GapSection />
      <CompareSection />
      <BeyondSection />
      <PathsSection />
      <NextSteps />
      <Footer />
      {window.TweaksMount ? <window.TweaksMount /> : null}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);