/* Pricing — subscription tiers: Free / Pro $9.99 / Assist $14.99, with a
   monthly/annual toggle on Pro. Track Plan called out as an add-on. */
function Pricing() {
  const { Badge, Button } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;
  const [annual, setAnnual] = React.useState(false);

  const tiers = [
    {
      key: 'free', name: 'Free', tone: 'silver',
      price: { m: 0, a: 0 }, unit: 'forever',
      blurb: 'Understand your car and compare repairs.',
      features: ['Live diagnostics & fault scans', 'Plain-English AI explanations', 'Fair-market repair ranges', 'Compare local mechanic offers'],
      cta: 'Start free', variant: 'secondary',
    },
    {
      key: 'pro', name: 'Pro', tone: 'green', best: true,
      price: { m: 9.99, a: 79 }, unit: annual ? 'per year' : 'per month',
      blurb: 'Stay ahead of every problem, automatically.',
      features: ['Everything in Free', 'Predictive maintenance alerts', 'Full diagnostic & service history', 'Unlimited scans & vehicles', 'Priority mechanic matching'],
      cta: 'Go Pro', variant: 'positive',
    },
    {
      key: 'assist', name: 'Assist', tone: 'red',
      price: { m: 14.99, a: 119 }, unit: annual ? 'per year' : 'per month',
      blurb: 'Add safety: emergency SOS and anti-theft.',
      features: ['Everything in Pro', 'One-button emergency SOS', '5 roadside dispatches / year', 'Live GPS anti-theft tracking', 'Pre-incident data to dispatch'],
      cta: 'Get Assist', variant: 'secondary', note: 'Requires ALEROQ Track',
    },
  ];

  const toneCol = { green: 'var(--positive-bright)', silver: 'var(--silver-200)', red: 'var(--accent)' };
  const fmt = (n) => (n === 0 ? '$0' : `$${n}`);

  return (
    <section id="pricing" style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
      background: 'var(--surface-section)', borderTop: '1px solid var(--line-100)', borderBottom: '1px solid var(--line-100)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 36 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Plans</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)' }}>
            Simple pricing. Cancel anytime.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 520, margin: '0 auto' }}>
            Start free forever. Upgrade only when you want more from your car.
          </p>
        </Reveal>

        {/* monthly / annual toggle */}
        <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: 4, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-pill)' }}>
            {[['Monthly', false], ['Annual', true]].map(([label, val]) => (
              <button key={label} onClick={() => setAnnual(val)} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8, padding: '9px 18px', cursor: 'pointer', font: 'inherit',
                borderRadius: 'var(--radius-pill)', border: 'none',
                background: annual === val ? 'var(--positive)' : 'transparent',
                color: annual === val ? '#04130c' : 'var(--text-muted)',
                fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, transition: 'all 0.25s var(--ease-out)' }}>
                {label}
                {val && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, padding: '2px 7px', borderRadius: 'var(--radius-pill)',
                  background: annual ? 'rgba(4,19,12,0.18)' : 'var(--green-tint)', color: annual ? '#04130c' : 'var(--positive-bright)' }}>Save 34%</span>}
              </button>
            ))}
          </div>
        </Reveal>

        <div className="pricing-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, alignItems: 'stretch' }}>
          {tiers.map((t, i) => (
            <Reveal key={t.key} delay={i * 110} dir="up" style={{ height: '100%' }}>
              <div style={{
                position: 'relative', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column',
                background: 'var(--surface)', borderRadius: 'var(--radius-lg)', padding: 'clamp(26px, 3vw, 34px)',
                border: `1px solid ${t.best ? 'rgba(22,214,128,0.5)' : 'var(--border)'}`,
                boxShadow: t.best ? 'var(--glow-green-sm)' : 'none',
              }}>
                {t.best && (
                  <span style={{ position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)', display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '5px 13px', borderRadius: 'var(--radius-pill)', background: 'var(--positive)', color: '#04130c',
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
                    <Ic name="Sparkles" size={11} color="#04130c" /> Most popular
                  </span>
                )}
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, color: toneCol[t.tone], marginBottom: 6, letterSpacing: '-0.01em' }}>{t.name}</div>
                <p style={{ fontSize: 14, color: 'var(--text-muted)', margin: '0 0 18px', minHeight: 38, textWrap: 'pretty' }}>{t.blurb}</p>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(38px, 5vw, 48px)', color: 'var(--text-strong)', lineHeight: 1 }}>
                    {fmt(annual ? t.price.a : t.price.m)}
                  </span>
                  {(annual ? t.price.a : t.price.m) > 0 && (
                    <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>/{t.unit.replace('per ', '')}</span>
                  )}
                </div>
                <div style={{ fontSize: 12.5, color: 'var(--text-faint)', marginBottom: 24, minHeight: 18 }}>
                  {t.key === 'pro' && !annual ? 'or $79 / year' : t.key === 'pro' && annual ? 'billed annually' : t.key === 'assist' && annual ? 'billed annually' : t.unit === 'forever' ? 'No card required' : t.note || ''}
                </div>

                <div style={{ display: 'grid', gap: 12, marginBottom: 28 }}>
                  {t.features.map((f) => (
                    <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 11, fontSize: 14.5, color: 'var(--text-body)' }}>
                      <span style={{ flexShrink: 0, marginTop: 1 }}><Ic name="Check" size={16} color={toneCol[t.tone]} /></span> {f}
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 'auto' }}>
                  <Button variant={t.variant} size="lg" onClick={() => window.aleroqScrollTo('waitlist')}>{t.cta}</Button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={120}>
          <p style={{ display: 'flex', alignItems: 'center', gap: 9, justifyContent: 'center', margin: '26px auto 0', fontSize: 13.5, color: 'var(--text-faint)' }}>
            <Ic name="Signal" size={15} color="var(--text-faint)" />
            Track Plan adds cellular data for live GPS &amp; SOS &mdash; <span style={{ color: 'var(--text-muted)' }}>just $4.99/mo on the Track dongle.</span>
          </p>
        </Reveal>
      </div>
    </section>
  );
}
window.Pricing = Pricing;