"use client";

import { useEffect, useRef } from "react";
import { motion, useReducedMotion } from "framer-motion";
import MagneticButton from "@/components/MagneticButton";
import { gsap, prefersReducedMotion } from "@/lib/gsap";

const H1_LINES = ["Damian Michael.", "Building Africa's", "Digital Backbone."];

/** The Opening Shot — full-viewport looping cinematic video with kinetic title cards. */
export default function Hero() {
  const sectionRef = useRef<HTMLElement>(null);
  const mediaRef = useRef<HTMLDivElement>(null);
  const spotRef = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();

  // Cursor-follow spotlight + slow scroll parallax on the video plate
  useEffect(() => {
    if (prefersReducedMotion()) return;
    const section = sectionRef.current;
    const media = mediaRef.current;
    const spot = spotRef.current;
    if (!section || !media || !spot) return;

    const onMove = (e: PointerEvent) => {
      const r = section.getBoundingClientRect();
      spot.style.background = `radial-gradient(560px circle at ${e.clientX - r.left}px ${
        e.clientY - r.top
      }px, rgba(201,169,97,0.12), transparent 65%)`;
    };
    section.addEventListener("pointermove", onMove, { passive: true });

    const ctx = gsap.context(() => {
      gsap.to(media, {
        scale: 1.18,
        yPercent: 8,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: "bottom top",
          scrub: true,
        },
      });
    }, section);

    return () => {
      section.removeEventListener("pointermove", onMove);
      ctx.revert();
    };
  }, []);

  return (
    <section
      ref={sectionRef}
      id="top"
      className="relative flex h-[100svh] min-h-[620px] items-end overflow-hidden bg-obsidian"
      aria-label="Damian Michael — building Africa's digital backbone"
    >
      {/* Cinematic plate: poster underlay + looping video */}
      <div ref={mediaRef} className="absolute inset-0 will-change-transform">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src="/images/damian-michael-cape-town-skyline-hero.webp"
          alt=""
          aria-hidden
          className="absolute inset-0 h-full w-full object-cover"
          fetchPriority="high"
        />
        <video
          className="absolute inset-0 h-full w-full object-cover"
          src="/video/damian-michael-cape-town-hero.mp4"
          poster="/images/damian-michael-cape-town-skyline-hero.webp"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          aria-hidden
        />
      </div>

      {/* Colour grade + legibility gradients */}
      <div className="absolute inset-0 bg-teal/15 mix-blend-color" aria-hidden />
      <div
        className="absolute inset-0"
        aria-hidden
        style={{
          background:
            "linear-gradient(to bottom, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.12) 35%, rgba(10,10,11,0.35) 68%, #0a0a0b 100%)",
        }}
      />
      {/* Cursor-follow spotlight */}
      <div ref={spotRef} className="absolute inset-0" aria-hidden />

      {/* Copy block */}
      <div className="relative z-10 mx-auto w-full max-w-[1440px] px-6 pb-24 md:px-10 md:pb-28">
        <motion.p
          className="kicker mb-6"
          initial={reduce ? false : { opacity: 0, y: 14 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.35, ease: [0.22, 1, 0.36, 1] }}
        >
          CEO · Innovo Networks · Cape Town → Nairobi → The World
        </motion.p>

        <h1
          className="font-display font-black text-ivory text-balance"
          style={{
            fontSize: "clamp(3rem, 8vw, 7.5rem)",
            letterSpacing: "-0.03em",
            lineHeight: 1.02,
          }}
        >
          {H1_LINES.map((line, li) => (
            <span key={line} className="block overflow-hidden pb-[0.08em] -mb-[0.08em]">
              <motion.span
                className="inline-block will-change-transform"
                initial={reduce ? false : { y: "112%" }}
                animate={{ y: "0%" }}
                transition={{
                  duration: 1.05,
                  delay: 0.5 + li * 0.14,
                  ease: [0.22, 1, 0.36, 1],
                }}
              >
                {li === 0 ? (
                  line
                ) : (
                  <span className="text-ivory/90">{line}</span>
                )}
              </motion.span>
            </span>
          ))}
        </h1>

        <motion.div
          className="mt-10 flex flex-wrap items-center gap-6"
          initial={reduce ? false : { opacity: 0, y: 18 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 1.15, ease: [0.22, 1, 0.36, 1] }}
        >
          <MagneticButton href="/#contact" variant="solid">
            Book Damian <span aria-hidden>→</span>
          </MagneticButton>
          <MagneticButton href="/journal" variant="ghost">
            Read the Journal
          </MagneticButton>
        </motion.div>
      </div>

      {/* Scroll cue */}
      <div
        className="absolute bottom-8 left-1/2 z-10 hidden -translate-x-1/2 flex-col items-center gap-3 md:flex"
        aria-hidden
      >
        <span className="font-mono text-[0.58rem] uppercase tracking-[0.4em] text-ivory/50">
          Scroll
        </span>
        <span className="scroll-cue-line block h-12 w-px bg-gold/70" />
      </div>
    </section>
  );
}