function PricingPage() {
  const plans = [
    { name: 'Starter', price: '$0', sub: 'pilot · first 30 days', cta: 'Join waitlist', features: ['Up to 3 projects','Project Management · Daily Logs · Photos','5,000 credits / month included','Community support','Single workspace'] },
    { name: 'Professional', price: '$49', sub: 'per seat / month', cta: 'Request early access', popular: true, features: ['Unlimited projects','All first-party modules','25,000 credits / month · top-ups available','Per-user sub-budgets','OIDC SSO (optional)','Priority email support'] },
    { name: 'Enterprise', price: "Let's talk", sub: 'custom', cta: 'Talk to us', features: ['Everything in Professional','Bring-your-own-storage (S3)','OIDC SSO enforced · break-glass audit','Custom credit packs','Dedicated Slack channel','SOC 2 / ISO 27001 evidence on request'] },
  ];
  return (
    <>
      <section className="section-tight pt-16">
        <Container>
          <Eyebrow>Pricing</Eyebrow>
          <h1 className="m-display mt-3 max-w-3xl">Flat seats. Metered agents. Nothing hidden.</h1>
          <p className="m-lede mt-5 max-w-2xl">Pay for the people. Pay for the work the agents do. Every tool call is a line item in the ledger — you can see it, download it, cap it.</p>
        </Container>
      </section>
      <section className="pb-16">
        <Container>
          <div className="grid md:grid-cols-3 gap-4 items-stretch">
            {plans.map(p => (
              <div key={p.name} className={cls('card p-7 flex flex-col', p.popular && 'ring-2')} style={p.popular ? { boxShadow: 'var(--sb-shadow-md)', borderColor: 'var(--brand)' } : {}}>
                <div className="flex items-center justify-between">
                  <div className="text-[16px] font-semibold">{p.name}</div>
                  {p.popular && <Badge tone="brand">Most popular</Badge>}
                </div>
                <div className="mt-4 flex items-baseline gap-1.5">
                  <span className="sb-display" style={{ fontSize: 32 }}>{p.price}</span>
                </div>
                <div className="text-[12px]" style={{ color: 'var(--fg2)' }}>{p.sub}</div>
                <div className="mt-5"><Button to="contact" variant={p.popular ? 'primary' : 'ghost'} className="w-full" style={{ justifyContent: 'center' }}>{p.cta}</Button></div>
                <div className="mt-6"><Checklist items={p.features} /></div>
              </div>
            ))}
          </div>
          <div className="card p-6 mt-6">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div>
                <div className="text-[14px] font-semibold">Credit packs — top up anytime</div>
                <div className="text-[13px]" style={{ color: 'var(--fg2)' }}>Starter 10k / $20 · Growth 50k / $90 · Scale 250k / $400</div>
              </div>
              <Button to="workforce" variant="ghost" iconEnd="ArrowRight">See the rate card</Button>
            </div>
          </div>
        </Container>
      </section>
      <CTABand />
    </>
  );
}
Object.assign(window, { PricingPage });