// Hero — HLS background video, GSAP entrance, eyebrow name + avatar, title headline, CTAs.
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

const HLS_SRC = "https://stream.mux.com/Aa02T7oM1wH5Mk5EEVDYhbZ1ChcdhRsS2m1NYyx4Ua1g.m3u8";

function Hero({ name, location, headline, tagline, onNav, ready }) {
  const [seeHover, setSeeHover] = useStateHero(false);
  const [reachHover, setReachHover] = useStateHero(false);

  // GSAP entrance once loading is done
  useEffectHero(() => {
    if (!ready || !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 },
      0.3
    );
    return () => tl.kill();
  }, [ready]);

  return (
    <section id="Home" className="relative w-full min-h-screen flex items-center justify-center overflow-hidden">
      {/* Living indigo-aurora background (shared with the footer) */}
      <AuroraBackground variant="hero" />

      {/* Content */}
      <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-5xl" style={{ fontFamily: "Poppins" }}>
        {/* Eyebrow: greeting */}
        <div className="blur-in flex items-center justify-center mb-8 text-sm md:text-base">
          <span className="text-white/80" style={{ fontFamily: "Poppins" }}>
            Hi, I'm <span className="text-white" style={{ fontFamily: "Poppins" }}>{name}</span> based in {location} <span className="emoji">📍</span>
          </span>
        </div>

        {/* Title headline — interactive, per-letter hover */}
        <h1
          className="name-reveal hero-headline relative text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-display leading-[1.04] tracking-tight text-text-primary mb-8 text-balance"
          style={{ fontSize: "clamp(32px, 8.2vw, 64px)", color: "rgb(255, 255, 255)" }}>
          {headline.split(" ").map((word, wi, arr) => (
            <React.Fragment key={wi}>
              <span className="hero-word">
                {[...word].map((ch, ci) => (
                  <span key={ci} className="char">{ch}</span>
                ))}
              </span>
              {wi < arr.length - 1 ? " " : null}
            </React.Fragment>
          ))}
        </h1>

        {/* Description */}
        <p className="blur-in text-sm md:text-base max-w-md mb-12 text-balance" style={{ color: "rgba(255,255,255,0.84)", fontFamily: "Poppins" }}>
          {tagline}
        </p>

        {/* CTAs */}
        <div className="blur-in inline-flex flex-wrap justify-center gap-4">
          <button
            onClick={() => onNav("Work")}
            onMouseEnter={() => setSeeHover(true)}
            onMouseLeave={() => setSeeHover(false)}
            className="relative rounded-full text-sm px-7 py-3.5 transition-transform duration-200 hover:scale-105">
            
            <span
              className="absolute rounded-full accent-gradient-anim transition-opacity duration-300"
              style={{ inset: "-2px", opacity: seeHover ? 1 : 0 }}>
            </span>
            <span
              className={
              "relative block rounded-full px-7 py-3.5 -mx-7 -my-3.5 transition-colors duration-300 " + (
              seeHover ? "bg-bg text-text-primary" : "bg-text-primary text-bg")
              } style={{ fontFamily: "Poppins" }}>
              
              View work
            </span>
          </button>

          <a
            href="Devarsh-Patel-Resume.pdf"
            download
            onMouseEnter={() => setReachHover(true)}
            onMouseLeave={() => setReachHover(false)}
            className="relative rounded-full text-sm px-7 py-3.5 transition-transform duration-200 hover:scale-105">
            
            <span
              className="absolute rounded-full accent-gradient-anim transition-opacity duration-300"
              style={{ inset: "-2px", opacity: reachHover ? 1 : 0 }}>
            </span>
            <span
              className={
              "relative block rounded-full px-7 py-3.5 -mx-7 -my-3.5 bg-bg text-text-primary transition-colors duration-300 border-2 " + (
              reachHover ? "border-transparent" : "border-stroke")
              } style={{ fontFamily: "Poppins" }}>Resume


            </span>
          </a>
        </div>
      </div>

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

}

Object.assign(window, { Hero });