// Loading screen — counter 000→100, rotating words, gradient progress bar
const { useState, useEffect, useRef } = React;

function LoadingScreen({ onComplete }) {
  const [count, setCount] = useState(0);
  const [wordIndex, setWordIndex] = useState(0);
  const [exiting, setExiting] = useState(false);
  const words = ["Strategy", "Experience", "Performance"];
  const startRef = useRef(null);
  const rafRef = useRef(null);

  useEffect(() => {
    const duration = 2700;
    const tick = (t) => {
      if (!startRef.current) startRef.current = t;
      const elapsed = t - startRef.current;
      const pct = Math.min(100, Math.floor((elapsed / duration) * 100));
      setCount(pct);
      if (pct < 100) {
        rafRef.current = requestAnimationFrame(tick);
      } else {
        setTimeout(() => {
          setExiting(true);
          setTimeout(() => onComplete && onComplete(), 600);
        }, 400);
      }
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [onComplete]);

  useEffect(() => {
    const id = setInterval(() => {
      setWordIndex((i) => (i + 1) % words.length);
    }, 900);
    return () => clearInterval(id);
  }, []);

  return (
    <div
      className="fixed inset-0 z-[9999] bg-bg overflow-hidden transition-opacity duration-500"
      style={{ opacity: exiting ? 0 : 1 }}
    >
      {/* Top-left label */}
      <div className="absolute top-6 left-6 md:top-10 md:left-10 text-xs text-muted uppercase tracking-[0.3em] anim-fade-in-down" style={{ animationDelay: "0.1s" }}>
        Creative Technology Agency
      </div>

      {/* Top-right meta */}
      <div className="absolute top-6 right-6 md:top-10 md:right-10 text-xs text-muted uppercase tracking-[0.3em] text-right anim-fade-in-down" style={{ animationDelay: "0.15s" }}>
        <div>Digital Edition '26</div>
        <div className="mt-1 text-[10px] opacity-60">v.01 — EXP</div>
      </div>

      {/* Center: rotating word */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div key={wordIndex} className="text-4xl md:text-6xl lg:text-7xl font-display italic text-text-primary/80 anim-word-in">
          {words[wordIndex]}
        </div>
      </div>

      {/* Bottom-left status */}
      <div className="absolute bottom-12 left-6 md:bottom-16 md:left-10 text-xs text-muted uppercase tracking-[0.3em] flex items-center gap-2 anim-fade-in-up" style={{ animationDelay: "0.2s" }}>
        <span className="w-1.5 h-1.5 rounded-full bg-[#89AACC] animate-pulse"></span>
        Loading digital assets
      </div>

      {/* Bottom-right: counter */}
      <div className="absolute bottom-10 right-6 md:bottom-12 md:right-10 text-6xl md:text-8xl lg:text-9xl font-display text-text-primary tabular-nums leading-none anim-fade-in-up" style={{ animationDelay: "0.2s" }}>
        {String(count).padStart(3, "0")}
      </div>

      {/* Progress bar */}
      <div className="absolute bottom-0 left-0 right-0 h-[3px] bg-stroke/50 overflow-hidden">
        <div
          className="h-full accent-gradient origin-left"
          style={{
            transform: `scaleX(${count / 100})`,
            boxShadow: "0 0 8px rgba(137, 170, 204, 0.35)",
            transition: "transform 0.05s linear",
          }}
        ></div>
      </div>

      <style>{`
        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px);} to {opacity:1; transform: translateY(0);} }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px);} to {opacity:1; transform: translateY(0);} }
        @keyframes wordIn { 0% {opacity:0; transform: translateY(20px);} 100% {opacity:1; transform: translateY(0);} }
        .anim-fade-in-down { animation: fadeInDown 0.6s ease-out both; }
        .anim-fade-in-up { animation: fadeInUp 0.6s ease-out both; }
        .anim-word-in { animation: wordIn 0.4s ease-out both; }
      `}</style>
    </div>
  );
}

window.LoadingScreen = LoadingScreen;