/* KayaCore — Pricing. One flat managed fee, framed against the cost of a hire. */
function PricingPage() {
  const { navigate } = useRouter();

  const included = [
    'Unlimited agents — build as many as you need',
    'Unlimited usage — no metering, no per-seat math',
    'Infrastructure included — nothing to host or manage',
    'Monitoring & maintenance — we keep it running',
    'Security upgrades — patched and hardened for you',
    'Ongoing workflow changes — it evolves as you do',
    'Private deployment, SOC 2 & a full audit log',
  ];

  const compare = {
    kaya: {
      label: 'KayaCore — unlimited agents',
      price: '~$5k', unit: '/ month flat',
      rows: [
        ['Cost', '~$5k/mo flat — unlimited agents & usage'],
        ['Time to productive', 'Under 48 hours'],
        ['Hours', '24/7 — nights, weekends, no PTO'],
        ['Who keeps it working', 'We do — monitored, maintained, upgraded'],
        ['Scaling up', 'Add agents anytime — included, no new cost'],
        ['Turnover risk', 'None — it never quits'],
      ],
    },
    hire: {
      label: 'A full-time hire',
      price: '~$95k', unit: '/ year loaded',
      rows: [
        ['Cost', '$70\u2013$90k salary + benefits & taxes'],
        ['Time to productive', '6\u201310 weeks to hire + ramp'],
        ['Hours', '~40 hrs/week, PTO, sick days'],
        ['Who keeps it working', 'You \u2014 manage, train, review'],
        ['Scaling up', 'Open a req, start over'],
        ['Turnover risk', 'Real \u2014 and expensive to replace'],
      ],
    },
  };

  return (
    <React.Fragment>
      <section style={{ position: 'relative', overflow: 'hidden' }}>
        <Bloom at="50% -15%" size="780px 420px" color="var(--glow-violet)" />
        <NodeGrid fade="50% 0%" opacity={0.05} />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '72px 28px 24px', textAlign: 'center' }}>
          <span style={{ display: 'inline-flex' }}><Badge tone="accent"><KcIcon name="sparkles" size={13} />Pricing</Badge></span>
          <h1 className="kc-display" style={{ marginTop: 18, fontSize: 'clamp(2.4rem, 1.6rem + 3vw, 4rem)' }}>Priced like software.<br />Works like a hire.</h1>
          <p className="kc-lead" style={{ marginTop: 16, marginInline: 'auto', maxWidth: '54ch' }}>One flat monthly fee for the whole thing — unlimited agents, unlimited usage, infrastructure, monitoring and ongoing changes. No setup fees, no per-seat math.</p>
        </div>
      </section>

      {/* main plan + comparison */}
      <section style={{ maxWidth: 1200, margin: '0 auto', padding: '32px 28px 80px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }} className="kc-priceglrid">
          {/* the plan */}
          <div style={{ position: 'relative', overflow: 'hidden', padding: 'clamp(28px, 4vw, 40px)', background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 150%)', border: '1px solid var(--accent-border)', borderRadius: 24, boxShadow: '0 24px 60px -28px var(--glow-violet)' }}>
            <Bloom at="90% -10%" size="320px 220px" color="var(--glow-violet-soft)" />
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <IconChip name="sparkles" size={44} active />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--fg)' }}>Everything, managed</div>
                  <div className="kc-mono" style={{ fontSize: 11, color: 'var(--fg-subtle)' }}>one flat fee · unlimited agents</div>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 24 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 56, color: 'var(--fg)', letterSpacing: '-0.03em' }}><CountUp value="$4,950" /></span>
                <span className="kc-body" style={{ fontSize: 16 }}>/ month</span>
              </div>
              <div className="kc-small" style={{ color: 'var(--fg-subtle)', marginTop: 4 }}>Flat monthly fee. Unlimited agents &amp; usage. Cancel anytime.</div>
              <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {included.map((it, i) => (
                  <div key={i} style={{ display: 'flex', gap: 11, alignItems: 'flex-start' }}>
                    <span style={{ marginTop: 1, color: 'var(--accent)', flex: 'none' }}><KcIcon name="check" size={18} /></span>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-muted)', lineHeight: 1.45 }} dangerouslySetInnerHTML={{ __html: it }} />
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 28 }}>
                <Button variant="primary" size="lg" icon="arrowRight" onClick={() => navigate('/contact')} style={{ width: '100%', justifyContent: 'center' }}>Book a demo</Button>
              </div>
            </div>
          </div>

          {/* vs a hire */}
          <div style={{ padding: 'clamp(28px, 4vw, 40px)', background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 24 }}>
            <Eyebrow>The honest comparison</Eyebrow>
            <h2 className="kc-h3" style={{ marginTop: 12, marginBottom: 4 }}>Your agent team vs. one hire</h2>
            <p className="kc-small" style={{ color: 'var(--fg-subtle)', marginBottom: 20 }}>Unlimited agents for less than one salary.</p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 14 }}>
              {[compare.kaya, compare.hire].map((col, ci) => (
                <div key={ci} style={{ padding: '14px 16px', borderRadius: 12, background: ci === 0 ? 'var(--accent-tint)' : 'var(--bg)', border: `1px solid ${ci === 0 ? 'var(--accent-border)' : 'var(--border-soft)'}` }}>
                  <div className="kc-mono" style={{ fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: ci === 0 ? 'var(--accent)' : 'var(--fg-subtle)' }}>{col.label}</div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 6 }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 26, color: 'var(--fg)', letterSpacing: '-0.02em' }}>{col.price}</span>
                    <span className="kc-small" style={{ color: 'var(--fg-subtle)' }}>{col.unit}</span>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {compare.kaya.rows.map((row, ri) => (
                <div key={ri} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, padding: '11px 0', borderTop: '1px solid var(--border-soft)' }}>
                  <div>
                    <div className="kc-mono" style={{ fontSize: 10, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--fg-faint)', marginBottom: 3 }}>{row[0]}</div>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--fg)', display: 'flex', gap: 7 }}>
                      <span style={{ color: 'var(--success)', flex: 'none' }}><KcIcon name="check" size={15} /></span>
                      <span dangerouslySetInnerHTML={{ __html: row[1] }} />
                    </div>
                  </div>
                  <div style={{ alignSelf: 'end' }}>
                    <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--fg-subtle)' }} dangerouslySetInnerHTML={{ __html: compare.hire.rows[ri][1] }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* reassurance line */}
        <div style={{ marginTop: 22, padding: '18px 22px', borderRadius: 16, background: 'var(--bg-deep)', border: '1px solid var(--border-soft)', display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center', flexWrap: 'wrap', textAlign: 'center' }}>
          <KcIcon name="shield" size={18} style={{ color: 'var(--accent)' }} />
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-muted)' }}>
            Every plan is fully managed — <strong style={{ color: 'var(--fg)', fontWeight: 600 }}>if it breaks, it’s our job to fix it,</strong> not your support ticket.
          </span>
        </div>
      </section>

      <CTA />
    </React.Fragment>
  );
}
Object.assign(window, { PricingPage });