/* The Book EN */
/* 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">The Book · coming soon</div>
            <h1 className="h1" style={{ marginTop: 22, fontWeight: 600, fontSize: 'clamp(40px, 5.4vw, 76px)' }}>
              The Baker's Son in Silicon Valley<span className="accent-dot">.</span>
            </h1>
            <p className="lede" style={{ marginTop: 24, maxWidth: 520 }}>
              Why the Valley activates talent — and most places don't.
            </p>
            <p className="caption" style={{ marginTop: 12, color: 'var(--ink-muted)', fontStyle: 'italic' }}>English edition forthcoming.</p>
          </div>
          <img className="book-cover" src="../assets/book-cover-v2.jpg?v=2" alt="Cover of Largo ai Giovani" style={{ width: '100%', maxWidth: 320 }} />
        </div>
      </div>
    </section>
  );
}

const SCHEDA_EN = [
  ['Title',     'The Baker\'s Son in Silicon Valley'],
  ['Subtitle',  'Why the Valley activates talent — and most places don\'t.'],
  ['Author',    'Vittorio Viarengo'],
  ['Genre',     'Memoir · manifesto'],
  ['Length',    'Approx. 75,000 words'],
  ['Language',  'Italian (English translation forthcoming)'],
  ['Status',    'Manuscript complete · seeking publisher'],
];

function BookScheda() {
  return (
    <section className="book-scheda-section">
      <div className="container-narrow">
        <div className="eyebrow">Book details</div>
        <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: 32 }}>
          <tbody>
            {SCHEDA_EN.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">Where we stand</div>
        <h2 className="h2" style={{ marginTop: 14 }}>Manuscript complete. Seeking a publisher.</h2>
        <p className="body-sans" style={{ marginTop: 24, maxWidth: 520 }}>
          The book is written. In conversations with Italian publishers. If you're a publisher or agent, reach out — contact below.
        </p>
        <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="mailto:vittorio@gmail.com" className="btn btn-primary">Write to me <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();
          }}>Notify me at launch</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)' }}>
          Notify me when the book arrives.
        </h2>
        <p className="lede" style={{ color: 'var(--paper-on-ink-muted)', marginTop: 20, maxWidth: 540, marginInline: 'auto' }}>
          One email. Signed. When there's something real to say.
        </p>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 480 }}>
            <Newsletter inverted cta="Notify me" />
          </div>
        </div>
      </div>
    </section>
  );
}

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

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