"use client"

import Link from "next/link";
import { usePathname } from "next/navigation";
import { Menu, X, Facebook, Youtube, Home, Clock, Newspaper, Info, Ticket, Users } from "lucide-react";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { socialLinks } from "@/data";

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

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

  return (
    <nav className="fixed w-full z-50 bg-background/80 backdrop-blur-md border-b">
      <div className="container px-4 h-16 flex items-center justify-between">
        <Link href="/" className="flex items-center gap-2 font-bold text-xl">
           <img src="/logo-circle.png" alt="Trains of Rajbari" className="h-8 w-8 rounded-full" />
           <span>Trains of Rajbari</span>
        </Link>
        
        <div className="hidden md:flex items-center gap-6 text-sm font-medium">
            <Link 
              href="/" 
              className={`flex items-center gap-1.5 hover:text-primary transition-colors ${pathname === '/' ? 'text-primary font-semibold' : ''}`}
            >
              <Home size={15} />
              Home
            </Link>
            <Link 
              href="/schedules" 
              className={`flex items-center gap-1.5 hover:text-primary transition-colors ${pathname === '/schedules' ? 'text-primary font-semibold' : ''}`}
            >
              <Clock size={15} />
              Schedules
            </Link>
            <Link 
              href="/blogs" 
              className={`flex items-center gap-1.5 hover:text-primary transition-colors ${pathname.startsWith('/blog') ? 'text-primary font-semibold' : ''}`}
            >
              <Newspaper size={15} />
              Updates
            </Link>
            <Link 
              href="/about" 
              className={`flex items-center gap-1.5 hover:text-primary transition-colors ${pathname === '/about' ? 'text-primary font-semibold' : ''}`}
            >
              <Info size={15} />
              About
            </Link>
            <a 
              href="https://eticket.railway.gov.bd/" 
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-1.5 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors font-semibold"
            >
              <Ticket size={15} />
              Book Now
            </a>
            
            {/* Social Media Links */}
            <div className="flex items-center gap-2 ml-2 pl-2 border-l">
              <a 
                href={socialLinks.facebookPage} 
                target="_blank" 
                rel="noopener noreferrer"
                className="h-9 w-9 flex items-center justify-center rounded-full bg-primary text-primary-foreground hover:bg-primary/10 hover:text-foreground transition-all hover:scale-110"
                title="Facebook Page"
              >
                <Facebook size={18} />
              </a>
              <a 
                href={socialLinks.youtube} 
                target="_blank" 
                rel="noopener noreferrer"
                className="h-9 w-9 flex items-center justify-center rounded-full bg-red-600 text-white hover:bg-red-500/10 hover:text-red-600 transition-all hover:scale-110"
                title="YouTube Channel"
              >
                <Youtube size={18} />
              </a>
              <a 
                href={socialLinks.facebookGroup} 
                target="_blank" 
                rel="noopener noreferrer"
                className="h-9 w-9 flex items-center justify-center rounded-full bg-secondary text-secondary-foreground hover:bg-secondary/10 hover:text-foreground transition-all hover:scale-110"
                title="Facebook Group"
              >
                <Users size={16} />
              </a>
            </div>
        </div>

        <button className="md:hidden p-2" onClick={() => setIsOpen(!isOpen)}>
            {isOpen ? <X /> : <Menu />}
        </button>
      </div>

      <AnimatePresence>
        {isOpen && (
            <motion.div 
                initial={{ opacity: 0, height: 0 }}
                animate={{ opacity: 1, height: "auto" }}
                exit={{ opacity: 0, height: 0 }}
                className="md:hidden border-t bg-background"
            >
                <div className="flex flex-col p-4 gap-4">
                    <Link 
                      href="/" 
                      className={`flex items-center gap-2 hover:text-primary ${pathname === '/' ? 'text-primary font-semibold' : ''}`}
                    >
                      <Home size={16} />
                      Home
                    </Link>
                    <Link 
                      href="/schedules" 
                      className={`flex items-center gap-2 hover:text-primary ${pathname === '/schedules' ? 'text-primary font-semibold' : ''}`}
                    >
                      <Clock size={16} />
                      Schedules
                    </Link>
                    <Link 
                      href="/blogs" 
                      className={`flex items-center gap-2 hover:text-primary ${pathname.startsWith('/blog') ? 'text-primary font-semibold' : ''}`}
                    >
                      <Newspaper size={16} />
                      Updates
                    </Link>
                    <Link 
                      href="/about" 
                      className={`flex items-center gap-2 hover:text-primary ${pathname === '/about' ? 'text-primary font-semibold' : ''}`}
                    >
                      <Info size={16} />
                      About
                    </Link>
                    <a 
                      href="/#schedule" 
                      className="flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors font-semibold text-center"
                    >
                      <Ticket size={16} />
                      Book Now
                    </a>
                    
                    {/* Social Media Links - Mobile */}
                    <div className="flex items-center gap-3 pt-2 border-t">
                      <a 
                        href={socialLinks.facebookPage} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 text-sm hover:text-primary transition-colors"
                      >
                        <Facebook size={18} />
                        <span>Facebook</span>
                      </a>
                      <a 
                        href={socialLinks.youtube} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 text-sm hover:text-red-600 transition-colors"
                      >
                        <Youtube size={18} />
                        <span>YouTube</span>
                      </a>
                      <a 
                        href={socialLinks.facebookGroup} 
                        target="_blank" 
                        rel="noopener noreferrer"
                        className="flex items-center gap-2 text-sm hover:text-secondary transition-colors"
                      >
                        <Users size={18} />
                        <span>Group</span>
                      </a>
                    </div>
                </div>
            </motion.div>
        )}
      </AnimatePresence>
    </nav>
  );
}
