/* Il libro — presentazione, quarta di copertina, scheda. */
/* global React */
const { useState } = React;

function BookHeader() {
  return (
    <section className="book-header-section">
      <div className="container" style={{ maxWidth: 1100 }}>
        <div className="book-header-grid">
          <div>
            <div className="eyebrow accent eyebrow-dot">Il libro · in arrivo</div>
            <h1 className="h1" style={{ marginTop: 22, fontWeight: 700, fontSize: 'clamp(36px, 4.6vw, 60px)', textTransform: 'uppercase', letterSpacing: '-0.02em', lineHeight: 0.98 }}>
              Dalla Focaccia<br/>alla Silicon Valley
            </h1>
            <p className="lede" style={{ marginTop: 20, maxWidth: 520, fontStyle: 'italic' }}>
              L’incoscienza di provarci. Le acrobazie per riuscirci.
            </p>
            <p style={{ marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--chalk-3)' }}>
              Un libro di <span style={{ color: 'var(--chalk)', fontWeight: 600 }}>Vittorio Viarengo</span>
            </p>
          </div>
          <picture>
            <source type="image/webp" srcSet="/assets/book-cover-v7-280.webp 280w, /assets/book-cover-v7-420.webp 420w, /assets/book-cover-v7-560.webp 560w" sizes="(max-width:768px) 240px, 320px" />
            <img className="book-cover" src="/assets/book-cover-v7.jpg?v=4" alt="Copertina di Dalla Focaccia alla Silicon Valley" width="320" height="477" style={{ width: '100%', maxWidth: 320, height: 'auto', display: 'block' }} />
          </picture>
        </div>
      </div>
    </section>
  );
}

// ─── Quarta di copertina — testo verbatim dalla V-finale, ripresa dall'immagine della quarta ───
function Quarta() {
  return (
    <section style={{ background: 'var(--ink-2)', padding: 'clamp(72px, 10vw, 120px) var(--gutter)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-narrow" style={{ maxWidth: 720 }}>
        <div className="eyebrow accent">■ Quarta di copertina</div>
        <div style={{
          marginTop: 40,
          fontFamily: 'var(--font-serif)',
          fontSize: 'clamp(18px, 1.6vw, 21px)',
          lineHeight: 1.65,
          color: 'var(--chalk)',
          fontVariationSettings: '"opsz" 14',
        }}>
          <p style={{ margin: '0 0 26px', fontWeight: 600, fontSize: 'clamp(22px, 2vw, 28px)', lineHeight: 1.3, color: 'var(--chalk)' }}>
            Prima del Nasdaq facevo la focaccia nel forno dei miei genitori, nei vicoli di Genova.
          </p>
          <p style={{ margin: '0 0 22px' }}>
            Non avevo finito né l’università né il conservatorio. Con Minollo aprii una startup in un seminterrato senza riscaldamento né bagno. Giocavamo a fare quelli veri. Poi un’azienda americana decise di comprarci.
          </p>
          <p style={{ margin: '0 0 22px' }}>
            Da lì l’America, tra figli da crescere e traslochi di migliaia di chilometri. Paola aveva lasciato tutto per seguirmi. E quando, più avanti, fui io a voler mollare, fu lei a spronarmi a restare.
          </p>
          <p style={{ margin: '0 0 22px' }}>
            Larry Ellison che mi interrompe alla prima frase con una parolaccia. Milioni sulla carta, svaniti in un niente.
          </p>
          <p style={{ margin: '0 0 22px' }}>
            Mi sono fatto il mazzo, mi sono divertito, ho commesso errori grossi. Una malattia mi ha fatto temere di perdere la capacità di ragionare.
          </p>
          <p style={{ margin: '0 0 8px' }}>
            Mia madre diceva: «Il tempo manca alla fine». Quando ho potuto scegliere tra guadagnare ancora di più e diventare padrone del mio tempo,
          </p>
          <p style={{ margin: 0, fontStyle: 'italic', fontSize: 'clamp(26px, 2.4vw, 34px)', color: 'var(--signal)', fontWeight: 600 }}>
            ho scelto il tempo.
          </p>
        </div>
      </div>
    </section>
  );
}

const SCHEDA = [
  ['Titolo',      'Dalla Focaccia alla Silicon Valley'],
  ['Sottotitolo', 'L’incoscienza di provarci. Le acrobazie per riuscirci'],
  ['Autore',      'Vittorio Viarengo'],
  ['Genere',      'Memoir · autobiografia'],
  ['Lingua',      'Italiano'],
  ['Status',      'Prima edizione, 2026'],
];

function BookScheda() {
  return (
    <section className="book-scheda-section">
      <div className="container-narrow">
        <div className="eyebrow">Scheda libro</div>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 32 }}>
          <tbody>
            {SCHEDA.map(([label, value]) => (
              <tr key={label} style={{ borderTop: '1px solid var(--rule)' }}>
                <td style={{ padding: '14px 24px 14px 0', verticalAlign: 'top', width: '28%',
                  fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
                  letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-muted)',
                  whiteSpace: 'nowrap' }}>{label}</td>
                <td style={{ padding: '14px 0', verticalAlign: 'top',
                  fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.4,
                  color: 'var(--chalk)', letterSpacing: '-0.005em' }}>{value}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function EditionStatus() {
  return (
    <section style={{ background: 'var(--paper-deep)', padding: '96px var(--gutter)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <div className="container-narrow">
        <div className="eyebrow">A che punto siamo</div>
        <h2 className="h2" style={{ marginTop: 14 }}>Prima edizione, 2026.</h2>
        <p className="body-sans" style={{ marginTop: 24, maxWidth: 520 }}>
          Il libro è scritto. Per interviste, richieste stampa o proposte editoriali, scrivimi.
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="mailto:vittorio@gmail.com" className="btn btn-primary">Scrivimi <span className="btn-arrow">→</span></a>
          <a href="estratto.html" className="btn btn-secondary">Leggi un estratto <span className="btn-arrow">→</span></a>
          <a href="index.html#newsletter" className="btn btn-secondary">Avvisami all'uscita</a>
        </div>
      </div>
    </section>
  );
}

function NewsletterBlock() {
  return (
    <section id="newsletter" style={{ background: 'var(--ink-bg)', color: 'var(--paper-on-ink)', padding: '120px var(--gutter)' }}>
      <div className="container-narrow" style={{ textAlign: 'center' }}>
        <div className="eyebrow accent">Newsletter</div>
        <h2 className="h1" style={{ color: 'var(--paper-on-ink)', marginTop: 20, fontSize: 'clamp(32px, 4.4vw, 56px)' }}>
          Avvisami quando il libro esce.
        </h2>
        <p className="lede" style={{ color: 'var(--paper-on-ink-muted)', marginTop: 20, maxWidth: 540, marginInline: 'auto' }}>
          Ti scrivo quando esce il libro, e ogni tanto quando c'è qualcosa che vale.
        </p>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 480 }}>
            <Newsletter source="largoaigiovani_it_libro_footer" inverted cta="Avvisami" />
          </div>
        </div>
      </div>
    </section>
  );
}

function LibroPage() {
  return (
    <Site page="libro">
      <main data-screen-label="libro">
        <BookHeader />
        <Quarta />
        <BookScheda />
        <EditionStatus />
        <NewsletterBlock />
      </main>
    </Site>
  );
}

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