"use client";

import { motion } from "framer-motion";
import Link from "next/link";

const navLinks = [
  { href: "/experiences", label: "Experiences" },
  { href: "/experiences/the-other-side", label: "The Other Side", featured: true },
  { href: "/experiences/first-light", label: "First Light" },
  { href: "/experiences/after-dark", label: "After Dark" },
  { href: "/about", label: "About" },
  { href: "/blog", label: "The Edit" },
  { href: "/faq", label: "FAQ" },
  { href: "/contact", label: "Contact" },
];

interface MobileNavProps {
  onClose: () => void;
}

export function MobileNav({ onClose }: MobileNavProps) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      className="fixed inset-0 z-50 bg-white"
    >
      <div className="flex flex-col h-full p-6">
        <div className="flex items-center justify-between mb-12">
          <span className="font-display font-bold text-lg text-deep-nazar">
            The Anatolian Edit
          </span>
          <button
            onClick={onClose}
            className="p-2 text-deep-nazar"
            aria-label="Close menu"
          >
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        <nav className="flex flex-col gap-1 flex-1">
          {navLinks.map((link, i) => (
            <motion.div
              key={link.href}
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ delay: i * 0.05 }}
            >
              <Link
                href={link.href}
                onClick={onClose}
                className={`block py-3 text-2xl font-display font-bold transition-colors ${
                  link.featured
                    ? "text-bosphorus"
                    : "text-deep-nazar hover:text-bosphorus"
                }`}
              >
                {link.label}
              </Link>
            </motion.div>
          ))}
        </nav>

        <Link
          href="/experiences/the-other-side"
          onClick={onClose}
          className="w-full py-4 bg-coral-spritz text-white text-center text-lg font-semibold rounded-full shadow-lg"
        >
          Book Your Experience
        </Link>
      </div>
    </motion.div>
  );
}