// Shared constants + tiny primitives used by every scene.
// Theme tokens copied 1:1 from o8 THEME.md v1 Light.

const O8 = {
  paper: '#F4F2ED',
  paperDeep: '#EEEBE3',
  ink: '#111111',
  inkMuted: '#777777',
  inkQuiet: '#9A968E',
  accent: '#FF5A1F',
  structure: '#B8C8D8',
  hairline: 'rgba(17,17,17,0.18)',
  hairlineSoft: 'rgba(17,17,17,0.08)',
  dot: 'rgba(17,17,17,0.055)',
  fontSans: '"Inter","Neue Haas Grotesk","Söhne",system-ui,-apple-system,sans-serif',
  fontMono: '"JetBrains Mono","iA Writer Mono","SF Mono",Menlo,ui-monospace,monospace',
};

// Scene timing — adjacent (non-overlapping) windows so scenes hand off cleanly.
const SCENES = {
  open:      { start: 0.0,  end: 3.5 },
  dispatch:  { start: 3.5,  end: 7.0 },
  parallel:  { start: 7.0,  end: 10.5 },
  gate:      { start: 10.5, end: 14.0 },
  merge:     { start: 14.0, end: 17.2 },
  sign:      { start: 17.2, end: 20.5 },
};
const TOTAL = 20.5;

// Dot-grid background layer. Lives behind every scene.
function PaperBase({ showDots = true, accent = O8.accent }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: O8.paper,
      backgroundImage: showDots
        ? `radial-gradient(circle at 1px 1px, ${O8.dot} 1px, transparent 0)`
        : 'none',
      backgroundSize: '24px 24px',
    }}/>
  );
}

// Persistent top bar — number / title / o8 wordmark. Lives the whole video.
// Uses the current scene's label fed from the stage clock.
function ChromeBar({ sceneNum, sceneLabel, bracket, time }) {
  const stamp = `00:${String(Math.floor(time)).padStart(2,'0')}.${String(Math.floor((time*100)%100)).padStart(2,'0')}`;
  return (
    <>
      {/* Top hairline chrome */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0,
        display: 'flex', alignItems: 'baseline',
        paddingTop: 36, paddingBottom: 18,
        paddingLeft: 80, paddingRight: 80,
        borderBottom: `1px solid ${O8.hairlineSoft}`,
        fontFamily: O8.fontSans,
      }}>
        {/* wordmark + crosshair */}
        <div style={{display:'flex',alignItems:'baseline',gap:12}}>
          <svg width="14" height="14" viewBox="0 0 8 8" style={{position:'relative',top:1}}>
            <line x1="4" y1="0" x2="4" y2="8" stroke={O8.accent} strokeWidth="1"/>
            <line x1="0" y1="4" x2="8" y2="4" stroke={O8.accent} strokeWidth="1"/>
          </svg>
          <span style={{fontSize:22,fontWeight:500,letterSpacing:'-0.04em',color:O8.ink}}>o8</span>
        </div>
        <span style={{
          marginLeft: 48,
          fontSize: 13, fontWeight: 500, letterSpacing: '0.22em',
          textTransform: 'uppercase', color: O8.inkMuted,
        }}>
          {sceneNum} &mdash; {sceneLabel}
        </span>
        <span style={{
          marginLeft: 20,
          fontFamily: O8.fontMono, fontSize: 12,
          letterSpacing: '0.04em', color: O8.inkMuted,
        }}>
          {bracket}
        </span>
        <span style={{
          marginLeft: 'auto',
          fontFamily: O8.fontMono, fontSize: 12,
          color: O8.inkQuiet, letterSpacing: 0,
        }}>
          o8.run &middot; {stamp}
        </span>
      </div>

      {/* Bottom hairline chrome */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        display: 'flex', alignItems: 'baseline',
        paddingTop: 18, paddingBottom: 36,
        paddingLeft: 80, paddingRight: 80,
        borderTop: `1px solid ${O8.hairlineSoft}`,
        fontFamily: O8.fontMono, fontSize: 11,
        letterSpacing: '0.04em', color: O8.inkQuiet,
      }}>
        <span>(BUILDING ITSELF)</span>
        <span style={{marginLeft: 'auto'}}>v0.1.7 &middot; ALPHA</span>
      </div>
    </>
  );
}

// Numbered section label primitive. Matches THEME §02.
function SectionLabel({ children, style }) {
  return (
    <span style={{
      fontFamily: O8.fontSans,
      fontSize: 13, fontWeight: 500,
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color: O8.inkMuted,
      ...style,
    }}>{children}</span>
  );
}

// Bracketed micro-label primitive.
function BracketLabel({ children, style }) {
  return (
    <span style={{
      fontFamily: O8.fontMono,
      fontSize: 13, letterSpacing: '0.04em',
      color: O8.inkMuted, fontWeight: 400,
      ...style,
    }}>{children}</span>
  );
}

// Mono stamp primitive.
function Stamp({ children, style }) {
  return (
    <span style={{
      fontFamily: O8.fontMono,
      fontSize: 12, letterSpacing: 0,
      color: O8.inkQuiet,
      ...style,
    }}>{children}</span>
  );
}

// Black pill label (THEME §06.6).
function Pill({ children, style }) {
  return (
    <span style={{
      display: 'inline-block',
      background: O8.ink, color: O8.paper,
      borderRadius: 14, height: 28,
      lineHeight: '28px',
      paddingLeft: 14, paddingRight: 14,
      fontFamily: O8.fontMono,
      fontSize: 11, fontWeight: 500,
      letterSpacing: '0.06em', textTransform: 'uppercase',
      ...style,
    }}>{children}</span>
  );
}

// A single 1px hairline, horizontal, spans full width.
function Hairline({ y = 0, opacity = 1, color = O8.hairlineSoft }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0,
      top: y, height: 1, opacity,
      background: color,
    }}/>
  );
}

// Typing cursor block (blinks via animation frames).
function Cursor({ time, width = 10, height = 22, color = O8.ink }) {
  const blink = Math.floor(time * 2) % 2 === 0 ? 1 : 0;
  return (
    <span style={{
      display: 'inline-block',
      width, height,
      background: color, opacity: blink,
      marginLeft: 4, verticalAlign: 'text-bottom',
    }}/>
  );
}

Object.assign(window, {
  O8, SCENES, TOTAL,
  PaperBase, ChromeBar,
  SectionLabel, BracketLabel, Stamp, Pill,
  Hairline, Cursor,
});