function Pricing() {
  const [cycle, setCycle] = React.useState('yearly');
  const [mode, setMode] = React.useState('consumer');

  const plans = {
    consumer: {
      monthly: [
        { name: 'Starter', price: 9, desc: 'For anyone starting their CoPilot journey.', feats: ['LifeCoPilot AI access', 'Daily signal insights', 'Basic biometrics tracking', 'Mobile + web'] },
        { name: 'Signature', price: 29, desc: 'The full ambient experience with wearable hardware.', feats: ['Everything in Starter', 'Veiron wearable included', 'Unlimited signal processing', 'Priority CoPilot responses', 'Sleep + recovery coaching'] },
        { name: 'Horizon', price: 59, desc: 'For those who live at the frontier of self-knowledge.', feats: ['Everything in Signature', 'Forge Creator seat', 'Early-access model weights', 'Private GPU allocation', 'Dedicated concierge'] },
      ],
      yearly: [
        { name: 'Starter', price: 7, desc: 'For anyone starting their CoPilot journey.', feats: ['LifeCoPilot AI access', 'Daily signal insights', 'Basic biometrics tracking', 'Mobile + web'] },
        { name: 'Signature', price: 23, desc: 'The full ambient experience with wearable hardware.', feats: ['Everything in Starter', 'Veiron wearable included', 'Unlimited signal processing', 'Priority CoPilot responses', 'Sleep + recovery coaching'] },
        { name: 'Horizon', price: 47, desc: 'For those who live at the frontier of self-knowledge.', feats: ['Everything in Signature', 'Forge Creator seat', 'Early-access model weights', 'Private GPU allocation', 'Dedicated concierge'] },
      ]
    },
    business: {
      monthly: [
        { name: 'Team', price: 49, desc: 'Deploy CoPilot across a small team.', feats: ['Up to 10 seats', 'Shared Forge workspace', 'Team analytics', 'Admin console'] },
        { name: 'Studio', price: 149, desc: 'For studios building on the Veiron stack.', feats: ['Up to 50 seats', 'Dedicated GPU capacity', 'Fine-tune Cortex', 'Webhook + API access', 'SLA support'] },
        { name: 'Enterprise', price: null, desc: 'Custom architecture for companies at scale.', feats: ['Unlimited seats', 'Private Cortex deployment', 'On-prem + hybrid options', 'Dedicated solutions team', 'Custom SLA'] },
      ],
      yearly: [
        { name: 'Team', price: 39, desc: 'Deploy CoPilot across a small team.', feats: ['Up to 10 seats', 'Shared Forge workspace', 'Team analytics', 'Admin console'] },
        { name: 'Studio', price: 119, desc: 'For studios building on the Veiron stack.', feats: ['Up to 50 seats', 'Dedicated GPU capacity', 'Fine-tune Cortex', 'Webhook + API access', 'SLA support'] },
        { name: 'Enterprise', price: null, desc: 'Custom architecture for companies at scale.', feats: ['Unlimited seats', 'Private Cortex deployment', 'On-prem + hybrid options', 'Dedicated solutions team', 'Custom SLA'] },
      ]
    }
  };

  const current = plans[mode][cycle];

  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head reveal">
          <div className="eyebrow">05 / Pricing</div>
          <div>
            <h2 className="section-title">One smart plan.<br/>Unlimited <em>possibilities</em>.</h2>
          </div>
        </div>
        <div className="reveal" style={{display:'flex', gap:16, alignItems:'center', marginBottom:8, flexWrap:'wrap'}}>
          <div className="price-toggle">
            <button className={mode === 'consumer' ? 'active' : ''} onClick={() => setMode('consumer')}>Consumer</button>
            <button className={mode === 'business' ? 'active' : ''} onClick={() => setMode('business')}>Business</button>
          </div>
          <div className="price-toggle">
            <button className={cycle === 'monthly' ? 'active' : ''} onClick={() => setCycle('monthly')}>Monthly</button>
            <button className={cycle === 'yearly' ? 'active' : ''} onClick={() => setCycle('yearly')}>
              Yearly <span style={{opacity:0.6, fontSize:10, marginLeft:4}}>SAVE 20%</span>
            </button>
          </div>
        </div>
        <div className="price-grid reveal">
          {current.map((p, i) => (
            <div key={p.name} className={`price-card${i === 1 ? ' featured' : ''}`}>
              <div className="price-tier">{p.name}</div>
              <div className="price-amount">
                {p.price === null ? (
                  <span className="big">Custom</span>
                ) : (
                  <>
                    <span className="big">${p.price}</span>
                    <span className="cycle">/ month</span>
                  </>
                )}
              </div>
              <div className="price-desc">{p.desc}</div>
              <ul className="price-feats">
                {p.feats.map(f => <li key={f}>{f}</li>)}
              </ul>
              <a className="price-cta" href="#cta">{p.price === null ? 'Contact sales' : 'Get started'} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;