"use client";

import { useState } from "react";
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 function MobileMenuButton({
    open,
    onToggle,
}: {
    open: boolean;
    onToggle: () => void;
}) {
    return (
        <div className="md:hidden flex items-center ml-auto">
            <button
                className="text-text-main hover:text-primary p-2"
                onClick={onToggle}
                aria-label={open ? "Close menu" : "Open menu"}
                aria-expanded={open}
            >
                <span className="material-symbols-outlined text-2xl">
                    {open ? "close" : "menu"}
                </span>
            </button>
        </div>
    );
}

export function MobileMenuDropdown({
    open,
    onClose,
}: {
    open: boolean;
    onClose: () => void;
}) {
    return (
        <div
            className={`md:hidden overflow-hidden transition-[max-height,opacity] duration-300 ease-in-out ${open ? "max-h-[600px] opacity-100" : "max-h-0 opacity-0"
                }`}
        >
            <div className="bg-white border-t border-gray-100 px-4 py-4 space-y-1 shadow-lg">
                {navLinks.map((link) => (
                    <Link
                        key={link.href}
                        href={link.href}
                        className="block px-4 py-3 text-text-main hover:text-emerald-btn hover:bg-gray-50 font-medium transition-colors rounded-lg"
                        onClick={onClose}
                    >
                        {link.label}
                    </Link>
                ))}
                <div className="pt-4 pb-2 px-4">
                    <Link
                        href="/contact"
                        className="block w-full text-center bg-emerald-btn hover:bg-emerald-btn-hover text-white px-6 py-3 rounded-full font-semibold transition-colors"
                        onClick={onClose}
                    >
                        Get Started
                    </Link>
                </div>
            </div>
        </div>
    );
}

export default function MobileMenu() {
    const [open, setOpen] = useState(false);

    return (
        <>
            <MobileMenuButton open={open} onToggle={() => setOpen(!open)} />
            <MobileMenuDropdown open={open} onClose={() => setOpen(false)} />
        </>
    );
}
