function Hero({ layout, ctaUrl, ctaLabel }) {
  return (
    <section className="hero" data-layout={layout}>
      <div className="container hero-grid">
        <div className="hero-copy">
          <span className="eyebrow">Punto vendita · Web app</span>
          <h1 className="h-display">
            Scansiona il barcode.<br/>
            Conosci subito <span className="underline">prezzo e giacenza</span>.
          </h1>
          <p className="lead">
            Controllo Prezzi è lo strumento web di SMNET per il personale di negozio: leggi un codice a barre con qualsiasi dispositivo e ottieni in un istante prezzo, disponibilità e tutte le informazioni dell'articolo.
          </p>
          <div className="hero-cta">
            <a className="btn btn-primary btn-lg" href={ctaUrl} target="_blank" rel="noopener">
              {ctaLabel} <Icon.Arrow />
            </a>
            <a className="btn btn-ghost btn-lg" href="#programma">Guarda il programma</a>
          </div>
          <div className="hero-meta">
            <div className="item"><span className="dot"></span> Servizio attivo</div>
            <div className="item">Nessuna installazione</div>
            <div className="item">Compatibile iOS · Android · PC</div>
          </div>
        </div>

        {layout !== 'centered' && (
          <div className="hero-mock">
            <div className="mock-frame">
              <div className="mock-bar">
                <span className="light l1"></span>
                <span className="light l2"></span>
                <span className="light l3"></span>
                <div className="url">
                  <span className="lock"></span>
                  controllaprezzi.smnet.it:3000
                </div>
              </div>
              <img className="mock-img" src="assets/screenshot-lettore.jpg" alt="Schermata Controllo Prezzi — Ricerca Articolo" />
            </div>

            <div className="callout c1">
              <div className="icon-pill"><Icon.Barcode size={20}/></div>
              <div>
                <strong>8009684500113</strong>
                <span className="small">Codice riconosciuto</span>
              </div>
            </div>

            <div className="callout c2">
              <div className="icon-pill"><Icon.Tag size={20}/></div>
              <div>
                <strong>€ 2,49 · 124 pz</strong>
                <span className="small">Risposta &lt; 1 sec</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}
window.Hero = Hero;