PricingToggle

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

const PLANS = [
  { name:'Free', monthly:0, annual:0, features:['5 projects','1GB storage','Email support'], cta:'Get Started' },
  { name:'Pro', monthly:29, annual:19, features:['Unlimited projects','50GB storage','Priority support','API access'], cta:'Start Free Trial', highlighted:true },
  { name:'Team', monthly:79, annual:59, features:['Everything in Pro','250GB storage','SSO','Audit logs'], cta:'Contact Sales' },
]

export default function PricingToggle() {
  const [annual, setAnnual] = useState(false)
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'center', alignItems:'center', gap:'12px', marginBottom:'28px' }}>
        <span style={{ fontSize:'14px', fontWeight:600, color:annual ? '#94a3b8' : '#1e293b' }}>Monthly</span>
        <div onClick={() => setAnnual(!annual)} style={{
          width:'52px', height:'28px', borderRadius:'14px', background:annual ? '#6d28d9' : '#e2e8f0',
          position:'relative', cursor:'pointer', transition:'background 0.3s',
        }}>
          <div style={{
            position:'absolute', top:'4px', left:annual ? '28px' : '4px',
            width:'20px', height:'20px', borderRadius:'50%', background:'#fff',
            boxShadow:'0 1px 4px rgba(0,0,0,0.2)', transition:'left 0.25s',
          }} />
        </div>
        <span style={{ fontSize:'14px', fontWeight:600, color:annual ? '#1e293b' : '#94a3b8' }}>
          Annual
          <span style={{ marginLeft:'6px', background:'#d1fae5', color:'#065f46', padding:'2px 6px', borderRadius:'9999px', fontSize:'11px', fontWeight:700 }}>Save 35%</span>
        </span>
      </div>
      <div style={{ display:'flex', gap:'16px', flexWrap:'wrap', justifyContent:'center' }}>
        {PLANS.map(plan => (
          <div key={plan.name} style={{
            background:plan.highlighted ? 'linear-gradient(135deg,#6d28d9,#2563eb)' : '#fff',
            color:plan.highlighted ? '#fff' : '#1e293b',
            borderRadius:'16px', padding:'24px 20px', minWidth:'200px', flex:1, maxWidth:'220px',
            boxShadow:plan.highlighted ? '0 8px 30px rgba(109,40,217,0.3)' : '0 2px 12px rgba(0,0,0,0.06)',
            border:plan.highlighted ? 'none' : '1px solid #e2e8f0',
          }}>
            <h3 style={{ margin:'0 0 4px', fontSize:'16px', fontWeight:700 }}>{plan.name}</h3>
            <div style={{ fontSize:'32px', fontWeight:900, marginBottom:'16px' }}>
              {annual ? plan.annual : plan.monthly === 0 ? 'Free' : '$' + plan.monthly}
              {plan.monthly > 0 && <span style={{ fontSize:'13px', fontWeight:400, opacity:0.7 }}>/mo</span>}
            </div>
            <ul style={{ listStyle:'none', margin:'0 0 20px', padding:0, display:'flex', flexDirection:'column', gap:'8px' }}>
              {plan.features.map(f => (
                <li key={f} style={{ fontSize:'13px', opacity:0.9, display:'flex', alignItems:'center', gap:'6px' }}>
                  <span>✓</span>{f}
                </li>
              ))}
            </ul>
            <button style={{
              width:'100%', padding:'10px', borderRadius:'10px', border:'none', fontWeight:700, cursor:'pointer',
              background:plan.highlighted ? '#fff' : '#6d28d9',
              color:plan.highlighted ? '#6d28d9' : '#fff', fontSize:'14px',
            }}>{plan.cta}</button>
          </div>
        ))}
      </div>
    </div>
  )
}

Component info

About

Monthly/annual pricing toggle with savings badge