// Scene 05 — SIGNATURE
// The thesis lands. Big wordmark, crosshair, domain stamp.
// Loops back to open.

function SceneSign() {
  const { localTime, duration } = useSprite();
  const exit = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);
  const e = Easing.easeOutCubic;

  const headT = e(clamp(localTime / 0.5, 0, 1));
  const thesisT = e(clamp((localTime - 0.5) / 0.9, 0, 1));
  const crossT = e(clamp((localTime - 1.2) / 0.7, 0, 1));
  const domainT = e(clamp((localTime - 2.0) / 0.6, 0, 1));

  const cx = 1520, cy = 540;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - exit }}>
      {/* The thesis — big, firm-left, three lines */}
      <div style={{
        position: 'absolute',
        left: 80, top: 300,
        width: 1200,
        fontFamily: O8.fontSans,
        fontSize: 124, lineHeight: 0.82,
        letterSpacing: '-0.04em',
        fontWeight: 500, color: O8.ink,
        opacity: thesisT,
        transform: `translateY(${(1 - thesisT) * 16}px)`,
      }}>
        <div>o8 dispatches</div>
        <div style={{color: O8.inkMuted}}>against</div>
        <div style={{marginTop: 24}}>
          o8<span style={{color: O8.accent, marginLeft: 2}}>.</span>
        </div>
      </div>

      {/* Crosshair ornament right side */}
      <svg style={{position:'absolute', left: 0, top: 0, width: 1920, height: 1080}} aria-hidden>
        <line x1={cx} y1={cy - 280 * crossT} x2={cx} y2={cy + 280 * crossT} stroke={O8.accent} strokeWidth="1"/>
        <line x1={cx - 280 * crossT} y1={cy} x2={cx + 280 * crossT} y2={cy} stroke={O8.accent} strokeWidth="1"/>
        <circle cx={cx} cy={cy} r={6 * crossT} fill={O8.accent}/>
        <circle cx={cx} cy={cy} r={22 * crossT} stroke={O8.accent} strokeWidth="1" fill="none" opacity="0.5"/>
        <circle cx={cx} cy={cy} r={84 * crossT} stroke={O8.structure} strokeWidth="1" fill="none" opacity="0.8"/>
      </svg>

      {/* Domain + build stamp row */}
      <div style={{
        position: 'absolute',
        left: 80, top: 800,
        display: 'flex', alignItems: 'baseline', gap: 60,
        opacity: domainT,
      }}>
        <span style={{
          fontFamily: O8.fontSans,
          fontSize: 28, fontWeight: 500,
          color: O8.ink, letterSpacing: '-0.01em',
          borderBottom: `1px solid ${O8.ink}`, paddingBottom: 2,
        }}>
          o8.run
        </span>
        <span style={{
          fontFamily: O8.fontMono, fontSize: 14,
          color: O8.inkMuted, letterSpacing: '0.04em',
        }}>
          DOWNLOAD FOR macOS &middot; v0.1.7 ALPHA &middot; FREE &middot; BRING YOUR KEYS
        </span>
      </div>
    </div>
  );
}

window.SceneSign = SceneSign;