// HowItWorks.jsx — premium 3-step layout with mono numbering and elegant rhythm.
function HowItWorks() {
  const steps = [
    { n: "01", kicker: "Setup", color: "indigo", icon: <Icon.User size={18} />,
      title: "Configura tu tarjeta",
      body: "Rellena tu nombre, foto y texto de presentación. Elige el estilo que mejor encaje contigo.",
      tag: "~ 60 sec" },
    { n: "02", kicker: "Links", color: "fuchsia", icon: <Icon.Link size={18} />,
      title: "Conecta tus enlaces",
      body: "Añade tus redes, portfolio, CV en línea y cualquier link relevante a tu identidad.",
      tag: "20+ integraciones" },
    { n: "03", kicker: "Share", color: "cyan", icon: <Icon.Bluetooth size={18} />,
      title: "Comparte con un gesto",
      body: "Bluetooth, QR o link. La otra persona ve toda tu información al instante sin instalar nada.",
      tag: "0 fricción" },
  ];
  return (
    <section id="how" className="sn-section">
      <div className="sn-section-head">
        <h2 className="sn-h1">¿Cómo funciona<br /><span className="sn-aurora-text">SpiderNet?</span></h2>
        <span className="sn-section-kicker">3 pasos. 0 fricción. 1 sola identidad.</span>
      </div>
      <div className="sn-steps">
        {steps.map((s) => (
          <div key={s.n} className="sn-step">
            <div className="sn-step-head">
              <span className="sn-step-num">{s.n}</span>
              <span className={`sn-step-eyebrow ${s.color}`}>{s.kicker}</span>
            </div>
            <span className={`sn-step-icon ${s.color}`}>{s.icon}</span>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <div className="sn-step-divider-row">
              <span className="sn-step-tag">/ {s.tag}</span>
            </div>
            <div className="sn-step-edge" aria-hidden="true"></div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;