/* ============================================================
   closing.jsx, Part 5 (beyond replication), Part 6 (three
   paths), Next steps CTA, and footer.
   ============================================================ */
function BeyondSection() {
  return (
    <section className="section" id="beyond">
      <div className="wrap">
        <div className="reveal">
          <SectionHead part="Part 05" label="Beyond replication"
            title={'The features Ryan&rsquo;s pipeline <span class="gr">doesn&rsquo;t</span> have.'}
            intro="His pipeline is optimised for one publication, one team, one article at a time. The opportunity most companies need to capture is bigger than that, and it's where a productised platform pulls ahead." />
        </div>
        <div className="beyond reveal" style={{ marginTop: "var(--space-12)" }}>
          {BEYOND.map((b, i) => (
            <div className="beyond-row" key={i}>
              <div className="ico"><Icon name={b.icon} /></div>
              <div className="txt">
                <h3>{b.title}</h3>
                <p>{b.desc}</p>
              </div>
              <span className="tagchip">{b.tag}</span>
            </div>
          ))}
        </div>
        <p className="prose reveal" style={{ maxWidth: 820, marginTop: "var(--space-12)", fontSize: 17 }}>
          Plain version: Ryan built the right architecture for Ahrefs. <b style={{ color: "var(--ink-900)" }}>PSEO Builder is what that architecture looks like once it's productised</b>, scaled to thousands of pages, opened to non-technical users, and extended to the use-cases that matter for everyone who isn't a $100M SEO software company.
        </p>
      </div>
    </section>
  );
}

function PathsSection() {
  return (
    <section className="section tint" id="paths">
      <div className="wrap">
        <div className="reveal">
          <SectionHead part="Part 06" label="How to start" center
            title='Three honest <span class="gr">paths</span> forward.'
            intro="We're a platform vendor. We have a bias. We'll tell you the truth anyway, because if you pick the wrong path, you won't be a customer for long." />
        </div>
        <div className="paths reveal" style={{ marginTop: "var(--space-12)" }}>
          {PATHS.map((p, i) => (
            <div className={"path" + (p.featured ? " featured" : "")} key={i}>
              {p.featured && <span className="pglow" />}
              <span className="p-no">{p.no}</span>
              <h3>{p.featured ? <span className="gr">{p.title}</span> : p.title}</h3>
              {p.featured && <span className="recommend"><Icon name="check" style={{ width: 13, height: 13 }} /> Recommended</span>}
              <div className="pblock good">
                <div className="pl"><Icon name="check" /> Choose this if</div>
                <p>{p.good}</p>
              </div>
              <div className="pblock bad">
                <div className="pl"><Icon name="x" /> Don't choose this if</div>
                <p>{p.bad}</p>
              </div>
              <div className="p-cta">
                {p.featured
                  ? <FreeTrial dark sub={false} />
                  : <a className="btn btn-secondary" href={FREE_TRIAL_URL} target="_blank" rel="noopener">{i === 0 ? "Study the principles" : "Compare options"} <Icon name="arrowUpRight" /></a>}
              </div>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ maxWidth: 720, margin: "var(--space-12) auto 0", textAlign: "center" }}>
          <div className="part-label" style={{ justifyContent: "center", marginBottom: 14 }}><span>The right question to ask yourself</span></div>
          <p style={{ font: "500 clamp(20px,2.2vw,26px)/1.45 var(--font-display)", letterSpacing: "-0.01em", color: "var(--ink-900)", margin: 0 }}>
            Not "can AI write good content?" Ahrefs settled that. It's: <span className="gr">how do we get the pipeline into our team's hands, in the time we have, with the people we have?</span>
          </p>
        </div>
      </div>
    </section>
  );
}

function NextSteps() {
  return (
    <section className="next" id="start">
      <span className="glow" />
      <div className="wrap next-inner">
        <div className="section-head center" style={{ maxWidth: 760 }}>
          <div className="part-label" style={{ justifyContent: "center" }}><span style={{ color: "var(--accent-1)" }}>Next steps</span></div>
          <h2 style={{ margin: "18px auto 0" }}>See the same pipeline running <span className="gr">on your site.</span></h2>
          <p className="next-sub" style={{ margin: "22px auto 0" }}>
            You now know what Ryan built, why it works, and what it takes to replicate. The last question is what it looks like against your site, your topics, your competitive landscape. Three ways to find out.
          </p>
        </div>

        <div className="next-ways">
          {WAYS.map((w) => (
            <div className="way" key={w.n}>
              <div className="wn">{w.n}</div>
              <h4>{w.title}</h4>
              <p>{w.desc}</p>
            </div>
          ))}
        </div>

        <div className="next-cta">
          <FreeTrial size="btn-lg" dark center />
          <div className="trust">Bring your own URL <span>•</span> No commitment <span>•</span> First 10 articles free <span>•</span> Set up in 60 seconds</div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="brand-block">
            <a className="brand" href={FREE_TRIAL_URL} target="_blank" rel="noopener">
              <img className="brand-logo white" src="assets/logo-pseo-builder-white.png" alt="PSEO Builder" />
            </a>
            <p className="fdesc">The Ahrefs pipeline, productised. Build once, scale infinitely, research-first AI content with quality gates, multi-tenant by default.</p>
            <p className="fdesc mono" style={{ marginTop: 14, color: "var(--accent-1)" }}>pseo.nl/builder</p>
          </div>
          <div className="footer-links">
            <div className="col">
              <h5>Platform</h5>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Pipeline</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Quality gates</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Multi-tenant</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Publishing</a>
            </div>
            <div className="col">
              <h5>Use cases</h5>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Programmatic SEO</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Content refresh</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Agencies</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Multi-brand</a>
            </div>
            <div className="col">
              <h5>Company</h5>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Programmatic SEO B.V.</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">The report</a>
              <a href={FREE_TRIAL_URL} target="_blank" rel="noopener">Book a walkthrough</a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Programmatic SEO B.V. · Brouwerijstraat 1, Enschede</span>
          <span className="nl">A field analysis based on the public Ahrefs Podcast · v1.0 🇳🇱</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { BeyondSection, PathsSection, NextSteps, Footer });
