// Pricing — actual DrVet.app pricing (Starter / Pro / Enterprise) + add-ons
// Source: backend/src/lib/pricing.ts

const Pricing = () => {
  const [yearly, setYearly] = React.useState(false);

  const tiers = [
    {
      code:'STARTER', name:'Starter',
      blurb:'Para clínicas pequeñas que apenas digitalizan.',
      monthly:29, yearlyPrice:278, period:'USD / mes',
      cta:'Empezar gratis 14 días', kind:'ghost',
      features:[
        'Hasta 3 usuarios · 300 pacientes',
        'EMR + agenda + Flowboard del día',
        'Inventario con forecast predictivo',
        'Recetas electrónicas (PDF)',
        'Facturación electrónica (EC, AR)',
        '50 mensajes WhatsApp/mes',
        'Soporte por email',
      ]
    },
    {
      code:'PRO', name:'Pro',
      blurb:'La elección de la mayoría — todo lo necesario para crecer.',
      monthly:79, yearlyPrice:758, period:'USD / mes',
      cta:'Probar 14 días gratis', kind:'primary', highlight:true, tag:'Más elegido',
      features:[
        'Hasta 10 usuarios · 3.000 pacientes',
        'Todo lo de Starter +',
        'AI Scribe SOAP (Gemini) + OCR de labs',
        'Telemedicina · 300 min/mes',
        'Re-engagement automático WhatsApp',
        'Reclamos automáticos a aseguradoras',
        'Portal del tutor (B2C)',
        'Reportes regulatorios exportables',
        '1.000 mensajes WhatsApp/mes · Soporte prioritario',
      ]
    },
    {
      code:'ENTERPRISE', name:'Enterprise',
      blurb:'Cadenas de clínicas y hospitales veterinarios.',
      monthly:199, yearlyPrice:1910, period:'USD / mes',
      cta:'Hablar con ventas', kind:'ghost',
      features:[
        'Usuarios y pacientes ilimitados',
        'Todo lo de Pro +',
        'Multi-sucursal con stock compartido',
        'Visor OHIF DICOM embebido',
        'AI Vision (rayos X · dermatología · citología)',
        'White-label (tu logo + tu dominio)',
        'WhatsApp y telemedicina ilimitados',
        'SLA 99.9% · soporte 24/7 · onboarding asistido',
      ]
    },
  ];

  const addons = [
    { code:'AI_VISION',     n:'AI Vision Pro',          d:'Análisis IA de rayos X, ecografía y citología.', p:39,  for:'PRO' },
    { code:'OHIF_VIEWER',   n:'OHIF DICOM Viewer',      d:'Visor médico profesional para imágenes DICOM.', p:29,  for:'PRO' },
    { code:'MULTI_BRANCH',  n:'Multi-sucursal',         d:'Hasta 5 sedes con stock compartido.',          p:19,  for:'STARTER · PRO' },
    { code:'WHATSAPP_PLUS', n:'WhatsApp Plus',          d:'5.000 mensajes adicionales / mes.',             p:15,  for:'Cualquier plan' },
    { code:'AI_QUOTA_PLUS', n:'AI Quota Plus',          d:'10.000 tokens IA adicionales / mes.',            p:19,  for:'STARTER · PRO' },
    { code:'WHITE_LABEL',   n:'White-label',            d:'Tu marca y tu dominio (clinica.io).',           p:49,  for:'PRO' },
  ];

  const fmt = (n) => n.toLocaleString('es-CL', { maximumFractionDigits: 0 });

  return (
    <section id="precios" style={{ padding:'140px 0', borderBottom:'1px solid var(--line-2)' }}>
      <div className="container">
        <SectionTag num="08" label="Planes" style={{ marginBottom:28 }}/>
        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) minmax(0,1fr)', gap:60, alignItems:'end', marginBottom:48 }} className="p-head">
          <h2 className="serif" style={{
            fontSize:'clamp(36px, 4.5vw, 60px)', lineHeight:1.02,
            letterSpacing:'-0.02em', fontWeight:400, margin:0, textWrap:'balance'
          }}>
            Precio simple,<br/>
            <span style={{ fontStyle:'italic', color:'var(--primary)' }}>como la relación que construyes.</span>
          </h2>
          <div style={{ maxWidth:460 }}>
            <p style={{ fontSize:17, color:'var(--ink-2)', lineHeight:1.55, margin:'0 0 20px' }}>
              14 días gratis. Sin tarjeta. Migración asistida desde tu sistema actual incluida.
            </p>
            {/* Monthly / yearly toggle */}
            <div style={{
              display:'inline-flex', background:'var(--bg-2)', border:'1px solid var(--line)',
              borderRadius:99, padding:3, gap:2
            }}>
              <button onClick={() => setYearly(false)} style={{
                padding:'8px 16px', fontSize:13, borderRadius:99, border:'none',
                background: !yearly ? 'var(--ink)' : 'transparent',
                color: !yearly ? '#FAFAF7' : 'var(--ink-2)', fontWeight:500
              }}>Mensual</button>
              <button onClick={() => setYearly(true)} style={{
                padding:'8px 16px', fontSize:13, borderRadius:99, border:'none',
                background: yearly ? 'var(--ink)' : 'transparent',
                color: yearly ? '#FAFAF7' : 'var(--ink-2)', fontWeight:500,
                display:'flex', alignItems:'center', gap:6
              }}>Anual <span style={{ background:'var(--accent)', color:'var(--ink)', padding:'1px 6px', borderRadius:4, fontSize:10, fontWeight:600 }}>−20%</span></button>
            </div>
          </div>
        </div>

        <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16 }} className="p-grid">
          {tiers.map((t,i) => {
            const monthly = yearly ? Math.round(t.yearlyPrice / 12) : t.monthly;
            const petByTier = [PetArt.hamster, PetArt.dog, PetArt.bird];
            const Pet = petByTier[i];
            return (
              <div key={i} style={{
                background: t.highlight ? 'var(--ink)' : '#fff',
                color: t.highlight ? '#FAFAF7' : 'var(--ink)',
                border: t.highlight ? '1px solid var(--ink)' : '1px solid var(--line)',
                borderRadius:14, padding:'32px 28px',
                position:'relative', display:'flex', flexDirection:'column',
                overflow:'hidden'
              }}>
                {/* Decorative pet in corner */}
                <div aria-hidden style={{
                  position:'absolute', right:-20, bottom:-20, width:140, height:140,
                  color: t.highlight ? 'var(--accent)' : 'var(--primary)',
                  opacity: t.highlight ? 0.08 : 0.05,
                  transform:'rotate(-12deg)', pointerEvents:'none'
                }}>
                  <Pet style={{ width:'100%', height:'100%' }}/>
                </div>
                {t.tag && (
                  <span style={{
                    position:'absolute', top:-12, right:24,
                    background:'var(--accent)', color:'var(--ink)',
                    fontFamily:"'JetBrains Mono', monospace", fontSize:10,
                    textTransform:'uppercase', letterSpacing:'0.1em',
                    padding:'5px 10px', borderRadius:99, fontWeight:600
                  }}>{t.tag}</span>
                )}
                <div style={{ fontSize:14, fontWeight:600, color: t.highlight ? 'var(--accent)' : 'var(--ink-2)' }}>{t.name}</div>
                <div style={{ marginTop:16, display:'flex', alignItems:'baseline', gap:6 }}>
                  <span style={{ fontSize:18, opacity:0.6 }}>$</span>
                  <span className="serif" style={{ fontSize: 56, fontWeight:400, letterSpacing:'-0.025em', lineHeight:1 }}>
                    {fmt(monthly)}
                  </span>
                  <span style={{ fontSize:13, opacity:0.7 }}>{t.period}</span>
                </div>
                {yearly && (
                  <div className="mono" style={{ fontSize:10, color: t.highlight ? 'rgba(250,250,247,0.6)' : 'var(--muted)', marginTop:6, textTransform:'uppercase', letterSpacing:'0.08em' }}>
                    Facturado anual: ${fmt(t.yearlyPrice)} USD
                  </div>
                )}
                <p style={{ fontSize:13.5, lineHeight:1.5, margin:'12px 0 24px', opacity:0.75 }}>{t.blurb}</p>

                <Btn kind={t.kind === 'primary' ? 'accent' : 'light'} size="md" style={{ width:'100%', justifyContent:'center', marginBottom:24 }}>
                  {t.cta}
                </Btn>

                <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
                  {t.features.map((f,j) => (
                    <li key={j} style={{ display:'flex', gap:10, fontSize:13, lineHeight:1.45 }}>
                      <span style={{ color: t.highlight ? 'var(--accent)' : 'var(--ok)', flexShrink:0, marginTop:2 }}>{Ico.check()}</span>
                      <span style={{ opacity: t.highlight ? 0.85 : 1 }}>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        {/* Add-ons */}
        <div style={{ marginTop: 48 }}>
          <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:18 }}>
            <h3 className="serif" style={{ fontSize:28, fontWeight:500, letterSpacing:'-0.01em', margin:0 }}>Add-ons</h3>
            <span style={{ fontSize:13, color:'var(--muted)' }}>contrátalos sobre cualquier plan compatible</span>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:12 }} className="addon-grid">
            {addons.map((a,i) => (
              <div key={i} style={{
                background:'#fff', border:'1px solid var(--line)', borderRadius:10,
                padding:'18px 20px', display:'flex', flexDirection:'column', gap:6
              }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                  <span style={{ fontSize:14, fontWeight:600 }}>{a.n}</span>
                  <span className="serif" style={{ fontSize:22, fontWeight:400, letterSpacing:'-0.01em' }}>+${a.p}<span style={{ fontSize:11, color:'var(--muted)' }}>/mes</span></span>
                </div>
                <p style={{ margin:0, fontSize:12.5, color:'var(--ink-2)', lineHeight:1.45 }}>{a.d}</p>
                <span className="mono" style={{ fontSize:9.5, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'0.08em', marginTop:'auto', paddingTop:6 }}>Disponible: {a.for}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px){
          .p-head { grid-template-columns: 1fr !important; gap:20px !important; }
          .p-grid, .addon-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

window.Pricing = Pricing;