// video-app.jsx — Stage composition for the Ejen Studio demo film.
// Lays out scenes on a 1920×1080 timeline, ~78s.

const SCENES = [
  { name: 'Intro',     start:  0, end:  5, comp: SceneIntro,    label: '01 · Intro' },
  { name: 'Ask',       start:  4.4, end: 18.8, comp: SceneAsk,       label: '02 · Ask' },
  { name: 'Ideation',  start: 18.4, end: 28.5, comp: SceneIdeation,  label: '03 · Ideate' },
  { name: 'Creation',  start: 28.0, end: 41.5, comp: SceneCreation,  label: '04 · Create' },
  { name: 'Schedule',  start: 41.0, end: 51.5, comp: SceneSchedule,  label: '05 · Schedule' },
  { name: 'Live',      start: 51.0, end: 63.5, comp: SceneLive,      label: '06 · Live' },
  { name: 'Recap',     start: 63.0, end: 71.0, comp: SceneRecap,     label: '07 · Recap' },
  { name: 'Outro',     start: 70.5, end: 78.0, comp: SceneOutro,     label: '08 · Outro' },
];

const DURATION = 78;

function Watermark() {
  const time = useTime();
  return (
    <>
      {/* corner brand mark */}
      <div style={{
        position: 'absolute', top: 28, left: 32, zIndex: 30,
        display: 'flex', alignItems: 'center', gap: 10,
        opacity: 0.55,
      }}>
        <LogoMark size={22} />
        <span style={{
          fontFamily: FONT.mono, fontSize: 11, color: COL.silver,
          letterSpacing: '0.20em', textTransform: 'uppercase',
        }}>Ejen Studio · demo</span>
      </div>
      {/* corner timestamp */}
      <div style={{
        position: 'absolute', top: 28, right: 32, zIndex: 30,
        fontFamily: FONT.mono, fontSize: 11, color: COL.silver,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        opacity: 0.55,
        fontVariantNumeric: 'tabular-nums',
      }}>
        {fmtTime(time)} · {fmtTime(DURATION)}
      </div>
    </>
  );
}

function fmtTime(s) {
  const m = Math.floor(s / 60);
  const sec = Math.floor(s % 60);
  return `${String(m).padStart(2, '0')}:${String(sec).padStart(2, '0')}`;
}

// Updates the data-screen-label attr on the video root so commenters land on the right second.
function SecondLabeler() {
  const time = useTime();
  const sec = Math.floor(time);
  const lastRef = React.useRef(-1);
  React.useEffect(() => {
    if (sec === lastRef.current) return;
    lastRef.current = sec;
    const el = document.querySelector('[data-video-root]');
    if (!el) return;
    const scene = SCENES.find(s => sec >= s.start && sec < s.end) || SCENES[SCENES.length - 1];
    el.setAttribute('data-screen-label', `${String(sec).padStart(2, '0')}s · ${scene.label}`);
  }, [sec]);
  return null;
}

// Subtle scene-dividing flash on transitions
function SceneFlash() {
  const time = useTime();
  // find nearest scene boundary
  let opacity = 0;
  for (let i = 1; i < SCENES.length; i++) {
    const boundary = SCENES[i].start;
    const dt = Math.abs(time - boundary);
    if (dt < 0.18) {
      opacity = Math.max(opacity, 1 - dt / 0.18);
    }
  }
  if (opacity <= 0.001) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 25,
      background: COL.void, opacity: opacity * 0.65,
      pointerEvents: 'none',
    }}/>
  );
}

function Film() {
  return (
    <Stage
      width={1920}
      height={1080}
      duration={DURATION}
      background={COL.void}
      persistKey="ejen-demo-film"
    >
      <GlobalStyles />
      {SCENES.map(s => (
        <Sprite key={s.name} start={s.start} end={s.end}>
          <s.comp />
        </Sprite>
      ))}
      <SceneFlash />
      <Watermark />
      <SecondLabeler />
    </Stage>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Film />);