/* Corsa Privata — thesis band (first dark accent). Reframes the category:
 * a simulator is a box; a Circuit is commissioned. The visual is the Circuit at
 * home (a private room render, dark on dark), masked so it melts into the band:
 * the environment, right where the copy says "un espacio, un piloto". */

function Statement({ t }) {
  const s = t.statement;
  return (
    <section id="circuit" className="cp-dark" style={{ position: 'relative', overflow: 'hidden', background: 'var(--cp-ink-900)' }}>
      {/* the Circuit in a private room — photography, not catalog: edges dissolve into the band */}
      <div className="cp-stmt-art" style={{
        position: 'absolute', right: 0, top: 0, bottom: 0,
        width: 'min(62%, 920px)', pointerEvents: 'none',
        WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 32%)',
        maskImage: 'linear-gradient(90deg, transparent 0%, #000 32%)',
      }}>
        <img src="assets/circuit-room.jpg" alt="" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover', objectPosition: '62% 42%', filter: 'saturate(0.82) brightness(0.94)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(21,23,26,0.6) 0%, rgba(21,23,26,0) 32%, rgba(21,23,26,0) 68%, rgba(21,23,26,0.6) 100%)' }} />
      </div>

      {/* keep the left text column on solid graphite even where the glow reaches */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(15,17,18,0.97) 0%, rgba(15,17,18,0.86) 38%, rgba(15,17,18,0.30) 64%, rgba(15,17,18,0) 100%)' }} />
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'rgba(255,255,255,0.08)' }} />

      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(80px, 11vw, 132px) 32px' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, fontWeight: 'var(--fw-medium)', letterSpacing: 'var(--ls-wider)', textTransform: 'uppercase', color: 'var(--cp-gold-400)' }}>
          {s.kicker}
        </span>
        <h2 className="cp-stmt-h" style={{
          fontFamily: 'var(--font-display)', fontWeight: 'var(--fw-bold)',
          fontSize: 'clamp(38px, 5.6vw, 72px)', lineHeight: 1.0, letterSpacing: '-0.03em',
          color: 'var(--cp-ivory)', margin: '22px 0 0', maxWidth: 640, textWrap: 'balance',
        }}>
          {s.h2}
        </h2>
        <p style={{
          fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.6,
          color: 'var(--cp-ink-200)', margin: '28px 0 0', maxWidth: '52ch', textWrap: 'pretty',
        }}>
          {s.body}
        </p>
      </div>
    </section>
  );
}

window.Statement = Statement;