window.Pricing = function Pricing({ navigate }) {
  function handleTierCta(tier) {
    if (tier.name === 'Builder') {
      // Stripe checkout temporarily disabled — route interested users to
      // contact us so we can capture demand while billing is paused.
      window.location.href = 'mailto:team@graphite-ai.net?subject=Graphite%20Builder%20tier%20interest';
      return;
    }
    if (tier.name === 'Explorer') {
      navigate && navigate('portal');
      return;
    }
    if (tier.name === 'Enterprise') {
      window.location.href = 'mailto:team@graphite-ai.net?subject=Graphite%20Enterprise%20inquiry';
      return;
    }
  }

  const tiers = [
    {
      name: 'Explorer',
      price: 'Free',
      per: '',
      desc: 'For research, prototypes, and getting a feel for the data.',
      features: [
        '100 graph queries / month (with API key)',
        'Read-only public site · 3 ticker views / day per IP',
      ],
      cta: 'Start free',
    },
    {
      name: 'Builder',
      price: 'Coming soon',
      per: '',
      desc: 'For teams shipping agents and analytics on top of structured data.',
      features: [
        '500,000 graph queries / month',
        'Full API access · all public graphs',
      ],
      cta: 'Get notified',
      featured: true,
    },
    {
      name: 'Enterprise',
      price: 'Custom',
      per: '',
      desc: 'Private graphs, dedicated extractors, and named support.',
      features: [
        'Unlimited graph queries',
        'Private domain graphs',
        'Dedicated extractor capacity',
        'Named engineering contact',
      ],
      cta: 'Talk to sales',
    },
  ];

  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 96, borderTop: 0, paddingBottom: 80 }}>
        <div className="container">
          <div className="section-head" style={{ textAlign: 'center', alignItems: 'center', margin: '0 auto 56px' }}>
            <h2>Three tiers. Pick the surface area.</h2>
            <p className="lede" style={{ textAlign: 'center' }}>Every tier hits the same graphs and the same evidence. The difference is throughput, support, and whether you need your own private domain graph.</p>
          </div>
          <div className="tiers">
            {tiers.map((t, i) => (
              <div className={'tier' + (t.featured ? ' featured' : '')} key={i}>
                {t.featured && <div className="tier-tag">Most popular</div>}
                <div className="tier-name">{t.name}</div>
                <div className="tier-price">
                  {t.priceStrike && (
                    <span style={{ textDecoration: 'line-through', color: 'var(--fg-mute)', fontWeight: 500, marginRight: 10, fontSize: '0.55em', verticalAlign: 'middle' }}>{t.priceStrike}</span>
                  )}
                  {t.price}{t.per && <span className="per">{t.per}</span>}
                </div>
                {t.promo && (
                  <div style={{ display: 'inline-block', marginTop: -4, marginBottom: 8, padding: '3px 10px', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#0a0a0a', background: 'var(--accent)', borderRadius: 999, fontWeight: 600 }}>{t.promo}</div>
                )}
                <div className="tier-desc">{t.desc}</div>
                <ul>
                  {t.features.map((f, j) => (
                    <li key={j}><Icon name="check" size={16} className="chk" /><span>{f}</span></li>
                  ))}
                </ul>
                <button
                  className={'btn ' + (t.featured ? 'btn-accent' : 'btn-ghost')}
                  onClick={() => handleTierCta(t)}
                >
                  {t.cta}
                </button>
              </div>
            ))}
          </div>

          <div className="pricing-guarantees" style={{ marginTop: 64, padding: '24px 28px', border: '1px solid var(--border)', borderRadius: 14, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 36 }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Provenance guarantee</div>
              <p style={{ color: 'var(--fg-dim)', fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>Every fact resolves back to a source document. If a quote doesn't verify, you don't pay for the call.</p>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Fair-use limits</div>
              <p style={{ color: 'var(--fg-dim)', fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>Overages are soft-capped, not surprise-billed. We'll email before you cross a tier boundary.</p>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--fg-mute)' }}>Academic access</div>
              <p style={{ color: 'var(--fg-dim)', fontSize: 13.5, marginTop: 8, lineHeight: 1.5 }}>Free Builder tier for accredited research groups. Get in touch with your institutional email.</p>
            </div>
          </div>
        </div>
      </section>
      <Footer navigate={navigate} />
    </div>
  );
};