"use client";

import {
    NavigationMenu,
    NavigationMenuItem,
    NavigationMenuLink,
    NavigationMenuList,
} from "@/components/ui/navigation-menu";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { Menu, X, Phone } from "lucide-react";

export default function Header() {
    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

    const navigationItems = [
        { href: "/catalog", label: "Каталог" },
        { href: "/yachts", label: "Яхты" },
        { href: "/services", label: "Услуги" },
    ];

    return (
        <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100">
            <div className="w-full max-w-6xl mx-auto">
                <div className="flex justify-between items-center px-4 sm:px-6 lg:px-8 py-4">
                    {/* Логотип */}
                    <Link href="/" className="flex-shrink-0">
                        <Image
                            src="/images/logo.svg"
                            alt="Marine Travel"
                            width={150}
                            height={45}
                            className="h-10 w-auto"
                        />
                    </Link>

                    {/* Десктопная навигация */}
                    <NavigationMenu className="hidden lg:flex">
                        <NavigationMenuList className="space-x-8">
                            {navigationItems.map((item) => (
                                <NavigationMenuItem key={item.href}>
                                    <NavigationMenuLink
                                        href={item.href}
                                        className="text-gray-700 hover:text-primary transition-colors duration-200 font-medium"
                                    >
                                        {item.label}
                                    </NavigationMenuLink>
                                </NavigationMenuItem>
                            ))}
                        </NavigationMenuList>
                    </NavigationMenu>

                    {/* Контакты и кнопка */}
                    <div className="hidden lg:flex items-center space-x-4">
                        <div className="flex items-center space-x-2 text-gray-700">
                            <Phone className="h-4 w-4" />
                            <span className="font-semibold">
                                +7 (978) 744-89-00
                            </span>
                        </div>
                        <Button className="bg-primary hover:bg-primary/90 text-white">
                            Заказать звонок
                        </Button>
                    </div>

                    {/* Мобильное меню */}
                    <div className="lg:hidden">
                        <Button
                            variant="ghost"
                            size="icon"
                            onClick={() =>
                                setIsMobileMenuOpen(!isMobileMenuOpen)
                            }
                            className="text-gray-700"
                        >
                            {isMobileMenuOpen ? (
                                <X className="h-6 w-6" />
                            ) : (
                                <Menu className="h-6 w-6" />
                            )}
                        </Button>
                    </div>
                </div>

                {/* Мобильное меню */}
                {isMobileMenuOpen && (
                    <div className="lg:hidden mt-4 pb-4 border-t border-gray-100">
                        <nav className="flex flex-col space-y-4 pt-4">
                            {navigationItems.map((item) => (
                                <Link
                                    key={item.href}
                                    href={item.href}
                                    className="text-gray-700 hover:text-primary transition-colors duration-200 font-medium py-2"
                                    onClick={() => setIsMobileMenuOpen(false)}
                                >
                                    {item.label}
                                </Link>
                            ))}
                            <div className="pt-4 border-t border-gray-100">
                                <div className="flex items-center space-x-2 text-gray-700 mb-4">
                                    <Phone className="h-4 w-4" />
                                    <span className="font-semibold">
                                        +7 (123) 456-78-90
                                    </span>
                                </div>
                                <Button className="w-full bg-primary hover:bg-primary/90 text-white">
                                    Заказать звонок
                                </Button>
                            </div>
                        </nav>
                    </div>
                )}
            </div>
        </header>
    );
}
