"use client";

import * as React from "react";
import Link from "next/link";
import Image from "next/image";
import { motion, AnimatePresence, useScroll, useSpring } from "framer-motion";
import { Menu, X, ArrowRight } from "lucide-react";
import { navItems, company } from "@/lib/content";
import { cn } from "@/lib/utils";

function BrandMark({ compact = false }: { compact?: boolean }) {
  return (
    <Link
      href="#top"
      className="group flex items-center gap-2.5"
      aria-label={`${company.name} home`}
    >
      <span className="relative flex h-10 w-10 items-center justify-center transition-transform duration-300 group-hover:scale-105">
        <Image
          src="/brand/logo-right.png"
          alt=""
          width={56}
          height={56}
          className="h-full w-full object-contain drop-shadow-[0_2px_12px_rgba(110,170,255,0.45)]"
          priority
        />
      </span>
      <span className="flex flex-col leading-none">
        <span className="font-display text-base font-semibold tracking-tight text-foreground">
          StratOps
        </span>
        {!compact && (
          <span className="font-mono-num text-[10px] uppercase tracking-[0.22em] text-brand">
            Advisory Group
          </span>
        )}
      </span>
    </Link>
  );
}

export function SiteHeader() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const { scrollYProgress } = useScroll();
  const progress = useSpring(scrollYProgress, {
    stiffness: 130,
    damping: 30,
    mass: 0.4,
  });

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 80);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [menuOpen]);

  return (
    <>
      <header
        className={cn(
          "fixed inset-x-0 top-0 z-50 transition-[background,border,backdrop-filter] duration-300",
          scrolled
            ? "glass-solid border-b border-border/60"
            : "bg-gradient-to-b from-background/80 via-background/40 to-transparent border-b border-transparent",
        )}
      >
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8 md:h-20">
          <BrandMark />

          <nav className="hidden items-center gap-1 lg:flex" aria-label="Primary">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="relative rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
              >
                {item.label}
              </Link>
            ))}
          </nav>

          <div className="flex items-center gap-2">
            <Link
              href="#book"
              className={cn(
                "hidden md:inline-flex group items-center gap-2 rounded-full px-4 py-2.5 text-sm font-medium transition-all duration-300",
                "bg-foreground text-background hover:bg-brand hover:text-background",
              )}
            >
              Book a session
              <ArrowRight className="h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" />
            </Link>
            <button
              type="button"
              onClick={() => setMenuOpen(true)}
              className="inline-flex h-10 w-10 items-center justify-center rounded-md border border-border/60 text-foreground transition-colors hover:bg-muted lg:hidden"
              aria-label="Open menu"
            >
              <Menu className="h-5 w-5" />
            </button>
          </div>
        </div>
        {/* Reading-progress hairline */}
        <motion.div
          style={{ scaleX: progress }}
          className="absolute bottom-0 left-0 right-0 h-px origin-left bg-brand"
          aria-hidden="true"
        />
      </header>

      <AnimatePresence>
        {menuOpen && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="fixed inset-0 z-[60] lg:hidden"
          >
            <div
              className="absolute inset-0 bg-background/80 backdrop-blur-sm"
              onClick={() => setMenuOpen(false)}
            />
            <motion.div
              initial={{ x: "100%" }}
              animate={{ x: 0 }}
              exit={{ x: "100%" }}
              transition={{ type: "spring", stiffness: 380, damping: 40 }}
              className="absolute right-0 top-0 flex h-full w-[min(380px,100%)] flex-col glass-solid border-l border-border/60"
              role="dialog"
              aria-modal="true"
            >
              <div className="flex items-center justify-between border-b border-border/60 px-5 py-4">
                <BrandMark compact />
                <button
                  type="button"
                  onClick={() => setMenuOpen(false)}
                  className="inline-flex h-10 w-10 items-center justify-center rounded-md border border-border/60 text-foreground"
                  aria-label="Close menu"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>
              <nav
                className="flex flex-1 flex-col gap-1 overflow-y-auto px-3 py-6"
                aria-label="Mobile"
              >
                {navItems.map((item, i) => (
                  <motion.div
                    key={item.href}
                    initial={{ opacity: 0, x: 24 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.06 + i * 0.04 }}
                  >
                    <Link
                      href={item.href}
                      onClick={() => setMenuOpen(false)}
                      className="flex items-center justify-between rounded-lg px-4 py-3.5 text-base font-medium text-foreground/90 hover:bg-muted"
                    >
                      <span>{item.label}</span>
                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
                    </Link>
                  </motion.div>
                ))}
              </nav>
              <div className="border-t border-border/60 p-5">
                <Link
                  href="#book"
                  onClick={() => setMenuOpen(false)}
                  className="flex items-center justify-center gap-2 rounded-full bg-brand px-4 py-3.5 text-sm font-semibold text-background"
                >
                  Book a discovery session
                  <ArrowRight className="h-4 w-4" />
                </Link>
                <p className="mt-4 text-center font-mono-num text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
                  {company.location}
                </p>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}