/* global React */
// Jullia — the loading curtain. A single damped reveal of the mark, held a beat,
// then a heavy-door fade to the site. One moment, never repeated, never a spinner.

function Preloader({ onDone }) {
  const [phase, setPhase] = React.useState('in'); // 'in' -> 'out' -> unmounts

  React.useEffect(() => {
    const reduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    const holdMs = reduced ? 120 : 1200;
    const outMs = reduced ? 150 : 1650; // matches --dur-curtain (1600ms) + a small buffer so unmount never clips the fade
    const t1 = setTimeout(() => setPhase('out'), holdMs);
    const t2 = setTimeout(() => onDone && onDone(), holdMs + outMs);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [onDone]);

  return (
    <div className="preloader" data-phase={phase}>
      <div className="preloader-inner">
        <img className="preloader-mark" src="assets/logo/jullia-logo-white.svg" alt="Jullia" />
        <span className="preloader-rule" />
      </div>
    </div>
  );
}

window.Preloader = Preloader;