PricingToggle

'use client'
import { useState } from 'react'

interface Plan {
  name: string
  monthly: number
  annual: number
  features: string[]
  highlight: boolean
  badge?: string
}

const plans: Plan[] = [
  {
    name: 'Free', monthly: 0, annual: 0,
    features: ['60+ components', 'Copy & paste', 'React + Tailwind', 'Community access'],
    highlight: false,
  },
  {
    name: 'Pro', monthly: 19, annual: 149,
    features: ['17,500+ components', 'MCP server access', 'All variants', 'Priority support', '7-day trial'],
    highlight: true, badge: 'Most popular',
  },
  {
    name: 'Lifetime', monthly: 399, annual: 399,
    features: ['Everything in Pro', 'Lifetime access', 'Future libraries', 'Private Discord', 'Roadmap voting'],
    highlight: false, badge: '1000 seats',
  },
]

export default function PricingToggle() {
  const [annual, setAnnual] = useState(false)

  return (
    <div style={{ background: '#0A0A0A', padding: '60px 40px' }}>
      {/* Toggle */}
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16, marginBottom: 48 }}>
        <span style={{ color: annual ? '#555' : '#F5F5F0', fontSize: 14, fontWeight: 500 }}>Monthly</span>
        <button onClick={() => setAnnual(a => !a)} style={{
          width: 48, height: 26, borderRadius: 13, background: annual ? '#C9A84C' : 'rgba(255,255,255,0.1)',
          border: 'none', cursor: 'pointer', position: 'relative', transition: 'background 0.2s',
        }}>
          <div style={{
            width: 20, height: 20, borderRadius: '50%', background: '#fff',
            position: 'absolute', top: 3, transition: 'left 0.2s',
            left: annual ? 25 : 3,
          }} />
        </button>
        <span style={{ color: annual ? '#F5F5F0' : '#555', fontSize: 14, fontWeight: 500 }}>Annual</span>
        {annual && (
          <span style={{ background: 'rgba(34,197,94,0.15)', border: '1px solid rgba(34,197,94,0.3)', color: '#22c55e', fontSize: 12, fontWeight: 700, padding: '3px 10px', borderRadius: 20 }}>
            Save 35%
          </span>
        )}
      </div>

      {/* Plans */}
      <div style={{ display: 'flex', gap: 20, justifyContent: 'center', flexWrap: 'wrap' }}>
        {plans.map(plan => (
          <div key={plan.name} style={{
            background: plan.highlight ? 'rgba(201,168,76,0.06)' : '#111',
            border: `1px solid ${plan.highlight ? 'rgba(201,168,76,0.35)' : 'rgba(255,255,255,0.06)'}`,
            borderRadius: 16, padding: '28px 24px', width: 240, position: 'relative',
          }}>
            {plan.highlight && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 2, background: '#C9A84C', borderRadius: '16px 16px 0 0' }} />}
            {plan.badge && (
              <div style={{ position: 'absolute', top: 12, right: 12, background: plan.highlight ? '#C9A84C' : 'rgba(255,255,255,0.08)', color: plan.highlight ? '#0A0A0A' : '#aaa', fontSize: 10, fontWeight: 700, padding: '3px 8px', borderRadius: 20 }}>
                {plan.badge}
              </div>
            )}
            <div style={{ color: plan.highlight ? '#C9A84C' : '#888', fontSize: 12, fontWeight: 600, marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.06em' }}>{plan.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 2, marginBottom: 4 }}>
              <span style={{ color: '#F5F5F0', fontSize: 36, fontWeight: 900 }}>
                €{annual && plan.name !== 'Lifetime' ? Math.round(plan.annual / 12) : plan.monthly}
              </span>
              {plan.monthly > 0 && plan.name !== 'Lifetime' && <span style={{ color: '#555', fontSize: 13 }}>/mo</span>}
            </div>
            {annual && plan.monthly > 0 && plan.name !== 'Lifetime' && (
              <div style={{ color: '#555', fontSize: 12, marginBottom: 20 }}>Billed €{plan.annual}/yr</div>
            )}
            {(!annual || plan.name === 'Lifetime' || plan.monthly === 0) && <div style={{ marginBottom: 20 }} />}
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {plan.features.map(f => (
                <li key={f} style={{ display: 'flex', gap: 8, color: '#888', fontSize: 13 }}>
                  <span style={{ color: '#C9A84C' }}>✓</span> {f}
                </li>
              ))}
            </ul>
            <button style={{
              width: '100%', padding: '11px', borderRadius: 8, border: 'none', cursor: 'pointer',
              background: plan.highlight ? '#C9A84C' : 'rgba(255,255,255,0.06)',
              color: plan.highlight ? '#0A0A0A' : '#aaa', fontWeight: 600, fontSize: 14,
            }}>{plan.monthly === 0 ? 'Get started' : 'Start trial'}</button>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Animated monthly/annual pricing toggle with savings badge and plan cards