// compare.jsx — Comparison hub (June 2026).
// Frames the category before sending readers to a per-competitor spoke.
// The thesis: incumbents are organizers you maintain; Willie does the maintenance.
// Reuses the homepage MkCompare block so the per-seat contrast stays consistent.

/* ===== Hero ===== */
function CpHubHero() {
  return (
    <header className="cp-hero" data-screen-label="Compare · Hub · Hero" id="top">
      <div className="mk-container">
        <div className="cp-hero-inner">
          <MkEyebrow num="Compare">Groundskeeper vs the field</MkEyebrow>
          <h1>
            Every other tool gives you a better place to <span className="alt">put the work.</span>
          </h1>
          <p className="sub">
            ClickUp, Asana, Trello, Monday, MS Project — they give you somewhere to <em>put</em> the work, then bill you per person to look at it. Groundskeeper does a different job: Willie reads your documents, builds the plan, keeps it current, and answers your clients. You don't operate a tool. You brief a project manager.
          </p>
          <p className="bridge">
            So we'll be straight with you on every page: where we win, and where one of them is honestly the better fit right now.
          </p>
        </div>
      </div>
    </header>
  );
}

/* ===== The job framing ===== */
function CpHubThesis() {
  return (
    <section className="mk-section cp-thesis" data-screen-label="Compare · Hub · Thesis">
      <div className="mk-container">
        <MkEyebrow num="01">What we're actually comparing</MkEyebrow>
        <h2 className="mk-h2 cp-thesis-h">
          An organizer holds the work. <span className="alt">Willie does it.</span>
        </h2>
        <div className="cp-thesis-cols">
          <div className="cp-thesis-col">
            <div className="cp-thesis-label"><span className="dot"></span>Project management tools</div>
            <p className="cp-thesis-body">
              They give you boards, tasks, dashboards, automations — a place to put your work and surface it back to you. Powerful, flexible, and well-built. But they all assume the same thing: a person will sit down and keep them current. Someone enters the tasks. Someone updates the milestone that slipped. Someone reads the client email and logs the decision. The tool organizes; you maintain.
            </p>
          </div>
          <div className="cp-thesis-col gk">
            <div className="cp-thesis-label gk"><span className="dot"></span>Groundskeeper</div>
            <p className="cp-thesis-body">
              You hand Willie the raw material — a proposal, an SOW, a transcript, a client email — and she builds the plan, tracks the decisions, notices what changed, and briefs you when you're ready. Your client gets a portal that's always current, and asks Willie their questions instead of you. You supervise and approve. You don't maintain a tracker.
            </p>
          </div>
        </div>
        <p className="mk-prose cp-thesis-foot">
          That's the lens for every comparison below. If your real problem is "we don't have a system to put our work in," any of these tools will serve you well. If your real problem is "the system exists but nobody has time to keep it true" — that's the one Willie was built for.
        </p>
        <p className="mk-prose cp-thesis-foot">
          There's a second tell. When a tool charges per seat, the cheapest move is to leave people out — so approvals drift back to email, status lands in a spreadsheet, and your client asks for a deck instead of logging in. The pricing quietly undoes the point of having the tool. Groundskeeper is priced per firm, so the people who need to be in the project are simply in it.
        </p>
      </div>
    </section>
  );
}

/* ===== Spoke cards ===== */
const SPOKES = [
  {
    slug: 'clickup', name: 'ClickUp',
    hook: 'The "everything app" — endlessly configurable, and endlessly yours to configure.',
    best: 'Best when you want one tool to bend into every internal workflow and someone owns the setup.',
  },
  {
    slug: 'asana', name: 'Asana',
    hook: 'Polished work management for large, ongoing internal teams and cross-functional ops.',
    best: 'Best for coordinating big recurring operations, portfolios, and workload across many seats.',
  },
  {
    slug: 'trello', name: 'Trello',
    hook: 'Dead-simple visual boards. Often genuinely enough — and we’ll say so.',
    best: 'Best for solo or tiny teams who want light, free-ish boards with zero setup.',
  },
  {
    slug: 'monday', name: 'Monday',
    hook: 'A colorful Work OS with dashboards, automations, and resource views.',
    best: 'Best for ops teams that live in custom dashboards across many departments and seats.',
  },
  {
    slug: 'ms-project', name: 'MS Project',
    hook: 'Heavyweight scheduling: critical path, resource leveling, baselines, governance.',
    best: 'Best for complex, dependency-dense, resource-loaded schedules in a Microsoft shop.',
  },
];

function CpHubGrid() {
  return (
    <section className="mk-section cp-grid-section" data-screen-label="Compare · Hub · Grid">
      <div className="mk-container">
        <MkEyebrow num="02">Pick your comparison</MkEyebrow>
        <h2 className="mk-h2" style={{marginTop:20, maxWidth:'22ch'}}>
          Coming from one of these? <span style={{color:'var(--moss)', fontStyle:'italic'}}>Start here.</span>
        </h2>
        <div className="cp-grid">
          {SPOKES.map((s) => (
            <a className="cp-grid-card" href={`compare-${s.slug}.html`} key={s.slug} data-cta={`compare_hub_to_${s.slug}`}>
              <div className="cp-grid-card-top">
                <span className="cp-grid-vs">vs</span>
                <span className="cp-grid-name">{s.name}</span>
                <span className="cp-grid-arrow"><MkIcon name="arrow" size={16} color="var(--moss)" /></span>
              </div>
              <p className="cp-grid-hook">{s.hook}</p>
              <p className="cp-grid-best">{s.best}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Honest preview ===== */
function CpHubHonest() {
  return (
    <section className="mk-section cp-honest-section" data-screen-label="Compare · Hub · Honest">
      <div className="mk-container-tight">
        <MkEyebrow num="03">Before you switch</MkEyebrow>
        <h2 className="mk-h2 cp-honest-h">
          When we're honest, you might not need us <span className="alt">yet.</span>
        </h2>
        <p className="mk-prose cp-honest-p">
          Groundskeeper is built for fixed-scope, client-facing work at small professional-services firms. There are real situations where one of the tools above is the right answer today, and we'd rather say so than win you for a quarter and lose you in frustration:
        </p>
        <ul className="cp-honest-list">
          <li><span className="cp-honest-ic"><MkIcon name="check" size={13} color="var(--moss)" /></span><span>You need <strong>resource leveling, capacity planning, or budget/cost forecasting</strong> across a portfolio — that's MS Project / Monday territory.</span></li>
          <li><span className="cp-honest-ic"><MkIcon name="check" size={13} color="var(--moss)" /></span><span>You're running a <strong>50-plus-person PMO</strong> with formal governance, custom roles, and enterprise procurement requirements.</span></li>
          <li><span className="cp-honest-ic"><MkIcon name="check" size={13} color="var(--moss)" /></span><span>Your work is <strong>internal and ongoing</strong>, not client-facing engagements with a defined arc.</span></li>
          <li><span className="cp-honest-ic"><MkIcon name="check" size={13} color="var(--moss)" /></span><span>A <strong>client or regulator mandates a specific tool</strong> you have to live inside.</span></li>
        </ul>
        <p className="mk-prose cp-honest-foot">
          None of that is a knock on us or them — it's just a different job. If that's not you, read on. The maintenance you're doing by hand is exactly what Willie takes off your plate.
        </p>
      </div>
    </section>
  );
}

/* ===== CTA ===== */
function CpHubCta() {
  return (
    <section className="pp-cta-section" data-screen-label="Compare · Hub · CTA">
      <div className="mk-container">
        <div className="pp-cta-inner">
          <h2 className="pp-cta-h">
            Stop maintaining the tracker. <span className="alt">Start supervising the PM.</span>
          </h2>
          <div className="pp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="compare_hub_cta_request">Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="willie.html" data-cta="compare_hub_cta_willie">Meet Willie</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>
  );
}

function App() {
  return (
    <div className="mk-page" data-screen-label="Groundskeeper · Compare">
      <CompareNav />
      <CpHubHero />
      <CpHubThesis />
      <CpHubGrid />
      <MkCompare />
      <CpHubHonest />
      <CpHubCta />
      <MkFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<App />);