// origin-film-app.jsx — mounts the GrytLabs Origin Story film + Tweaks.
const { Stage, Sprite, useTime, FilmConfigContext, FILM, AmbientBg, MotifLayer,
        CHAPTERS, FILM_DURATION, PHASE_MARKS,
        useTweaks, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio } = window;

function FilmRoot({ children }) {
  const t = useTime();
  return (
    <div data-screen-label={`origin film · ${Math.floor(t)}s`}
      style={{ position: 'absolute', inset: 0, fontFamily: FILM.sans }}>
      {children}
    </div>
  );
}

function OriginFilmApp() {
  const [t, setTweak] = useTweaks({ rate: 1, quotes: true, motif: 'thread', opening: 'box' });
  return (
    <React.Fragment>
      <FilmConfigContext.Provider value={{ showQuotes: t.quotes, motif: t.motif, opening: t.opening }}>
        <Stage width={1920} height={1080} duration={FILM_DURATION}
          background={FILM.bg} persistKey="grytOriginFilm" rate={t.rate}>
          <FilmRoot>
            <AmbientBg />
            <MotifLayer variant={t.motif} marks={PHASE_MARKS} />
            {CHAPTERS.map((ch) => (
              <Sprite key={ch.name} start={ch.start} end={ch.end}>
                <ch.C />
              </Sprite>
            ))}
          </FilmRoot>
        </Stage>
      </FilmConfigContext.Provider>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Opening" />
        <TweakRadio label="Cold open" value={t.opening} options={['box', 'mark']}
          onChange={(v) => setTweak('opening', v)} />
        <TweakSection label="Playback" />
        <TweakSlider label="Speed" value={t.rate} min={0.5} max={2} step={0.25} unit="×"
          onChange={(v) => setTweak('rate', v)} />
        <TweakSection label="Story" />
        <TweakToggle label="Pull quotes" value={t.quotes}
          onChange={(v) => setTweak('quotes', v)} />
        <TweakSection label="Motif" />
        <TweakRadio label="Spine" value={t.motif} options={['thread', 'constellation', 'none']}
          onChange={(v) => setTweak('motif', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<OriginFilmApp />);