function IntroScreen({ onDone }) {
  const [phase, setPhase] = React.useState("enter"); // enter | hold | exit

  React.useEffect(() => {
    // hold after enter animation
    const holdTimer = setTimeout(() => setPhase("exit"), 2400);
    return () => clearTimeout(holdTimer);
  }, []);

  React.useEffect(() => {
    if (phase === "exit") {
      const exitTimer = setTimeout(() => onDone && onDone(), 700);
      return () => clearTimeout(exitTimer);
    }
  }, [phase, onDone]);

  return (
    <div className={`intro-screen${phase === "exit" ? " intro-exit" : ""}`}>
      <div className="intro-content">
        {/* Logo */}
        <div className="intro-logo-wrap">
          <img src="logo.svg" alt="Discover Studio" className="intro-logo" />
        </div>

        {/* Studio label */}
        <div className="intro-tagline">
          Conception de sites internet &amp; solutions IT
        </div>

        {/* Progress bar */}
        <div className="intro-bar-track">
          <div className="intro-bar-fill" />
        </div>
      </div>

      {/* Background orbs */}
      <div className="intro-orb intro-orb-1" />
      <div className="intro-orb intro-orb-2" />
    </div>
  );
}

window.IntroScreen = IntroScreen;