import { useEffect, useState } from "react";
import { Menu, X } from "lucide-react";
import { Link } from "@tanstack/react-router";
import logo from "@/assets/logo.png";

const links = [
  { href: "#about", label: "About" },
  { href: "#courses", label: "Courses" },
  { href: "#features", label: "Features" },
  { href: "#testimonials", label: "Reviews" },
  { href: "#contact", label: "Contact" },
];

export function Navbar() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  return (
    <header className={`sticky top-0 z-50 w-full transition-all duration-300 ${scrolled ? "glass shadow-soft" : "bg-transparent"}`}>
      <nav className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 md:px-8">
        <Link to="/" className="flex items-center gap-3 group" aria-label="Fighter Bull's home">
          <div className="relative">
            <div className="absolute inset-0 bg-gradient-primary opacity-0 blur-xl transition-opacity group-hover:opacity-40" />
            <img
              src={logo}
              alt="Fighter Bull's logo"
              className="relative h-16 w-auto md:h-20 object-contain transition-transform group-hover:scale-105"
            />
          </div>
          <div className="leading-tight">
            <div className="text-base font-bold tracking-tight md:text-lg">FIGHTER BULL'S</div>
            <div className="text-[10px] uppercase tracking-[0.18em] text-muted-foreground">Trading Academy</div>
          </div>
        </Link>
        <div className="hidden items-center gap-1 md:flex">
          {links.map((l) => (
            <a key={l.href} href={l.href} className="relative px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground">
              {l.label}
            </a>
          ))}
        </div>
        <div className="hidden md:block">
          <a href="#courses" className="group relative inline-flex items-center overflow-hidden rounded-full bg-gradient-primary px-6 py-2.5 text-sm font-semibold text-primary-foreground shadow-glow transition-all hover:scale-105 hover-bounce">
            <span className="relative z-10">Enroll Now</span>
            <span className="absolute inset-0 -translate-x-full bg-white/20 transition-transform duration-500 group-hover:translate-x-full" />
          </a>
        </div>
        <button onClick={() => setOpen(!open)} className="md:hidden p-2 rounded-lg hover:bg-secondary" aria-label="Menu">
          {open ? <X /> : <Menu />}
        </button>
      </nav>
      {open && (
        <div className="md:hidden border-t border-border glass px-4 py-4 space-y-2 animate-fade-in">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="block px-3 py-2 rounded-lg text-sm font-medium text-foreground hover:bg-secondary">
              {l.label}
            </a>
          ))}
          <a href="#courses" onClick={() => setOpen(false)} className="block w-full rounded-full bg-gradient-primary px-5 py-3 text-center text-sm font-semibold text-primary-foreground">
            Enroll Now
          </a>
        </div>
      )}
    </header>
  );
}
