"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";

const navLinks = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/services", label: "Services" },
    { href: "/success-stories", label: "Case Studies" },
    { href: "/pricing", label: "Pricing" },
    { href: "/faq", label: "FAQ" },
    { href: "/contact", label: "Contact" },
];

export default function Navbar() {
    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

    return (
        <nav className="sticky top-0 z-50 w-full bg-dark-bg/95 backdrop-blur-md border-b border-border-dark">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between items-center h-20">
                    {/* Logo (Aligned Left) */}
                    <div className="flex-shrink-0 flex items-center">
                        <Link href="/" className="relative h-10 md:h-12 w-[140px] md:w-[160px] block">
                            <Image
                                src="/img/logo.png"
                                alt="Aasi Tech Logo"
                                fill
                                sizes="(max-width: 768px) 140px, 160px"
                                className="object-contain object-left"
                                priority={false}
                                loading="eager"
                            />
                        </Link>
                    </div>

                    {/* Desktop Navigation */}
                    <div className="hidden md:flex items-center space-x-8">
                        {navLinks.map((link) => (
                            <Link
                                key={link.href}
                                className="text-text-light-muted hover:text-primary-light font-medium transition-colors duration-200"
                                href={link.href}
                            >
                                {link.label}
                            </Link>
                        ))}
                    </div>

                    {/* Desktop CTA */}
                    <div className="hidden md:flex">
                        <Link
                            className="bg-gradient-to-r from-primary to-primary-light text-white px-6 py-2.5 rounded-full font-semibold transition-all duration-300 shadow-lg shadow-green-500/20 hover:-translate-y-0.5 hover:shadow-green-500/40 btn-hover-lift isolate relative overflow-hidden group"
                            href="/contact"
                        >
                            <span className="relative z-10 w-full h-full block">Get Started</span>
                            <div className="absolute inset-0 bg-gradient-to-r from-primary-light to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                        </Link>
                    </div>

                    {/* Mobile Menu Hamburger Toggle (Aligned Right) */}
                    <div className="md:hidden flex items-center">
                        <button
                            className="text-text-light-muted hover:text-primary-light p-2"
                            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                            aria-label={mobileMenuOpen ? "Close menu" : "Open menu"}
                            aria-expanded={mobileMenuOpen}
                        >
                            <span className="material-symbols-outlined text-2xl">
                                {mobileMenuOpen ? "close" : "menu"}
                            </span>
                        </button>
                    </div>
                </div>
            </div>

            {/* Mobile Menu Dropdown */}
            <div
                className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${mobileMenuOpen ? "max-h-[600px] opacity-100" : "max-h-0 opacity-0"
                    }`}
            >
                <div className="bg-dark-surface border-t border-border-dark px-4 py-4 space-y-1 shadow-xl">
                    {navLinks.map((link) => (
                        <Link
                            key={link.href}
                            href={link.href}
                            className="block px-4 py-3 text-text-light-muted hover:text-primary-light hover:bg-dark-card/50 font-medium transition-colors rounded-lg"
                            onClick={() => setMobileMenuOpen(false)}
                        >
                            {link.label}
                        </Link>
                    ))}
                    <div className="pt-4 pb-2 px-4">
                        <Link
                            href="/contact"
                            className="block w-full text-center bg-gradient-to-r from-primary to-primary-light text-white px-6 py-3 rounded-full font-semibold transition-all duration-300 isolate relative overflow-hidden group"
                            onClick={() => setMobileMenuOpen(false)}
                        >
                            <span className="relative z-10 block w-full h-full">Get Started</span>
                            <div className="absolute inset-0 bg-gradient-to-r from-primary-light to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                        </Link>
                    </div>
                </div>
            </div>
        </nav>
    );
}
