/* Excerpt EN — BEA Systems, September 2001 */
/* global React */
function Excerpt() {
  return (
    <article style={{ padding: '64px var(--gutter) 64px' }}>
      <div className="container-read">
        <div className="eyebrow accent" style={{ marginTop: 32 }}>BEA Systems, September 2001</div>
        <h1 className="h1" style={{ marginTop: 14, fontWeight: 600, fontSize: 'clamp(40px, 5.6vw, 80px)' }}>
          An excerpt<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'
        }}>
          From "Largo ai Giovani" (Make Way for the Young) — coming soon
        </p>

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

        <div className="body-serif">
          <p style={{ margin: '0 0 24px' }}>
            I 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.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            But I had set a condition.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Carl had done a phone interview with BEA and it had gone badly — the General Manager told me they wouldn't hire him.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            I replied: "If you don't take Carl, I'm not coming."
          </p>
          <p style={{ margin: '0 0 24px' }}>
            I wasn't bluffing.
          </p>

          <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>
              If you don't take Carl, I'm not coming.
              <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'
            }}>
              I wasn't bluffing.
            </div>
          </figure>

          <p style={{ margin: '0 0 24px' }}>
            They flew him to Seattle, eight hours of interviews with the whole team. The feedback was unanimous. Peter Horadan — one of the toughest in the group, ex-Microsoft — wrote: "I hate this guy. How can someone be this smart and this sharp at his age? We need to take him off the market."
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Carl joined BEA.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            Two weeks later I wrote my resignation letter to Larry Ellison.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            And there was another irony. Carl — whom I had brought with me — had arrived in Seattle weeks earlier. I had to sell the house in Boston, sort out the visa, move the family. He had a backpack. When I landed, I discovered he already had my job: Adam Bosworth had given him Workshop, the role I had been hired for.
          </p>
          <p style={{ margin: '0 0 24px' }}>
            For me, another project. Was I angry? Not for a second. Carl was better than me for that role — and I had brought him because he was good, not to have a subordinate. The right answer was to make way for him.
          </p>
        </div>

        <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-sans)', fontSize: 15,
            color: 'var(--ink-soft)', textDecoration: 'none'
          }}
          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ink)'}
          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--ink-soft)'}>
            ← Back to home
          </a>
          <a href="index.html#newsletter" className="btn btn-primary">
            Notify me at launch <span className="btn-arrow">→</span>
          </a>
        </div>
      </div>
    </article>
  );
}

function EstrattoPage() {
  return (
    <Site page="estratto">
      <Excerpt />
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<EstrattoPage />);