/* Home page EN */
/* global React */
const { useState, useEffect } = React;

function HeroSplit({ headlineKey }) {
  return (
    <section className="hero-split-section">
      <div className="container" style={{ maxWidth: 1240 }}>
        <div className="hero-en-grid">

          <div className="hero-en-text">
            <div className="eyebrow accent eyebrow-dot">Memoir · Coming soon</div>
            <h1 className="h1" style={{
              marginTop: 28,
              fontFamily: 'var(--font-serif)',
              fontSize: 'clamp(44px, 5.6vw, 82px)',
              lineHeight: 1.02,
              letterSpacing: '-0.028em',
              fontWeight: 600,
              fontVariationSettings: '"opsz" 144, "SOFT" 25',
              textWrap: 'balance',
            }}>
              The Baker's Son in Silicon Valley<span className="accent-dot">.</span>
            </h1>
            <p style={{
              margin: '24px auto 0',
              fontFamily: 'var(--font-serif)',
              fontWeight: 400,
              fontStyle: 'italic',
              fontSize: 'clamp(20px, 1.7vw, 24px)',
              lineHeight: 1.4,
              letterSpacing: '-0.008em',
              color: 'var(--ink-soft)',
              fontVariationSettings: '"opsz" 60',
              maxWidth: 560,
              textWrap: 'pretty',
            }}>
              Why the Valley activates talent — and most places don't.
            </p>
            <p style={{
              marginTop: 16,
              fontFamily: 'var(--font-sans)',
              fontSize: 14,
              letterSpacing: '0.02em',
              color: 'var(--ink-muted)',
            }}>
              A book by <span style={{ color: 'var(--chalk)', fontWeight: 500 }}>Vittorio Viarengo</span>.
            </p>
          </div>

          <div className="hero-en-cover">
            <img
              className="book-cover-hero"
              src="../assets/book-cover-en.png"
              alt="Cover of The Baker's Son in Silicon Valley — a memoir by Vittorio Viarengo"
              style={{ width: '100%', maxWidth: 460, aspectRatio: '2/3', objectFit: 'cover', display: 'block' }}
            />
          </div>

          <div className="hero-en-form">
            <div style={{ maxWidth: 480 }} id="hero-newsletter">
              <form className="nl-form" name="notify" method="POST" data-netlify="true" netlify-honeypot="bot-field" onSubmit={(e) => {
                e.preventDefault();
                const form = e.currentTarget;
                const email = new FormData(form).get('email');
                if (!email || !String(email).includes('@')) return;
                const body = new URLSearchParams({ 'form-name': 'notify', email: String(email), 'bot-field': '' }).toString();
                fetch('/', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, body })
                  .then((r) => {
                    if (r.ok) {
                      form.style.display = 'none';
                      form.nextElementSibling.style.display = 'block';
                    } else {
                      alert('Submission error, please try again.');
                    }
                  })
                  .catch(() => alert('Network error, please try again.'));
              }}>
                <input type="hidden" name="form-name" value="notify" />
                <input type="hidden" name="bot-field" />
                <input className="nl-input" type="email" name="email" required placeholder="your-email@domain.com" />
                <button type="submit" className="nl-submit">Notify me at launch</button>
              </form>
              <div style={{ display: 'none', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 17, color: 'var(--accent)', fontVariationSettings: '"opsz" 14' }}>
                ✓ Done. I'll write when the book is ready.
              </div>
              <div className="caption" style={{ marginTop: 16, maxWidth: 440, color: 'var(--ink-muted)', lineHeight: 1.55 }}>
                One email when the book is ready. Nothing else, no noise, signed by me.
              </div>
            </div>
            <p className="caption" style={{ marginTop: 28, color: 'var(--ink-muted)', fontStyle: 'italic' }}>English edition forthcoming.</p>
          </div>

        </div>
      </div>
    </section>
  );
}

function Thesis() {
  return (
    <section className="thesis-section">
      <div className="container-narrow">
        <div className="eyebrow">The thesis</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',
        }}>
          Italy doesn't have a <span style={{ color: 'var(--signal)' }}>talent problem.</span> It has an <span style={{ color: 'var(--signal)' }}>activation</span> problem.
        </p>
        <p style={{
          marginTop: 40, maxWidth: 640,
          fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px, 1.3vw, 19px)',
          lineHeight: 1.55, color: 'var(--chalk-2)', letterSpacing: '-0.005em',
        }}>
          It's not a memoir, it's not a manual. It's the story of someone who left the family bakery, spent thirty years inside the system that activates talent, and came back to tell Italy what it's missing — and what already belongs to it.
        </p>
      </div>
    </section>
  );
}

const MOMENTS_EN = [
  {
    eyebrow: "The olive oil lesson",
    lines: [
      '"Put more olive oil in the focaccia."',
      '"But Dad, the recipe says this much."',
      '"We\'re about to close for the holidays. So when customers try the competition, they\'ll appreciate the difference."',
    ],
    attr: ['My father, in the Genoa bakery'],
  },
  {
    eyebrow: 'A million dollars on the table',
    lines: [
      'One million dollars.',
      'One million dollars.',
      'Your heart slows down.',
    ],
    attr: ["From the acquisition scene,", 'Burlington, Massachusetts'],
  },
  {
    eyebrow: 'The condition',
    lines: [
      '"If you don\'t take Carl, I\'m not coming."',
      'I wasn\'t bluffing.',
    ],
    attr: ['From the chapter on Carl Sjogreen, twenty years old,', 'one of the young people I made way for'],
  },
  {
    eyebrow: 'Fifteen years later',
    lines: [
      'Twenty-five screens. Forty minutes.',
      'Voice as the only interface.',
      'Like ChatGPT, twenty years early.',
    ],
    attr: ['From the chapter on Chris York,', 'the boy who used to read in the corner'],
  },
];

function PullQuotes() {
  return (
    <section className="pullquotes-section">
      <div className="container-narrow">
        <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-serif)', fontWeight: 600,
            fontSize: 'clamp(32px, 4.2vw, 60px)', lineHeight: 1.02,
            letterSpacing: '-0.028em',
            textTransform: 'uppercase',
            fontVariationSettings: '"opsz" 144, "SOFT" 25',
          }}>
            Inside the book
          </h2>
          <div style={{
            fontFamily: 'var(--font-sans)', fontWeight: 600,
            fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
            color: 'var(--accent)',
          }}>
            Four moments
          </div>
        </div>
        <div className="moments-list">
          {MOMENTS_EN.map((m, i) => (
            <figure key={i} style={{
              margin: 0, display: 'grid',
              gridTemplateColumns: 'clamp(110px, 14vw, 180px) 1fr',
              gap: 'clamp(32px, 5vw, 72px)', alignItems: 'start',
            }}>
              <div style={{
                fontFamily: 'var(--font-serif)', fontWeight: 500, fontStyle: 'italic',
                fontSize: 'clamp(72px, 10vw, 144px)', lineHeight: 0.86,
                letterSpacing: '-0.04em', color: 'var(--accent)',
                fontVariationSettings: '"opsz" 144, "SOFT" 50', paddingTop: 6,
              }}>0{i + 1}</div>
              <div>
                <div style={{
                  fontFamily: 'var(--font-sans)', fontWeight: 600,
                  fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase',
                  color: 'var(--ink-muted)', paddingBottom: 20,
                  borderBottom: '1px solid var(--rule)', marginBottom: 28,
                }}>{m.eyebrow}</div>
                <blockquote style={{
                  margin: 0,
                  fontFamily: 'var(--font-sans)', fontWeight: 400, fontStyle: 'italic',
                  fontSize: 'clamp(22px, 2.4vw, 34px)', lineHeight: 1.36,
                  letterSpacing: '-0.012em', color: 'var(--chalk)',
                  textWrap: 'pretty',
                }}>
                  <span aria-hidden="true" style={{ color: 'var(--accent)', marginRight: '0.08em', fontStyle: 'normal', fontWeight: 400 }}>"</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(--accent)', marginLeft: '0.06em', fontStyle: 'normal', fontWeight: 400 }}>"</span>
                </blockquote>
                <figcaption style={{
                  marginTop: 28, fontFamily: 'var(--font-sans)', fontWeight: 500,
                  fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--ink-muted)', lineHeight: 1.7,
                }}>
                  <span style={{ color: 'var(--accent)', 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>
        <div style={{ marginTop: 128, textAlign: 'center' }}>
          <a href="estratto.html" style={{
            display: 'inline-block',
            fontFamily: 'var(--font-sans)', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(18px, 1.7vw, 22px)', color: 'var(--chalk)', textDecoration: 'none',
            borderBottom: '1px solid var(--chalk)', paddingBottom: 6,
            letterSpacing: '-0.004em',
            transition: 'color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out)',
          }}
          onMouseEnter={e => { e.currentTarget.style.color = 'var(--accent)'; e.currentTarget.style.borderBottomColor = 'var(--accent)'; }}
          onMouseLeave={e => { e.currentTarget.style.color = ''; e.currentTarget.style.borderBottomColor = ''; }}>
            <span style={{ color: 'var(--accent)', marginRight: 12, fontStyle: 'normal' }}>→</span>
            Read on: an excerpt from the book
          </a>
        </div>
      </div>
    </section>
  );
}

function InsideBlock() {
  return (
    <section className="inside-section">
      <div className="container-narrow">
        <div className="inside-grid">
          <div>
            <div className="eyebrow">A taste</div>
            <h2 className="h2" style={{ marginTop: 16 }}>September<br/>2001.</h2>
            <p className="caption" style={{ marginTop: 20, maxWidth: 280 }}>An excerpt from the book.</p>
            <a href="estratto.html" className="btn btn-secondary" style={{ marginTop: 28 }}>
              Read the excerpt <span className="btn-arrow">→</span>
            </a>
          </div>
          <div className="inside-text-col">
            <p className="body-serif" style={{ margin: 0 }}>
              <span style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: '4.4em', lineHeight: 0.82, float: 'left', padding: '0.04em 0.08em 0 0', color: 'var(--accent)', fontVariationSettings: '"opsz" 144, "SOFT" 50' }}>I</span>
              signed the offer on September 12, 2001. The day after September 11. The world had just collapsed and I was signing for a new job on the other side of America. But I had set a condition. Carl had done a phone interview with BEA and it had gone badly — the General Manager told me they wouldn't hire him. I replied: "If you don't take Carl, I'm not coming."
            </p>
            <div style={{ marginTop: 28 }}>
              <a href="estratto.html" className="link-underline" style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 18, fontVariationSettings: '"opsz" 14' }}>
                Read on →
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AuthorStrip() {
  return (
    <section className="author-section">
      <div className="container author-grid">
        <img src="../assets/author-photo-duotone.jpg" className="img-duotone" alt="Vittorio Viarengo"
             style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', objectPosition: 'center 25%', borderRadius: 2 }} />
        <div>
          <div className="eyebrow">The Author</div>
          <h2 className="h2" style={{ marginTop: 16 }}>Vittorio Viarengo.</h2>
          <p className="lede" style={{ marginTop: 20, maxWidth: 560, fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, fontSize: 'clamp(19px, 1.6vw, 22px)', lineHeight: 1.55, letterSpacing: '-0.006em', color: 'var(--ink-soft)', fontVariationSettings: '"opsz" 60' }}>
            Italian Silicon Valley executive. Held senior roles in R&D and Marketing at VMware, Oracle, BEA Systems, MobileIron, Skyhigh and McAfee. Mentors young entrepreneurs. Lives in San Jose, California.
          </p>
          <div style={{ marginTop: 32 }}>
            <a href="autore.html" className="btn btn-ghost">Full biography <span className="btn-arrow">→</span></a>
          </div>
        </div>
        <div className="marquee-wrap" style={{ gridColumn: '1 / -1', marginTop: 48 }}>
          <div className="marquee">
            {['BEA Systems','Oracle','VMware','MobileIron','Skyhigh','McAfee','ViVi Software','BEA Systems','Oracle','VMware','MobileIron','Skyhigh','McAfee','ViVi Software'].map((c, i) => (
              <span key={i} style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 22, color: 'var(--ink-muted)', fontVariationSettings: '"opsz" 60', fontWeight: 400, whiteSpace: 'nowrap' }}>
                {c} <span style={{ color: 'var(--accent)', marginLeft: 56 }}>·</span>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function NewsletterBlock() {
  return (
    <section id="newsletter" className="newsletter-cta-section">
      <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(36px, 4.8vw, 64px)' }}>
          One email.<br/>When the book arrives.
        </h2>
        <div style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
          <div style={{ width: '100%', maxWidth: 480 }}>
            <Newsletter inverted cta="Notify me" />
          </div>
        </div>
      </div>
    </section>
  );
}

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

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