"use client";

import * as React from "react";
import Link from "next/link";
import Image from "next/image";
import { motion, useScroll, useTransform, useReducedMotion } from "framer-motion";
import { ArrowRight, ChevronDown } from "lucide-react";
import { company } from "@/lib/content";
import { LoopingVideoBackground } from "@/components/ui-stratops/looping-video-background";

export function HeroSection() {
  const ref = React.useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });

  const yBg = useTransform(scrollYProgress, [0, 1], [0, reduce ? 0 : 180]);
  const yMid = useTransform(scrollYProgress, [0, 1], [0, reduce ? 0 : 90]);
  const yFg = useTransform(scrollYProgress, [0, 1], [0, reduce ? 0 : -40]);
  const opacity = useTransform(scrollYProgress, [0, 0.7], [1, 0]);
  const scale = useTransform(scrollYProgress, [0, 0.9], [1, reduce ? 1 : 1.08]);
  const bgOpacity = useTransform(scrollYProgress, [0, 0.85], [1, 0.35]);

  return (
    <section
      ref={ref}
      id="top"
      className="relative min-h-[100svh] w-full overflow-hidden bg-background"
    >
      {/* Parallax background — Johannesburg skyline at blue hour (video) */}
      <motion.div
        style={{ y: yBg, scale }}
        className="absolute inset-0 -z-30"
      >
        <motion.div
          style={{ opacity: bgOpacity }}
          className="absolute inset-0"
        >
          <LoopingVideoBackground
            src="/video/jhb-skyline.mp4"
            poster="/markets/jhb-skyline.png"
            alt="Johannesburg Sandton skyline at blue hour"
            priority
            overlayStyle={{
              background:
                "linear-gradient(180deg, oklch(0.10 0.04 258 / 0.55) 0%, oklch(0.12 0.05 258 / 0.78) 55%, var(--background) 100%), radial-gradient(60% 50% at 75% 18%, oklch(0.55 0.20 252 / 0.5) 0%, transparent 60%), radial-gradient(45% 35% at 18% 80%, oklch(0.45 0.16 220 / 0.45) 0%, transparent 65%)",
            }}
          />
        </motion.div>
      </motion.div>

      {/* Skyline silhouette layer (vector ground line) */}
      <motion.div
        style={{ y: yMid }}
        className="pointer-events-none absolute inset-x-0 bottom-0 -z-20 h-[28%]"
      >
        <svg
          viewBox="0 0 1440 280"
          preserveAspectRatio="none"
          className="h-full w-full"
          aria-hidden="true"
        >
          <defs>
            <linearGradient id="skyline" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.10 0.04 258)" stopOpacity="0" />
              <stop offset="60%" stopColor="oklch(0.08 0.04 258)" stopOpacity="0.85" />
              <stop offset="100%" stopColor="oklch(0.06 0.03 258)" stopOpacity="1" />
            </linearGradient>
          </defs>
          <path
            d="M0 280 L0 200 L40 200 L40 170 L80 170 L80 190 L120 190 L120 150 L160 150 L160 180 L210 180 L210 130 L260 130 L260 165 L300 165 L300 145 L340 145 L340 175 L380 175 L380 120 L420 120 L420 155 L470 155 L470 135 L510 135 L510 170 L560 170 L560 140 L610 140 L610 175 L650 175 L650 150 L700 150 L700 130 L740 130 L740 165 L790 165 L790 140 L830 140 L830 175 L880 175 L880 145 L920 145 L920 165 L960 165 L960 130 L1000 130 L1000 170 L1050 170 L1050 145 L1100 145 L1100 175 L1150 175 L1150 155 L1200 155 L1200 180 L1250 180 L1250 150 L1290 150 L1290 175 L1340 175 L1340 155 L1380 155 L1380 195 L1440 195 L1440 280 Z"
            fill="url(#skyline)"
          />
        </svg>
      </motion.div>

      {/* Grain */}
      <div className="grain-overlay -z-10" />

      {/* Glowing StratOps logo mark — brand presence in hero */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 1.2, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
        className="pointer-events-none absolute right-4 top-1/2 z-[5] hidden -translate-y-1/2 lg:block xl:right-12"
      >
        <div className="relative">
          {/* Aura glow */}
          <div
            className="absolute inset-0 animate-pulse-glow"
            style={{
              background:
                "radial-gradient(circle, oklch(0.65 0.20 252 / 0.35) 0%, transparent 70%)",
              filter: "blur(40px)",
              transform: "scale(1.8)",
            }}
          />
          <Image
            src="/brand/logo-bottom.png"
            alt="StratOps Advisory Group"
            width={220}
            height={220}
            className="relative h-[200px] w-[200px] object-contain opacity-40 drop-shadow-[0_0_40px_rgba(110,170,255,0.5)] xl:h-[240px] xl:w-[240px]"
            style={{
              filter: "drop-shadow(0 0 30px rgba(110,170,255,0.4)) drop-shadow(0 0 60px rgba(227,179,65,0.15))",
            }}
            priority
          />
        </div>
      </motion.div>

      {/* Content */}
      <motion.div
        style={{ y: yFg, opacity }}
        className="relative z-10 mx-auto flex min-h-[100svh] max-w-7xl flex-col justify-center px-4 pt-24 pb-32 sm:px-6 lg:px-8"
      >
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
          className="mb-6 flex items-center gap-2.5"
        >
          {/* Small hexagonal crystal mark — echoes the StratOps logo */}
          <svg
            viewBox="0 0 24 24"
            className="h-3.5 w-3.5 text-brand"
            fill="none"
            aria-hidden="true"
          >
            <path
              d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinejoin="round"
            />
            <path
              d="M12 2V22M3 7L21 17M21 7L3 17"
              stroke="currentColor"
              strokeWidth="0.75"
              strokeLinejoin="round"
              opacity="0.4"
            />
          </svg>
          <span className="font-mono-num text-[11px] uppercase tracking-[0.28em] text-brand">
            {company.name} · {company.location}
          </span>
        </motion.div>

        <div className="max-w-5xl">
          <motion.h1
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.9, delay: 0.08, ease: [0.16, 1, 0.3, 1] }}
            className="font-display text-[clamp(2.5rem,7vw,6.5rem)] font-semibold leading-[0.95] tracking-tight text-foreground"
          >
            <span className="block">
              Strategy<span className="text-brand">.</span>
            </span>
            <span className="block">
              Operations<span className="text-brand">.</span>
            </span>
            <span className="block text-gold italic">Reimagined.</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.32, ease: [0.16, 1, 0.3, 1] }}
            className="mt-8 max-w-2xl text-lg leading-relaxed text-foreground/80 sm:text-xl"
          >
            Premier South African management consulting for organisations that
            refuse to stand still. We design the strategy, engineer the process,
            and deliver the transformation —{" "}
            <span className="text-foreground">end to end.</span>
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.46, ease: [0.16, 1, 0.3, 1] }}
            className="mt-10 flex flex-col gap-4 sm:flex-row sm:items-center"
          >
            <Link
              href="#book"
              className="group inline-flex items-center justify-center gap-2.5 rounded-full bg-brand px-7 py-4 text-sm font-semibold text-background shadow-[0_8px_40px_-12px_var(--brand)] transition-all duration-300 hover:-translate-y-0.5 hover:shadow-[0_12px_50px_-10px_var(--brand)]"
            >
              Book a discovery session
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Link>
            <Link
              href="#services"
              className="group inline-flex items-center justify-center gap-2.5 rounded-full border border-border bg-card/40 px-7 py-4 text-sm font-semibold text-foreground backdrop-blur-sm transition-all duration-300 hover:border-brand/60 hover:bg-card/70"
            >
              Explore our services
              <span className="text-brand transition-transform group-hover:translate-x-1">
                →
              </span>
            </Link>
          </motion.div>
        </div>
      </motion.div>

      {/* Scroll cue */}
      <motion.div
        style={{ opacity }}
        className="absolute inset-x-0 bottom-6 z-10 flex flex-col items-center gap-2"
      >
        <span className="font-mono-num text-[10px] uppercase tracking-[0.3em] text-muted-foreground">
          Scroll
        </span>
        <span className="relative flex h-9 w-5 items-start justify-center rounded-full border border-border/60">
          <span className="mt-1.5 h-1.5 w-1 rounded-full bg-brand animate-scroll-cue" />
        </span>
        <ChevronDown className="h-3 w-3 text-muted-foreground" />
      </motion.div>

      {/* Bottom gradient into next section */}
      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-32 bg-gradient-to-b from-transparent to-background" />
    </section>
  );
}