window.Kit.Pricing = function Pricing({ onPick }) {
  const { Button, Card, Badge, Switch, Eyebrow, Tooltip } = window.DS;
  const { Icon, Mask, brand, data } = window.Kit;
  const [yearly, setYearly] = React.useState(false);
  const fmt = (n) => '$' + n.toLocaleString('en-US');
  return (
    <main>
      <section className="section section--first" style={{ paddingBottom: 'var(--space-10)' }}>
        <div className="container stack" style={{ gap: 'var(--space-8)', alignItems: 'center', textAlign: 'center' }}>
          <div className="reveal"><Eyebrow>Pricing</Eyebrow></div>
          <h1 className="display-xl"><Mask text="One monthly number." delay={60} /></h1>
          <p className="lead reveal" data-d="2" style={{ maxWidth: '52ch' }}>A subscription, not a contract. No setup fees, no hourly surprises. Everything in the plan is included; the domain and site are yours.</p>
          <div className="reveal" data-d="3"><Switch offLabel="Monthly" onLabel="Yearly — 2 months free" checked={yearly} onChange={(e) => setYearly(e.target.checked)} /></div>
          <div className="row reveal" data-d="4" style={{ justifyContent: 'center', gap: 8 }}>
            {data.terms.map((t) => <Badge key={t} tone="outline">{t}</Badge>)}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 'var(--section-y)' }}>
        <div className="container grid grid-3" style={{ alignItems: 'stretch' }}>
          {data.plans.map((p, i) => (
            <Card key={p.id} variant={p.popular ? 'inverse' : 'surface'} padding="lg" className={'reveal' + (p.popular ? ' plan--popular' : '')} data-d={i + 1} style={p.popular ? { transform: 'translateY(-8px)' } : undefined}>
              {p.popular ? <Badge tone="accent">Most popular</Badge> : null}
              <Eyebrow tone={p.popular ? 'accent' : 'muted'}>{p.name}</Eyebrow>
              <div key={yearly ? 'y' : 'm'} className="scale-in" style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="price">{fmt(yearly ? Math.round(p.yearly / 12) : p.monthly)}</span>
                <span className="body-sm">/ mo{yearly ? ', billed yearly' : ''}</span>
              </div>
              <p className="body">{p.blurb}</p>
              <Button variant={p.popular ? 'primary' : 'inverse'} size="lg" fullWidth arrow onClick={() => onPick && onPick(p)}>Choose {p.name}</Button>
              <p className="caption" style={{ textAlign: 'center' }}>No commitment · cancel anytime</p>
              <hr className="hairline" />
              <ul className="feature-list">
                {p.features.map((f) => <li key={f}><Icon name="Check" size={16} strokeWidth={2.5} />{f}</li>)}
                {p.off.map((f) => <li key={f} className="off"><Icon name="Minus" size={16} />{f}</li>)}
              </ul>
            </Card>
          ))}
        </div>
      </section>

      <section className="section band" data-theme="dark" style={{ background: 'var(--bg)', color: 'var(--text)' }}>
        <div className="container grid grid-2" style={{ gap: 'var(--space-16)', alignItems: 'start' }}>
          <div className="stack reveal" style={{ gap: 'var(--space-5)' }}>
            <Eyebrow>Included in all plans</Eyebrow>
            <h2 className="display">What you never pay extra for.</h2>
            <p className="lead">The things other agencies line-item — and the terms they bury.</p>
          </div>
          <div className="grid grid-2 reveal" data-d="1">
            {[['Globe', 'Domain renewals'], ['ShieldCheck', 'SSL & backups'], ['Headset', 'One phone number'], ['FileText', 'Monthly report'], ['Pencil', 'Site edits in 48h'], ['Key', 'You own everything'], ['Download', 'Download your website 24/7'], ['CalendarX', 'Cancel anytime, 30 days’ notice']].map(([ic, t]) => (
              <div key={t} className="row" style={{ gap: 12, padding: '16px 0', borderTop: '1px solid var(--border)' }}>
                <Tooltip content="Included in Launch, Grow and Scale"><span className="service-icon" style={{ width: 36, height: 36 }}><Icon name={ic} size={16} /></span></Tooltip>
                <span className="h4">{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container narrow stack" style={{ gap: 'var(--space-10)' }}>
          <div className="stack reveal"><Eyebrow>Questions</Eyebrow><h2 className="display">Asked often.</h2></div>
          <div className="faq reveal" data-d="1">
            {data.faq.map(([q, a], i) => <details key={q} open={i === 0}><summary>{q}</summary><p>{brand(a)}</p></details>)}
          </div>
          <div className="row reveal" data-d="2"><Button size="lg" arrow href="#/audit">Book the free audit</Button><Button size="lg" variant="ghost" href="#/services">Compare services</Button></div>
        </div>
      </section>
    </main>
  );
};