/* global React */
const { useState: useIntroState, useEffect: useIntroEffect } = React;

/* Intro minimaliste — logo FENNEC qui apparaît, puis page d'accueil.
   Timeline :  0  ▶ logo apparaît (fade + scale)
              1100 ▶ start exit transition
              1700 ▶ onDone → home
*/
const DUR_VISIBLE = 1100;
const DUR_EXIT    = 600;

function IntroSequence({ onDone }) {
  const [exiting, setExiting] = useIntroState(false);

  useIntroEffect(() => {
    document.body.style.overflow = "hidden";
    const tExit = setTimeout(() => setExiting(true), DUR_VISIBLE);
    const tDone = setTimeout(() => {
      document.body.style.overflow = "";
      onDone && onDone();
    }, DUR_VISIBLE + DUR_EXIT);
    return () => {
      clearTimeout(tExit);
      clearTimeout(tDone);
      document.body.style.overflow = "";
    };
  }, []);

  const onSkip = () => {
    document.body.style.overflow = "";
    onDone && onDone();
  };

  return (
    <div className={"fn-intro fn-intro--minimal" + (exiting ? " is-exiting" : "")} onClick={onSkip}>
      <div className="fn-intro-logo">
        <img src="assets/fennec-logo-master.jpg" alt="Studio FENNEC"/>
      </div>
    </div>
  );
}

window.IntroSequence = IntroSequence;