function Stats() {
  const items = [
    { num: "< 1", unit: "sec", label: "Tempo di risposta per articolo" },
    { num: "100", unit: "%", label: "Compatibile con qualsiasi browser" },
    { num: "0", unit: "€", label: "Hardware aggiuntivo richiesto" },
    { num: "24", unit: "/7", label: "Sempre disponibile" },
  ];
  return (
    <section className="stats">
      <div className="container row">
        {items.map((s, i) => (
          <div className="stat" key={i}>
            <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
            <div className="label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Features() {
  const items = [
    {
      icon: <Icon.Tag size={26}/>,
      eyebrow: "01 — Prezzo",
      title: "Prezzo aggiornato, sempre.",
      body: "Leggi il barcode e visualizza immediatamente il prezzo di vendita corrente. Niente più dubbi davanti al cliente, niente più rincorse alla cassa.",
      demo: { k: "Prezzo banco", v: "€ 2,49", cls: "" },
    },
    {
      icon: <Icon.Box size={26}/>,
      eyebrow: "02 — Giacenza",
      title: "Disponibilità in tempo reale.",
      body: "Controlla quanti pezzi ci sono a magazzino e nei punti vendita collegati. Decidi al volo se proporre alternative o ordinare il riassortimento.",
      demo: { k: "Giacenza", v: "124 pz", cls: "green" },
    },
    {
      icon: <Icon.Info size={26}/>,
      eyebrow: "03 — Informazioni",
      title: "Tutti i dati dell'articolo.",
      body: "Codice articolo, descrizione, unità di misura, ultimo acquisto, ultima vendita. Tutto quello che serve per rispondere a qualsiasi domanda del cliente.",
      demo: { k: "Ult. vendita", v: "12/05/26", cls: "warn" },
    },
  ];
  return (
    <section className="pad" id="cosa-fa">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Cosa fa</span>
            <h2 className="h-section">Una scansione. Tre risposte essenziali.</h2>
          </div>
          <div className="right">
            Controllo Prezzi trasforma il telefono o il tablet di chi lavora in negozio in un terminale di consultazione completo, collegato al gestionale.
          </div>
        </div>
        <div className="features-grid">
          {items.map((f, i) => (
            <article className="feature-card" key={i}>
              <span className="num">{f.eyebrow}</span>
              <div className="icon-tile">{f.icon}</div>
              <h3 className="h-card">{f.title}</h3>
              <p>{f.body}</p>
              <div className="demo">
                <span>{f.demo.k}</span>
                <span className={"val " + f.demo.cls}>{f.demo.v}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Stats = Stats;
window.Features = Features;