/* eslint-disable */
// Intro v2 — breathing mark + wordmark entry. Click fires the warp tunnel.
// Original sticker/peel mechanic archived in intro.jsx.sticker-bak

const Intro = ({ onEnter }) => {
  const [phase, setPhase] = React.useState("ready");
  const [ripple, setRipple] = React.useState(false);

  React.useEffect(() => {
    document.body.classList.add("intro-locked");
    return () => document.body.classList.remove("intro-locked");
  }, []);

  // Auto-advance after 5s so search/ad traffic is never stranded
  React.useEffect(() => {
    const t = setTimeout(() => {
      document.body.classList.remove("intro-locked");
      document.body.classList.add("intro-done");
      setPhase("gone");
      onEnter && onEnter();
    }, 5000);
    return () => clearTimeout(t);
  }, []);

  const handleEnter = () => {
    if (phase !== "ready") return;
    setRipple(true);
    setTimeout(() => {
      document.body.classList.remove("intro-locked");
      setPhase("warp");
      setTimeout(() => {
        setPhase("gone");
        document.body.classList.add("intro-done");
        onEnter && onEnter();
      }, 1600);
    }, 160);
  };

  if (phase === "gone") return null;

  return (
    <div className={"intro intro-" + phase} aria-hidden={phase !== "ready"}>
      <div className="intro-bg" />
      <div className="intro-vignette" />

      {phase === "ready" && (
        <button
          type="button"
          className={"logo-entry" + (ripple ? " logo-entry--ripple" : "")}
          onClick={handleEnter}
          aria-label="Enter Sprout"
        >
          {/* Concentric breathing rings */}
          <div className="logo-ring logo-ring-1" />
          <div className="logo-ring logo-ring-2" />
          <div className="logo-ring logo-ring-3" />

          {/* Radial glow */}
          <div className="logo-glow" />

          {/* Leaf mark — breathes */}
          <img
            src="/logo-white.png"
            alt="Sprout"
            className="logo-breathe-img"
          />

          {/* Wordmark */}
          <span className="logo-wordmark">sprout</span>

          {/* Clickable hint */}
          <span className="logo-hint">
            <span className="logo-hint-dot" />
            tap to enter
          </span>

          {ripple && <div className="logo-ripple" />}
        </button>
      )}

      {/* WARP TUNNEL — unchanged */}
      {phase === "warp" && (
        <div className="warp warp-active" aria-hidden="true">
          <div className="warp-stage">
            {[0,1,2,3,4,5,6,7,8,9].map((i) => (
              <div className="warp-layer" key={i} style={{ "--i": i }}>
                <img src="assets/screenshots/screenshot1.png" alt="" />
              </div>
            ))}
          </div>
          <div className="warp-streaks" />
          <div className="warp-streaks warp-streaks-2" />
          <div className="warp-aberration" />
          <div className="warp-words">
            <span className="warp-word">Helping</span>
            <span className="warp-word">grassroots</span>
            <span className="warp-word">football</span>
            <span className="warp-word grad">grow.</span>
          </div>
          <div className="warp-flash" />
        </div>
      )}
    </div>
  );
};

Object.assign(window, { Intro });