import { useState, useEffect } from "react";
import { NavLink, Link, useLocation } from "react-router-dom";
import { motion, AnimatePresence } from "motion/react";
import { ChevronDown, Menu, X, Phone, Mail, MapPin, ArrowRight } from "lucide-react";
import { serviceCategories } from "../data/content";
const navLinkClass = ({ isActive }) => `relative text-sm font-semibold tracking-wide py-1.5 transition-all duration-200 ${isActive ? "text-orange-500 font-bold border-b-2 border-orange-500" : "text-slate-600 hover:text-orange-500"}`;
export default function Navbar() {
  const [open, setOpen] = useState(false);
  const [servicesOpen, setServicesOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);
  const location = useLocation();
  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 40);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
  useEffect(() => {
    setOpen(false);
    setServicesOpen(false);
  }, [location]);
  return <header className="w-full z-50 flex flex-col transition-all duration-300">
      {
    /* Top bar with contact info */
  }
      <div
    className={`bg-slate-950 border-b border-slate-800 text-slate-300 py-2.5 px-5 md:px-8 transition-all duration-300 ${isScrolled ? "h-0 py-0 overflow-hidden opacity-0 border-none" : "h-auto opacity-100"}`}
  >
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-3">
          <div className="flex flex-wrap justify-center sm:justify-start items-center gap-5 text-xs">
            <a href="tel:+966571033252" className="flex items-center gap-2 hover:text-orange-500 transition-colors font-medium">
              <Phone className="w-3.5 h-3.5 text-orange-500 shrink-0" />
              <span>+966 57 103 3252</span>
            </a>
            <a href="mailto:sales@masarndt.com" className="flex items-center gap-2 hover:text-orange-500 transition-colors font-medium">
              <Mail className="w-3.5 h-3.5 text-orange-500 shrink-0" />
              <span>sales@masarndt.com</span>
            </a>
            <span className="flex items-center gap-2 text-slate-400">
              <MapPin className="w-3.5 h-3.5 text-orange-500 shrink-0" />
              <span>Jubail, Saudi Arabia</span>
            </span>
          </div>
          <div className="flex items-center gap-4 text-xs font-medium">
            <span className="font-bold text-white uppercase text-[9px] tracking-wider bg-slate-900 border border-slate-800 px-2 py-0.5 rounded">
              ISO 9001:2015 Approved
            </span>
            <span className="text-slate-800">|</span>
            <Link to="/contact" className="text-slate-400 hover:text-orange-500 transition-colors">Support</Link>
          </div>
        </div>
      </div>

      {
    /* Main navigation bar (Sticky) */
  }
      <div
    className={`w-full bg-white transition-all duration-300 ${isScrolled ? "fixed top-0 shadow-lg border-b border-slate-100 py-3.5" : "relative py-5 border-b border-slate-100"}`}
  >
        <div className="max-w-7xl mx-auto px-5 md:px-8 flex items-center justify-between">
          {
    /* Brand Logo */
  }
          <Link to="/" className="flex items-center gap-2.5 shrink-0">
            <span className="w-5 h-5 rounded bg-orange-500 shadow-md flex items-center justify-center font-bold text-white text-[10px]" aria-hidden="true">M</span>
            <span className="font-heading font-extrabold uppercase tracking-wide text-slate-900 text-xl sm:text-2xl">
              Masar<span className="text-orange-500 font-black"> NDT</span>
            </span>
          </Link>

          {
    /* Desktop Navigation Links */
  }
          <nav className="hidden lg:flex items-center gap-8">
            <NavLink to="/" className={navLinkClass} end>Home</NavLink>
            <NavLink to="/about" className={navLinkClass}>About</NavLink>

            {
    /* Services Dropdown */
  }
            <div
    className="relative"
    onMouseEnter={() => setServicesOpen(true)}
    onMouseLeave={() => setServicesOpen(false)}
  >
              <button
    className="text-sm font-semibold tracking-wide text-slate-600 hover:text-orange-500 flex items-center gap-1 transition-colors py-1.5"
    onClick={() => setServicesOpen(!servicesOpen)}
  >
                Services
                <ChevronDown className={`w-4 h-4 transition-transform duration-200 ${servicesOpen ? "rotate-180 text-orange-500" : "text-slate-400"}`} />
              </button>

              <AnimatePresence>
                {servicesOpen && <motion.div
    initial={{ opacity: 0, y: 10, scale: 0.98 }}
    animate={{ opacity: 1, y: 0, scale: 1 }}
    exit={{ opacity: 0, y: 10, scale: 0.98 }}
    transition={{ duration: 0.15 }}
    className="absolute left-0 top-full mt-2 w-80 bg-white border border-slate-100 shadow-xl p-2 rounded-xl z-50"
  >
                    <div className="grid gap-1">
                      {serviceCategories.map((s) => <NavLink
    key={s.id}
    to={s.path}
    className={({ isActive }) => `group flex flex-col p-3 rounded-lg transition-all duration-200 ${isActive ? "bg-slate-50 border-l-4 border-orange-500" : "hover:bg-slate-50"}`}
    onClick={() => setServicesOpen(false)}
  >
                          <span className="text-[9px] font-bold text-orange-500 uppercase tracking-widest">{s.tag}</span>
                          <span className="text-sm font-bold text-slate-900 group-hover:text-orange-500 transition-colors flex items-center mt-0.5 font-heading">
                            {s.title}
                            <ArrowRight className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all ml-auto text-orange-500" />
                          </span>
                        </NavLink>)}
                    </div>
                  </motion.div>}
              </AnimatePresence>
            </div>

            <NavLink to="/industries" className={navLinkClass}>Industries</NavLink>
            <NavLink to="/projects" className={navLinkClass}>Projects</NavLink>
            <NavLink to="/gallery" className={navLinkClass}>Gallery</NavLink>
            <NavLink to="/contact" className={navLinkClass}>Contact</NavLink>
          </nav>

          {
    /* Right Action Button & Mobile Trigger */
  }
          <div className="flex items-center gap-4">
            <Link
    to="/contact"
    className="hidden sm:inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-6 py-3.5 rounded-xl tracking-wider uppercase shadow-md hover:shadow-orange-500/10 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200"
  >
              Get a Quote
            </Link>

            <button
    className="lg:hidden p-2.5 text-slate-950 hover:text-orange-500 border border-slate-100 rounded-xl transition-colors"
    onClick={() => setOpen(!open)}
    aria-label="Toggle navigation menu"
    aria-expanded={open}
  >
              {open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>

        {
          /* Mobile Drawer Menu */
        }
        <AnimatePresence>
          {open && <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.2 }}
            className="lg:hidden w-full bg-white border-b border-slate-100 px-6 py-6 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-80px)] z-40 absolute top-full left-0 shadow-2xl"
          >
            <NavLink to="/" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" end onClick={() => setOpen(false)}>Home</NavLink>
            <NavLink to="/about" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>About</NavLink>
            
            <div className="h-px bg-slate-100 my-1" />
            
            <p className="text-[10px] font-bold text-orange-500 uppercase tracking-widest font-heading">Services</p>
            <div className="grid gap-2 pl-3 border-l-2 border-orange-500 ml-1">
              {serviceCategories.map((s) => <NavLink
                key={s.id}
                to={s.path}
                className={({ isActive }) => `text-sm font-bold transition-colors py-1 font-heading ${isActive ? "text-orange-500" : "text-slate-800 hover:text-orange-500"}`}
                onClick={() => setOpen(false)}
              >
                {s.title}
              </NavLink>)}
            </div>

            <div className="h-px bg-slate-100 my-1" />

            <NavLink to="/industries" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Industries</NavLink>
            <NavLink to="/projects" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Projects</NavLink>
            <NavLink to="/gallery" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Gallery</NavLink>
            <NavLink to="/contact" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Contact</NavLink>

            <Link
              to="/contact"
              className="mt-4 text-center bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs py-4 rounded-xl tracking-wider uppercase shadow-md transition-all font-heading"
              onClick={() => setOpen(false)}
            >
              Get a Quote
            </Link>
          </motion.div>}
        </AnimatePresence>
      </div>
    </header>;
}
