import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";

// The pre-built Joe design-system bundle (loaded as a global <script> in
// index.html) references a bare global `React` inside its component bodies.
// Expose the SAME React instance the app bundles with, so its components
// (Wordmark, WorkTile, Shape, …) share our React and hooks work across the
// boundary. Must be set before the first render.
window.React = React;

function mount() {
  const ds = window.DesignSystem_d32157;
  // Wait until the design-system bundle has attached its components.
  if (!ds || !ds.Wordmark) {
    setTimeout(mount, 40);
    return;
  }

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

  // Kick off the Lenis + GSAP scroll motion once the DOM has painted.
  requestAnimationFrame(() =>
    requestAnimationFrame(() => window.DSMotion && window.DSMotion.init())
  );
}

mount();