/* HERO — full viewport with inset video, noise, nav, giant pullup headline, CTA */

const HERO_VIDEO = "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260405_170732_8a9ccda6-5cff-4628-b164-059c500a2b41.mp4";

function Navbar() {
  const items = ["The Problem", "The System", "Capabilities", "Proof", "Free Report"];
  return (
    <React.Fragment>
      {/* Logo — top-left */}
      <a
        href="#"
        className="absolute top-5 left-6 md:top-7 md:left-10 z-40 select-none"
        style={{
          color: "#E1E0CC",
          fontWeight: 800,
          letterSpacing: "-0.03em",
          fontSize: "clamp(18px, 1.6vw, 26px)",
          lineHeight: 1,
          textDecoration: "none",
          fontFamily: "'Almarai', 'Helvetica Neue', Helvetica, Arial, sans-serif",
        }}
      >
        /DATA_DOGS
      </a>

      <nav className="absolute top-0 left-1/2 -translate-x-1/2 z-30">
        <div className="bg-black rounded-b-2xl md:rounded-b-3xl px-4 py-2 md:px-8 md:py-3 flex items-center gap-3 sm:gap-6 md:gap-12 lg:gap-14 whitespace-nowrap">
          {items.map((label) => (
            <a
              key={label}
              href="#"
              className="nav-link text-[10px] sm:text-xs md:text-sm tracking-wide"
            >
              {label}
            </a>
          ))}
        </div>
      </nav>
    </React.Fragment>
  );
}

function HeroVisual() {
  const videoRef = React.useRef(null);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const tryPlay = () => {
      const p = v.play();
      if (p && p.catch) p.catch(() => {});
    };
    tryPlay();
    const onLoaded = () => tryPlay();
    v.addEventListener("loadeddata", onLoaded);
    v.addEventListener("canplay", onLoaded);
    return () => {
      v.removeEventListener("loadeddata", onLoaded);
      v.removeEventListener("canplay", onLoaded);
    };
  }, []);
  return (
    <div className="absolute inset-0">
      <video
        ref={videoRef}
        src={HERO_VIDEO}
        autoPlay
        loop
        muted
        playsInline
        preload="auto"
        crossOrigin="anonymous"
        className="absolute inset-0 w-full h-full object-cover pointer-events-none"
      />
      {/* Dark fallback behind the video in case it never loads */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          zIndex: -1,
          background:
            "radial-gradient(120% 80% at 30% 40%, #1a1814 0%, #0a0907 60%, #000 100%)",
        }}
      />
      <div className="absolute inset-0 noise-overlay opacity-[0.7] mix-blend-overlay pointer-events-none" />
      <div className="absolute inset-0 bg-gradient-to-b from-black/30 via-transparent to-black/60 pointer-events-none" />
    </div>
  );
}

function HeroContent() {
  return (
    <div className="absolute bottom-0 left-0 right-0 px-5 sm:px-8 md:px-10 pb-6 md:pb-8 z-20">
      <div className="grid grid-cols-12 gap-4 md:gap-6 items-end">
        {/* Giant heading */}
        <div className="col-span-12 lg:col-span-8 flex items-end">
          <WordsPullUp
            as="h1"
            text="Ranking"
            showAsterisk={true}
            className="font-medium leading-[0.85] tracking-[-0.07em] text-[26vw] sm:text-[24vw] md:text-[22vw] lg:text-[20vw] xl:text-[19vw] 2xl:text-[20vw]"
            style={{ color: "#E1E0CC", paddingBottom: "0.18em" }}
            stagger={0.08}
          />
        </div>

        {/* Right column: description + CTA */}
        <div className="col-span-12 lg:col-span-4 flex flex-col gap-5 md:gap-6 pb-2 md:pb-4 max-w-[520px]">
          <p
            className="text-primary/70 text-xs sm:text-sm md:text-base"
            style={{ lineHeight: 1.2, opacity: 0 }}
            ref={(el) => {
              if (!el) return;
              if (document.hidden) { el.style.opacity = "1"; el.style.transform = "translateY(0)"; return; }
              try { el.animate([{ opacity: 0, transform: "translateY(20px)" }, { opacity: 1, transform: "translateY(0)" }], { duration: 900, delay: 500, easing: "cubic-bezier(0.16,1,0.3,1)", fill: "both" }); }
              catch(e) { el.style.opacity = "1"; }
            }}
          >
            DATA DOGS is a total-visibility studio engineering one system for Google ranking, AI citation, and business automation — so your name is the answer, not the ad.
          </p>

          <a
            href="#"
            className="group inline-flex items-center gap-2 hover:gap-3 transition-all duration-300 bg-primary rounded-full pl-5 sm:pl-6 pr-1 py-1 self-start text-black font-medium text-sm sm:text-base whitespace-nowrap"
            style={{ opacity: 0 }}
            ref={(el) => {
              if (!el) return;
              if (document.hidden) { el.style.opacity = "1"; el.style.transform = "translateY(0)"; return; }
              try { el.animate([{ opacity: 0, transform: "translateY(20px)" }, { opacity: 1, transform: "translateY(0)" }], { duration: 900, delay: 700, easing: "cubic-bezier(0.16,1,0.3,1)", fill: "both" }); }
              catch(e) { el.style.opacity = "1"; }
            }}
          >
            <span className="pr-2">Get my free report</span>
            <span className="bg-black rounded-full w-9 h-9 sm:w-10 sm:h-10 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
              <ArrowRight size={16} style={{ color: "#E1E0CC" }} />
            </span>
          </a>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="h-screen w-full p-4 md:p-6 bg-black">
      <div className="relative w-full h-full rounded-2xl md:rounded-[2rem] overflow-hidden bg-black">
        <HeroVisual />
        <Navbar />
        <HeroContent />
      </div>
    </section>
  );
}

Object.assign(window, { Hero });