PricingCards

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

const PLANS = [
  {
    name: 'Free', monthly: 0, annual: 0, color: '#64748b', highlight: false,
    features: ['50 components/month', 'Basic search', 'React + TSX', 'Community support', null, null],
  },
  {
    name: 'Pro', monthly: 19, annual: 149, color: '#C9A84C', highlight: true,
    features: ['Unlimited components', 'MCP integration', 'All frameworks', 'Priority support', 'API access', 'Early access'],
  },
  {
    name: 'Team', monthly: 49, annual: 390, color: '#6366f1', highlight: false,
    features: ['Everything in Pro', 'Team workspace', '5 seats included', 'Custom components', 'SLA guarantee', 'Dedicated support'],
  },
]

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

  return (
    <div style={{ padding: 40, background: '#080808', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 40 }}>
        <span style={{ color: annual ? 'rgba(255,255,255,0.4)' : '#F5F5F0', fontSize: 14, fontWeight: 500 }}>Monthly</span>
        <button onClick={() => setAnnual(a => !a)} style={{
          width: 48, height: 26, borderRadius: 13, border: 'none', cursor: 'pointer', position: 'relative',
          background: annual ? '#C9A84C' : 'rgba(255,255,255,0.12)', transition: 'background 0.2s',
        }}>
          <span style={{ position: 'absolute', top: 3, left: annual ? 25 : 3, width: 20, height: 20, borderRadius: '50%', background: '#fff', transition: 'left 0.2s' }} />
        </button>
        <span style={{ color: annual ? '#F5F5F0' : 'rgba(255,255,255,0.4)', fontSize: 14, fontWeight: 500 }}>
          Annual <span style={{ color: '#22c55e', fontSize: 12 }}>-35%</span>
        </span>
      </div>

      <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' }}>
        {PLANS.map(plan => (
          <div key={plan.name} style={{
            background: plan.highlight ? 'rgba(201,168,76,0.04)' : '#0F0F0F',
            border: plan.highlight ? '1.5px solid rgba(201,168,76,0.4)' : '1px solid rgba(255,255,255,0.06)',
            borderRadius: 16, padding: 28, width: 240, position: 'relative',
          }}>
            {plan.highlight && <div style={{ position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)', background: '#C9A84C', color: '#0A0A0A', fontSize: 11, fontWeight: 800, padding: '3px 12px', borderRadius: 20, whiteSpace: 'nowrap' }}>MOST POPULAR</div>}
            <div style={{ color: plan.color, fontWeight: 700, fontSize: 14, marginBottom: 8 }}>{plan.name}</div>
            <div style={{ marginBottom: 24 }}>
              <span style={{ color: '#F5F5F0', fontSize: 36, fontWeight: 800 }}>
                {annual && plan.annual > 0 ? `$${plan.annual}` : plan.monthly === 0 ? 'Free' : `$${plan.monthly}`}
              </span>
              {plan.monthly > 0 && <span style={{ color: 'rgba(255,255,255,0.35)', fontSize: 13 }}>{annual ? '/year' : '/month'}</span>}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
              {plan.features.map((f, i) => f ? (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                  <span style={{ color: plan.color }}>✓</span>
                  <span style={{ color: '#F5F5F0' }}>{f}</span>
                </div>
              ) : (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                  <span style={{ color: 'rgba(255,255,255,0.15)' }}>—</span>
                  <span style={{ color: 'rgba(255,255,255,0.2)' }}>Not included</span>
                </div>
              ))}
            </div>
            <button style={{
              width: '100%', background: plan.highlight ? '#C9A84C' : 'rgba(255,255,255,0.06)',
              color: plan.highlight ? '#0A0A0A' : '#F5F5F0', border: plan.highlight ? 'none' : '1px solid rgba(255,255,255,0.1)',
              borderRadius: 8, padding: '11px', cursor: 'pointer', fontWeight: 700, fontSize: 14,
            }}>{plan.monthly === 0 ? 'Get started' : 'Start free trial'}</button>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Pricing cards with monthly/annual toggle, feature comparison, highlighted plan, and CTA buttons