<!-- Main Header -->
<header id="navbar"
    class="fixed top-0 left-0 w-full z-[100] px-8 py-6 flex justify-between items-center text-white transition-all duration-400 ease-in-out"
    style="font-family: 'Inter', sans-serif;">
    <a href="/" class="flex items-center space-x-3 group">
        <img src="{{ asset('img/logo.png') }}" alt="oamediakraft" class="h-12 w-auto">
        <span class="text-slate-600 group-hover:text-slate-500 transition-colors">|</span>
        <div class="flex flex-col">
            <span
                class="text-xs font-light tracking-[0.3em] text-slate-400 group-hover:text-cyan-400 transition-colors uppercase">media
                kraft</span>

        </div>
    </a>

    <div class="flex items-center space-x-12">
        <!-- Search Icon (Hidden on mobile) -->
        <button class="hidden md:block text-slate-400 hover:text-cyan-400 transition-colors">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </button>

        <!-- Phone Number (Hidden on mobile) -->
        <a href="tel:+14243308894"
            class="hidden lg:block font-medium text-sm tracking-widest text-slate-400 hover:text-cyan-400 transition-colors">
            +1 (424) 330-8894
        </a>

        <!-- Menu Toggle -->
        <button id="menu-btn" class="menu-toggle group flex items-center space-x-4 focus:outline-none">
            <span
                class="text-xs font-bold uppercase tracking-[0.3em] text-slate-400 group-hover:text-cyan-400 hidden sm:block transition-colors">Menu</span>
            <div class="space-y-1.5">
                <span class="block w-8 h-[2px] bg-slate-400 group-hover:bg-cyan-400 transition-colors"></span>
                <span class="block w-8 h-[2px] bg-slate-400 group-hover:bg-cyan-400 transition-colors"></span>
                <span class="block w-8 h-[2px] bg-slate-400 group-hover:bg-cyan-400 transition-colors"></span>
            </div>
        </button>
    </div>
</header>

<!-- Full-Screen Menu Overlay -->
<div id="menu-overlay"
    class="fixed inset-0 bg-slate-950 text-white z-[150] flex flex-col items-center justify-center pointer-events-none"
    style="font-family: 'Space Grotesk', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);">
    <!-- Close Button -->
    <button id="close-btn" class="absolute top-10 right-10 text-slate-400 hover:text-cyan-400 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24"
            stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12" />
        </svg>
    </button>

    <nav class="flex flex-col space-y-6 text-left w-full px-12 md:px-24">
        <a href="{{ route('home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Home</a>
        <a href="{{ route('design.home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Design</a>
        <a href="{{ route('photography.home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Photography</a>
        <a href="{{ route('branding.home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Branding</a>
        <a href="{{ route('podcast.home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Podcast</a>
        <a href="{{ route('livestream.home') }}"
            class="nav-item text-6xl md:text-7xl font-bold leading-tight transition-all duration-300">Livestream</a>
    </nav>

    <div
        class="absolute bottom-12 left-12 md:left-24 flex flex-col md:flex-row md:items-end justify-between w-[calc(100%-6rem)] md:w-[calc(100%-12rem)]">
        <div class="space-y-1">
            <p class="text-xs uppercase tracking-widest text-slate-500 font-bold mb-2">Get in touch</p>
            <p class="text-xl font-medium text-white">hello@oamediakraft.com</p>
            <p class="text-xl font-medium text-white">+1 (424) 330-8894</p>
        </div>
        <div class="mt-8 md:mt-0 flex space-x-6 text-sm font-bold uppercase tracking-widest">
            <a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Instagram</a>
            <a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">LinkedIn</a>
            <a href="#" class="text-slate-400 hover:text-cyan-400 transition-colors">Twitter</a>
        </div>
    </div>
</div>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

    :root {
        --primary-accent: #22d3ee;
        --secondary-accent: #e879f9;
    }

    /* Header Styles */
    #navbar {
        background-color: transparent;
        backdrop-filter: blur(0px);
    }

    #navbar.scrolled {
        background-color: rgba(15, 23, 42, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Hamburger Animation */
    .menu-toggle span {
        transition: all 0.3s ease;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Full Screen Overlay */
    #menu-overlay {
        clip-path: circle(0% at 95% 5%);
        transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    }

    #menu-overlay.open {
        clip-path: circle(150% at 95% 5%);
    }

    .nav-item {
        font-family: 'Space Grotesk', sans-serif;
        transition: all 0.4s ease;
        position: relative;
        display: inline-block;
        color: #cbd5e1;
    }

    .nav-item:hover {
        background: linear-gradient(135deg, #22d3ee 0%, #e879f9 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        transform: translateX(20px);
    }
</style>

<script>
    const navbar = document.getElementById('navbar');
    const menuBtn = document.getElementById('menu-btn');
    const closeBtn = document.getElementById('close-btn');
    const menuOverlay = document.getElementById('menu-overlay');

    // Scroll Effect
    window.addEventListener('scroll', () => {
        if (window.scrollY > 80) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

    // Menu Toggle
    function toggleMenu() {
        const isOpen = menuOverlay.classList.toggle('open');
        menuBtn.classList.toggle('active');

        if (isOpen) {
            menuOverlay.style.pointerEvents = 'auto';
            document.body.style.overflow = 'hidden';
        } else {
            menuOverlay.style.pointerEvents = 'none';
            document.body.style.overflow = 'auto';
        }
    }

    menuBtn.addEventListener('click', toggleMenu);
    closeBtn.addEventListener('click', toggleMenu);
</script>
