"use client";

import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Phone, X } from "lucide-react";
import { useState } from "react";

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

    return (
        <>
            <header className="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-[color:var(--bg-dark)]/95 backdrop-blur-md">
                <div className="mx-auto flex h-[110px] max-w-7xl items-center justify-between px-6 lg:px-8">
                    <Link href="/" className="flex items-center gap-3 group">
                        <div className="relative h-[150px] w-[150px] transition-transform group-hover:scale-105">
                            <Image
                                src="/images/logo.png"
                                alt="Budd Electric Logo"
                                fill
                                priority
                                className="object-contain invert hue-rotate-180 saturate-[1000%] contrast-[1.5] brightness-90 p-[0.8rem]"
                            />
                        </div>
                        <div className="flex flex-col self-center">
                            <span className="font-display text-xl font-bold tracking-tight uppercase leading-none text-white">Budd Electric</span>
                            <span className="text-[10px] font-medium tracking-wider text-gray-400 uppercase">Since 1969 • TECL #17007</span>
                        </div>
                    </Link>

                    <nav className="hidden items-center gap-6 text-sm font-medium text-gray-300 lg:flex">
                        <Link href="/" className="hover:text-white transition-colors">Home</Link>
                        <Link href="/about-us" className="hover:text-white transition-colors">About</Link>
                        <Link href="/electrical-services" className="hover:text-white transition-colors">Services</Link>
                        <Link href="/photo-gallery" className="hover:text-white transition-colors">Gallery</Link>
                        <Link href="/contact-us" className="hover:text-white transition-colors">Contact</Link>
                    </nav>

                    <div className="flex items-center gap-4">
                        <a href="tel:+13618552255" className="hidden lg:flex items-center gap-2 text-white hover:text-[color:var(--brand)] transition-colors">
                            <Phone size={16} className="text-[color:var(--brand)]" />
                            <span className="font-bold text-sm">(361) 855-2255</span>
                        </a>
                        <Link
                            href="/contact-us"
                            className="hidden lg:flex items-center gap-2 rounded bg-[color:var(--brand)] px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-red-900/20 transition hover:bg-[color:var(--brand-strong)] uppercase tracking-wider"
                        >
                            Contact Us
                            <ArrowRight size={14} strokeWidth={3} />
                        </Link>
                        <button
                            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                            className="lg:hidden p-2 text-white hover:text-[color:var(--brand)] transition-colors"
                        >
                            <span className="sr-only">{mobileMenuOpen ? 'Close menu' : 'Open menu'}</span>
                            {mobileMenuOpen ? (
                                <X className="h-7 w-7" strokeWidth={2} />
                            ) : (
                                <svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
                                    <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                                </svg>
                            )}
                        </button>
                    </div>
                </div>
            </header>

            {/* Mobile Menu */}
            {mobileMenuOpen && (
                <div className="lg:hidden fixed inset-0 top-24 z-40" style={{ backgroundColor: '#0f172a' }}>
                    <nav className="flex flex-col gap-1 p-6">
                        <Link
                            href="/"
                            onClick={() => setMobileMenuOpen(false)}
                            className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
                        >
                            Home
                        </Link>
                        <Link
                            href="/about-us"
                            onClick={() => setMobileMenuOpen(false)}
                            className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
                        >
                            About Us
                        </Link>
                        <Link
                            href="/electrical-services"
                            onClick={() => setMobileMenuOpen(false)}
                            className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
                        >
                            Electrical Services
                        </Link>
                        <Link
                            href="/photo-gallery"
                            onClick={() => setMobileMenuOpen(false)}
                            className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
                        >
                            Photo Gallery
                        </Link>
                        <Link
                            href="/contact-us"
                            onClick={() => setMobileMenuOpen(false)}
                            className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
                        >
                            Contact Us
                        </Link>

                        <div className="mt-6 space-y-4 px-4">
                            <div className="flex flex-col items-start text-white border-t border-white/10 pt-6">
                                <span className="text-xs text-gray-400 font-medium uppercase tracking-wider">Emergency Service</span>
                                <a href="tel:+13618552255" className="font-bold font-display tracking-wide text-lg mt-1 hover:text-[color:var(--brand)] transition-colors">
                                    (361) 855-2255
                                </a>
                            </div>
                            <Link
                                href="/contact-us"
                                onClick={() => setMobileMenuOpen(false)}
                                className="flex items-center justify-center gap-2 rounded bg-[color:var(--brand)] px-7 py-4 text-sm font-bold text-white shadow-lg shadow-red-900/20 transition hover:bg-[color:var(--brand-strong)] hover:shadow-red-900/40 uppercase tracking-wider w-full"
                            >
                                Contact Us
                                <ArrowRight size={16} strokeWidth={3} />
                            </Link>
                        </div>
                    </nav>
                </div>
            )}
        </>
    );
}
