// Features.jsx — refined feature grid with monochrome icon treatment.
function Features() {
  const items = [
    { icon: <Icon.Bluetooth />, color: "indigo",  title: "Proximidad por Bluetooth", body: "Detecta a quien tienes cerca y comparte tu tarjeta sin sacar el móvil del bolsillo." },
    { icon: <Icon.QR />,        color: "fuchsia", title: "QR instantáneo",            body: "Genera un QR único que abre tu perfil sin app, sin login, sin fricción." },
    { icon: <Icon.Link />,      color: "cyan",    title: "Link compartible",          body: "Tu URL personal vive en tu bio, en WhatsApp, en cualquier sitio. Edítala una vez y se actualiza en todas partes." },
    { icon: <Icon.Radar />,     color: "indigo",  title: "Radar en eventos",          body: "Visualiza quién está cerca en una conferencia o meetup. Conecta antes de cruzar la sala." },
    { icon: <Icon.Shield />,    color: "fuchsia", title: "Privacidad por defecto",    body: "Tú eliges qué mostrar y a quién. Cambia, revoca y oculta cuando quieras." },
    { icon: <Icon.Sparkle />,   color: "cyan",    title: "Multi-tarjeta",             body: "Una para trabajo, otra para personal. Cambia entre identidades con un toque." },
  ];
  return (
    <section id="features" className="sn-section">
      <div className="sn-section-head">
        <h2 className="sn-h1">Todo lo que necesitas<br /><span className="sn-aurora-text">para conectar</span></h2>
        <span className="sn-section-kicker">Una sola app. Cero fricción.</span>
      </div>
      <div className="sn-features-grid">
        {items.map((it, i) => (
          <div key={i} className="sn-feature">
            <span className={`sn-feature-icon ${it.color}`}>{it.icon}</span>
            <h3>{it.title}</h3>
            <p>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Features = Features;