"use client";

/**
 * HERO — the signature moment. One orchestrated, choreographed page-load with
 * staggered reveals (the single highest-impact "alive" moment on the page).
 *   - Real background VIDEO (autoplay/muted/loop/playsinline, poster, cover,
 *     deferred load via IO, paused on hidden tab; reduced-motion -> poster only).
 *   - ANIMATED SVG: a revenue growth line that DRAWS itself (GSAP DrawSVG) with
 *     an area fill that fades up, grid ticks that draw in, and a "live" marker
 *     that springs in then pulses.
 *   - Headline revealed line-by-line behind a mask (clip + yPercent) with the
 *     custom expo curve; eyebrow/sub/CTAs/trust stagger up with a blur mask.
 *   - Pointer spotlight (spring-smoothed via CSS var) + parallax on scroll.
 *   - Custom easing personality throughout; honors prefers-reduced-motion.
 */
import { useEffect, useRef } from "react";
import Link from "next/link";
import { gsap, SplitText } from "./gsap";
import Magnetic from "./Magnetic";
import FluidBackground from "./FluidBackground";
import { SITE } from "../content";

/* "emilOut" ease is registered once in ./gsap (shared across components). */

export default function Hero() {
  const root = useRef<HTMLDivElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  // Spring-smoothed spotlight target so the glow trails the cursor with momentum
  // instead of snapping to raw pointer position.
  const target = useRef({ x: 50, y: 40 });
  const current = useRef({ x: 50, y: 40 });

  const onPointerMove = (e: React.PointerEvent) => {
    const el = root.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    target.current.x = ((e.clientX - r.left) / r.width) * 100;
    target.current.y = ((e.clientY - r.top) / r.height) * 100;
  };

  useEffect(() => {
    const el = root.current;
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    // --- spotlight: lerp current toward target each frame (momentum) ---
    let rafId = 0;
    if (!reduce) {
      const tick = () => {
        current.current.x += (target.current.x - current.current.x) * 0.08;
        current.current.y += (target.current.y - current.current.y) * 0.08;
        el.style.setProperty("--mx", `${current.current.x}%`);
        el.style.setProperty("--my", `${current.current.y}%`);
        rafId = requestAnimationFrame(tick);
      };
      rafId = requestAnimationFrame(tick);
    }

    const video = videoRef.current;
    let io: IntersectionObserver | null = null;
    let onVis: (() => void) | null = null;

    if (!reduce) {
      if (video) {
        io = new IntersectionObserver(
          ([entry]) => {
            if (entry.isIntersecting) video.play().catch(() => {});
            else video.pause();
          },
          { threshold: 0.1 }
        );
        io.observe(video);
        onVis = () => {
          if (document.hidden) video.pause();
          else if (video.getBoundingClientRect().top < window.innerHeight)
            video.play().catch(() => {});
        };
        document.addEventListener("visibilitychange", onVis);
      }

      const ctx = gsap.context(() => {
        // 1) Headline: split into lines+words, reveal each line from behind a
        //    mask (overflow hidden on lines) with a deliberate stagger.
        const split = new SplitText(".hero__h1", {
          type: "lines,words",
          linesClass: "hero__line",
        });
        // Apply the brand gradient to the final word ("revenue.") AFTER splitting.
        // A pre-nested <span class="grad"> got clipped by the line mask and never
        // revealed; as a normal split word it animates + shows correctly.
        split.words[split.words.length - 1]?.classList.add("grad");
        gsap.set(".hero__h1", { autoAlpha: 1 });
        gsap.set(".hero__line", { overflow: "hidden" });
        // Fast, tight cascade so the FULL headline — including the last word
        // ("revenue.") — finishes well within ~600ms and is never left hidden.
        gsap.from(split.words, {
          yPercent: 118,
          duration: 0.5,
          ease: "emilOut",
          stagger: 0.025,
          delay: 0.12,
        });

        // 2) Eyebrow, sub, CTAs, trust — lift + blur mask, tight stagger.
        gsap.set(".hero__stagger", { autoAlpha: 0 });
        gsap.to(".hero__stagger", {
          autoAlpha: 1,
          y: 0,
          filter: "blur(0px)",
          duration: 1,
          ease: "emilOut",
          stagger: 0.07,
          delay: 0.55,
          startAt: { y: 26, filter: "blur(5px)" },
        });

        // 3) ANIMATED SVG — grid draws, the revenue line draws itself, area
        //    fades up, the live marker springs in (back ease => overshoot).
        gsap.set(".hero-svg__area", { autoAlpha: 0 });
        const tl = gsap.timeline({ delay: 0.45 });
        tl.from(".hero-svg__grid line", {
          drawSVG: "0%",
          duration: 0.9,
          stagger: 0.06,
          ease: "power2.out",
        })
          .from(
            ".hero-svg__line",
            { drawSVG: "0%", duration: 2, ease: "power2.inOut" },
            "-=0.5"
          )
          .to(".hero-svg__area", { autoAlpha: 1, duration: 1 }, "-=1.2")
          .from(
            ".hero-svg__dot",
            {
              scale: 0,
              transformOrigin: "center",
              duration: 0.6,
              ease: "back.out(2.2)",
            },
            "-=0.5"
          )
          .from(
            ".hero-svg__dot-ring",
            { scale: 0.4, autoAlpha: 0, transformOrigin: "center", duration: 0.6, ease: "emilOut" },
            "<"
          );

        // 4) Parallax: video drifts slower; content + SVG drift at different
        //    rates as you scroll away => layered depth.
        gsap.to(".hero__media", {
          yPercent: 16,
          ease: "none",
          scrollTrigger: { trigger: el, start: "top top", end: "bottom top", scrub: 0.6 },
        });
        gsap.to(".hero-svg", {
          yPercent: 8,
          ease: "none",
          scrollTrigger: { trigger: el, start: "top top", end: "bottom top", scrub: 0.6 },
        });
        gsap.to(".hero__content", {
          yPercent: -10,
          opacity: 0.3,
          ease: "none",
          scrollTrigger: { trigger: el, start: "top top", end: "bottom top", scrub: 0.6 },
        });
      }, el);

      return () => {
        cancelAnimationFrame(rafId);
        io?.disconnect();
        if (onVis) document.removeEventListener("visibilitychange", onVis);
        ctx.revert();
      };
    }

    // Reduced motion: reveal everything statically, show poster only.
    gsap.set([".hero__h1", ".hero__stagger", ".hero-svg__area"], {
      autoAlpha: 1,
      y: 0,
      filter: "none",
    });
    return () => cancelAnimationFrame(rafId);
  }, []);

  return (
    <section
      ref={root}
      className="hero"
      aria-labelledby="hero-h1"
      onPointerMove={onPointerMove}
    >
      {/* ---- live WebGL fluid background (cursor-reactive) ---- */}
      <FluidBackground variant="hero" />

      {/* ---- background video (deferred) + poster + scrims ----
          kept as a subtle moving TEXTURE layered over the fluid; the fluid is
          now the dominant, cursor-reactive element. */}
      <div className="hero__media" aria-hidden="true">
        <video
          ref={videoRef}
          className="hero__video"
          poster="/assets/hero-poster.jpg"
          muted
          loop
          playsInline
          preload="none"
        >
          <source src="/assets/hero.mp4" type="video/mp4" />
        </video>
        <div className="hero__scrim" />
        <div className="hero__spotlight" />
        <div className="hero__noise" />
      </div>

      {/* ---- animated SVG growth chart ---- */}
      <svg
        className="hero-svg"
        viewBox="0 0 1200 600"
        preserveAspectRatio="xMidYMid slice"
        aria-hidden="true"
      >
        <defs>
          <linearGradient id="heroLine" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#3b82f6" />
            <stop offset="55%" stopColor="#8b5cf6" />
            <stop offset="100%" stopColor="#10b981" />
          </linearGradient>
          <linearGradient id="heroArea" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#8b5cf6" stopOpacity="0.35" />
            <stop offset="100%" stopColor="#8b5cf6" stopOpacity="0" />
          </linearGradient>
        </defs>
        <g className="hero-svg__grid">
          <line x1="0" y1="150" x2="1200" y2="150" />
          <line x1="0" y1="300" x2="1200" y2="300" />
          <line x1="0" y1="450" x2="1200" y2="450" />
        </g>
        <path
          className="hero-svg__area"
          fill="url(#heroArea)"
          d="M0,520 C160,520 220,470 340,430 C470,388 520,300 660,290 C820,278 880,160 1040,120 C1110,102 1160,92 1200,86 L1200,600 L0,600 Z"
        />
        <path
          className="hero-svg__line"
          fill="none"
          stroke="url(#heroLine)"
          strokeWidth="4"
          strokeLinecap="round"
          d="M0,520 C160,520 220,470 340,430 C470,388 520,300 660,290 C820,278 880,160 1040,120 C1110,102 1160,92 1200,86"
        />
        <circle className="hero-svg__dot-ring" cx="1200" cy="86" r="18" fill="none" stroke="#10b981" strokeWidth="1.5" opacity="0.5" />
        <circle className="hero-svg__dot" cx="1200" cy="86" r="9" fill="#10b981" />
      </svg>

      {/* ---- content ---- */}
      <div className="hero__content wrap">
        <p className="hero__eyebrow hero__stagger">
          <span className="hero__live" aria-hidden="true" />
          Results-driven digital marketing agency
        </p>

        <h1 id="hero-h1" className="hero__h1">
          Marketing that grows your revenue.
        </h1>

        <p className="hero__sub hero__stagger">
          We run paid, SEO, and content programs built around your revenue
          targets, then show you exactly what they returned. Every month.
        </p>

        <div className="hero__cta hero__stagger">
          <Magnetic strength={0.4}>
            <Link
              href={SITE.booking}
              className="btn btn--accent"
              data-cursor="Book it"
            >
              Get your growth audit
            </Link>
          </Magnetic>
          <Magnetic strength={0.3}>
            <a href="#work" className="btn btn--ghost" data-cursor="See proof">
              See the results <span className="arrow" aria-hidden="true">→</span>
            </a>
          </Magnetic>
        </div>

        <dl className="hero__trust hero__stagger">
          <div>
            <dt>$40M+</dt>
            <dd>in client revenue generated</dd>
          </div>
          <div className="hero__trust-div" aria-hidden="true" />
          <div>
            <dt>50+</dt>
            <dd>brands grown</dd>
          </div>
        </dl>
      </div>

      <a
        href="#manifesto"
        className="hero__scroll hero__stagger"
        aria-label="Scroll to content"
      >
        <span className="hero__scroll-line" aria-hidden="true" />
        Scroll
      </a>
    </section>
  );
}