/* Shared components for largoaigiovani.it
   Inter + Fraunces, tokens from colors_and_type.css, classes from site.css.
   Each page mounts <Site page="home|libro|estratto|autore|stampa|eventi"> which renders
   <Nav>, page content, <Footer>.
*/
/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// Home hero headline copies — kept as a dictionary so HeroSplit can pick a key.
const HEADLINES = {
  provocation: {
    display: <>Il talento<br/>non esiste<span className="accent-dot">.</span></>,
    inline: <>Il talento non esiste<span className="accent-dot">.</span></>,
    h1: <>Il talento non esiste.<br/>L'attivazione, sì<span className="accent-dot">.</span></>,
    lede: <>O meglio: non esiste nel modo in cui la maggior parte delle persone lo intende. L'Italia non ha un problema di talento — ha un problema di <em>attivazione</em>.</>,
  },
  thesis: {
    display: <>L'Italia non ha<br/>un problema<br/>di talento<span className="accent-dot">.</span></>,
    inline: <>L'Italia non ha un problema di talento<span className="accent-dot">.</span></>,
    h1: <>L'Italia non ha un problema di talento.<br/>Ha un problema di attivazione<span className="accent-dot">.</span></>,
    lede: <>Ha un problema di <em>attivazione</em>. Un memoir-manifesto di Vittorio Viarengo — trent'anni di Silicon Valley, raccontati per i giovani italiani che non hanno voglia di aspettare il proprio turno.</>,
  },
  title: {
    display: <>Largo<br/>ai Giovani<span className="accent-dot">.</span></>,
    inline: <>Largo ai Giovani<span className="accent-dot">.</span></>,
    h1: <>Largo<br/>ai Giovani<span className="accent-dot">.</span></>,
    lede: <>Lezioni dalla Silicon Valley per i giovani che vogliono farsi valere. Il memoir-manifesto di Vittorio Viarengo — in arrivo.</>,
  },
  subtitle: {
    display: <>Lezioni dalla<br/>Silicon Valley<span className="accent-dot">.</span></>,
    inline: <>Lezioni dalla Silicon Valley<span className="accent-dot">.</span></>,
    h1: <>Lezioni dalla Silicon Valley.<br/>Per chi vuole provarci<span className="accent-dot">.</span></>,
    lede: <>Per i giovani italiani che vogliono farsi valere. Un memoir-manifesto di Vittorio Viarengo — trent'anni dall'altra parte, raccontati senza filtri.</>,
  },
};

// ───── Nav ─────
function Nav({ page }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { id: 'libro', label: 'Il libro', href: 'libro.html' },
    { id: 'estratto', label: 'Estratto', href: 'estratto.html' },
    { id: 'autore', label: "L'autore", href: 'autore.html' },
    { id: 'stampa', label: 'Stampa', href: 'stampa.html' },
  ];
  const PAGE_FILES = { home: 'index.html', libro: 'libro.html', estratto: 'estratto.html', autore: 'autore.html', stampa: 'stampa.html', eventi: 'eventi.html' };
  const enHref = '/en/' + (PAGE_FILES[page] || 'index.html');
  return (
    <nav className="nav" data-screen-label={`nav · ${page}`}>
      <div className="nav-inner">
        <a className="nav-brand" href="index.html">
          <span>Largo ai Giovani</span>
          <span className="nav-brand-mark" />
        </a>
        <div className={'nav-links' + (menuOpen ? ' open' : '')}>
          {links.map(l => (
            <a key={l.id} href={l.href} className={'nav-link' + (page === l.id ? ' active' : '')} onClick={() => setMenuOpen(false)}>{l.label}</a>
          ))}
        </div>
        <button className="nav-hamburger" aria-label="Menu" aria-expanded={menuOpen} onClick={() => setMenuOpen(o => !o)}>
          <span className={'nav-hamburger-icon' + (menuOpen ? ' open' : '')} />
        </button>
        <div className="nav-lang">
          <span className="nav-lang-active">IT</span>
          <span className="nav-lang-sep">·</span>
          <a href={enHref} onClick={() => { try { localStorage.setItem('lag_lang','en'); } catch(e) {} }}>EN</a>
        </div>
        <a className="nav-cta" href="#newsletter" onClick={(e) => {
          const el = document.getElementById('newsletter');
          if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
        }}>Avvisami all'uscita</a>
      </div>
    </nav>
  );
}

// ───── Footer ─────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.022em', lineHeight: 1.08, fontVariationSettings: '"opsz" 144, "SOFT" 25' }}>
              Largo ai Giovani
            </div>
            <div style={{ width: 40, height: 2, background: 'var(--accent)', marginTop: 14 }} />
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 16, lineHeight: 1.5, color: 'var(--paper-on-ink-muted)', marginTop: 18, maxWidth: 320, fontVariationSettings: '"opsz" 60' }}>
              Dal forno di Genova alla Silicon Valley. Storie, incontri e idee per chi vuole farcela sul serio.
            </p>
          </div>
          <div>
            <div className="footer-col-label">Il libro</div>
            <ul className="footer-links">
              <li><a className="footer-link" href="libro.html">Presentazione</a></li>
              <li><a className="footer-link" href="estratto.html">Estratto</a></li>
              <li><a className="footer-link" href="autore.html">L'autore</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-label">Media</div>
            <ul className="footer-links">
              <li><a className="footer-link" href="stampa.html">Rassegna stampa</a></li>
              <li><a className="footer-link" href="eventi.html">Eventi</a></li>
              <li><a className="footer-link" href="en/about.html">English</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-label">Contatti</div>
            <ul className="footer-links">
              <li><a className="footer-link" href="mailto:vittorio@gmail.com">vittorio@gmail.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Vittorio Viarengo</span>
          <div className="footer-social">
            <a className="footer-link" href="https://www.linkedin.com/in/vittorioviarengo/" target="_blank" rel="noopener">LinkedIn ↗</a>
            <a className="footer-link" href="https://vivalafocaccia.com" target="_blank" rel="noopener">VivaLaFocaccia ↗</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ───── Newsletter form (reusable) — REST endpoint to vivalafocaccia.com TNP ─────
function Newsletter({ inverted = false, compact = false, label, cta, note, placeholder, emphasis, source = 'largoaigiovani_homepage' }) {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) {
      setError('Controlla l\'indirizzo email.');
      return;
    }

    setIsLoading(true);
    setError('');

    fetch('https://vivalafocaccia.com/wp-json/vlf-book/v1/subscribe', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email,
        source,
        bot_field: '',
      }),
    })
      .then((r) => r.json().then((data) => ({ ok: r.ok, status: r.status, data })))
      .then(({ ok, status, data }) => {
        setIsLoading(false);
        if (ok) {
          setSent(true);
          // GA4 event
          if (window.gtag) {
            window.gtag('event', 'book_email_signup_largoaigiovani_homepage', {
              email_source: source,
            });
          }
        } else {
          const errorMap = {
            'invalid_email': 'Controlla l\'indirizzo email.',
            'already_subscribed': 'Sei gia\' iscritto. Ti avviso quando il libro esce.',
            'rate_limited': 'Troppi tentativi. Riprova tra un\'ora.',
          };
          const msg = errorMap[data?.code] || 'Qualcosa è andato storto. Riprova.';
          setError(msg);
          // GA4 error event
          if (window.gtag) {
            window.gtag('event', 'book_email_signup_error', {
              error_code: data?.code || 'unknown',
              error_message: msg,
              email_source: source,
            });
          }
        }
      })
      .catch(() => {
        setIsLoading(false);
        setError('Errore di rete. Riprova.');
        if (window.gtag) {
          window.gtag('event', 'book_email_signup_error', {
            error_code: 'network_error',
            email_source: source,
          });
        }
      });
  };

  return (
    <div>
      {label && <div className="eyebrow" style={{ color: inverted ? 'var(--accent)' : 'var(--accent)', marginBottom: 14 }}>{label}</div>}
      {emphasis}
      {!sent ? (
        <form className={'nl-form' + (inverted ? ' on-ink' : '')} onSubmit={submit}>
          <input type="hidden" name="bot-field" value="" style={{ display: 'none' }} />
          <input
            className="nl-input"
            type="email"
            name="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder={placeholder || 'la-tua-email@dominio.it'}
            disabled={isLoading}
          />
          <button type="submit" className="nl-submit" disabled={isLoading}>
            {isLoading ? 'Invio...' : (cta || 'Avvisami')}
          </button>
        </form>
      ) : (
        <div className="nl-success" style={{ color: inverted ? 'var(--accent)' : 'var(--accent)' }}>
          ✓ Fatto. Ci sentiamo quando il libro arriva.
        </div>
      )}
      {error && <div style={{ marginTop: 8, fontSize: 13, color: '#c33' }}>{error}</div>}
      {note && <div className="caption" style={{ marginTop: 14, maxWidth: 440, color: inverted ? 'var(--paper-on-ink-muted)' : 'var(--ink-muted)' }}>{note}</div>}
    </div>
  );
}

// ───── Site shell (wraps a page with nav + footer) ─────
function Site({ page, children }) {
  return (
    <>
      <Nav page={page} />
      {children}
      <Footer />
    </>
  );
}

Object.assign(window, { Site, Nav, Footer, Newsletter, HEADLINES });