// main.jsx — bootstrap para madresia.space
//
// Monta el Sol tejido dentro de #hero-canvas (hero de 100vh). No incluye
// overlay de pregunta — el texto del manifiesto vive en las secciones
// editoriales del HTML (flujo Glasswing).

function HeroStage({ duration = 24, children }) {
  const [time, setTime] = React.useState(0);
  const rafRef = React.useRef(null);
  const lastTsRef = React.useRef(null);

  React.useEffect(() => {
    const step = (ts) => {
      if (lastTsRef.current == null) lastTsRef.current = ts;
      const dt = (ts - lastTsRef.current) / 1000;
      lastTsRef.current = ts;
      // El Sol no hace loop — solo progresa. Cap a 1000s para que los cálculos
      // de shimmer/breath no exploten numéricamente en sesiones muy largas.
      setTime((t) => Math.min(t + dt, 1000));
      rafRef.current = requestAnimationFrame(step);
    };
    rafRef.current = requestAnimationFrame(step);
    return () => {
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
      lastTsRef.current = null;
    };
  }, [duration]);

  const ctxValue = React.useMemo(
    () => ({ time, duration, playing: true }),
    [time, duration]
  );

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      overflow: 'hidden',
      pointerEvents: 'none',
    }}>
      <div style={{
        position: 'relative',
        width: 'min(100%, calc(100vh * 1.6))',
        height: 'min(100%, calc(100vw / 1.6))',
        maxHeight: '100%',
      }}>
        <TimelineContext.Provider value={ctxValue}>
          {children}
        </TimelineContext.Provider>
      </div>
    </div>
  );
}

const heroHost = document.getElementById('hero-canvas');
if (heroHost) {
  const root = ReactDOM.createRoot(heroHost);
  root.render(
    <HeroStage>
      <WovenScene />
    </HeroStage>
  );
}