/* Estratto — BEA Systems, settembre 2001. Verbatim dal manoscritto. */
/* global React */
function Excerpt() {
  return (
    <article style={{ padding: '64px var(--gutter) 64px' }}>
      <div className="container-read">

        {/* Eyebrow */}
        <div className="eyebrow accent" style={{ marginTop: 32 }}>BEA Systems, settembre 2001</div>

        {/* Titolo + sottotitolo */}
        <h1 className="h1" style={{ marginTop: 14, fontWeight: 600, fontSize: 'clamp(40px, 5.6vw, 80px)' }}>
          Un estratto<span className="accent-dot">.</span>
        </h1>
        <p style={{
          marginTop: 16,
          fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
          fontSize: 'clamp(20px, 1.8vw, 26px)',
          lineHeight: 1.4, letterSpacing: '-0.008em',
          color: 'var(--ink-soft)',
          fontVariationSettings: '"opsz" 60'
        }}>
          Da "Largo ai Giovani" — in arrivo
        </p>

        <hr className="rule-accent" style={{ width: 64, margin: '56px 0' }} />

        {/* Apertura */}
        <div className="body-serif">
          <p style={{ margin: '0 0 24px' }}>
            Firmai l'offerta il 12 settembre 2001. Il giorno dopo l'11 settembre. Il mondo era appena crollato e io firmavo per un nuovo lavoro.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Ma avevo posto una condizione.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Carl aveva fatto un'intervista telefonica con BEA ed era andata male — il General Manager mi disse che non lo avrebbero assunto.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Risposi: «Se non prendete Carl, non vengo.»
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Non stavo bluffando.
          </p>

          {/* Pull-quote grande */}
          <figure style={{
            margin: '72px -40px',
            textAlign: 'left',
            borderTop: '1px solid var(--rule)',
            borderBottom: '1px solid var(--rule)',
            padding: '56px 40px'
          }}>
            <blockquote style={{
              margin: 0,
              fontFamily: 'var(--font-sans)', fontWeight: 400, fontStyle: 'italic',
              fontSize: 'clamp(28px, 3.4vw, 44px)',
              lineHeight: 1.3, letterSpacing: '-0.016em',
              color: 'var(--chalk)',
              textWrap: 'pretty'
            }}>
              <span aria-hidden="true" style={{ color: 'var(--accent)', fontStyle: 'normal', fontWeight: 400, marginRight: '0.08em' }}>«</span>
              Se non prendete Carl, non vengo.
              <span aria-hidden="true" style={{ color: 'var(--accent)', fontStyle: 'normal', fontWeight: 400, marginLeft: '0.06em' }}>»</span>
            </blockquote>
            <div style={{
              marginTop: 20,
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(20px, 2vw, 26px)',
              lineHeight: 1.4, color: 'var(--ink-soft)',
              fontVariationSettings: '"opsz" 60'
            }}>
              Non stavo bluffando.
            </div>
          </figure>

          {/* Scena centrale */}
          <p style={{ margin: '0 0 24px' }}>
            Lo fecero volare a Seattle, otto ore di interviste con tutto il team. Il feedback fu unanime. Peter Horadan — uno dei più tosti del gruppo, ex-Microsoft — scrisse: «Odio questo tizio. Come può essere così intelligente e così in gamba alla sua età? Dobbiamo tirarlo fuori dal mercato.»
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Carl entrò in BEA.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Due settimane dopo scrissi la lettera di dimissioni a Larry.
          </p>

          <p style={{ margin: '0 0 24px' }}>
            E c'era un'altra ironia. Carl — che avevo portato con me — era arrivato a Seattle settimane prima. Io dovevo vendere la casa a Boston, ottenere il visto, spostare la famiglia. Lui aveva uno zaino. Quando atterrai, scoprii che aveva già il mio lavoro: Adam gli aveva dato Workshop, il ruolo per cui ero stato assunto io.
          </p>

          {/* Chiusura */}
          <p style={{ margin: '0 0 24px' }}>A me, un altro progetto. Ero arrabbiato? Neanche per un secondo. Carl era meglio di me per quel ruolo — e l'avevo portato perché era bravo, non per avere un subordinato. La risposta giusta era fargli spazio.

          </p>
        </div>

        {/* Footer: CTA primaria + link secondario */}
        <div style={{
          marginTop: 96,
          paddingTop: 32,
          borderTop: '2px solid var(--ink)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 20
        }}>
          <a href="index.html" style={{
            fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--ink-soft)', textDecoration: 'none'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-soft)'}>
            ← Torna alla home
          </a>
          <a href="index.html#newsletter" className="btn btn-primary">
            Avvisami all'uscita <span className="btn-arrow">→</span>
          </a>
        </div>

      </div>
    </article>);

}

function EstrattoPage() {
  return (
    <Site page="estratto">
      <Excerpt />
    </Site>);

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