// Benefits — visual storytelling cards
function Benefits() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="eyebrow"><span className="dot"/>Beneficios</div>
          </div>
          <h2>Más tiempo para tus pacientes.<br/>Menos tiempo en papeleo.</h2>
          <p>Las clínicas que usan DentiaCloud reducen tareas administrativas hasta un 70% y aumentan facturación un 22% en el primer año.</p>
        </div>

        <div className="benefits-grid">
          {/* Wide card: reduce ausencias */}
          <div className="benefit-card wide">
            <div>
              <div style={{fontSize:12, fontWeight:500, color:'var(--blue)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:14}}>Reduce ausencias</div>
              <h3>−60% no-shows con recordatorios automáticos.</h3>
              <p>Mensajes en WhatsApp y SMS, confirmación con 1 clic, lista de espera inteligente que ocupa huecos cancelados en minutos.</p>
              <div style={{display:'flex', alignItems:'center', gap:14, marginTop:24, fontSize:13, color:'var(--mute)'}}>
                <div style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:6, height:6, borderRadius:'50%', background:'var(--green)'}}/>WhatsApp Business</div>
                <div style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:6, height:6, borderRadius:'50%', background:'var(--blue)'}}/>SMS · 5 países</div>
                <div style={{display:'flex', alignItems:'center', gap:6}}><span style={{width:6, height:6, borderRadius:'50%', background:'var(--teal)'}}/>Email</div>
              </div>
            </div>
            <BenefitVisualReminder/>
          </div>

          {/* Automatiza */}
          <div className="benefit-card">
            <div>
              <div style={{fontSize:12, fontWeight:500, color:'var(--teal)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:14}}>Automatiza tareas</div>
              <h3>Cierra el día en 5 minutos, no en 50.</h3>
              <p>Facturación automática, conciliación bancaria, modelo 347 e informes fiscales generados sin intervención.</p>
            </div>
            <BenefitVisualAutomation/>
          </div>

          {/* Experiencia paciente */}
          <div className="benefit-card">
            <div>
              <div style={{fontSize:12, fontWeight:500, color:'#A05BFF', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:14}}>Experiencia paciente</div>
              <h3>Una experiencia que recomiendan.</h3>
              <p>Portal del paciente, presupuestos online firmables, recordatorios proactivos y NPS automatizado tras cada visita.</p>
            </div>
            <BenefitVisualPatient/>
          </div>

          {/* Centraliza */}
          <div className="benefit-card">
            <div>
              <div style={{fontSize:12, fontWeight:500, color:'var(--green)', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:14}}>Centraliza información</div>
              <h3>Una sola fuente de verdad.</h3>
              <p>Adiós a Excel, papel y carpetas en red. Todo el historial clínico, financiero y operativo en un único lugar.</p>
            </div>
            <BenefitVisualCenter/>
          </div>

          {/* Productividad */}
          <div className="benefit-card">
            <div>
              <div style={{fontSize:12, fontWeight:500, color:'#F4B740', letterSpacing:'0.06em', textTransform:'uppercase', marginBottom:14}}>Productividad</div>
              <h3>+22% ingresos en el primer año.</h3>
              <p>Detecta tratamientos rentables, optimiza la agenda y reduce tiempos muertos. Indicadores en tiempo real para tomar decisiones.</p>
            </div>
            <BenefitVisualProd/>
          </div>
        </div>
      </div>
    </section>
  );
}

function BenefitVisualReminder() {
  return (
    <div style={{position:'relative', height:240, display:'flex', alignItems:'center', justifyContent:'center'}}>
      <div style={{position:'absolute', inset:0, background:'radial-gradient(ellipse 70% 60% at 50% 50%, rgba(45,93,255,0.08), transparent 70%)', borderRadius:16}}/>
      <div style={{position:'relative', display:'flex', flexDirection:'column', gap:8, width:'100%', maxWidth:340}}>
        <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius:12, padding:'12px 14px', boxShadow:'var(--shadow-sm)', display:'flex', gap:10, alignItems:'flex-start'}}>
          <div style={{width:28, height:28, borderRadius:8, background:'linear-gradient(135deg,#25D366,#128C7E)', display:'grid', placeItems:'center', color:'#fff', fontSize:11, fontWeight:600, flexShrink:0}}>WA</div>
          <div>
            <div style={{fontSize:12, fontWeight:600}}>Recordatorio · Clínica Aurora</div>
            <div style={{fontSize:11, color:'var(--mute)', marginTop:3}}>Hola Carla 👋 te recordamos tu cita mañana a las 09:30 con la Dra. Martínez.</div>
            <div style={{display:'flex', gap:6, marginTop:8}}>
              <span style={{fontSize:10, padding:'4px 8px', borderRadius:6, background:'rgba(22,165,113,0.1)', color:'var(--green)', fontWeight:500}}>✓ Confirmar</span>
              <span style={{fontSize:10, padding:'4px 8px', borderRadius:6, background:'rgba(10,22,40,0.05)', color:'var(--mute)', fontWeight:500}}>Cambiar</span>
            </div>
          </div>
        </div>
        <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius:12, padding:'10px 14px', boxShadow:'var(--shadow-sm)', display:'flex', alignItems:'center', gap:10}}>
          <div style={{width:24, height:24, borderRadius:6, background:'rgba(22,165,113,0.12)', display:'grid', placeItems:'center', color:'var(--green)'}}><I.Check size={14}/></div>
          <div>
            <div style={{fontSize:12, fontWeight:500}}>Cita confirmada</div>
            <div style={{fontSize:10, color:'var(--mute-2)'}}>respondió hace 12 min</div>
          </div>
          <div className="mono" style={{marginLeft:'auto', fontSize:10, color:'var(--mute-2)'}}>09:42</div>
        </div>
      </div>
    </div>
  );
}

function BenefitVisualAutomation() {
  const steps = [
    {l:'Cita finalizada', s:'done'},
    {l:'Factura generada', s:'done'},
    {l:'Cobro registrado', s:'done'},
    {l:'Asiento contable', s:'active'},
    {l:'Modelo 347', s:'pending'},
  ];
  return (
    <div style={{position:'relative', display:'flex', flexDirection:'column', gap:8, marginTop:24}}>
      {steps.map((s,i) => (
        <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'10px 14px', background:'#fff', border:'1px solid var(--line)', borderRadius:10}}>
          <div style={{
            width:22, height:22, borderRadius:'50%',
            background: s.s==='done' ? 'linear-gradient(135deg,#16A571,#0FC4C4)' : s.s==='active' ? 'linear-gradient(135deg,#2D5DFF,#14C4D4)' : 'rgba(10,22,40,0.06)',
            color:'#fff', display:'grid', placeItems:'center', flexShrink:0
          }}>
            {s.s==='done' ? <I.CheckSm size={10}/> : s.s==='active' ? <div style={{width:8, height:8, borderRadius:'50%', background:'#fff'}}/> : null}
          </div>
          <div style={{fontSize:13, fontWeight:500, color: s.s==='pending' ? 'var(--mute-2)' : 'var(--ink)', flex:1}}>{s.l}</div>
          {s.s === 'active' && (
            <div style={{fontSize:10, color:'var(--blue)', fontWeight:500, display:'flex', alignItems:'center', gap:4}}>
              <span style={{width:5, height:5, borderRadius:'50%', background:'var(--blue)', boxShadow:'0 0 0 3px rgba(45,93,255,0.2)'}}/>
              procesando…
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function BenefitVisualPatient() {
  return (
    <div style={{position:'relative', marginTop:24, display:'grid', gap:8}}>
      <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius:12, padding:'14px 16px', boxShadow:'var(--shadow-sm)', display:'flex', alignItems:'center', gap:14}}>
        <div style={{width:36, height:36, borderRadius:'50%', background:'linear-gradient(135deg,#A05BFF,#5BE3E3)', display:'grid', placeItems:'center', color:'#fff', fontSize:13, fontWeight:600}}>CR</div>
        <div style={{flex:1}}>
          <div style={{fontSize:13, fontWeight:600}}>Carla Ruiz</div>
          <div style={{fontSize:11, color:'var(--mute)'}}>NPS · tras visita 12 jun</div>
        </div>
        <div style={{display:'flex', gap:3}}>
          {[1,2,3,4,5].map(s => (
            <svg key={s} width="14" height="14" viewBox="0 0 24 24" fill="#F4B740">
              <path d="M12 3l2.5 5.5L20 9.5l-4.2 3.9L17 19l-5-3-5 3 1.2-5.6L4 9.5l5.5-1L12 3Z"/>
            </svg>
          ))}
        </div>
      </div>
      <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius:12, padding:'14px 16px', boxShadow:'var(--shadow-sm)'}}>
        <div style={{fontSize:11, color:'var(--mute-2)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:500, marginBottom:8}}>Presupuesto · firmado online</div>
        <div style={{display:'flex', alignItems:'center', justifyContent:'space-between'}}>
          <div>
            <div style={{fontSize:13, fontWeight:600}}>Ortodoncia Invisible</div>
            <div style={{fontSize:11, color:'var(--mute)'}}>18 meses · plan financiado</div>
          </div>
          <div style={{textAlign:'right'}}>
            <div className="mono" style={{fontSize:16, fontWeight:600}}>€3.200</div>
            <div style={{fontSize:10, color:'var(--green)', display:'inline-flex', alignItems:'center', gap:3}}><I.CheckSm size={9}/>firmado</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BenefitVisualCenter() {
  return (
    <div style={{position:'relative', marginTop:24, height:160}}>
      <div style={{position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)', width:64, height:64, borderRadius:16, background:'linear-gradient(135deg,#2D5DFF,#14C4D4)', display:'grid', placeItems:'center', color:'#fff', boxShadow:'0 12px 32px -10px rgba(45,93,255,0.5)', zIndex:2}}>
        <I.Logo size={24}/>
      </div>
      {[
        {l:'Excel', x:'8%', y:'10%', t:'-20deg'},
        {l:'Papel', x:'82%', y:'10%', t:'12deg'},
        {l:'Email', x:'4%', y:'62%', t:'8deg'},
        {l:'Carpetas', x:'78%', y:'68%', t:'-15deg'},
        {l:'PDF', x:'45%', y:'4%', t:'5deg'},
      ].map((s,i) => (
        <div key={i} style={{position:'absolute', left:s.x, top:s.y, transform:`rotate(${s.t})`, background:'#fff', border:'1px solid var(--line)', borderRadius:8, padding:'6px 10px', fontSize:11, color:'var(--mute)', fontWeight:500, boxShadow:'var(--shadow-sm)'}}>{s.l}</div>
      ))}
      <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', pointerEvents:'none'}}>
        <defs>
          <linearGradient id="conn">
            <stop offset="0%" stopColor="#1E5BFF" stopOpacity="0.3"/>
            <stop offset="100%" stopColor="#1E5BFF" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <g stroke="url(#conn)" strokeWidth="1.5" fill="none" strokeDasharray="3 3">
          <line x1="20%" y1="20%" x2="50%" y2="50%"/>
          <line x1="80%" y1="20%" x2="50%" y2="50%"/>
          <line x1="20%" y1="70%" x2="50%" y2="50%"/>
          <line x1="80%" y1="70%" x2="50%" y2="50%"/>
          <line x1="50%" y1="10%" x2="50%" y2="50%"/>
        </g>
      </svg>
    </div>
  );
}

function BenefitVisualProd() {
  const bars = [42, 48, 52, 56, 64, 68, 78, 86, 92];
  return (
    <div style={{position:'relative', marginTop:24}}>
      <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:14}}>
        <div>
          <div style={{fontSize:11, color:'var(--mute-2)', textTransform:'uppercase', letterSpacing:'0.05em', fontWeight:500}}>Ingresos · cohorte 2025</div>
          <div style={{fontSize:24, fontWeight:600, letterSpacing:'-0.025em', marginTop:4}}>+22,4%</div>
        </div>
        <div style={{fontSize:11, color:'var(--green)', fontWeight:500, padding:'4px 10px', borderRadius:999, background:'rgba(22,165,113,0.1)'}}>↑ vs 2024</div>
      </div>
      <div style={{display:'flex', alignItems:'flex-end', gap:6, height:80}}>
        {bars.map((v,i) => (
          <div key={i} style={{flex:1, height:`${v}%`, borderRadius:'4px 4px 1px 1px', background: i >= bars.length-3 ? 'linear-gradient(180deg, #14C4D4, #2D5DFF)' : 'rgba(45,93,255,0.18)'}}/>
        ))}
      </div>
    </div>
  );
}

window.Benefits = Benefits;