"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import { MobileNav } from "./MobileNav";

const navLinks = [
  { href: "/experiences", label: "Experiences" },
  { href: "/about", label: "About" },
  { href: "/blog", label: "The Edit" },
  { href: "/faq", label: "FAQ" },
  { href: "/contact", label: "Contact" },
];

export function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  return (
    <>
      <motion.header
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled
            ? "bg-white/90 backdrop-blur-md shadow-sm"
            : "bg-transparent"
        }`}
        initial={{ y: -100 }}
        animate={{ y: 0 }}
        transition={{ duration: 0.5 }}
      >
        <div className="max-w-7xl mx-auto px-5 sm:px-8 flex items-center justify-between h-16 md:h-20">
          <Link href="/" className="flex items-center gap-2 group">
            <div className="w-8 h-8 rounded-full bg-bosphorus flex items-center justify-center">
              <div className="w-4 h-4 rounded-full bg-deep-nazar flex items-center justify-center">
                <div className="w-2 h-2 rounded-full bg-aegean-white" />
              </div>
            </div>
            <span
              className={`font-display font-bold text-lg transition-colors duration-300 ${
                scrolled
                  ? "text-deep-nazar"
                  : "text-white"
              }`}
              style={scrolled ? {} : { textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
            >
              The Anatolian Edit
            </span>
          </Link>

          <nav className="hidden md:flex items-center gap-8">
            {navLinks.map((link) => (
              <Link
                key={link.href}
                href={link.href}
                className={`text-sm font-semibold transition-colors relative group ${
                  scrolled
                    ? "text-deep-nazar/70 hover:text-bosphorus"
                    : "text-white/90 hover:text-white"
                }`}
                style={scrolled ? {} : { textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}
              >
                {link.label}
                <span className={`absolute -bottom-1 left-0 w-0 h-0.5 transition-all group-hover:w-full ${
                  scrolled ? "bg-bosphorus" : "bg-white"
                }`} />
              </Link>
            ))}
            <Link
              href="/experiences/the-other-side"
              className="px-5 py-2.5 bg-coral-spritz text-white text-sm font-semibold rounded-full hover:bg-coral-spritz/90 transition-colors shadow-md shadow-coral-spritz/25"
            >
              Book Now
            </Link>
          </nav>

          <button
            onClick={() => setMobileOpen(true)}
            className={`md:hidden p-2 transition-colors duration-300 ${
              scrolled ? "text-deep-nazar" : "text-white"
            }`}
            style={scrolled ? {} : { filter: "drop-shadow(0 1px 4px rgba(0,0,0,0.5))" }}
            aria-label="Open menu"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
      </motion.header>

      <AnimatePresence>
        {mobileOpen && <MobileNav onClose={() => setMobileOpen(false)} />}
      </AnimatePresence>
    </>
  );
}