function HowItWorks() {
  return (
    <section className="pad" id="come-funziona" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Come funziona</span>
            <h2 className="h-section">Dal codice alla risposta in tre passi.</h2>
          </div>
          <div className="right">
            Funziona ovunque ci sia un browser. Apri la pagina, accedi una volta e sei operativo per tutto il turno.
          </div>
        </div>

        <div className="how-grid">
          <article className="step">
            <div className="step-num">1</div>
            <h3 className="h-card">Inquadra il barcode</h3>
            <p>Usa la fotocamera del dispositivo o un lettore esterno. Funziona con EAN, codici interni e barcode personalizzati.</p>
            <div className="visual">
              <div className="barcode">
                {[3,5,2,4,3,6,2,3,5,4,3,2,5,3,4,3,2,4,3,5].map((h,i) => (
                  <span key={i} style={{ height: h*8 + 'px', width: (i%3===0?4:2)+'px' }}></span>
                ))}
              </div>
              <div className="scan-line"></div>
            </div>
          </article>

          <article className="step">
            <div className="step-num">2</div>
            <h3 className="h-card">Leggi i dati</h3>
            <p>La schermata si compila in automatico con prezzo, giacenza, descrizione e tutti i campi del gestionale.</p>
            <div className="visual">
              <div className="result-rows">
                <div className="row-item"><span>Prezzo</span><strong>€ 2,49</strong></div>
                <div className="row-item"><span>Giacenza</span><strong>124 pz</strong></div>
                <div className="row-item"><span>Ult. vendita</span><strong>12/05/26</strong></div>
              </div>
            </div>
          </article>

          <article className="step">
            <div className="step-num">3</div>
            <h3 className="h-card">Rispondi al cliente</h3>
            <p>Confermi il prezzo, proponi un'alternativa o avvisi quando il prodotto è in arrivo. Sempre con la stessa sicurezza.</p>
            <div className="visual">
              <div className="decision">
                <span className="chip ok"><Icon.Check size={14}/> Disponibile</span>
                <span className="chip">In arrivo</span>
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;