// Hero section with HLS video background, navbar, and rotating role line
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

function Navbar({ active, setActive, scrolled }) {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 flex justify-center pt-4 md:pt-6 px-4 pointer-events-none">
      <div
        className={`pointer-events-auto inline-flex items-center rounded-full backdrop-blur-md border border-white/10 bg-surface/80 px-2 py-2 transition-shadow duration-300 ${
          scrolled ? "shadow-md shadow-black/30" : ""
        }`}
      >
        {/* Logo */}
        <a href="#hero" className="relative w-9 h-9 rounded-full flex items-center justify-center group transition-transform duration-300 hover:scale-110">
          <span className="absolute inset-0 rounded-full logo-ring"></span>
          <span className="absolute inset-[2px] rounded-full bg-bg flex items-center justify-center">
            <span className="font-display italic text-[13px] text-text-primary">AQ</span>
          </span>
        </a>

        <span className="hidden sm:block w-px h-5 bg-stroke mx-1"></span>

        {/* Nav links */}
        <div className="flex items-center gap-0">
          {["Home", "Services", "Insights"].map((item) => {
            const isActive = active === item;
            return (
              <button
                key={item}
                onClick={() => setActive(item)}
                className={`text-xs sm:text-sm rounded-full px-3 sm:px-4 py-1.5 sm:py-2 transition-colors ${
                  isActive
                    ? "text-text-primary bg-stroke/50"
                    : "text-muted hover:text-text-primary hover:bg-stroke/50"
                }`}
              >
                {item}
              </button>
            );
          })}
        </div>

        <span className="hidden sm:block w-px h-5 bg-stroke mx-1"></span>

        {/* Say hi button */}
        <a
          href="#contact"
          className="relative rounded-full inline-flex items-center"
        >
          <span
            className="absolute opacity-0 hover:opacity-100 group-hover:opacity-100 rounded-full accent-gradient-anim"
            style={{ inset: "-2px" }}
          ></span>
          <span className="relative inline-flex items-center bg-surface rounded-full backdrop-blur-md text-xs sm:text-sm px-3 sm:px-4 py-1.5 sm:py-2 text-text-primary hover:bg-stroke/50 transition-colors gap-1">
            Start a project
            <span className="text-[10px] opacity-70">↗</span>
          </span>
        </a>
      </div>
    </nav>
  );
}

function Hero() {
  const videoRef = useRefH(null);
  const containerRef = useRefH(null);
  const [roleIndex, setRoleIndex] = useStateH(0);
  const [scrolled, setScrolled] = useStateH(false);
  const [active, setActive] = useStateH("Home");
  const [videoReady, setVideoReady] = useStateH(false);
  const roles = ["digital experiences", "interactive installations", "AI-powered campaigns"];

  // HLS setup
  useEffectH(() => {
    const v = videoRef.current;
    if (!v) return;
    const src = "https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8";
    let hls;
    if (window.Hls && window.Hls.isSupported()) {
      hls = new window.Hls({ lowLatencyMode: true });
      hls.loadSource(src);
      hls.attachMedia(v);
      hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
        v.play().catch(() => {});
        setVideoReady(true);
      });
    } else if (v.canPlayType("application/vnd.apple.mpegurl")) {
      v.src = src;
      v.addEventListener("loadedmetadata", () => {
        v.play().catch(() => {});
        setVideoReady(true);
      });
    }
    return () => { if (hls) hls.destroy(); };
  }, []);

  // Rotating roles
  useEffectH(() => {
    const id = setInterval(() => setRoleIndex((i) => (i + 1) % roles.length), 2000);
    return () => clearInterval(id);
  }, []);

  // Scroll for navbar shadow
  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 100);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // GSAP entrance
  useEffectH(() => {
    if (!window.gsap) return;
    const tl = window.gsap.timeline({ defaults: { ease: "power3.out" } });
    tl.fromTo(
      ".name-reveal",
      { opacity: 0, y: 50 },
      { opacity: 1, y: 0, duration: 1.2, delay: 0.1 }
    );
    tl.fromTo(
      ".blur-in",
      { opacity: 0, filter: "blur(10px)", y: 20 },
      { opacity: 1, filter: "blur(0px)", y: 0, duration: 1, stagger: 0.1, delay: -0.8 }
    );
  }, []);

  return (
    <section id="hero" ref={containerRef} className="relative w-full h-screen min-h-[700px] overflow-hidden bg-bg">
      <Navbar active={active} setActive={setActive} scrolled={scrolled} />

      {/* Background video */}
      <div className="absolute inset-0 overflow-hidden">
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          className="absolute top-1/2 left-1/2 min-w-full min-h-full object-cover -translate-x-1/2 -translate-y-1/2"
          style={{ opacity: videoReady ? 1 : 0, transition: "opacity 0.8s ease" }}
        ></video>
        {/* Fallback placeholder while video loads */}
        <div
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse at 30% 40%, rgba(78, 133, 191, 0.18), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(137, 170, 204, 0.10), transparent 60%), #0a0a0a",
            opacity: videoReady ? 0 : 1,
            transition: "opacity 0.8s ease",
          }}
        ></div>
        <div className="absolute inset-0 bg-black/20"></div>
        <div className="absolute bottom-0 left-0 right-0 h-48 bg-gradient-to-t from-bg to-transparent"></div>
      </div>

      {/* Hero content */}
      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center px-6">
        <div className="text-xs text-muted uppercase tracking-[0.3em] mb-8 blur-in">DIGITAL EXPERIENCE AGENCY</div>

        <h1 className="text-6xl md:text-8xl lg:text-9xl font-display italic leading-[0.9] tracking-tight text-text-primary mb-6 name-reveal">
          Noema Agent
        </h1>

        <div className="text-base md:text-lg text-text-primary/90 mb-6 blur-in">
          We create{" "}
          <span
            key={roleIndex}
            className="font-display italic text-text-primary inline-block animate-role-fade-in"
          >
            {roles[roleIndex]}
          </span>{" "}
          for ambitious brands.
        </div>

        <p className="text-sm md:text-base text-muted max-w-md mb-12 blur-in">
          We design immersive websites, creative production, AI activations, 3D content and performance-driven digital experiences that help brands grow visibility, engagement and conversions.
        </p>

        {/* CTAs */}
        <div className="inline-flex flex-wrap gap-4 justify-center blur-in">
          <a href="#works" className="group relative rounded-full">
            <span className="absolute inset-[-2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity accent-gradient-anim"></span>
            <span className="relative inline-flex items-center rounded-full text-sm px-7 py-3.5 bg-text-primary text-bg group-hover:bg-bg group-hover:text-text-primary transition-colors duration-300">
              View Case Studies
            </span>
          </a>
          <a href="#contact" className="group relative rounded-full">
            <span className="absolute inset-[-2px] rounded-full opacity-0 group-hover:opacity-100 transition-opacity accent-gradient-anim"></span>
            <span className="relative inline-flex items-center rounded-full text-sm px-7 py-3.5 border-2 border-stroke bg-bg text-text-primary group-hover:border-transparent transition-colors duration-300">
              Book a Discovery Call
              <span className="ml-1 opacity-70">↗</span>
            </span>
          </a>
        </div>
      </div>

      {/* Scroll indicator */}
      <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-3">
        <span className="text-xs text-muted uppercase tracking-[0.2em]">SCROLL</span>
        <div className="w-px h-10 bg-stroke relative overflow-hidden">
          <span className="absolute inset-x-0 top-0 h-1/2 accent-gradient animate-scroll-down"></span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;