/* =========================================================
   TUTTOCOPERTO — Landing emozionale (long-form copy)
   ========================================================= */

/* ============= NAV ============= */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner container">
        <a href="#" className="brand">
          <span className="brand-mark"></span>
          <span className="brand-name">tuttocoperto</span>
        </a>
        <div className="nav-links">
          <a href="#storia">La storia</a>
          <a href="#cosa-fa">Cosa fa</a>
          <a href="#prezzo">Prezzo</a>
        </div>
        <a href="#prova" className="btn btn-primary">Inizia la prova gratuita</a>
      </div>
    </nav>
  );
}

/* ============= HERO ============= */
function Hero() {
  return (
    <header className="hero">
      <div className="container">
        <div className="hero-meta">
          <span className="kicker">· Software gestionale per ristoranti italiani</span>
        </div>
        <h1 className="hero-title serif">
          Smetti di gestire il tuo ristorante <span className="italic">a occhio</span>
        </h1>
        <p className="hero-lede">
          Il primo gestionale fatto da un cuoco, per i ristoranti che non vogliono più finire la serata con il dubbio che qualcosa non torni.
        </p>
        <div className="hero-cta">
          <a href="#prova" className="btn btn-primary">Inizia la prova gratuita</a>
          <a href="#cosa-fa" className="btn btn-ghost">Scopri come funziona</a>
        </div>
      </div>
    </header>
  );
}

/* ============= I DUBBI ============= */
function Dubbi() {
  const items = [
    "Hai chiamato troppi camerieri e hai buttato soldi.",
    "Ne hai chiamati troppo pochi e la serata è andata in tilt.",
    "Qualcuno ha pagato meno del dovuto — o forse non ha pagato affatto — e non puoi saperlo con certezza.",
    "Un piatto ha spopolato, la cucina si è bloccata, e i clienti aspettavano.",
    "Alla fine hai fatto i conti su carta stropicciata, con il dubbio che qualcosa non tornasse.",
  ];
  return (
    <section className="section dubbi" id="dubbi">
      <div className="container container-narrow">
        <p className="lede serif">
          Gestisci un ristorante e ogni sera finisci con <em>gli stessi dubbi</em>.
        </p>
        <ul className="dubbi-list">
          {items.map((t, i) => (
            <li key={i}>
              <span className="dubbi-num">{String(i+1).padStart(2,'0')}</span>
              <span className="dubbi-text">{t}</span>
            </li>
          ))}
        </ul>
        <p className="dubbi-foot serif italic">
          Se ti riconosci anche in uno solo di questi problemi, siamo qui per te.
        </p>
      </div>
    </section>
  );
}

/* ============= STORIA — Filippo ============= */
function Storia() {
  return (
    <section className="section storia" id="storia">
      <div className="container container-narrow">
        <div className="kicker section-kicker">· La storia</div>
        <h2 className="storia-title serif">
          Filippo Cacace ha iniziato a lavorare<br/>
          in cucina <span className="italic">a 16 anni</span>.
        </h2>

        <figure className="filippo">
          <img src="filippo.png" alt="Filippo Cacace, ideatore di TuttoCoperto, in cucina." />
          <figcaption className="kicker">— Filippo Cacace, ideatore</figcaption>
        </figure>

        <div className="prose">
          <p>
            Da allora ne ha viste di tutti i colori: ristoranti caotici, brigate senza comunicazione, sale che non sapevano cosa stava succedendo ai fornelli e cucine che non sapevano cosa stava arrivando dalla sala.
          </p>
          <p>
            Ha visto soldi buttati in personale chiamato in eccesso. Ha visto serate rovinate da un turno in carenza di personale. Ha visto piatti finiti nel dimenticatoio perché lo scontrino si era perso. Ha visto proprietari andare a casa ogni notte con la sensazione — non la certezza — che i conti tornassero.
          </p>
          <p className="prose-emph serif">
            Dopo anni passati a osservare questo spreco, Filippo ha smesso di lamentarsi e <em>ha costruito la soluzione</em>.
          </p>
        </div>

        <div className="storia-pull">
          <div className="storia-pull-line"></div>
          <p className="serif">Si chiama <span className="italic">TuttoCoperto</span>.</p>
        </div>

        <div className="prose">
          <p>
            Non è un software fatto da chi non ha mai indossato un grembiule. TuttoCoperto nasce dall'interno della ristorazione italiana. Da chi sa cosa vuol dire un colpo di servizio alle 20:30 con tre tavoli che aspettano e un cuoco che non ha ricevuto la comanda.
          </p>
          <p>
            Per questo funziona davvero. Per questo i camerieri la imparano in 10 minuti. Per questo il cuoco non deve fare niente di strano: vede i piatti, li prepara, preme un bottone.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ============= COSA RISOLVE ============= */
function CosaRisolve() {
  const items = [
    {
      t: "Il problema del personale.",
      b: "TuttoCoperto raccoglie ogni giorno i dati del tuo ristorante: quanti coperti, a che ora, quali piatti, quanto tempo ci ha messo la cucina. I nostri modelli di intelligenza artificiale analizzano questi dati e ti dicono — con giorni di anticipo — quali serate saranno piene, quali orari saranno di punta, quante persone ti servono davvero.",
      end: "Finisci di indovinare. Inizi a pianificare.",
    },
    {
      t: "Il problema degli ordini persi.",
      b: "Il cameriere prende l'ordine dal telefono, direttamente al tavolo. In cucina arriva nello stesso istante, su un tablet o anche direttamente sul suo stesso telefono. Niente carta. Niente trascrizioni a mano. Niente \u201Cma io avevo scritto altro\u201D.",
      end: "L'ordine arriva esattamente come è stato inserito, premendo un pulsante.",
    },
    {
      t: "Il problema dei colli di bottiglia.",
      b: "Sai quale piatto sta intasando la cucina? TuttoCoperto sì. Misura i tempi di preparazione di ogni singolo piatto. Quando un piatto rallenta il servizio in modo sistematico, lo vedi nelle statistiche.",
      end: "E puoi intervenire: sul menu, sui turni, sulla preparazione.",
    },
    {
      t: "Il problema dei pagamenti.",
      b: "Ogni tavolo aperto, ogni ordine inviato, ogni chiusura: tutto è tracciato, con orario e cameriere.",
      end: "Non hai più dubbi a fine serata. Hai i numeri.",
    },
  ];

  return (
    <section className="section cosa-fa" id="cosa-fa">
      <div className="container container-narrow">
        <div className="kicker section-kicker">· Cosa risolve TuttoCoperto</div>
        <h2 className="storia-title serif">
          Soluzioni concrete<br/>
          <span className="italic">ai tuoi problemi</span>
        </h2>

        <div className="problemi">
          {items.map((it, i) => (
            <article className="problema" key={i}>
              <div className="problema-num serif italic">{String(i+1).padStart(2, '0')}</div>
              <div className="problema-body">
                <h3 className="serif">{it.t}</h3>
                <p>{it.b}</p>
                <p className="problema-end serif italic">{it.end}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="problemi-foot serif">
          E <span className="italic">molto altro ancora</span>.<br/>
          Il nostro team è sempre a contatto con i ristoratori e fa evolvere il software in base alle <em>tue</em> esigenze.
        </div>
      </div>
    </section>
  );
}

/* ============= I DATI LAVORANO ============= */
function Dati() {
  const items = [
    "Sai quali sono i tuoi 10 piatti più redditizi.",
    "Sai in quale fascia oraria ordini più primi o più secondi.",
    "Sai il tasso di persone che non si presentano dopo aver prenotato.",
    "Sai quando assumere personale extra — e quando no.",
    "Sai dove stai perdendo soldi senza accorgertene.",
  ];
  return (
    <section className="section dati">
      <div className="container container-narrow">
        <div className="kicker section-kicker dati-kicker">· I dati lavorano per te</div>
        <h2 className="storia-title serif">
          Non raccogli dati per raccoglierli.<br/>
          <span className="italic">Diventano il tuo vantaggio competitivo.</span>
        </h2>

        <ul className="dati-list">
          {items.map((t, i) => (
            <li key={i}>
              <span className="dati-mark">→</span>
              <span>{t}</span>
            </li>
          ))}
        </ul>

        <p className="dati-foot serif">
          Il tuo ristorante smette di essere un'impressione.<br/>
          <span className="italic">Diventa un'azienda con i numeri.</span>
        </p>
      </div>
    </section>
  );
}

/* ============= ZERO ATTRITI ============= */
function ZeroAttriti() {
  return (
    <section className="section attriti">
      <div className="container container-narrow">
        <h2 className="attriti-title serif">
          Nessun dispositivo da comprare.<br/>
          Nessun tecnico da chiamare.
        </h2>

        <div className="prose">
          <p>
            TuttoCoperto funziona su qualsiasi smartphone. I tuoi camerieri usano il <em>loro</em> telefono. Il cuoco usa un tablet — qualsiasi tablet. Tu gestisci tutto dal computer, o anche dal telefono.
          </p>
          <p>
            Non devi comprare niente. Non devi installare niente. Non devi aspettare nessun tecnico.
          </p>
        </div>

        <div className="attriti-pull serif">
          In meno di <span className="italic">30 minuti</span> il tuo ristorante è operativo.
        </div>
      </div>
    </section>
  );
}

/* ============= CONTROLLO IN TEMPO REALE ============= */
function Controllo() {
  return (
    <section className="section controllo">
      <div className="container container-narrow">
        <div className="kicker section-kicker controllo-kicker">· Il tuo ristorante in tasca</div>
        <h2 className="storia-title serif">
          Controlli il tuo ristorante <span className="italic">in tempo reale</span>,<br/>
          anche quando non ci sei.
        </h2>

        <div className="prose">
          <p>
            Apri l'app sul telefono e <em>vedi tutto, adesso</em>: quanti tavoli sono occupati, quanti clienti stanno mangiando, quanto hai incassato finora, quali piatti sono in cucina, chi li sta preparando.
          </p>
          <p>
            Grafici e statistiche su <em>clienti, incassi, piatti e dipendenti</em>. Niente più chiamate alla sala per chiedere come sta andando. Niente più sorprese quando torni la mattina dopo. Sai sempre cosa succede nel tuo locale, dal divano di casa o dall'altra parte d'Italia.
          </p>
        </div>

        <div className="controllo-pull serif">
          Sei <span className="italic">sempre</span> nel tuo ristorante.<br/>
          Anche quando non ci sei.
        </div>
      </div>
    </section>
  );
}

/* ============= WHATSAPP ============= */
function WhatsAppReport() {
  return (
    <section className="section whatsapp-section">
      <div className="container container-narrow">
        <div className="kicker section-kicker whatsapp-kicker">· Report su WhatsApp</div>
        <h2 className="storia-title serif">
          Ogni mattina, sul tuo WhatsApp,<br/>
          <span className="italic">l'andamento del tuo ristorante</span>.
        </h2>

        <div className="prose">
          <p>
            Non devi aprire nessun software per sapere com'è andata ieri. Tutti i giorni ricevi un messaggio su WhatsApp con i numeri della giornata: incassi, coperti, piatti più venduti, problemi rilevati.
          </p>
          <p>
            E non solo numeri. <em>Consigli utili</em>, scritti in italiano, generati dai nostri modelli di intelligenza artificiale a partire dai tuoi dati. Tipo: "Ieri il polpo ha rallentato la cucina tre volte sopra i 20 minuti, valuta una preparazione anticipata". O: "Venerdì sera previsto +30% di affluenza, considera un cameriere in più".
          </p>
        </div>

        <div className="wa-bubble">
          <div className="wa-bubble-head">
            <div className="wa-bubble-avatar">tc</div>
            <div>
              <div className="wa-bubble-name">TuttoCoperto</div>
              <div className="wa-bubble-time">oggi, 7:30</div>
            </div>
          </div>
          <div className="wa-bubble-body">
            <p><strong>☕ Buongiorno Giulia.</strong> Ieri:</p>
            <p>· 92 coperti · €2.014 incasso · €21,90 scontrino medio</p>
            <p><strong>📊 Top 3:</strong> tagliatelle al ragù (18), pizza margherita (14), tiramisù (11).</p>
            <p><strong>⚠️ Da sistemare:</strong> il polpo ha sforato i 20' tre volte. Suggerisco prep anticipato.</p>
            <p><strong>🔮 Stasera:</strong> previsti 78 coperti, picco 21:15. Staff sala consigliato: 3.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= PREZZO / PROVA ============= */
function Prezzo() {
  return (
    <section className="section prezzo" id="prezzo">
      <div className="container container-narrow">
        <div className="kicker section-kicker prezzo-kicker">· Provala gratis. Poi decidi.</div>
        <h2 className="prezzo-title serif">
          Non ti chiediamo<br/>
          di <span className="italic">fidarti sulla parola</span>.<br/>
          Ti chiediamo di <span className="italic">provarla</span>.
        </h2>

        <div className="prose">
          <p>
            Attiva la prova gratuita oggi. Nessuna carta di credito. Nessun impegno. Provi, vedi con i tuoi occhi cosa cambia, e poi decidi.
          </p>
        </div>

        <div className="prezzo-card">
          <div className="prezzo-card-head kicker">· Se ti convince</div>
          <div className="prezzo-bigline serif">
            <span className="prezzo-num">1</span><span className="prezzo-currency">€</span>
          </div>
          <div className="prezzo-perline serif italic">al giorno</div>
          <div className="prezzo-foot serif">
            Meno di un caffè per il personale.<br/>
            Meno di un errore su una comanda.<br/>
            <span className="italic">Meno di ore di caos evitabile.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= VOCI ============= */
function Voci() {
  const items = [
    { who: "Il proprietario", what: "Vedi finalmente i numeri del tuo ristorante." },
    { who: "Il cameriere", what: "Niente più corse in cucina, l'ordine va da solo." },
    { who: "Il cuoco", what: "I piatti compaiono ordinati per tavolo: sai sempre cosa preparare prima." },
  ];
  return (
    <section className="section voci">
      <div className="container container-narrow">
        <div className="voci-list">
          {items.map((v, i) => (
            <figure className="voce" key={i}>
              <blockquote className="serif italic">"{v.what}"</blockquote>
              <figcaption className="kicker">— {v.who}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============= FORM ============= */
function Form() {
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  if (sent) {
    return (
      <section className="section form-section" id="prova">
        <div className="container container-narrow">
          <div className="form-success">
            <div className="form-success-mark">✓</div>
            <h2 className="serif">Grazie. <span className="italic">Ti scriviamo entro 24 ore.</span></h2>
            <p>Filippo o qualcuno del team ti contatterà personalmente per attivare la prova nel tuo ristorante.</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section form-section" id="prova">
      <div className="container container-narrow">
        <div className="kicker section-kicker">· Inizia la prova gratuita</div>
        <h2 className="form-title serif">
          Lascia un contatto.<br/>
          <span className="italic">Pensiamo a tutto noi.</span>
        </h2>
        <p className="form-lede">
          Nessuna carta di credito. Nessun impegno. Ti contattiamo entro 24 ore per attivare la prova nel tuo ristorante.
        </p>

        <form className="form" onSubmit={onSubmit}>
          <div className="field">
            <label htmlFor="f-nome">Nome e cognome</label>
            <input id="f-nome" name="nome" type="text" required autoComplete="name" />
          </div>

          <div className="field">
            <label htmlFor="f-ristorante">Nome del ristorante</label>
            <input id="f-ristorante" name="ristorante" type="text" required />
          </div>

          <div className="field-row">
            <div className="field">
              <label htmlFor="f-citta">Città</label>
              <input id="f-citta" name="citta" type="text" required />
            </div>
            <div className="field">
              <label htmlFor="f-coperti">Numero di coperti</label>
              <input id="f-coperti" name="coperti" type="number" min="1" placeholder="es. 40" />
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label htmlFor="f-email">Email</label>
              <input id="f-email" name="email" type="email" required autoComplete="email" />
            </div>
            <div className="field">
              <label htmlFor="f-tel">Telefono</label>
              <input id="f-tel" name="tel" type="tel" required autoComplete="tel" />
            </div>
          </div>

          <div className="field">
            <label htmlFor="f-msg">Vuoi raccontarci qualcosa? <span className="opt">(facoltativo)</span></label>
            <textarea id="f-msg" name="msg" rows="3" placeholder="Quanti camerieri hai? Lavori a turni? Hai già un gestionale?"></textarea>
          </div>

          <label className="check">
            <input type="checkbox" required />
            <span>Acconsento al trattamento dei miei dati per essere ricontattato. Nessuno spam, promesso.</span>
          </label>

          <button className="btn btn-primary btn-lg" type="submit">
            Inizia la prova gratuita →
          </button>

          <p className="form-fine">Gratis · Nessuna carta di credito · Senza impegno</p>
        </form>
      </div>
    </section>
  );
}

/* ============= FAQ ============= */
function FAQ() {
  const items = [
    {
      q: "Devo comprare tablet, telefoni o stampanti?",
      a: "No. TuttoCoperto funziona su qualsiasi smartphone, tablet o computer che hai già. I camerieri usano il loro telefono personale, il cuoco un tablet qualunque, tu il computer o il telefono."
    },
    {
      q: "Quanto ci mette uno staff a imparare a usarlo?",
      a: "10 minuti. È pensato per essere ovvio: il cameriere tocca il piatto, modifica la quantità, preme \"invia\". Il cuoco vede il piatto, lo prepara, preme \"archivia\". Niente menù nascosti, niente passaggi inutili."
    },
    {
      q: "E se internet salta durante il servizio?",
      a: "L'app continua a funzionare in modalità offline e sincronizza tutto appena la connessione torna. Non perdi nessun ordine."
    },
    {
      q: "I miei dati a chi appartengono?",
      a: "A te. Sempre. Puoi esportare in qualsiasi momento tutti i dati del tuo ristorante. Non li vendiamo a nessuno e non li usiamo per scopi diversi da farti funzionare il software."
    },
    {
      q: "Posso provare prima di pagare?",
      a: "Sì. La prova è gratuita, senza carta di credito, senza impegno. Provi nel tuo ristorante reale per il tempo necessario a capire se ti serve. Se ti convince, paghi €1 al giorno. Se non ti convince, smetti."
    },
    {
      q: "Cosa succede se ho più di un ristorante?",
      a: "Ogni ristorante ha il proprio ambiente isolato, con menu, tavoli, statistiche e personale propri. Ma puoi gestirli tutti dallo stesso account, con un'unica vista riassuntiva."
    },
    {
      q: "I report WhatsApp sono inclusi?",
      a: "Sì, sono inclusi nel prezzo. Ricevi report giornalieri, settimanali e mensili. E se succede qualcosa di importante in tempo reale (un piatto che rallenta, un tavolo bloccato), ti arriva un messaggio."
    },
    {
      q: "Chi c'è dietro TuttoCoperto?",
      a: "Filippo Cacace, che ha lavorato in cucina per oltre dieci anni. Più un piccolo team di sviluppatori italiani che lavorano fianco a fianco con i ristoratori. Quando ci scrivi, ti rispondiamo noi."
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section faq-section">
      <div className="container container-narrow">
        <div className="kicker section-kicker">· Domande frequenti</div>
        <h2 className="storia-title serif">
          Le risposte<br/>
          <span className="italic">prima delle domande</span>.
        </h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? 'is-open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="faq-q-text serif">{it.q}</span>
                <span className="faq-q-mark">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="faq-a">
                  <p>{it.a}</p>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============= FOOTER ============= */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-row">
          <div className="footer-brand">
            <span className="brand-mark"></span>
            <span>tuttocoperto</span>
          </div>
          <div className="footer-meta">
            Fatto da chi in cucina ci ha lavorato davvero.
          </div>
        </div>
        <div className="footer-fine">
          © {new Date().getFullYear()} TuttoCoperto · Tutti i diritti riservati
        </div>
      </div>
    </footer>
  );
}