/* Home page — newsletter is the hero, book cover secondary. Pre-launch, anticipation mode. */
/* global React */
const { useState, useEffect } = React;

// ───── Hero Newsletter form — REST endpoint to vivalafocaccia.com TNP ─────
function HeroNewsletter() {
  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: 'largoaigiovani_it_home_hero',
        bot_field: '',
      }),
    })
      .then((r) => r.json().then((data) => ({ ok: r.ok, data })))
      .then(({ ok, data }) => {
        setIsLoading(false);
        if (ok) {
          setSent(true);
          if (window.gtag) {
            window.gtag('event', 'book_email_signup', { email_source: 'largoaigiovani_it_home_hero' });
          }
        } 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.',
          };
          setError(errorMap[data?.code] || 'Qualcosa è andato storto. Riprova.');
          if (window.gtag) {
            window.gtag('event', 'book_email_signup_error', { error_code: data?.code || 'unknown', email_source: 'largoaigiovani_it_home_hero' });
          }
        }
      })
      .catch(() => {
        setIsLoading(false);
        setError('Errore di rete. Riprova.');
        if (window.gtag) {
          window.gtag('event', 'book_email_signup_error', { error_code: 'network_error', email_source: 'largoaigiovani_it_home_hero' });
        }
      });
  };

  return sent ? (
    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--signal)', fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
      ✓ FATTO. TI SCRIVO QUANDO IL LIBRO È PRONTO.
    </div>
  ) : (
    <>
      <form className="nl-form" 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="la-tua-email@dominio.it" disabled={isLoading} />
        <button type="submit" className="nl-submit" disabled={isLoading}>{isLoading ? 'Invio...' : 'Avvisami all\'uscita'}</button>
      </form>
      {error && <div style={{ marginTop: 8, fontSize: 13, color: '#c33' }}>{error}</div>}
    </>
  );
}

// ───── HERO A: Split (definitive) — text left, cover right, rotated ─────
function HeroSplit() {
  return (
    <section className="hero-split-section">
      <div className="container" style={{ maxWidth: 1240 }}>
        <div className="hero-split-grid">
          <div>
            <div className="eyebrow accent eyebrow-dot">Memoir-manifesto — In arrivo 2026</div>

            {/* Carl scene — opens the hero with the moment, not the abstract */}
            <blockquote style={{
              margin: '36px 0 0 0',
              fontFamily: 'var(--font-serif)',
              fontStyle: 'italic',
              fontWeight: 400,
              fontSize: 'clamp(28px, 4.6vw, 48px)',
              lineHeight: 1.18,
              letterSpacing: '-0.014em',
              color: 'var(--chalk)',
              fontVariationSettings: '"opsz" 60',
              textWrap: 'balance',
            }}>
              «Se non prendete Carl, non vengo.»<br />
              Non stavo bluffando.
            </blockquote>

            <p style={{
              marginTop: 'clamp(28px, 3vw, 48px)',
              fontFamily: 'var(--font-sans)',
              fontWeight: 400,
              fontSize: 'clamp(15px, 1.4vw, 18px)',
              lineHeight: 1.55,
              letterSpacing: '-0.003em',
              color: 'var(--chalk-3)',
              maxWidth: 540,
              textWrap: 'pretty',
            }}>
              — Seattle, 2001. Carl aveva vent’anni. In Italia, a vent’anni, ti dicono ancora di aspettare.
            </p>

            <p style={{
              marginTop: 36,
              fontFamily: 'var(--font-mono)',
              fontSize: 11,
              letterSpacing: '0.16em',
              textTransform: 'uppercase',
              color: 'var(--chalk-3)',
            }}>
              Un libro di <span style={{ color: 'var(--chalk)', fontWeight: 600 }}>Vittorio Viarengo</span>
            </p>

            <div style={{ marginTop: 44, maxWidth: 480 }} id="hero-newsletter">
              <HeroNewsletter />
              <div className="caption" style={{ marginTop: 16, maxWidth: 440, color: 'var(--chalk-3)', lineHeight: 1.55 }}>
                Una email quando il libro è pronto. Niente altro, zero rumore, firmata da me.
              </div>
            </div>
          </div>

          <div className="hero-split-cover">
            <picture>
              <source
                type="image/webp"
                srcSet="/assets/book-cover-v2-280.webp 280w, /assets/book-cover-v2-420.webp 420w, /assets/book-cover-v2-560.webp 560w, /assets/book-cover-v2-840.webp 840w"
                sizes="(max-width:480px) 280px, (max-width:768px) 420px, 560px"
              />
              <img
                className="book-cover-hero"
                src="/assets/book-cover-v2.jpg?v=2"
                alt="Copertina di Largo ai Giovani — un memoir di Vittorio Viarengo"
                width="420" height="624"
                fetchpriority="high"
                decoding="async"
                style={{ width: '100%', maxWidth: 420, aspectRatio: '2/3', objectFit: 'cover', display: 'block' }}
              />
            </picture>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── HERO B: Typographic — title dominates (alternate) ─────
function HeroTypographic({ headlineKey }) {
  const h = HEADLINES[headlineKey] || HEADLINES.thesis;
  return (
    <section style={{ padding: '80px var(--gutter) 64px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', maxWidth: 1100, margin: '0 auto' }}>
          <div className="eyebrow accent eyebrow-dot">Memoir-manifesto · In arrivo</div>
          <h1 className="display" style={{ marginTop: 32, maxWidth: '16ch' }}>
            {h.display}
          </h1>
          <p className="lede" style={{ marginTop: 36, maxWidth: 640 }}>
            <span style={{ fontStyle: 'normal', fontWeight: 500, color: 'var(--chalk)' }}>Largo ai Giovani</span> — Dal forno di Genova alla Silicon Valley. Storie, incontri e idee per chi vuole farcela sul serio.
          </p>
          <p style={{ marginTop: 14, fontFamily: 'var(--font-sans)', fontSize: 14, letterSpacing: '0.02em', color: 'var(--ink-muted)' }}>
            Un libro di <span style={{ color: 'var(--chalk)', fontWeight: 500 }}>Vittorio Viarengo</span>.
          </p>
          <div style={{ marginTop: 48 }} className="hero-nl-grid">
            <div id="hero-newsletter">
              <Newsletter
                source="largoaigiovani_it_home_hero"
                label="Avvisami quando esce"
                cta="Avvisami all'uscita"
                placeholder="la-tua-email@dominio.it"
                note="Una email quando il libro è pronto. Niente altro, zero rumore, firmata da me."
              />
            </div>
            <div className="caption" style={{ textAlign: 'right', maxWidth: 260, marginLeft: 'auto', lineHeight: 1.6 }}>
              <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 16, color: 'var(--ink-soft)', fontVariationSettings: '"opsz" 14' }}>
                Vittorio Viarengo
              </div>
              <div style={{ marginTop: 4 }}>Genova · Silicon Valley</div>
              <div style={{ marginTop: 4 }}>VMware · Oracle · MobileIron · BEA</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── HERO C: Book-led (legacy compact) — kept for tweak compat ─────
function HeroBookLed({ headlineKey }) {
  const h = HEADLINES[headlineKey] || HEADLINES.thesis;
  return (
    <section className="hero-split-section">
      <div className="container">
        <div className="hero-bookled-grid">
          <div>
            <div className="eyebrow accent eyebrow-dot">Memoir-manifesto · In arrivo</div>
            <h1 className="h1" style={{ marginTop: 28, fontSize: 'clamp(40px, 5.2vw, 72px)', letterSpacing: '-0.026em', fontWeight: 600 }}>
              {h.inline}
            </h1>
            <p className="lede" style={{ marginTop: 24, maxWidth: 520 }}>
              <span style={{ fontStyle: 'normal', fontWeight: 500, color: 'var(--chalk)' }}>Largo ai Giovani</span> — Dal forno di Genova alla Silicon Valley. Storie, incontri e idee per chi vuole farcela sul serio.
            </p>
            <div style={{ marginTop: 36 }} id="hero-newsletter">
              <Newsletter
                source="largoaigiovani_it_home_hero"
                label="Avvisami quando esce"
                cta="Avvisami all'uscita"
                note="Una email quando il libro è pronto. Niente altro, zero rumore, firmata da me."
              />
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <img className="book-cover-hero" src="assets/book-cover-v2.jpg?v=2" alt="Copertina di Largo ai Giovani" style={{ width: '100%', maxWidth: 380, aspectRatio: '2/3', objectFit: 'cover' }} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── THESIS ─────
function Thesis() {
  return (
    <section className="thesis-section">
      <div className="container-narrow">
        <div className="eyebrow accent">■ La tesi</div>
        <p style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 'clamp(32px, 5vw, 72px)',
          lineHeight: 0.98, letterSpacing: '-0.022em',
          textTransform: 'uppercase',
          color: 'var(--chalk)', marginTop: 36, marginBottom: 0,
          textWrap: 'balance',
        }}>
          L'Italia non ha un <span style={{ color: 'var(--signal)' }}>problema di talento.</span> Ha un problema di <span style={{ color: 'var(--signal)' }}>attivazione</span>.
        </p>
        <p style={{
          marginTop: 32, maxWidth: 640,
          fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
          fontSize: 'clamp(20px, 1.8vw, 26px)',
          lineHeight: 1.32, color: 'var(--chalk)', letterSpacing: '-0.008em',
          fontVariationSettings: '"opsz" 60',
          textWrap: 'balance',
        }}>
          La Silicon Valley non è speciale per il talento. È speciale perché lo mette in moto.
        </p>
        <p style={{
          marginTop: 32, maxWidth: 640,
          fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px, 1.3vw, 19px)',
          lineHeight: 1.55, color: 'var(--chalk-2)', letterSpacing: '-0.005em',
        }}>
          Non un memoir. Non un manuale. Trent’anni dentro il sistema che attiva il talento, raccontati senza filtri. Storie, persone, formule che funzionano in Silicon Valley e funzionano dovunque — Italia compresa, per chi ha voglia di provarci.
        </p>
      </div>
    </section>
  );
}

// ───── PULL QUOTES — "Dentro il libro · Quattro momenti" ─────
const MOMENTS = [
  {
    eyebrow: "La lezione dell'olio nella focaccia",
    lines: [
      '"Metti più olio nella focaccia."',
      '"Ma papà, la ricetta non lo dice."',
      '"Stiamo per chiudere per le ferie. Così quando i clienti vanno dalla concorrenza, apprezzano la differenza."',
    ],
    attr: ['Mio padre, nel panificio di Genova'],
  },
  {
    eyebrow: 'L’offerta',
    lines: [
      'Un milione di dollari.',
      'Un milione di dollari.',
      'Il cuore rallenta.',
    ],
    attr: ["Dalla scena dell'acquisizione,", 'Burlington, Massachusetts'],
  },
  {
    eyebrow: 'La condizione',
    lines: [
      '"Se non prendete Carl, non vengo."',
      'Non stavo bluffando.',
    ],
    attr: ['Dal capitolo su Carl Sjogreen, vent\u2019anni,', 'uno dei giovani a cui ho fatto largo'],
  },
  {
    eyebrow: 'Quindici anni dopo',
    lines: [
      'Venticinque schermate. Quaranta minuti.',
      'La voce come unico brief.',
      'Come ChatGPT, vent\u2019anni prima.',
    ],
    attr: ['Dal capitolo su Chris York,', 'il ragazzo che leggeva nell\u2019angolo'],
  },
];

function PullQuotes() {
  return (
    <section className="pullquotes-section">
      <div className="container-narrow">
        {/* Section header — title first, eyebrow underneath per brief */}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, borderBottom: '2px solid var(--chalk)', paddingBottom: 28 }}>
          <h2 style={{
            margin: 0,
            fontFamily: 'var(--font-display)', fontWeight: 700,
            fontSize: 'clamp(36px, 5.2vw, 80px)', lineHeight: 0.94,
            letterSpacing: '-0.02em',
            textTransform: 'uppercase',
            color: 'var(--chalk)',
          }}>
            Dentro il libro
          </h2>
          <div style={{
            fontFamily: 'var(--font-mono)', fontWeight: 600,
            fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--signal)',
          }}>
            ■ Quattro momenti
          </div>
        </div>

        {/* Four moments */}
        <div className="moments-list">
          {MOMENTS.map((m, i) => (
            <figure key={i} className="moment-figure">
              {/* Big numeral */}
              <div className="moment-numeral">
                0{i + 1}
              </div>

              <div>
                {/* Eyebrow */}
                <div style={{
                  fontFamily: 'var(--font-mono)', fontWeight: 500,
                  fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--chalk-3)',
                  paddingBottom: 20,
                  borderBottom: '1px solid var(--ink-4)',
                  marginBottom: 28,
                }}>
                  {m.eyebrow}
                </div>

                {/* Quote */}
                <blockquote style={{
                  margin: 0,
                  fontFamily: 'var(--font-display)', fontWeight: 600,
                  fontSize: 'clamp(24px, 2.8vw, 40px)',
                  lineHeight: 1.1,
                  letterSpacing: '-0.015em',
                  color: 'var(--chalk)',
                  textTransform: 'uppercase',
                  textWrap: 'pretty',
                }}>
                  <span aria-hidden="true" style={{ color: 'var(--signal)', marginRight: '0.08em', fontWeight: 700 }}>«</span>
                  {m.lines.map((line, j) => (
                    <React.Fragment key={j}>
                      {line}
                      {j < m.lines.length - 1 && <br />}
                    </React.Fragment>
                  ))}
                  <span aria-hidden="true" style={{ color: 'var(--signal)', marginLeft: '0.06em', fontWeight: 700 }}>»</span>
                </blockquote>

                {/* Attribution */}
                <figcaption style={{
                  marginTop: 28,
                  fontFamily: 'var(--font-mono)', fontWeight: 500,
                  fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--chalk-3)',
                  lineHeight: 1.7,
                }}>
                  <span style={{ color: 'var(--signal)', marginRight: 10 }}>—</span>
                  {m.attr.map((a, j) => (
                    <React.Fragment key={j}>
                      {a}
                      {j < m.attr.length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </figcaption>
              </div>
            </figure>
          ))}
        </div>

        {/* Continua a leggere */}
        <div style={{ marginTop: 112, textAlign: 'center' }}>
          <a href="estratto.html" style={{
            display: 'inline-block',
            fontFamily: 'var(--font-mono)', fontWeight: 600,
            fontSize: 13,
            letterSpacing: '0.2em',
            textTransform: 'uppercase',
            color: 'var(--chalk)',
            textDecoration: 'none',
            borderBottom: '1px solid var(--signal)',
            paddingBottom: 8,
            transition: 'color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = 'var(--signal)'; }}
          onMouseLeave={e => { e.currentTarget.style.color = ''; }}>
            <span style={{ color: 'var(--signal)', marginRight: 12 }}>→</span>
            Leggi l'estratto dal libro
          </a>
        </div>
      </div>
    </section>
  );
}

// ───── INSIDE — chapter teaser / excerpt promo ─────
function InsideBlock() {
  return (
    <section className="inside-section">
      <div className="container-narrow">
        <div className="inside-grid">
          <div>
            <div className="eyebrow" style={{ color: 'var(--chalk-4)' }}>■ Un assaggio</div>
            <h2 className="h2" style={{ marginTop: 18, color: 'var(--black)' }}>Settembre<br/>2001.</h2>
            <p className="caption" style={{ marginTop: 20, maxWidth: 280, color: 'var(--chalk-4)' }}>
              Un estratto dal libro.
            </p>
            <a href="estratto.html" className="btn" style={{ marginTop: 28, background: 'var(--black)', color: 'var(--chalk)', border: '1px solid var(--black)' }}>
              Leggi l'estratto <span className="btn-arrow">→</span>
            </a>
          </div>
          <div className="inside-text-col">
            <p className="body-serif" style={{ margin: 0, color: 'var(--black)' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '4.4em', lineHeight: 0.82, float: 'left', padding: '0.04em 0.08em 0 0', color: 'var(--signal)' }}>F</span>
              irmai l'offerta il 12 settembre 2001. Il giorno dopo l'11 settembre. Il mondo era appena crollato e io firmavo per iniziare un nuovo lavoro dall'altra parte dell'America. Ma avevo posto una condizione. Carl aveva fatto un'intervista telefonica con BEA ed era andata male — il General Manager mi disse che non lo avrebbero assunto. Risposi: «Se non prendete Carl, non vengo.»
            </p>
            <div style={{ marginTop: 28 }}>
              <a href="estratto.html" style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600, color: 'var(--black)', textDecoration: 'none', borderBottom: '2px solid var(--signal)', paddingBottom: 4 }}>
                Continua a leggere →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── AUTHOR strip ─────
function AuthorStrip() {
  return (
    <section className="author-section">
      <div className="container author-grid">
        <picture>
          <source type="image/webp" srcSet="/assets/author-photo-duotone-220.webp 220w, /assets/author-photo-duotone-380.webp 380w, /assets/author-photo-duotone-440.webp 440w, /assets/author-photo-duotone-560.webp 560w" sizes="(max-width:768px) 280px, 380px" />
          <img src="/assets/author-photo-duotone.jpg" className="img-duotone" alt="Vittorio Viarengo" loading="lazy" decoding="async" width="380" height="475"
               style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: 'center 25%', borderRadius: 2 }} />
        </picture>
        <div>
          <div className="eyebrow accent">■ L'autore</div>
          <h2 className="h2" style={{ marginTop: 18 }}>Vittorio<br/>Viarengo</h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 560 }}>
            Executive italiano della Silicon Valley, partito dal forno di famiglia in centro a Genova. Ha ricoperto ruoli senior in R&D e marketing in Oracle, BEA Systems, VMware, MobileIron, Skyhigh e McAfee. Segue e consiglia giovani imprenditori. Vive in California.
          </p>
          <div style={{ marginTop: 32 }}>
            <a href="autore.html" className="btn btn-secondary">Biografia estesa <span className="btn-arrow">→</span></a>
          </div>
        </div>
        <div className="marquee-wrap" style={{ gridColumn: '1 / -1', marginTop: 48, borderTop: '1px solid var(--ink-4)', borderBottom: '1px solid var(--ink-4)', padding: '16px 0' }}>
          <div className="marquee">
            {['Oracle','BEA Systems','VMware','MobileIron','Skyhigh','McAfee','Oracle','BEA Systems','VMware','MobileIron','Skyhigh','McAfee'].map((c, i) => (
              <span key={i} style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--chalk-2)', fontWeight: 500, letterSpacing: '0.16em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
                {c} <span style={{ color: 'var(--signal)', marginLeft: 40 }}>■</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Big newsletter CTA — signal-red block ─────
function NewsletterBlock() {
  return (
    <section id="newsletter" className="newsletter-cta-section">
      <div className="container-narrow" style={{ textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--chalk)' }}>■ Newsletter</div>
        <h2 className="h1" style={{ color: 'var(--chalk)', marginTop: 24, fontSize: 'clamp(40px, 5.5vw, 84px)', textTransform: 'uppercase' }}>
          Una sola email.<br/>Quando il libro arriva.
        </h2>
        <div style={{ marginTop: 44, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 520 }}>
            <Newsletter source="largoaigiovani_it_home_footer" inverted cta="Avvisami" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── Mount ─────
function Home() {
  return (
    <Site page="home">
      <main data-screen-label="home">
        <HeroSplit headlineKey="thesis" />
        <Thesis />
        <PullQuotes />
        <InsideBlock />
        <AuthorStrip />
        <NewsletterBlock />
      </main>
    </Site>
  );
}

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