// Pricing — annual/monthly toggle, hover lift, animated featured glow.
const Pricing = ({ onNav }) => {
  const [period, setPeriod] = React.useState('monthly');
  const [hover, setHover] = React.useState(null);
  const isMobile = useResponsive();

  const tiers = [
    {
      name: 'Personal',
      monthly: 0, annual: 0,
      period: '',
      desc: 'For individuals getting started with smart home surveillance.',
      cta: 'Try Now', ctaVariant: 'secondary',
      features: ['1 Camera Connection', 'Basic Motion Detection', '24h Cloud Retention', 'Mobile App Access'],
      featured: false,
    },
    {
      name: 'Starter',
      monthly: 299, annual: 249,
      period: '/month',
      desc: 'Perfect for small businesses needing reliable AI security.',
      cta: 'Subscribe Now', ctaVariant: 'primary',
      features: ['Up to 8 Cameras', 'Advanced Person Detection', '7-Day History', 'Email & SMS Alerts', 'Priority Support'],
      featured: true,
    },
    {
      name: 'Premium',
      monthly: 699, annual: 579,
      period: '/month',
      desc: 'For companies who need advanced features and top-tier support.',
      cta: 'Subscribe Now', ctaVariant: 'secondary',
      features: ['Unlimited Cameras', 'Full Sentiment Analysis', '30-Day History', 'Custom Integrations', 'Dedicated Account Manager'],
      featured: false,
    },
  ];

  return (
    <Section eyebrow="Pricing">
      <Reveal>
        <div style={{
          display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 48, gap: 40, flexWrap: 'wrap',
        }}>
        <h2 className="bf-section-h2" style={{
            fontSize: isMobile ? 32 : 60, fontWeight: 800, letterSpacing: '-0.025em',
            color: '#EFEFF1', margin: 0, lineHeight: 1.05, maxWidth: 620,
          }}>
            One plan, one price.
          </h2>
          <p style={{ fontSize: 18.75, color: '#ADADB8', maxWidth: 360, margin: 0, lineHeight: 1.55 }}>
            We like keeping things simple. Choose the scale that fits your needs.
            Every tier includes a 30-day money-back guarantee.
          </p>
        </div>
      </Reveal>

      {/* Period toggle */}
      <Reveal delay={80}>
        <div style={{
          display: 'inline-flex', alignItems: 'center',
          background: '#18181B', border: '1px solid #2F2F35', borderRadius: 9999,
          padding: 4, marginBottom: 32, position: 'relative',
        }}>
          <span style={{
            position: 'absolute', top: 4, bottom: 4,
            left: period === 'monthly' ? 4 : '50%',
            width: 'calc(50% - 4px)',
            background: '#9146FF', borderRadius: 9999,
            transition: 'left 200ms cubic-bezier(0.2,0,0,1)',
          }} />
          {['monthly', 'annual'].map(p => (
            <button key={p}
              onClick={() => setPeriod(p)}
              style={{
                position: 'relative', zIndex: 1, padding: '8px 20px',
                fontSize: 12, fontWeight: 700, textTransform: 'uppercase',
                letterSpacing: '0.06em', cursor: 'pointer',
                background: 'transparent', border: 'none',
                color: period === p ? '#fff' : '#ADADB8',
                fontFamily: 'inherit',
                transition: 'color 100ms',
              }}>
              {p}{p === 'annual' && <span style={{ marginLeft: 6, fontSize: 9, color: period === 'annual' ? '#fff' : '#9146FF' }}>−17%</span>}
            </button>
          ))}
        </div>
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 20 }}>
        {tiers.map((t, idx) => {
          const price = period === 'annual' ? t.annual : t.monthly;
          const isHover = hover === idx;
          return (
            <div key={t.name}
              onMouseEnter={() => setHover(idx)}
              onMouseLeave={() => setHover(null)}
              style={{
                background: t.featured
                  ? 'linear-gradient(180deg, rgba(145,70,255,0.10), #18181B 60%)'
                  : '#18181B',
                borderRadius: 6,
                border: t.featured ? '1px solid #9146FF' : isHover ? '1px solid #3A3A42' : '1px solid #2F2F35',
                padding: 32, position: 'relative',
                display: 'flex', flexDirection: 'column',
                transform: isHover ? 'translateY(-4px)' : 'translateY(0)',
                boxShadow: isHover && t.featured ? '0 20px 50px -10px rgba(145,70,255,0.4)' : 'none',
                transition: 'transform 200ms cubic-bezier(0.2,0,0,1), border-color 100ms, box-shadow 200ms',
              }}>
              {t.featured && (
                <div style={{
                  position: 'absolute', top: -12, left: 24,
                  background: '#9146FF', color: '#fff',
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                  padding: '4px 10px', borderRadius: 2,
                }}>Most Popular</div>
              )}
              <h3 style={{ fontSize: 25, fontWeight: 700, color: '#EFEFF1', margin: '0 0 8px' }}>{t.name}</h3>
              <p style={{ fontSize: 16.25, color: '#ADADB8', margin: '0 0 24px', minHeight: 36, lineHeight: 1.5 }}>{t.desc}</p>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginBottom: 6, minHeight: 60 }}>
                <span style={{
                  fontSize: 55, fontWeight: 800, color: '#EFEFF1', letterSpacing: '-0.03em',
                  fontFamily: 'JetBrains Mono, monospace',
                }}>
                  {price === 0 ? 'Free' : `$${price}`}
                </span>
                {price > 0 && <span style={{ fontSize: 16.25, color: '#ADADB8' }}>{t.period}</span>}
              </div>
              {price > 0 && period === 'annual' && (
                <div style={{
                  fontSize: 13.75, color: '#9146FF', marginBottom: 20,
                  fontFamily: 'JetBrains Mono, monospace',
                }}>
                  was ${t.monthly}/mo · billed yearly
                </div>
              )}
              {(price === 0 || period === 'monthly') && <div style={{ height: price === 0 ? 0 : 22 }} />}
              <ul style={{
                listStyle: 'none', padding: 0, margin: '0 0 28px',
                display: 'flex', flexDirection: 'column', gap: 10, flex: 1,
              }}>
                {t.features.map((f, i) => (
                  <li key={f} style={{
                    display: 'flex', gap: 10, alignItems: 'center',
                    fontSize: 16.25, color: '#EFEFF1',
                  }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: 9999,
                      background: t.featured ? '#9146FF' : '#0E0E10',
                      border: t.featured ? 'none' : '1px solid #2F2F35',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, color: t.featured ? '#fff' : '#00C853', fontSize: 10, fontWeight: 700,
                    }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <Button variant={t.ctaVariant} onClick={() => onNav?.('demo')}>{t.cta}</Button>
              <div style={{ fontSize: 13.75, color: '#6E6E78', textAlign: 'center', marginTop: 12 }}>
                30-day money back guarantee
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
};

window.Pricing = Pricing;