/* Le parole dei primi lettori — pagina dedicata */
/* global React */

// TODO PRE-LAUNCH:
//  - Sandro: verificare la frase con la parola spostata (versione autorizzata da lui)
//  - Leandro: confrontare la citazione con il messaggio originale
//  - Matteo: confermare che «studente» sia il ruolo corretto (età)
const QUOTES = [
  {
    body: 'È una lettera d’amore… e non solo a tuo padre, ma a tutta la tua famiglia.',
    attr: 'Carla, lettrice',
  },
  {
    body: 'Bello e facile da leggere, avvincente; talvolta diverte, altre volte commuove.',
    attr: 'Sandro, lettore',
  },
  {
    body: 'La lettura è coinvolgente e intrattenente, ti fa proprio gasare.',
    attr: 'Matteo, studente',
  },
  {
    body: 'Il mio momento di evasione.',
    attr: 'Danila, lettrice',
  },
  {
    body: 'Hai uno stile particolarissimo, «velocissimo».',
    attr: 'Daniele, lettore',
  },
  {
    body: 'Funziona. La forza è quando racconti senza spiegare.',
    attr: 'Leandro, scrittore',
  },
];

function VociHero() {
  return (
    <section style={{
      padding: 'clamp(96px, 12vw, 160px) var(--gutter) clamp(48px, 6vw, 80px)',
      background: 'var(--ink)',
    }}>
      <div className="container-narrow" style={{ maxWidth: 820 }}>
        <div className="eyebrow accent eyebrow-dot">Voci</div>
        <h1 className="h1" style={{
          marginTop: 22,
          fontWeight: 600,
          fontSize: 'clamp(40px, 5.4vw, 76px)',
          lineHeight: 1.02,
        }}>
          Le parole<br/>dei primi lettori.
        </h1>
        <p className="lede" style={{ marginTop: 28, maxWidth: 620 }}>
          Amici, familiari, persone di cui mi fido. Hanno letto il libro in bozza. Queste sono le cose che mi hanno scritto, o detto, dopo averlo chiuso.
        </p>
      </div>
    </section>
  );
}

function VociList() {
  return (
    <section style={{
      background: 'var(--ink)',
      padding: '0 var(--gutter) clamp(96px, 12vw, 160px)',
    }}>
      <div className="container-narrow" style={{ maxWidth: 820 }}>
        {QUOTES.map((q, i) => (
          <blockquote key={i} style={{
            margin: '0 0 clamp(32px, 4vw, 56px)',
            padding: 'clamp(28px, 3.5vw, 44px)',
            borderLeft: '2px solid var(--signal)',
            background: 'var(--ink-2)',
          }}>
            <p style={{
              margin: 0,
              fontFamily: 'var(--font-serif)',
              fontStyle: 'italic',
              fontSize: 'clamp(19px, 1.9vw, 24px)',
              lineHeight: 1.5,
              color: 'var(--chalk-2)',
            }}>
              «{q.body}»
            </p>
            <footer style={{
              marginTop: 24,
              fontFamily: 'var(--font-mono)',
              fontSize: 12,
              letterSpacing: '0.14em',
              textTransform: 'uppercase',
              color: 'var(--chalk-3)',
            }}>
              — {q.attr}
            </footer>
          </blockquote>
        ))}
      </div>
    </section>
  );
}

function VociFooterNav() {
  return (
    <section style={{
      background: 'var(--ink-2)',
      padding: 'clamp(64px, 8vw, 96px) var(--gutter)',
      borderTop: '1px solid var(--rule)',
      textAlign: 'center',
    }}>
      <div className="container-narrow" style={{ maxWidth: 720 }}>
        <a href="index.html" style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          fontWeight: 600,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--chalk)',
          textDecoration: 'none',
          borderBottom: '1px solid var(--signal)',
          paddingBottom: 4,
          marginRight: 32,
        }}>
          <span style={{ color: 'var(--signal)', marginRight: 10 }}>←</span>
          Torna alla home
        </a>
        <a href="estratto.html" style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 12,
          fontWeight: 500,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--chalk-3)',
          textDecoration: 'none',
        }}>
          Leggi l'apertura →
        </a>
      </div>
    </section>
  );
}

function VociPage() {
  return (
    <Site page="voci">
      <main data-screen-label="voci">
        <VociHero />
        <VociList />
        <VociFooterNav />
      </main>
    </Site>
  );
}

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