Nome e cognome*

Nome del locale*

Ruolo*

Città*

Email*

Telefono

N. tavoli

Software gestionale attuale

Come ci hai conosciuto?

Messaggio

</div>

<div className="form-actions span2" style={{ gridColumn: 'span 2' }}>
            <p className="gdpr">Inviando il modulo accetti che i dati siano usati per ricontattarti, secondo la nostra <a href="privacy-policy.html">Privacy Policy</a>.</p>
            <button type="submit" className="btn btn-primary" disabled={status === 'sending'}>
              {status === 'sending' ? 'Invio…' : <>Invia richiesta <Ic.ArrowRight size={17} /></>}
            </button>
          </div>
          {status === 'error' && (
            <p className="form-error span2" role="alert" style={{ gridColumn: 'span 2' }}>
              {error} Puoi anche scriverci a <a href={`mailto:${EMAIL}`}>{EMAIL}</a>.
            </p>
          )}
        </form>
      </div>

<div className="form-success" aria-live="polite">
        <div className="check"><Ic.Check size={28} /></div>
        <h3>Richiesta inviata.</h3>
        <p>Grazie! Abbiamo ricevuto la tua richiesta e ti ricontattiamo a breve.
          Per qualsiasi cosa puoi scriverci direttamente.</p>
        <a className="mailto" href={`mailto:${EMAIL}`}>{EMAIL}</a>
      </div>
    </div>
  );
}

/* ---------- App ---------- */

function App() {
  useReveal();
  const [scrolled, setScrolled] = useState(false);

const [t, setTweak] = useTweaks({
    palette: 'indaco',
    font: 'Schibsted Grotesk',
    glow: 1,
    grain: true,
  });

useEffect(() => {
    const p = PALETTES[t.palette] || PALETTES['viola·magenta'];
    const root = document.documentElement.style;
    root.setProperty('--violet', p.violet);
    root.setProperty('--magenta', p.magenta);
    root.setProperty('--grad-a', p.violet);
    root.setProperty('--grad-b', p.magenta);
    root.setProperty('--glow', p.glow);
    root.setProperty('--bg', p.bg);
    root.setProperty('--panel-2', p.panel);
    root.setProperty('--glow-k', String(t.glow));
    root.setProperty('--font-display', `'${t.font}', system-ui, sans-serif`);
    root.setProperty('--font-body', `'${t.font}', system-ui, sans-serif`);
    document.body.classList.toggle('no-grain', !t.grain);
    document.body.style.background = p.bg;
  }, [t]);

useEffect(() => {
    const fam = t.font.replace(/ /g, '+');
    const id = 'twk-font';
    let l = document.getElementById(id);
    if (!l) { l = document.createElement('link'); l.id = id; l.rel = 'stylesheet'; document.head.appendChild(l); }
    l.href = `https://fonts.googleapis.com/css2?family=${fam}:wght@400;500;600;700;800;900&display=swap`;
  }, [t.font]);

useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

const jumpForm = useCallback(() => {
    const el = document.getElementById('contatti');
    if (!el) return;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const y = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top: y, behavior: reduce ? 'auto' : 'smooth' });
  }, []);

return (
    <>
      <nav className={'topnav' + (scrolled ? ' scrolled' : '')}>
        <div className="wrap nav-inner">
          <a href="index.html" aria-label="pierre — torna alla home"><Wordmark /></a>
          <div className="nav-links">
            <a href="#valore">Valore</a>
            <a href="#faq">FAQ</a>
            <a href="#contatti">Contatti</a>
          </div>
          <div className="nav-cta">
            <a className="back-home" href="index.html">Vedi sito utenti <Ic.ArrowRight size={14} /></a>
            <button className="btn btn-primary" onClick={jumpForm}>Richiedi una demo</button>
          </div>
        </div>
      </nav>

{/* HERO */}
      <header className="hero">
        <div className="wrap hero-center">
          <div className="hero-copy reveal in">
            <span className="eyebrow bright"><Ic.Shield size={14} />Per i locali</span>
            <h1>Il tuo locale,<br /><span className="grad-text">gestito senza caos</span>.</h1>
            <p className="lede">pierre Dashboard sostituisce Excel, WhatsApp e la gestione informale dei PR.
              Tavoli in tempo reale, check-in QR, attribuzioni pulite, analytics — in un unico posto.</p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={jumpForm}>Richiedi una demo <Ic.ArrowRight size={17} /></button>
              <a className="btn btn-outline" href={`mailto:${EMAIL}?subject=${encodeURIComponent('Informazioni pierre per il mio locale')}`}>
                <Ic.Mail size={17} />Scrivici direttamente
              </a>
            </div>
          </div>
        </div>
      </header>

{/* VALORE / FEATURES */}
      <section id="valore" className="sec">
        <div className="wrap">
          <div className="sec-head center reveal">
            <span className="eyebrow"><span className="dot" />Quattro cose, fatte bene</span>
            <h2>Tutto quello che ti serve,<br />niente di ciò che non ti serve.</h2>
            <p className="lede">pierre non sostituisce una persona del tuo staff. Sostituisce gli strumenti scollegati con cui oggi inseguono tavoli, PR e ingressi.</p>
          </div>
          <div className="feats">
            {FEATS.map((f, i) => {
              const I = Ic[f.ic];
              return (
                <div className="feat reveal" key={i} style={{ transitionDelay: (i * 60) + 'ms' }}>
                  <div className="f-ic"><I size={20} /></div>
                  <h3>{f.t}</h3>
                  <p>{f.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

{/* SHOWCASE — la dashboard reale */}
      <section className="sec showcase">
        <div className="wrap">
          <div className="show-row">
            <div className="show-media reveal">
              <div className="show-frame">
                <div className="hcard-bar">
                  <div className="dots"><i /><i /><i /></div>
                  <span className="hcard-url">dashboard.pierre.app</span>
                </div>
                <img src="assets/dash-overview.jpeg" alt="Dashboard pierre — panoramica del locale" />
              </div>
            </div>
            <div className="show-copy reveal">
              <span className="eyebrow"><span className="dot" />La tua serata, in un colpo d’occhio</span>
              <h2>Tutto quello che ti serve sapere, senza aprire dieci schede.</h2>
              <p className="lede">Prenotazioni attive, incassato, prossimo evento e accesso diretto allo scanner QR.
                La dashboard apre dove serve davvero allo staff: cosa sta succedendo, ora.</p>
            </div>
          </div>

<div className="show-row flip">
            <div className="show-media reveal">
              <div className="show-frame">
                <div className="hcard-bar">
                  <div className="dots"><i /><i /><i /></div>
                  <span className="hcard-url">dashboard.pierre.app/disposizioni</span>
                </div>
                <img src="assets/dash-disposizioni.jpeg" alt="Disposizioni con Tour 360° configurato" />
              </div>
            </div>
            <div className="show-copy reveal">
              <span className="eyebrow"><span className="dot" />Disposizioni × Tour 360°</span>
              <h2>Una mappa per ogni serata. Un tour 360° che la racconta.</h2>
              <p className="lede">Ogni disposizione è una configurazione di aree e tavoli — con il tour 360°
                collegato che l’utente esplora dall’app. Cambi serata, cambi mappa, cambi prezzi.
                Lo staff vede una cosa sola; l’utente vede esattamente quella.</p>
            </div>
          </div>
        </div>
      </section>

{/* LOGOS */}
      <section className="logos-wrap">
        <div className="wrap">
          <p className="logos-title">Locali che stiamo onboardando</p>
          <div className="logos reveal">
            {LOGOS.map((n) => (
              <div className="logo" key={n}><i />{n}</div>
            ))}
          </div>
        </div>
      </section>

{/* FAQ */}
      <section id="faq" className="sec">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow"><span className="dot" />FAQ</span>
            <h2>Le domande che ci fate più spesso.</h2>
            <p className="lede">Tutto il resto, vediamolo insieme in demo — bastano 30 minuti per capire se siamo lo strumento giusto per il tuo locale.</p>
          </div>
          <div className="faq-grid">
            {FAQ.map((it, i) => (
              <details className="faq reveal" key={i}>
                <summary>
                  <span>{it.q}</span>
                  <span className="q-ic"><Ic.Plus size={16} /></span>
                </summary>
                <div className="q-body">
                  {it.a.map((p, j) => <p key={j}>{p}</p>)}
                </div>
              </details>
            ))}
          </div>
        </div>
      </section>

{/* FORM */}
      <section id="contatti" className="sec">
        <div className="wrap">
          <div className="sec-head reveal">
            <span className="eyebrow"><span className="dot" />Contatti</span>
            <h2>Mostraci il tuo locale.<br /><span className="grad-text">Ti rispondiamo entro 24h.</span></h2>
            <p className="lede">Compila il modulo: aprirà la tua mail con tutto già pronto, basta inviare. Oppure scrivici direttamente.</p>
          </div>
          <div className="form-wrap">
            <aside className="form-side reveal">
              <div className="promise-card">
                <div className="row">
                  <div className="ic"><Ic.Bolt size={16} /></div>
                  <div><b>30 minuti, no slide</b><small>Demo live sul tuo caso reale: serata tipo, mappa tavoli, PR.</small></div>
                </div>
                <div className="row">
                  <div className="ic"><Ic.Shield size={16} /></div>
                  <div><b>Nessun vincolo</b><small>Nessun lock-in pluriennale. Resti perché funziona.</small></div>
                </div>
                <div className="row">
                  <div className="ic"><Ic.Calendar size={16} /></div>
                  <div><b>Onboarding in pochi giorni</b><small>Importazione tavoli, PR e check-in QR seguita dal nostro team.</small></div>
                </div>
              </div>
              <p className="alt-cta">
                Preferisci la mail diretta? Scrivici a <a href={`mailto:${EMAIL}`}>{EMAIL}</a>.
              </p>
            </aside>
            <Form />
          </div>
        </div>
      </section>

{/* FOOTER */}
      <footer className="bottom">
        <div className="wrap foot-inner">
          <div>
            <Wordmark size={26} />
            <div className="foot-claim">Immergiti nella serata prima di viverla.</div>
          </div>
          <nav className="foot-links" aria-label="Footer">
            <a href="index.html">Home</a>
            <a href={`mailto:${EMAIL}`}>Contatti</a>
            <a href="privacy-policy.html">Privacy</a>
            <a href="termini-e-condizioni.html">Termini</a>
          </nav>
        </div>
        <div className="wrap"><div className="foot-copy">© {new Date().getFullYear()} pierre — la nightlife, finalmente digitale.</div></div>
      </footer>

<TweaksPanel title="Tweaks">
        <TweakSection label="Atmosfera" />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={Object.keys(PALETTES).map((k) => {
            const p = PALETTES[k];
            return [p.violet, p.magenta, p.bg];
          })}
          onChange={(arr) => {
            const key = Object.keys(PALETTES).find((k) => PALETTES[k].violet === arr[0]) || 'viola·magenta';
            setTweak('palette', key);
          }}
        />
        <TweakSlider label="Intensità glow" value={t.glow} min={0} max={1.6} step={0.1}
          onChange={(v) => setTweak('glow', v)} />
        <TweakToggle label="Grain" value={t.grain} onChange={(v) => setTweak('grain', v)} />
        <TweakSection label="Tipografia" />
        <TweakRadio label="Carattere" value={t.font}
          options={['Schibsted Grotesk', 'Space Grotesk', 'Manrope']}
          onChange={(v) => setTweak('font', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);