/* ============================================================
   compare.jsx, Part 3 (the gap) + Part 4 (side-by-side
   comparison, the centerpiece) + Ryan Law pull-quote.
   ============================================================ */
function GapSection() {
  return (
    <section className="section" id="gap">
      <div className="wrap">
        <div className="reveal">
          <SectionHead part="Part 03" label="The gap nobody mentions"
            title='Why "just copy what Ahrefs did" is <span class="gr">harder</span> than it looks.'
            intro="Ryan's setup is impressive precisely because of who built it: a Director of Content who can ship code, backed by an engineering org that handed him an MCP server and infrastructure. That's not the median content team." />
        </div>

        <div className="gap-grid reveal" style={{ marginTop: "var(--space-12)" }}>
          <div>
            <div className="part-label" style={{ marginBottom: 22 }}><span>What you actually need in-house</span></div>
            <div className="checklist">
              {REQUIREMENTS.map((r, i) => (
                <div className="ci" key={i}>
                  <span className="mk"><Icon name="x" /></span>
                  <p dangerouslySetInnerHTML={{ __html: r }} />
                </div>
              ))}
            </div>
            <p className="prose" style={{ marginTop: 28, fontSize: 16 }}>
              The honest summary: Ryan didn't just build a pipeline, he built a small <b style={{ color: "var(--ink-900)" }}>content-engineering practice</b> inside Ahrefs. The pipeline is the visible artifact. The year of iteration, engineering support and operational discipline around it is the invisible one.
            </p>
          </div>

          <aside className="gap-aside">
            <span className="glow" />
            <h3>If you don't have all three…</h3>
            <p className="sub">A coder-Director, an engineering team, and a year to iterate. You have two realistic options.</p>
            <div className="option">
              <span className="on">A</span>
              <div>
                <h4>Hire an AI content agency</h4>
                <p>Faster than DIY, but you pay the pipeline <i>plus</i> the agency margin, and the IP stays with them.</p>
              </div>
            </div>
            <div className="option hl">
              <span className="on"><Icon name="check" style={{ width: 14, height: 14 }} /></span>
              <div>
                <h4>Use a <span className="gr">managed platform</span></h4>
                <p>Built on the same principles, where the pipeline already exists, the quality gates are pre-built, and the output is yours. This is where PSEO Builder fits.</p>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function CompareSection() {
  return (
    <section className="section tint" id="compare">
      <div className="wrap-wide">
        <div className="reveal" style={{ maxWidth: 1280, margin: "0 auto" }}>
          <SectionHead part="Part 04" label="Side-by-side"
            title='Ryan-style in-house <span class="gr">vs.</span> PSEO Builder.'
            intro="The same five principles. Two very different paths to the same outcome, by team, timeline and budget." />
        </div>

        <div className="compare reveal" style={{ maxWidth: 1280, margin: "var(--space-12) auto 0" }}>
          <div className="compare-head">
            <div className="ch crit"><span className="label">Criterion</span></div>
            <div className="ch inhouse">
              <span className="label">In-house</span>
              <div className="nm">Ryan-style</div>
              <div className="tagline">Build it yourself, from the terminal.</div>
            </div>
            <div className="ch builder">
              <span className="gl" />
              <span className="label">Managed platform</span>
              <div className="nm"><span className="gr">PSEO Builder</span></div>
              <div className="tagline">The same principles, productised.</div>
            </div>
          </div>
          {COMPARE.map((row, i) => (
            <div className="crow" key={i}>
              <div className="cell crit">{row.crit}</div>
              <div className="cell inhouse">
                <Icon name="cornerDownRight" className="ic" />
                <span dangerouslySetInnerHTML={{ __html: row.inhouse }} />
              </div>
              <div className="cell builder">
                <Icon name="check" className="ic" />
                <span dangerouslySetInnerHTML={{ __html: row.builder }} />
              </div>
            </div>
          ))}
        </div>

        <div className="quote-band reveal" style={{ maxWidth: 1000, margin: "var(--space-12) auto 0" }}>
          <span className="qm">“</span>
          <blockquote>AI slop mostly comes from skipping the steps that matter.</blockquote>
          <cite><b>Ryan Law</b> · Director of Content, Ahrefs, Ahrefs Podcast, May 2026</cite>
        </div>

        <p className="prose reveal" style={{ maxWidth: 760, margin: "var(--space-10) auto 0", textAlign: "center", fontSize: 17 }}>
          The Ryan-style approach is exactly right for Ahrefs, they have the talent, time and engineering depth to build it. For everyone else, <b style={{ color: "var(--ink-900)" }}>the same principles are available as a product.</b> That's the entire reason we built PSEO Builder.
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { GapSection, CompareSection });