'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Menu, X, Shield, Phone } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

const navLinks = [
  { href: '/', label: 'Home' },
  { href: '/about', label: 'About Us' },
  { href: '/services', label: 'Services' },
  { href: '/contact', label: 'Contact' },
  { href: '/faq', label: 'FAQ' },
];

export function Navbar() {
  const [isOpen, setIsOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const pathname = usePathname();

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  useEffect(() => {
    setIsOpen(false);
  }, [pathname]);

  return (
    <nav
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled
          ? 'bg-navy/95 backdrop-blur-md shadow-lg'
          : 'bg-navy/80 backdrop-blur-sm'
      }`}
    >
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6">
        <div className="flex items-center justify-between h-16 md:h-20">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2 group">
            <div className="relative w-10 h-10 flex items-center justify-center">
              <Shield className="w-8 h-8 text-gold transition-transform group-hover:scale-110" />
            </div>
            <div className="flex flex-col">
              <span className="text-white font-display font-bold text-sm md:text-base tracking-tight leading-tight">
                TradeTheMarkets
              </span>
              <span className="text-gold text-[10px] md:text-xs font-medium">.co.uk</span>
            </div>
          </Link>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center gap-1">
            {navLinks?.map?.((link: any) => (
              <Link
                key={link?.href}
                href={link?.href ?? '/'}
                className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
                  pathname === link?.href
                    ? 'text-gold bg-gold/10'
                    : 'text-white/80 hover:text-gold hover:bg-white/5'
                }`}
              >
                {link?.label ?? ''}
              </Link>
            )) ?? []}
            <a
              href="tel:07847587241"
              className="ml-3 flex items-center gap-2 bg-gold hover:bg-gold-light text-navy font-semibold px-5 py-2.5 rounded-md transition-all duration-200 text-sm"
            >
              <Phone className="w-4 h-4" />
              Call Now
            </a>
          </div>

          {/* Mobile menu button */}
          <button
            onClick={() => setIsOpen(!isOpen)}
            className="md:hidden text-white p-2 rounded-md hover:bg-white/10 transition-colors"
            aria-label="Toggle menu"
          >
            {isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>
      </div>

      {/* Mobile Nav */}
      <AnimatePresence>
        {isOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden bg-navy border-t border-gold/20 overflow-hidden"
          >
            <div className="px-4 py-4 space-y-1">
              {navLinks?.map?.((link: any) => (
                <Link
                  key={link?.href}
                  href={link?.href ?? '/'}
                  className={`block px-4 py-3 rounded-md text-base font-medium transition-all ${
                    pathname === link?.href
                      ? 'text-gold bg-gold/10'
                      : 'text-white/80 hover:text-gold hover:bg-white/5'
                  }`}
                >
                  {link?.label ?? ''}
                </Link>
              )) ?? []}
              <a
                href="tel:07847587241"
                className="flex items-center justify-center gap-2 mt-3 bg-gold hover:bg-gold-light text-navy font-semibold px-5 py-3 rounded-md transition-all text-base"
              >
                <Phone className="w-5 h-5" />
                Call 07847 587241
              </a>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
