// compare-shared.jsx — Shared components for the comparison hub + spoke pages (June 2026).
//
// Philosophy: these pages sell the *job* Groundskeeper does, not a feature checklist.
// Every spoke is built from one data object (see the COMPETITORS shape below) fed into
// <CpSpoke data={...} />, so the five competitor pages stay consistent and cheap to keep
// current. The "Choose [X] if…" section is deliberately split into two honest groups:
//   - legacy   → things the competitor does that are the *old way of working*; we chose
//                a different approach on purpose, not because we fell short.
//   - fitGap   → real requirements we genuinely don't serve (large PMOs, resource
//                leveling, budget forecasting, mandated incumbents) — here we say plainly
//                "we're not your tool; pick them." That candor is the point.

/* ===== Shared nav — "Compare" marked current ===== */
function CompareNav() {
  return (
    <nav className="mk-nav" data-screen-label="Compare · Nav">
      <div className="mk-nav-inner">
        <a className="mk-brand" href="index.html">
          <div className="mark"><MossMark /></div>
          <div className="name">Groundskeeper</div>
        </a>
        <div className="mk-nav-links">
          <a href="willie.html">Meet Willie</a>
          <a href="features.html">Features</a>
          <a href="compare.html" style={{color:'var(--text-primary)', fontWeight:500}}>Compare</a>
          <a href="pricing.html">Pricing</a>
          <a href="index.html#who">Who it's for</a>
        </div>
        <div className="mk-nav-right">
          <a className="mk-btn mk-btn-ghost" href="https://app.groundskeeperpm.com/login" data-cta="nav_sign_in">Sign in</a>
          <a className="mk-btn mk-btn-primary" href="index.html#early-access" data-cta="nav_request_access">Request access</a>
        </div>
      </div>
    </nav>
  );
}

/* ===== Spoke: hero ===== */
function CpHero({ data }) {
  return (
    <header className="cp-hero" data-screen-label={`Compare · ${data.name} · Hero`} id="top">
      <div className="mk-container">
        <div className="cp-hero-inner">
          <MkEyebrow num="Compare">Groundskeeper vs {data.name}</MkEyebrow>
          <h1>{data.heroH}</h1>
          <p className="sub">{data.heroSub}</p>
          <p className="bridge">{data.heroBridge}</p>
          <div className="cp-hero-cta">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta={`compare_${data.slug}_request_access`}>Request access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="pricing.html" data-cta={`compare_${data.slug}_pricing`}>See pricing</a>
          </div>
        </div>
      </div>
    </header>
  );
}

/* ===== Spoke: the real difference (job framing, experience-led) ===== */
function CpDifference({ data }) {
  return (
    <section className="mk-section cp-diff" data-screen-label={`Compare · ${data.name} · Difference`}>
      <div className="mk-container">
        <MkEyebrow num="01">The real difference</MkEyebrow>
        <h2 className="mk-h2 cp-diff-h">{data.diffH}</h2>
        <div className="cp-diff-cols">
          <div className="cp-diff-col">
            <div className="cp-diff-label"><span className="dot"></span>{data.name}</div>
            <p className="cp-diff-body">{data.diffThem}</p>
          </div>
          <div className="cp-diff-col gk">
            <div className="cp-diff-label gk"><span className="dot"></span>Groundskeeper</div>
            <p className="cp-diff-body">{data.diffUs}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Spoke: outcome matrix (who does the work, not feature checkboxes) ===== */
function CpMatrix({ data }) {
  return (
    <section className="cp-matrix-section" data-screen-label={`Compare · ${data.name} · Matrix`}>
      <div className="mk-container">
        <div className="cp-matrix-head">
          <MkEyebrow num="02">Head to head</MkEyebrow>
          <h2 className="mk-h2">It comes down to <span className="alt">who does the work.</span></h2>
          <p className="mk-prose cp-matrix-lede">
            Not "who has more features." Both tools can hold your project. The question is who keeps it current, who notices what changed, and who your client talks to. Here's how that splits.
          </p>
        </div>

        <div className="cp-matrix-table">
          <div className="cp-matrix-tablehead">
            <div className="cp-matrix-col-l">&nbsp;</div>
            <div className="cp-matrix-col">{data.name}</div>
            <div className="cp-matrix-col gk">Groundskeeper</div>
          </div>
          {data.matrix.map((r, i) => (
            <div className="cp-matrix-tablerow" key={i}>
              <div className="cp-matrix-col-l">
                <div className="cp-mx-dim">{r.dim}</div>
              </div>
              <div className="cp-matrix-col" data-label={data.name}>
                <div className="cp-mx-them">{r.them}</div>
              </div>
              <div className="cp-matrix-col gk" data-label="Groundskeeper">
                <div className="cp-mx-us">{r.us}</div>
              </div>
            </div>
          ))}
        </div>

        {data.priceNote && (
          <div className="cp-matrix-aside">
            <em>On price:</em> {data.priceNote}
          </div>
        )}
      </div>
    </section>
  );
}

/* ===== Spoke: the honest "choose [X] if…" — two groups ===== */
function CpChoose({ data }) {
  return (
    <section className="mk-section cp-choose" data-screen-label={`Compare · ${data.name} · Choose`}>
      <div className="mk-container">
        <MkEyebrow num="03">The honest part</MkEyebrow>
        <h2 className="mk-h2 cp-choose-h">
          When {data.name} is the <span className="alt">better call.</span>
        </h2>
        <p className="mk-prose cp-choose-lede">{data.chooseLede}</p>

        <div className="cp-choose-grid">
          <div className="cp-choose-card legacy">
            <div className="cp-choose-tag">This is the legacy way — and that's a real choice</div>
            <p className="cp-choose-note">
              These are things {data.name} does that we chose <em>not</em> to. Not gaps — different opinions about how the work should happen.
            </p>
            <ul className="cp-choose-list">
              {data.legacy.map((it, i) => (
                <li key={i}>
                  <span className="cp-choose-ic"><MkIcon name="arrow" size={13} color="var(--text-tertiary)" /></span>
                  <span><strong>{it.t}</strong> {it.d}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="cp-choose-card fitgap">
            <div className="cp-choose-tag gk">You genuinely need something we don't do</div>
            <p className="cp-choose-note">
              If any of these is a real requirement for you right now, {data.name} (or a tool like it) is the honest answer — not us. We'd rather tell you than oversell.
            </p>
            <ul className="cp-choose-list">
              {data.fitGap.map((it, i) => (
                <li key={i}>
                  <span className="cp-choose-ic gk"><MkIcon name="check" size={13} color="var(--moss)" /></span>
                  <span><strong>{it.t}</strong> {it.d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="mk-scope-note cp-scope">
          {data.scopeNote || "Groundskeeper is built for fixed-scope, client-facing work at small professional services firms. If you need resource utilization dashboards, budget forecasting, or a tool for a 50-person PMO — it's probably not your tool yet."}
        </div>
      </div>
    </section>
  );
}

/* ===== Spoke: CTA ===== */
function CpCta({ data }) {
  return (
    <section className="pp-cta-section" data-screen-label={`Compare · ${data.name} · CTA`}>
      <div className="mk-container">
        <div className="pp-cta-inner">
          <h2 className="pp-cta-h">{data.ctaH}</h2>
          <div className="pp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta={`compare_${data.slug}_cta_request`}>Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="compare.html" data-cta={`compare_${data.slug}_cta_all`}>See all comparisons</a>
          </div>
          <div className="pp-cta-note">
            No countdowns. No "limited spots." We'll get back to you within a week.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ===== Spoke: full page assembly ===== */
function CpSpoke({ data }) {
  return (
    <div className="mk-page" data-screen-label={`Groundskeeper · vs ${data.name}`}>
      <CompareNav />
      <CpHero data={data} />
      <CpDifference data={data} />
      <CpMatrix data={data} />
      <CpChoose data={data} />
      <CpCta data={data} />
      <MkFooter />
    </div>
  );
}

Object.assign(window, {
  CompareNav, CpHero, CpDifference, CpMatrix, CpChoose, CpCta, CpSpoke,
});