/* Shared EN components for largoaigiovani.it/en/
   Same architecture as ../site.jsx but English nav/footer + IT lang toggle.
*/
/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

const HEADLINES_EN = {
  thesis: {
    display: <>Italy has<br/>no talent<br/>problem<span className="accent-dot">.</span></>,
    inline: <>Italy has no talent problem<span className="accent-dot">.</span></>,
    h1: <>Italy has no talent problem.<br/>It has an activation problem<span className="accent-dot">.</span></>,
    lede: <>It has an <em>activation</em> problem. A memoir-manifesto by Vittorio Viarengo — thirty years of Silicon Valley, told for young Italians who don't want to wait their turn.</>,
  },
  provocation: {
    display: <>Talent<br/>doesn't<br/>exist<span className="accent-dot">.</span></>,
    inline: <>Talent doesn't exist<span className="accent-dot">.</span></>,
    h1: <>Talent doesn't exist.<br/>Activation does<span className="accent-dot">.</span></>,
    lede: <>Or rather: not in the way most people think. Italy doesn't have a talent problem — it has an <em>activation</em> problem.</>,
  },
  title: {
    display: <>The Baker's Son<br/>in Silicon Valley<span className="accent-dot">.</span></>,
    inline: <>The Baker's Son in Silicon Valley<span className="accent-dot">.</span></>,
    h1: <>The Baker's Son<br/>in Silicon Valley<span className="accent-dot">.</span></>,
    lede: <>Why the Valley activates talent — and most places don't. The memoir-manifesto by Vittorio Viarengo — coming soon.</>,
  },
  subtitle: {
    display: <>Why the Valley<br/>activates talent<span className="accent-dot">.</span></>,
    inline: <>Why the Valley activates talent — and most places don't<span className="accent-dot">.</span></>,
    h1: <>Why the Valley activates talent —<br/>and most places don't<span className="accent-dot">.</span></>,
    lede: <>For young Italians who want to make their mark. A memoir-manifesto by Vittorio Viarengo — thirty years on the other side, told without filters.</>,
  },
};

function Nav({ page }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { id: 'libro', label: 'The Book', href: 'libro.html' },
    { id: 'estratto', label: 'Excerpt', href: 'estratto.html' },
    { id: 'autore', label: 'The Author', href: 'autore.html' },
    { id: 'stampa', label: 'Press', 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 itHref = '/' + (PAGE_FILES[page] || 'index.html');
  return (
    <nav className="nav" data-screen-label={`nav-en · ${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">
          <a href={itHref} onClick={() => { try { localStorage.setItem('lag_lang','it'); } catch(e) {} }}>IT</a>
          <span className="nav-lang-sep">·</span>
          <span className="nav-lang-active">EN</span>
        </div>
        <a className="nav-cta" href="#newsletter" onClick={(e) => {
          const el = document.getElementById('newsletter');
          if (el) { e.preventDefault(); el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
        }}>Notify me at launch</a>
      </div>
    </nav>
  );
}

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' }}>
              Why the Valley activates talent — and most places don't.
            </p>
          </div>
          <div>
            <div className="footer-col-label">The Book</div>
            <ul className="footer-links">
              <li><a className="footer-link" href="libro.html">The Book</a></li>
              <li><a className="footer-link" href="estratto.html">Excerpt</a></li>
              <li><a className="footer-link" href="autore.html">The Author</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-label">Media</div>
            <ul className="footer-links">
              <li><a className="footer-link" href="stampa.html">Press Kit</a></li>
              <li><a className="footer-link" href="eventi.html">Events</a></li>
              <li><a className="footer-link" href="/">Italiano</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-label">Contact</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>
  );
}

function Newsletter({ inverted = false, compact = false, label, cta, note, placeholder, emphasis }) {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    const body = new URLSearchParams({ 'form-name': 'notify', email, 'bot-field': '' }).toString();
    fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body })
      .then((r) => { if (r.ok) setSent(true); else setError('Submission error, please try again.'); })
      .catch(() => setError('Network error, please try again.'));
  };
  return (
    <div>
      {label && <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>{label}</div>}
      {emphasis}
      {!sent ? (
        <form className={'nl-form' + (inverted ? ' on-ink' : '')} name="notify" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={submit}>
          <input type="hidden" name="form-name" value="notify" />
          <input type="hidden" name="bot-field" />
          <input className="nl-input" type="email" name="email" required value={email} onChange={(e) => setEmail(e.target.value)} placeholder={placeholder || 'your-email@domain.com'} />
          <button type="submit" className="nl-submit">{cta || 'Notify me'}</button>
        </form>
      ) : (
        <div className="nl-success" style={{ color: inverted ? 'var(--accent)' : 'var(--accent)' }}>
          ✓ Done. I'll write when the book is ready.
        </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>
  );
}

function Site({ page, children }) {
  return (
    <>
      <Nav page={page} />
      {children}
      <Footer />
    </>
  );
}

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