// Features grid
function Features() {
  const data = [
    { ic: <I.Users size={20}/>, t: 'Gestión de pacientes', d: 'Historial clínico, datos personales y odontograma interactivo en una sola vista.', mini: 'Búsqueda con IA' },
    { ic: <I.Cal size={20}/>, t: 'Agenda inteligente', d: 'Optimización automática de huecos, sala por sala, profesional por profesional.', mini: 'Sugerencias predictivas' },
    { ic: <I.Receipt size={20}/>, t: 'Facturación automática', d: 'Genera facturas, presupuestos y planes de pago al instante. Modelo 347 incluido.', mini: 'SEPA · Bizum · TPV' },
    { ic: <I.Folder size={20}/>, t: 'Historial clínico digital', d: 'Adjunta notas, consentimientos y evolución por pieza dental con un par de clics.', mini: 'Firma digital nativa' },
    { ic: <I.Msg size={20}/>, t: 'WhatsApp & SMS', d: 'Recordatorios automáticos con confirmación 1-clic. Reduce ausencias hasta un 60%.', mini: 'Plantillas en español' },
    { ic: <I.Pen size={20}/>, t: 'Firma digital', d: 'Consentimientos informados y presupuestos firmados desde el móvil del paciente.', mini: 'Validez legal RGPD' },
    { ic: <I.XRay size={20}/>, t: 'Radiografías y archivos', d: 'Visor DICOM nativo, almacenamiento ilimitado y comparativas temporales lado a lado.', mini: 'Compatible con Carestream, Sirona' },
    { ic: <I.Branch size={20}/>, t: 'Multi-clínica', d: 'Gestiona varias sedes con permisos granulares, KPIs comparados y facturación unificada.', mini: 'Hasta 50 sucursales' },
    { ic: <I.Chart size={20}/>, t: 'Reportes y analíticas', d: 'KPIs en tiempo real: ingresos, ocupación, tratamientos rentables y cohortes de pacientes.', mini: 'Export CSV / Excel / API' },
    { ic: <I.Shield size={20}/>, t: 'Aseguradoras integradas', d: 'Sanitas, Adeslas, DKV y más. Envía partes y cobra reembolsos sin salir de la plataforma.', mini: '12 aseguradoras conectadas' },
  ];
  React.useEffect(() => {
    const cards = document.querySelectorAll('.feature');
    const onMove = (e) => {
      const r = e.currentTarget.getBoundingClientRect();
      e.currentTarget.style.setProperty('--mx', `${e.clientX - r.left}px`);
      e.currentTarget.style.setProperty('--my', `${e.clientY - r.top}px`);
    };
    cards.forEach(c => c.addEventListener('mousemove', onMove));
    return () => cards.forEach(c => c.removeEventListener('mousemove', onMove));
  }, []);
  return (
    <section id="features" className="section">
      <div className="container">
        <div className="section-head">
          <div style={{display:'flex', justifyContent:'center'}}><div className="eyebrow"><span className="dot"/>Funcionalidades</div></div>
          <h2>Todo lo que tu clínica necesita.<br/>Nada de lo que no.</h2>
          <p>Diez módulos diseñados con dentistas españoles. Conectados entre sí, listos desde el primer día.</p>
        </div>
        <div className="features-grid">
          {data.map(f => (
            <div className="feature" key={f.t}>
              <div className="ic-wrap">{f.ic}</div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
              <div className="mini"><span style={{width:6, height:6, borderRadius:'50%', background:'var(--teal)'}}/>{f.mini}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Features = Features;