---
import { ArrowRight, Menu, X, Phone } from "lucide-react";

interface NavLink {
    label: string;
    href: string;
}

const links: NavLink[] = [
    { label: "Services", href: "#services" },
    { label: "Why Us", href: "#why-us" },
    { label: "Areas", href: "#areas" },
    { label: "Contact", href: "/contact" },
];
---

<nav class="sticky top-0 z-50 w-full transition-all duration-500" id="main-nav">
    <div class="bg-white/80 backdrop-blur-xl border-b border-stone-100/80 shadow-[0_2px_20px_-10px_rgba(0,0,0,0.05)]">
        <div class="max-w-brand mx-auto px-6 py-4 md:py-5 flex items-center justify-between">
            <!-- Logo -->
            <a href="/" class="flex items-center gap-4 group">
                <div class="relative">
                    <div class="absolute inset-0 bg-brand-green/10 rounded-xl blur-md group-hover:blur-lg transition-all" />
                    <picture>
                        <source srcset="/media/logo-col.webp" type="image/webp" />
                        <img
                            src="/media/logo-col.png"
                            alt="Summit Painting Logo"
                            class="relative w-11 h-11 md:w-12 md:h-12 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-3"
                            width="48"
                            height="48"
                        />
                    </picture>
                </div>
                <div class="flex flex-col">
                    <span class="text-lg md:text-xl font-serif font-bold tracking-tight text-brand-dark leading-none">
                        Summit Painting
                    </span>
                    <span class="text-[10px] text-brand-green font-bold uppercase tracking-[0.2em] mt-1 hidden sm:block">
                        & Handyman Services
                    </span>
                </div>
            </a>

            <!-- Desktop Navigation -->
            <div class="hidden lg:flex items-center gap-10 text-[12px] font-bold uppercase tracking-[0.2em] text-brand-dark/60">
                {links.map((link) => (
                    <a
                        href={link.href}
                        class="hover:text-brand-green transition-all relative group py-2"
                    >
                        {link.label}
                        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-brand-green transition-all group-hover:w-full" />
                    </a>
                ))}
            </div>

            <!-- Desktop CTA -->
            <div class="hidden md:flex items-center gap-8">
                <a
                    href="tel:3124567890"
                    class="flex items-center gap-3 text-sm font-bold text-brand-dark hover:text-brand-green transition-colors group"
                >
                    <div class="w-9 h-9 rounded-full bg-brand-green/5 flex items-center justify-center group-hover:bg-brand-green group-hover:text-white transition-all">
                        <Phone size={14} />
                    </div>
                    <span>(312) 456-7890</span>
                </a>
                <a
                    href="/contact"
                    class="bg-brand-dark text-white text-[11px] font-bold uppercase tracking-[0.3em] px-8 py-4 rounded-full hover:bg-brand-green transition-all shadow-lg hover:shadow-brand-green/20 hover:-translate-y-0.5 flex items-center gap-3"
                >
                    <span>Free Estimate</span>
                    <ArrowRight size={16} />
                </a>
            </div>

            <!-- Mobile Menu Toggle -->
            <details class="md:hidden group">
                <summary class="list-none cursor-pointer p-2 -mr-2 rounded-xl hover:bg-stone-50 transition-colors">
                    <Menu size={26} className="text-brand-dark group-open:hidden" />
                    <X size={26} className="text-brand-dark hidden group-open:block" />
                </summary>
                
                <div class="absolute top-full left-0 right-0 bg-white/95 backdrop-blur-2xl border-b border-stone-100 shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-4 duration-300">
                    <div class="max-w-7xl mx-auto px-6 py-10 flex flex-col gap-8">
                        {links.map((link) => (
                            <a
                                href={link.href}
                                class="text-2xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors"
                            >
                                {link.label}
                            </a>
                        ))}
                        <div class="h-px bg-stone-100" />
                        <div class="flex flex-col gap-6">
                            <a
                                href="tel:3124567890"
                                class="flex items-center gap-4 text-xl font-medium text-brand-dark"
                            >
                                <div class="w-12 h-12 rounded-2xl bg-brand-green/5 flex items-center justify-center">
                                    <Phone size={20} />
                                </div>
                                (312) 456-7890
                            </a>
                            <a
                                href="/contact"
                                class="bg-brand-green text-white text-center font-bold uppercase tracking-widest px-8 py-5 rounded-3xl hover:bg-brand-dark transition-colors shadow-xl shadow-brand-green/10"
                            >
                                Get Free Estimate
                            </a>
                        </div>
                    </div>
                </div>
            </details>
        </div>
    </div>
</nav>

<style>
    details summary::-webkit-details-marker {
        display: none;
    }
</style>
