// Pricing
function Pricing() {
  const [annual, setAnnual] = React.useState(true);
  const m = (a, mo) => annual ? a : mo;

  const plans = [
    {
      name: 'Starter',
      desc: 'Para clínicas privadas que empiezan a digitalizarse.',
      price: m(79, 99),
      cta: 'Empezar prueba',
      featured: false,
      feats: [
        'Hasta 2 profesionales',
        '1 sala de tratamiento',
        'Agenda y pacientes ilimitados',
        'Recordatorios SMS (250/mes)',
        'Facturación electrónica',
        'Soporte por email',
      ],
    },
    {
      name: 'Pro',
      desc: 'Para clínicas en crecimiento. La elección más popular.',
      price: m(189, 229),
      cta: 'Solicitar demo',
      featured: true,
      tag: 'Más popular',
      feats: [
        'Profesionales y salas ilimitados',
        'WhatsApp Business integrado',
        'Firma digital y consentimientos',
        'Visor radiografías DICOM',
        'Integraciones aseguradoras',
        'Reportes avanzados + API',
        'Soporte prioritario · 4h',
      ],
    },
    {
      name: 'Enterprise',
      desc: 'Para grupos multi-sede con necesidades específicas.',
      price: 'A medida',
      cta: 'Hablar con ventas',
      featured: false,
      feats: [
        'Multi-clínica ilimitada',
        'SSO + auditoría avanzada',
        'Customer Success dedicado',
        'SLA 99,99% y onboarding in-situ',
        'Formación continua para tu equipo',
        'Contrato y RGPD a medida',
      ],
    },
  ];

  return (
    <section id="pricing" className="section" style={{background:'linear-gradient(180deg, transparent, rgba(238,242,248,0.5) 50%, transparent)'}}>
      <div className="container">
        <div className="section-head">
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="eyebrow"><span className="dot"/>Precios</div>
          </div>
          <h2>Precio simple. Sin sorpresas.</h2>
          <p>14 días de prueba sin tarjeta. Cancela cuando quieras. Migración de datos incluida en todos los planes.</p>
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="billing-toggle">
              <button className={annual ? 'active' : ''} onClick={() => setAnnual(true)}>
                Anual <span style={{fontSize:10, marginLeft:4, padding:'2px 6px', borderRadius:4, background: annual ? 'rgba(91,227,227,0.3)' : 'rgba(22,165,113,0.15)', color: annual ? '#5BE3E3' : 'var(--green)'}}>−20%</span>
              </button>
              <button className={!annual ? 'active' : ''} onClick={() => setAnnual(false)}>Mensual</button>
            </div>
          </div>
        </div>

        <div className="pricing-grid">
          {plans.map(p => (
            <div className={`price-card ${p.featured?'featured':''}`} key={p.name}>
              {p.tag && <div className="badge-pop">{p.tag}</div>}
              <div className="price-head">
                <h3>{p.name}</h3>
                <p style={{fontSize:14, marginTop:2}}>{p.desc}</p>
              </div>
              <div className="price">
                {typeof p.price === 'number' ? (
                  <>
                    <span style={{fontSize:24, fontWeight:500}}>€</span>
                    {p.price}
                    <span>/mes</span>
                  </>
                ) : (
                  <span style={{fontSize:36, color: p.featured ? '#fff' : 'var(--ink)', fontWeight:600}}>{p.price}</span>
                )}
              </div>
              <ul className="features-list">
                {p.feats.map(f => (
                  <li key={f}><I.CheckSm size={11}/> {f}</li>
                ))}
              </ul>
              <a href="#cta" className={`btn ${p.featured ? 'btn-grad' : 'btn-primary'}`} style={{justifyContent:'center', marginTop:'auto'}}>
                {p.cta} <I.Arrow size={12}/>
              </a>
              {typeof p.price === 'number' && (
                <div style={{fontSize:11, textAlign:'center', color: p.featured ? 'rgba(255,255,255,0.5)' : 'var(--mute-2)'}}>
                  + IVA · facturación {annual ? 'anual' : 'mensual'} · sin permanencia
                </div>
              )}
            </div>
          ))}
        </div>

        <div style={{marginTop:48, padding:'24px 28px', background:'#fff', border:'1px solid var(--line)', borderRadius:18, display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap'}}>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <div style={{width:44, height:44, borderRadius:12, background:'linear-gradient(135deg, rgba(30,91,255,0.1), rgba(20,196,212,0.1))', border:'1px solid rgba(30,91,255,0.15)', display:'grid', placeItems:'center', color:'var(--blue)'}}>
              <I.Shield size={22}/>
            </div>
            <div>
              <div style={{fontSize:15, fontWeight:600}}>Migración gratuita desde tu software actual</div>
              <div style={{fontSize:13, color:'var(--mute)', marginTop:2}}>Importamos pacientes, historial e imágenes de Gesden, Klinikare, Odontonet y otros sistemas.</div>
            </div>
          </div>
          <a href="#cta" className="btn btn-ghost">Solicitar migración <I.Arrow size={12}/></a>
        </div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;