/* Il libro — pre-launch, no buy grid. Jacket blurb + TOC + book physicality. */
/* 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: 600, fontSize: 'clamp(40px, 5.4vw, 76px)' }}>
              Largo ai Giovani<span className="accent-dot">.</span>
            </h1>
            <p className="lede" style={{ marginTop: 24, maxWidth: 520 }}>
              Dal forno di Genova alla Silicon Valley. Storie, incontri e idee per chi vuole farcela sul serio.
            </p>
          </div>
          <img className="book-cover" src="assets/book-cover-v2.jpg?v=2" alt="Copertina di Largo ai Giovani" style={{ width: '100%', maxWidth: 320 }} />
        </div>
      </div>
    </section>
  );
}

const SCHEDA = [
  ['Titolo',      'Largo ai Giovani'],
  ['Sottotitolo', 'Dal forno di Genova alla Silicon Valley. Storie, incontri e idee per chi vuole farcela sul serio.'],
  ['Autore',      'Vittorio Viarengo'],
  ['Genere',      'Memoir · manifesto'],
  ['Estensione',  'Circa 75.000 parole'],
  ['Lingua',      'Italiano'],
  ['Status',      'Manoscritto chiuso · in cerca di editore'],
];

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 }}>Manoscritto chiuso. In cerca di editore.</h2>
        <p className="body-sans" style={{ marginTop: 24, maxWidth: 520 }}>
          Il libro è scritto. Stiamo parlando con editori italiani. Se sei un editore o un agente, scrivimi — trovi il contatto qui sotto.
        </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="#newsletter" className="btn btn-secondary" onClick={(e) => {
            e.preventDefault();
            const anchor = document.createElement('a'); anchor.href = 'index.html#newsletter'; anchor.click();
          }}>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 arriva.
        </h2>
        <p className="lede" style={{ color: 'var(--paper-on-ink-muted)', marginTop: 20, maxWidth: 540, marginInline: 'auto' }}>
          Una email. Firmata. Quando c'è qualcosa di vero da dire.
        </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 />
        <BookScheda />
        <EditionStatus />
        <NewsletterBlock />
      </main>
    </Site>
  );
}

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