// SME Cloud ERP demo — main app composing scenes into a 30s 16:9 video.
// Scene timing:
//   01 chaos      [0–5s]
//   02 activate   [5–11s]   (6s)
//   03 growth     [11–17s]  (6s)
//   04 empire     [17–24s]  (7s)
//   05 reveal     [24–30s]  (6s)

const { Stage, Sprite } = window;

function App() {
  // Update root data-screen-label with current time each second for commenting
  const [secLabel, setSecLabel] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      try {
        const t = parseFloat(localStorage.getItem("smecloud-demo:t") || "0") || 0;
        const sec = Math.floor(t);
        const root = document.getElementById("root");
        if (root && root.getAttribute("data-screen-label") !== "t=" + sec) {
          root.setAttribute("data-screen-label", "t=" + sec);
        }
        setSecLabel(sec);
      } catch {}
    }, 250);
    return () => clearInterval(id);
  }, []);

  return (
    <Stage
      width={1920}
      height={1080}
      duration={30}
      background="#05060d"
      persistKey="smecloud-demo"
    >
      <Sprite start={0}  end={5}>  <window.Scene01_Chaos    /> </Sprite>
      <Sprite start={5}  end={11}> <window.Scene02_Activate /> </Sprite>
      <Sprite start={11} end={17}> <window.Scene03_Growth   /> </Sprite>
      <Sprite start={17} end={24}> <window.Scene04_Empire   /> </Sprite>
      <Sprite start={24} end={30}> <window.Scene05_Reveal   /> </Sprite>
    </Stage>
  );
}

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