// pricing.jsx — Pricing page (May 2026)
// Detailed three-tier breakdown, math comparisons, credit explainer, FAQ.

/* ====== HERO ====== */
function PpHero() {
  return (
    <header className="pp-hero" data-screen-label="Pricing · Hero" id="top">
      <div className="mk-container">
        <div className="pp-hero-inner">
          <MkEyebrow num="Pricing">Per-firm, not per-seat</MkEyebrow>
          <h1>
            We don’t punish you for inviting <span className="alt">the people who need to be there.</span>
          </h1>
          <p className="sub">
            One flat price per firm, per month. Unlimited internal users. Unlimited external users — your clients, sponsors, advisors, regulators. Everyone who matters to the project, on the project.
          </p>
          <p className="bridge">
            Pricing is positioning. Every other PM tool charges per chair, and that’s why your clients end up reading a deck instead of seeing the project. We won’t do that to you.
          </p>
        </div>
      </div>
    </header>
  );
}

/* ====== TIER CARDS (detailed) ====== */
const TIER_DETAIL = [
  {
    name: 'Solo & small teams',
    tag: 'For the solo consultant or a small practice getting started',
    price: 75,
    annual: null,
    note: 'Monthly only · cancel any time',
    credits: '5,000 Willie credits',
    creditNote: 'about 3–5 engagements run at full Willie activity each month',
    highlight: false,
    badge: null,
    bullets: [
      { t: 'Unlimited internal users',           d: 'Everyone you bring on a project counts as zero.' },
      { t: 'Unlimited external users',           d: 'Clients, sponsors, advisors — bring them all into the portal.' },
      { t: 'Up to 5 projects',                   d: 'Hold up to 5 active at once — about what a month of Willie credits comfortably covers. Archive when done to free a slot.' },
      { t: 'Firm methodology layer',             d: 'Teach Willie your playbook once. Every project inherits.' },
      { t: 'Project memory layer',               d: 'Per-engagement context Willie carries through the work.' },
      { t: 'Inbox · Plan · Decisions · Files',   d: 'The core surface, identical to higher tiers.' },
      { t: 'Email support',                      d: 'Reply within two business days.' },
      { t: 'Storage cap · TBD',                  d: 'We’re still calibrating per-tier storage allowances.' },
    ],
    cta: 'Start Solo',
  },
  {
    name: 'Firm',
    tag: 'For small firms running active engagements',
    price: 150,
    annual: 1500,
    note: 'or $1,500/year · save 2 months',
    credits: '10,000 Willie credits',
    creditNote: 'about 8 engagements run at full Willie activity each month',
    highlight: true,
    badge: 'Most firms',
    bullets: [
      { t: 'Unlimited internal users',           d: 'Your whole firm — partners, associates, ops.' },
      { t: 'Unlimited external users',           d: 'Every client face on every active project.' },
      { t: 'Unlimited projects',                 d: 'No slot cap — your monthly Willie credits govern how much runs at once.' },
      { t: 'Firm methodology layer',             d: 'Same playbook layer as Solo. Every project inherits.' },
      { t: 'Project memory layer',               d: 'Per-engagement context plus the firm-wide layer.' },
      { t: 'Priority support',                   d: 'Same-day weekday response.' },
      { t: 'Storage cap · TBD',                  d: 'Higher than Solo. Specific number coming.' },
    ],
    cta: 'Start Firm',
  },
  {
    name: 'Studio',
    tag: 'For larger teams with sustained portfolio volume',
    price: 300,
    annual: 3000,
    note: 'or $3,000/year · save 2 months',
    credits: '20,000 Willie credits',
    creditNote: 'about 15 engagements run at full Willie activity each month',
    highlight: false,
    badge: null,
    bullets: [
      { t: 'Everything in Firm',                 d: 'All the above, plus:' },
      { t: 'Quarterly methodology review',       d: 'We help tune your firm layer twice a year.' },
      { t: 'Custom data export',                 d: 'Your records, your shape, when you want them.' },
      { t: 'Early access to new features',       d: 'You see new capabilities before we ship them broadly.' },
      { t: 'Highest storage cap · TBD',          d: 'Top of the storage band. Specific number coming.' },
    ],
    cta: 'Start Studio',
  },
];

function PpTiers() {
  return (
    <section className="pp-tiers-section" data-screen-label="Pricing · Tiers">
      <div className="mk-container">
        <div className="pp-tiers-head">
          <MkEyebrow num="01">The tiers</MkEyebrow>
          <h2 className="mk-h2">Three sizes, <span className="alt">one product.</span></h2>
          <p className="mk-prose pp-tiers-lede">
            Every tier ships the same Groundskeeper. The differences are how many concurrent engagements you can run, how much Willie can do for you each month, and a few firm-tier capabilities that only matter when you’ve grown into them.
          </p>
        </div>

        <div className="pp-tiers-grid">
          {TIER_DETAIL.map((t) => (
            <div className={`pp-tier ${t.highlight ? 'pp-tier-pop' : ''}`} key={t.name}>
              {t.badge && <div className="pp-tier-badge">{t.badge}</div>}
              <div className="pp-tier-head">
                <div className="pp-tier-name">{t.name}</div>
                <div className="pp-tier-tag">{t.tag}</div>
              </div>
              <div className="pp-tier-price">
                <span className="pp-tier-num">${t.price}</span>
                <span className="pp-tier-unit">/mo</span>
              </div>
              <div className="pp-tier-note">{t.note}</div>

              <div className="pp-tier-credits">
                <div className="pp-tier-credits-num">{t.credits}</div>
                <div className="pp-tier-credits-note">{t.creditNote}</div>
              </div>

              <ul className="pp-tier-bullets">
                {t.bullets.map((b, j) => (
                  <li key={j}>
                    <span className="pp-tier-check"><MkIcon name="check" size={12} color="var(--moss)" /></span>
                    <div>
                      <div className="pp-tier-bullet-t">{b.t}</div>
                      <div className="pp-tier-bullet-d">{b.d}</div>
                    </div>
                  </li>
                ))}
              </ul>

              <a href="index.html#early-access" className={`pp-tier-cta ${t.highlight ? 'pp-tier-cta-primary' : ''}`} data-cta={`pricing_start_${t.cta.toLowerCase().replace(/^start\s+/, '')}`}>{t.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PpHero, PpTiers });

/* ====== ADD-ONS ====== */
const ADDONS = [
  {
    name: 'Workspaces',
    tag: 'Add-on',
    headline: 'For firms running multiple project types or distinct teams.',
    body: 'A workspace is a separate slice of your firm — its own playbook, its own members, its own project shelf, its own memory. Useful when one team runs M&A engagements while another runs operational reviews, or when an office has its own way of working. Each workspace lives under your single subscription.',
    bullets: [
      'Multiple firm playbooks under one account',
      'Distinct internal teams per workspace',
      'Separate memory layers — projects don’t cross-pollinate',
      'One billing relationship, one admin',
    ],
    price: 'Pricing · TBD',
  },
  {
    name: 'Credit top-ups',
    tag: 'Add-on',
    headline: 'For the month you ran a little hot.',
    body: 'If you bump into your monthly credit cap and you’re not ready to roll up a tier, buy a one-time top-up. We notify you well before the cap so nothing surprises you, and top-ups are explicit — never an automatic charge.',
    bullets: [
      'One-time purchase, no commitment',
      'Notification before you hit the cap',
      'Never auto-renews — explicit click only',
      'Credits stack on your monthly allowance',
    ],
    price: 'Pricing · TBD',
  },
];

function PpAddons() {
  return (
    <section className="pp-addons-section" data-screen-label="Pricing · Add-ons">
      <div className="mk-container">
        <div className="pp-addons-head">
          <MkEyebrow num="02">Add-ons</MkEyebrow>
          <h2 className="mk-h2">
            For when one shape <span className="alt">doesn’t fit.</span>
          </h2>
          <p className="mk-prose pp-addons-lede">
            Two add-ons available on any tier. We’re still calibrating pricing — these don’t go live until the numbers are honest.
          </p>
        </div>

        <div className="pp-addons-grid">
          {ADDONS.map((a, i) => (
            <div className="pp-addon" key={i}>
              <div className="pp-addon-head">
                <div className="pp-addon-tag">{a.tag}</div>
                <div className="pp-addon-name">{a.name}</div>
              </div>
              <h3 className="pp-addon-headline">{a.headline}</h3>
              <p className="pp-addon-body">{a.body}</p>
              <ul className="pp-addon-bullets">
                {a.bullets.map((b, j) => (
                  <li key={j}>
                    <span className="pp-addon-check"><MkIcon name="check" size={12} color="var(--moss)" /></span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <div className="pp-addon-price">{a.price}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PpAddons });

/* ====== MATH COMPARISON — three firm sizes, switchable ====== */
const MATH_GK = { solo: 900, mid: 1500, large: 3000 };
const MATH_SCENARIOS = {
  solo: {
    label: 'Solo / small firm',
    scn: '3 PMs + 15 clients & stakeholders · 18 full participants · per year',
    gkName: 'Solo', gkSub: '$75/mo, billed annually',
    rows: [
      ['Trello', 1100, 2200], ['ClickUp', 1500, 2600], ['monday.com', 1900, 4100],
      ['Asana', 2400, 5400], ['Airtable', 2800, 6700], ['MS Project', 6500, 11900],
    ],
  },
  mid: {
    label: 'Mid-size firm',
    scn: '15 PMs + 60 clients & stakeholders · 75 full participants · per year',
    gkName: 'Firm', gkSub: 'flat, per firm',
    rows: [
      ['Trello', 4500, 9000], ['ClickUp', 6300, 10800], ['monday.com', 8100, 17100],
      ['Asana', 9900, 22500], ['Airtable', 11700, 27900], ['MS Project', 27000, 49500],
    ],
  },
  large: {
    label: 'Larger firm',
    scn: '30 PMs + 120 clients & stakeholders · 150 full participants · per year',
    gkName: 'Studio', gkSub: 'flat, per firm',
    rows: [
      ['Trello', 9000, 18000], ['ClickUp', 12600, 21600], ['monday.com', 16200, 34200],
      ['Asana', 19800, 45000], ['Airtable', 23400, 55800], ['MS Project', 54000, 99000],
    ],
  },
};
const MATH_NOTE = "How to read this: these figures give every participant full edit access on each tool — assignable, able to edit and collaborate for real. That’s the cost that makes firms ration seats and keep clients read-only or off the platform, pushing the conversation back to email. Groundskeeper has no per-seat charge — capacity is governed by Willie credits (AI usage), and in practice a handful of PMs drive most of it; contributors and clients mostly update their own tasks and check what’s assigned to them, which costs little or nothing. Competitor pricing is list price, per seat, before volume discounts.";

function PpMath() {
  const order = ['solo', 'mid', 'large'];
  const [active, setActive] = React.useState('solo');
  const d = MATH_SCENARIOS[active];
  const gk = MATH_GK[active];
  const usd = (n) => '$' + n.toLocaleString('en-US');
  return (
    <section className="pp-math-section" data-screen-label="Pricing · Math">
      <div className="mk-container">
        <div className="pp-mt-head">
          <MkEyebrow num="03">The math</MkEyebrow>
          <h2 className="mk-h2">
            As you grow, their cost climbs. <span className="alt">Yours holds.</span>
          </h2>
          <p className="mk-prose pp-math-lede">
            Same engagement, three firm sizes. Per-seat tools bill every full participant, so the number climbs with headcount. Groundskeeper moves you up a tier only as you run more projects — never as you add people.
          </p>
        </div>

        <div className="pp-math">
          <div className="pp-math-head">
            <div className="pp-math-tabs" role="tablist" aria-label="Firm size">
              {order.map((k) => (
                <button type="button" key={k} role="tab"
                  className={'pp-tab' + (active === k ? ' is-active' : '')}
                  aria-selected={active === k}
                  onClick={() => setActive(k)}>
                  {MATH_SCENARIOS[k].label}
                </button>
              ))}
            </div>
          </div>
          <div className="pp-math-scn">{d.scn}</div>
          <div className="pp-math-colhead">
            <span>Tool · per seat, full access</span>
            <span className="h-cost">Their cost / yr</span>
            <span className="h-save">You save / yr</span>
          </div>
          <div className="pp-math-rows">
            {d.rows.map((r, i) => (
              <div className="pp-math-row" key={i}>
                <div className="pp-math-l">
                  <span className="pp-math-co">{r[0]}</span>
                  <span className="pp-math-sub">per seat · full access</span>
                </div>
                <div className="pp-math-cost">{usd(r[1])}–{usd(r[2])}</div>
                <div className="pp-math-save">{usd(r[1] - gk)}–{usd(r[2] - gk)}</div>
              </div>
            ))}
          </div>
          <div className="pp-math-flat">
            <div className="l">Groundskeeper is <b>one flat price</b> at this size — {d.gkName}, {d.gkSub}. It doesn’t move when you add people. Theirs does.</div>
            <div className="amt">{usd(gk)}<span className="pp-math-yr">/yr</span></div>
          </div>
          <p className="pp-math-note">{MATH_NOTE}</p>
        </div>

        <div className="pp-math-aside">
          <em>“The cheapest fix to a per-seat bill is to leave the client out.”</em> That tension is structural. Our pricing model is the only one under which the rest of the product — full client transparency, no off-platform briefings, everyone in the same narrative — can be true.
        </div>
      </div>
    </section>
  );
}

/* ====== WILLIE CREDITS EXPLAINER ====== */
const CREDIT_USES = [
  { use: 'Process a meeting transcript',  cost: '~75 credits', d: 'Including task extraction, decision detection, and theme surfacing.' },
  { use: 'Draft a weekly status note',    cost: '~45 credits', d: 'Pulls from the week’s sessions, decisions, and parking-lot items.' },
  { use: 'Run an intake on a new project', cost: '~240 credits', d: 'One-time. Builds the initial plan from your SOW and kickoff materials.' },
  { use: 'Brief you before a client call', cost: '~30 credits', d: 'A focused recap of the engagement state, on demand.' },
  { use: 'Respond to a client question',   cost: '~15 credits',  d: 'Through the portal chat. Willie answers, with citations.' },
];

function PpCredits() {
  return (
    <section className="pp-credits-section" data-screen-label="Pricing · Credits">
      <div className="mk-container">
        <div className="pp-credits-grid">
          <div className="pp-credits-l">
            <MkEyebrow num="04">Willie credits</MkEyebrow>
            <h2 className="mk-h2 pp-credits-h">
              How Willie’s time is <span className="alt">metered.</span>
            </h2>
            <p className="mk-prose pp-credits-p">
              Willie does real work for you — reading documents, running sessions, drafting updates, answering questions through the portal. That work has a real cost on our side, so the tiers come with a monthly Willie-credit allowance.
            </p>
            <p className="mk-prose pp-credits-p">
              The credits are designed to cover ordinary use comfortably. Most Firm-tier customers don’t come close to their cap. If you do, we’ll let you know before you hit it, and you can either roll up to Studio or buy a credit top-up — never an automatic charge.
            </p>
            <p className="mk-prose pp-credits-p" style={{color:'var(--text-tertiary)', fontSize:14, marginTop:24}}>
              Numbers below are approximate. They’re the working estimates we use internally; your engagement’s real usage depends on how much you ask Willie to do.
            </p>
          </div>
          <div className="pp-credits-r">
            <div className="pp-credits-card">
              <div className="pp-credits-card-h">What a credit typically buys</div>
              <div className="pp-credits-list">
                {CREDIT_USES.map((c, i) => (
                  <div className="pp-credits-row" key={i}>
                    <div className="pp-credits-row-l">
                      <div className="pp-credits-row-t">{c.use}</div>
                      <div className="pp-credits-row-d">{c.d}</div>
                    </div>
                    <div className="pp-credits-row-cost">{c.cost}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PpMath, PpCredits });

/* ====== FAQ ====== */
const FAQ_ITEMS = [
  {
    q: 'What counts as “a project”?',
    a: 'An engagement with a client — one workstream with named stakeholders, a plan, and a defined arc. A pilot, a discovery phase, an audit, a 6-month implementation. If you’d send your client a separate SOW for it, it’s a project. Solo & small teams holds up to 5 projects open at once; Firm and Studio lift the slot cap entirely. Either way, your monthly Willie credits — not a project count — govern how many you can actively run (figure ~3–5 on Solo, ~8 on Firm, ~15 on Studio at full activity). Archive a project any time to free a slot.',
  },
  {
    q: 'Do you really not charge per user?',
    a: 'Really. Internal team, client team, sponsors, advisors, regulators — anyone you give access to is included. We think pricing should make adding the right people the cheapest path to project health, not the most expensive.',
  },
  {
    q: 'What happens if I run out of Willie credits?',
    a: 'You’ll get a heads-up notification well before you hit the cap. From there you can either upgrade to the next tier (we’ll prorate) or buy a one-time credit top-up. Nothing auto-charges. Willie also keeps working on the things that don’t require her credits — the surface stays usable.',
  },
  {
    q: 'Is there a free trial?',
    a: 'Yes — 30 days, no card required. The trial is scoped to one project with a reduced Willie-credit allowance, which is enough to run a real engagement end-to-end and see what Willie actually does. Upgrade at any time during or after the trial to unlock more active projects and a full monthly credit allowance.',
  },
  {
    q: 'Annual vs. monthly?',
    a: 'Annual on Firm and Studio saves you two months — $1,500 vs. $1,800 on Firm; $3,000 vs. $3,600 on Studio. Solo is monthly only because it’s designed as a lower-friction starting point.',
  },
  {
    q: 'Can I upgrade or downgrade mid-cycle?',
    a: 'Yes. Upgrades are prorated and take effect immediately, so you get the higher credit allowance for the rest of the month. Downgrades take effect at the next renewal — your data, projects, and history all stay intact.',
  },
  {
    q: 'What’s a workspace, and when do I need one?',
    a: 'A workspace is a separate slice of your firm — its own methodology playbook, its own internal team, its own projects, its own memory layer. Most firms don’t need more than one. You need a workspace when you run distinct project types (say, M&A engagements and operational reviews) where the playbook, team, and institutional memory shouldn’t cross-pollinate. Available as an add-on on any tier.',
  },
  {
    q: 'What about SSO?',
    a: 'SSO and SCIM are on the roadmap for mid-market firms. We’re focused on boutique-shaped customers today. If you have 100+ users and need enterprise auth as a procurement requirement, we’re probably not the right fit yet — and we’d rather tell you than promise something we haven’t built.',
  },
  {
    q: 'How do you handle our data?',
    a: 'Your data stays yours. We don’t train on your documents. Export your records any time. If you cancel, your workspace is read-only for 90 days, then deleted. Detail in our terms.',
  },
];

function PpFaq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="pp-faq-section" data-screen-label="Pricing · FAQ">
      <div className="mk-container">
        <div className="pp-faq-head">
          <MkEyebrow num="05">Questions</MkEyebrow>
          <h2 className="mk-h2">The questions we actually <span className="alt">get asked.</span></h2>
        </div>
        <div className="pp-faq-list">
          {FAQ_ITEMS.map((f, i) => (
            <details className="pp-faq-item" key={i} open={open === i} onToggle={(e) => { if (e.currentTarget.open) setOpen(i); }}>
              <summary>
                <span className="pp-faq-q">{f.q}</span>
                <span className="pp-faq-icon" aria-hidden="true">+</span>
              </summary>
              <div className="pp-faq-a">{f.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ====== CTA ====== */
function PpCta() {
  return (
    <section className="pp-cta-section" data-screen-label="Pricing · CTA">
      <div className="mk-container">
        <div className="pp-cta-inner">
          <h2 className="pp-cta-h">
            Bring the people who need to be there. <span className="alt">We won’t charge you for it.</span>
          </h2>
          <div className="pp-cta-row">
            <a className="mk-btn mk-btn-primary mk-btn-lg" href="index.html#early-access" data-cta="pricing_page_request_access">Request early access</a>
            <a className="mk-btn mk-btn-secondary mk-btn-lg" href="index.html#how" data-cta="pricing_page_take_tour">Take the tour</a>
          </div>
          <div className="pp-cta-note">
            Early-access pricing is locked for your first year. No countdowns. No "limited spots."
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PpFaq, PpCta });