/* =========================================================
   LOADING SCREEN
   - BG photo collage shows first
   - "THE PINK CURATION" sticker fades in ~700ms later
   ========================================================= */
const { useEffect, useState } = React;

function LoadingScreen({ leaving }) {
  const [cardIn, setCardIn] = useState(false);

  useEffect(() => {
    const t = setTimeout(() => setCardIn(true), 750);
    return () => clearTimeout(t);
  }, []);

  return (
    <div className={`loading ${leaving ? "out" : ""}`}>
      {/* the full loading composition with the
          "THE PINK CURATION" torn-paper card — fades in over black */}
      <LoadingCard show={cardIn} />

      {/* light texture overlays + the loading bar */}
      <div className="loading-grain"></div>
      <div className="barlabel">// loading the curation //</div>
      <div className="bar"><i></i></div>
    </div>
  );
}

window.LoadingScreen = LoadingScreen;