// hero.jsx — mounts the PrismAnim into the hero stage of the website
// Uses the existing PrismAnim component (loaded before this script).

const HeroAnim = () => {
  const [t, setT] = React.useState(0);
  const DURATION = 5.4;

  React.useEffect(() => {
    let raf, start;
    const tick = (ts) => {
      if (start == null) start = ts;
      const elapsed = (ts - start) / 1000;
      setT(elapsed % DURATION);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  // Scale 1920x1080 stage to fit the .hero container
  const [scale, setScale] = React.useState(1);
  React.useEffect(() => {
    const measure = () => {
      const hero = document.querySelector('.hero');
      if (!hero) return;
      const r = hero.getBoundingClientRect();
      const isMobile = window.innerWidth < 768;
      // Mobile: use CONTAIN (Math.min) so the whole animation fits inside the
      // hero — sides letterbox into the same black bg so it looks intentional.
      // Desktop: use COVER (Math.max) so the animation fills edge-to-edge.
      const scale = isMobile
        ? Math.min(r.width / 1920, r.height / 1080) * 1.4 // 1.4× boost so the M reads big
        : Math.max(r.width / 1920, r.height / 1080);
      setScale(scale);
    };
    measure();
    window.addEventListener('resize', measure);
    window.addEventListener('orientationchange', measure);
    return () => {
      window.removeEventListener('resize', measure);
      window.removeEventListener('orientationchange', measure);
    };
  }, []);

  return (
    <div className="hero-stage-inner" style={{ transform: `scale(${scale})` }}>
      <window.PrismAnim t={t} duration={DURATION} />
    </div>
  );
};

const heroRoot = document.getElementById('hero-root');
if (heroRoot) {
  ReactDOM.createRoot(heroRoot).render(<HeroAnim/>);
}