// Bricklet — Cómo funciona (3 pasos)
function HowItWorks() {
  const steps = [
    {
      icon: <IconUpload size={22}/>, n: '01',
      t: 'Sube una foto',
      d: 'Un selfie, tu mascota, un atardecer, un dibujo. JPG o PNG, mínimo 800×800. Gratis y sin registro para la vista previa.'
    },
    {
      icon: <IconSparkles size={22}/>, n: '02',
      t: 'Mira el mosaico',
      d: 'Mapeamos tu foto a 18 colores de pieza y montamos la vista previa delante de ti. Ajusta tamaño y paleta en tiempo real.'
    },
    {
      icon: <IconTruck size={22}/>, n: '03',
      t: 'Quédatelo para siempre',
      d: 'Descarga gratis la versión digital, o pídenos el mosaico real — 4.200 piezas, enmarcado, en tu casa en 5 días laborables.'
    },
  ];
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Cómo funciona</span>
          <h2>Tres pasos. <em>Un recuerdo.</em></h2>
          <p className="lede">
            Sin diseño, sin software, sin esperas. El proceso entero te lleva más o menos lo mismo
            que tardaste en encontrar esa foto buena.
          </p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={i} className="step reveal">
              <div className="step-icon">{s.icon}</div>
              <div className="step-num">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;