/* TowerSystem promo — timeline composition */
const DUR = 31;

function TimecodeTagger() {
  const t = useTime();
  React.useEffect(() => {
    const root = document.getElementById('video-root');
    if (root) root.setAttribute('data-screen-label', `t=${t.toFixed(0)}s`);
  }, [Math.floor(t)]);
  return null;
}

// persistent small brand mark, appears after the intro
function Watermark() {
  const t = useTime();
  if (t < 4.6 || t > 27.4) return null;
  const op = clamp((t - 4.6) / 0.5, 0, 1) * (1 - clamp((t - 27.0) / 0.4, 0, 1));
  return (
    <img src="assets/logo-towersystem.png" alt="" style={{
      position: 'absolute', right: 40, bottom: 36, height: 30, opacity: op * 0.9, zIndex: 50 }} />
  );
}

// thin chapter progress ticks at the very bottom of the canvas
function ProgressTicks() {
  const t = useTime();
  const marks = [0, 4.5, 9, 14, 19, 24, 27.5, DUR];
  return (
    <div style={{ position:'absolute', left:0, right:0, bottom:0, height:3, zIndex:60, display:'flex' }}>
      {marks.slice(0,-1).map((m,i)=>{
        const seg = marks[i+1]-m;
        const fill = clamp((t-m)/seg,0,1);
        return <div key={i} style={{ flex: seg, background:'rgba(255,255,255,0.08)', position:'relative' }}>
          <div style={{ position:'absolute', left:0, top:0, bottom:0, width:`${fill*100}%`, background: TS.red }}></div>
        </div>;
      })}
    </div>
  );
}

function App() {
  return (
    <Stage width={1280} height={720} duration={DUR} background={TS.bg} fps={60} persistKey="towersystem-promo">
      <BackdropLattice />
      <IntroScene />
      <SpecialisteScene />
      <FixeScene />
      <MobileScene />
      <AtoutsScene />
      <PromoScene />
      <OutroScene />
      <Watermark />
      <ProgressTicks />
      <TimecodeTagger />
    </Stage>
  );
}

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