// Prezzi — listino prezzi from Ewa's Canva flyer.

const PREZZI = {
  mani: [
    ["Smalto semipermanente mani", 35],
    ["Semipermanente rinforzato", 40],
    ["Copertura in gel misura corta", 45],
    ["Copertura in gel misura media", 50],
    ["Copertura in gel misura lunga", 60],
    ["Refill gel correttivo", 50],
    ["Ricostruzione unghie", 70],
    ["Ricostruzione unghie XL", 85],
    ["Rimozione", 15],
    ["Ricostruzione unghia singola", 5],
  ],
  art: [
    ["Nail art", "5 – 20"],
    ["French", 5],
    ["French a muretto", "10 – 40"],
  ],
  piedi: [
    ["Pedicure", 40],
    ["Pedicure e semipermanente", 60],
    ["Semipermanente piedi", 35],
    ["Ricostruzione alluce", 10],
  ],
};

function PriceCard({ title, kicker, items, featured }) {
  return (
    <div className={"price-card glass liquid reveal" + (featured ? " featured" : "")}>
      <div className="pc-head">
        <span className="eyebrow">{kicker}</span>
        <h3>{title}</h3>
      </div>
      <ul className="pc-list">
        {items.map(([name, price], i) => (
          <li key={i}>
            <span>{name}</span>
            <span className="dotline" aria-hidden></span>
            <b>€{price}</b>
          </li>
        ))}
      </ul>
    </div>
  );
}

function PrezziApp() {
  useReveal();
  return (
    <React.Fragment>
      <Blobs />
      <Nav active="Prezzi" />
      <header className="page-head">
        <div className="shell">
          <div className="reveal" style={{ textAlign: "center" }}>
            <div className="eyebrow">listino</div>
            <h1 className="page-title">I <em className="script">prezzi</em>.</h1>
            <p className="muted page-sub">Tariffe trasparenti, nessuna sorpresa. Servizi extra concordati prima di iniziare.</p>
          </div>
        </div>
      </header>

      <section className="section-sm">
        <div className="shell">
          <div className="prezzi-grid">
            <PriceCard title="Mani"  kicker="cura · ricostruzione" items={PREZZI.mani} featured />
            <PriceCard title="Nail Art" kicker="dettagli & decori" items={PREZZI.art} />
            <PriceCard title="Piedi" kicker="pedicure & spa" items={PREZZI.piedi} />
          </div>

          <div className="prezzi-note reveal">
            <div className="note-icon glass">i</div>
            <div>
              <b>Buono a sapersi</b>
              <p className="muted" style={{ margin: "4px 0 0" }}>
                I prezzi della nail art variano in base alla complessità del decoro.
                Ti faccio sempre un preventivo prima di iniziare. Pagamento in studio in contanti
                o tramite carta.
              </p>
            </div>
          </div>

          <div className="prezzi-cta reveal">
            <div>
              <h2>Pronta a prenotare?</h2>
              <p className="muted">Scegli il servizio, scrivimi e fissiamo l'appuntamento.</p>
            </div>
            <div className="prezzi-cta-actions">
              <a href="galleria.html" className="btn btn-glass">Vedi i lavori</a>
              <a href="contatti.html#prenota" className="btn btn-primary">Prenota appuntamento</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <EwaTweaks />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PrezziApp />);