<?php
/**
* $isHeroPage = true → Beranda: navbar transparan dengan teks putih di atas hero gelap
* $isHeroPage = false → Halaman lain: navbar solid putih dengan teks gelap
*/
$isHeroPage = request()->routeIs('guest.beranda');
?>


<div class="bg-neutral-900 text-white text-xs h-9 sm:h-10 flex items-center border-b border-white/5 relative z-50">
    <div class="max-w-7xl w-full mx-auto px-4 sm:px-6 flex items-center justify-between">

        <div class="flex items-center gap-2 sm:gap-5">
            <?php if($setting?->phone): ?>
            <div class="hidden sm:flex items-center gap-1.5 text-white/70">
                <i class="fas fa-phone text-[10px]"></i>
                <span><?php echo e($setting->phone); ?></span>
            </div>
            <?php endif; ?>
            <?php if($setting?->email): ?>
            <a href="mailto:<?php echo e($setting->email); ?>"
                class="flex items-center gap-1.5 text-white/70 hover:text-white transition-colors">
                <i class="fas fa-envelope text-[10px]"></i>
                <span
                    class="truncate max-w-[160px] sm:max-w-none text-[11px] sm:text-xs"><?php echo e($setting->email); ?></span>
            </a>
            <?php endif; ?>
        </div>

        <div class="flex items-center gap-2.5 sm:gap-4">
            <?php if($sosmed?->facebook): ?>
            <a href="<?php echo e($sosmed->facebook); ?>" target="_blank"
                class="text-white/60 hover:text-white transition-colors">
                <i class="fab fa-facebook-f text-[12px] sm:text-sm"></i>
            </a>
            <?php endif; ?>
            <?php if($sosmed?->instagram): ?>
            <a href="<?php echo e($sosmed->instagram); ?>" target="_blank"
                class="text-white/60 hover:text-white transition-colors">
                <i class="fab fa-instagram text-[12px] sm:text-sm"></i>
            </a>
            <?php endif; ?>
            <?php if($sosmed?->youtube): ?>
            <a href="<?php echo e($sosmed->youtube); ?>" target="_blank"
                class="text-white/60 hover:text-white transition-colors">
                <i class="fab fa-youtube text-[12px] sm:text-sm"></i>
            </a>
            <?php endif; ?>
        </div>
    </div>
</div>


<div id="heroNav"
    class="z-[70] <?php echo e($isHeroPage ? 'absolute top-9 sm:top-10 left-0 right-0 bg-gradient-to-b from-black/60 via-black/20 to-transparent' : 'relative bg-white border-b border-neutral-100'); ?>">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-2.5 flex items-center justify-between gap-4 sm:gap-6">

        
        <a href="<?php echo e(url('/')); ?>" class="flex items-center gap-3 shrink-0 group">
            <?php if($setting?->logo_expo): ?>
            <div class="relative">
                <img src="<?php echo e(asset('storage/' . $setting->logo_expo)); ?>" alt="<?php echo e($setting->nama_expo); ?>"
                    class="w-12 h-12 sm:w-16 sm:h-16 rounded-xl object-contain transition-transform group-hover:scale-105">
            </div>
            <?php else: ?>
            <div
                class="w-12 h-12 sm:w-16 sm:h-16 rounded-xl flex items-center justify-center
                            font-bold text-2xl sm:text-3xl font-heading flex-shrink-0 transition-transform group-hover:scale-105
                            <?php echo e($isHeroPage ? 'bg-white/10 text-white' : 'bg-primary/10 text-primary'); ?>">
                <?php echo e(substr($setting->nama_expo ?? 'Y', 0, 1)); ?>

            </div>
            <?php endif; ?>
            <div class="flex flex-col <?php echo e($isHeroPage ? 'drop-shadow-md' : ''); ?>">
                <div
                    class="text-lg sm:text-xl font-bold leading-tight font-heading tracking-wide
                            <?php echo e($isHeroPage ? 'text-white' : 'text-neutral-900'); ?>">
                    <?php echo e($setting->nama_expo ?? 'YBM PLN'); ?>

                </div>
                <div
                    class="text-[11px] sm:text-xs font-medium tracking-wider uppercase
                            <?php echo e($isHeroPage ? 'text-white/90' : 'text-neutral-400'); ?>">
                    Marketplace UMKM
                </div>
            </div>
        </a>

        
        <div class="hidden lg:flex items-center gap-6 xl:gap-8 flex-1 justify-center">
            <?php $__currentLoopData = [['route' => 'guest.beranda', 'label' => 'Beranda'], ['route' => 'guest.katalog', 'label' => 'Katalog'], ['route' => 'guest.umkm', 'label' => 'Daftar UMKM'], ['route' => 'guest.cek-pesanan', 'label' => 'Cek Pesanan']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e(route($link['route'])); ?>"
                class="text-sm font-bold transition-all <?php echo e($isHeroPage ? 'drop-shadow-md' : ''); ?>

                            <?php echo e(request()->routeIs($link['route'])
                                ? 'text-blue-400'
                                : ($isHeroPage ? 'text-white hover:text-blue-400' : 'text-neutral-600 hover:text-blue-500')); ?>">
                <?php echo e($link['label']); ?>

            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div class="hidden lg:flex items-center gap-3 xl:gap-4 shrink-0">
            <a href="<?php echo e(route('guest.katalog')); ?>"
                class="relative flex items-center gap-2 text-sm font-bold transition-all px-2 py-2
                        <?php echo e($isHeroPage
                            ? 'text-white hover:text-blue-400'
                            : 'text-neutral-600 hover:text-blue-500'); ?>"
                x-data>
            <div class="relative">
                <i class="fas fa-heart text-sm"></i>
                <span x-show="$store.wishlist.count > 0" x-text="$store.wishlist.count"
                    class="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] font-bold
                            w-3.5 h-3.5 rounded-full flex items-center justify-center ring-2 <?php echo e($isHeroPage ? 'ring-neutral-800' : 'ring-white'); ?>">
                </span>
            </div>
            <span>Favorit</span>
            </a>
            <a href="<?php echo e(route('login')); ?>"
                class="px-6 py-2 rounded-full text-sm font-bold transition-all whitespace-nowrap
                        <?php echo e($isHeroPage
                        ? 'bg-white text-blue-600 hover:bg-neutral-100'
                        : 'bg-blue-500 text-white hover:bg-blue-600'); ?>">
                Masuk
            </a>
        </div>

        
        <button @click="$dispatch('toggle-mobile-menu')"
            class="lg:hidden flex items-center justify-center w-10 h-10 rounded-xl transition-colors
                    <?php echo e($isHeroPage ? 'text-white hover:bg-white/10' : 'text-neutral-700 hover:bg-neutral-100'); ?>">
            <i class="fas fa-bars text-base"></i>
        </button>
    </div>
</div>


<nav id="stickyNav" x-data="{ scrolled: false }" x-init="scrolled = window.scrollY > 100;
window.addEventListener('scroll', () => { scrolled = window.scrollY > 100 })"
    :class="scrolled ? 'translate-y-0 opacity-100 pointer-events-auto' : '-translate-y-full opacity-0 pointer-events-none'"
    class="fixed top-0 left-0 right-0 z-[100] bg-white/95 backdrop-blur-md shadow-[0_2px_20px_rgba(0,0,0,0.08)] transition-all duration-300">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-1.5 sm:py-2 flex items-center justify-between gap-3 sm:gap-4">

        
        <a href="<?php echo e(url('/')); ?>" class="flex items-center gap-3 shrink-0 group">
            <?php if($setting?->logo_expo): ?>
            <img src="<?php echo e(asset('storage/' . $setting->logo_expo)); ?>" alt="<?php echo e($setting->nama_expo); ?>"
                class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl object-contain transition-transform group-hover:scale-105">
            <?php else: ?>
            <div
                class="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-primary flex items-center justify-center
                            text-white font-bold text-xl transition-transform group-hover:scale-105">
                <?php echo e(substr($setting->nama_expo ?? 'Y', 0, 1)); ?>

            </div>
            <?php endif; ?>
            <div class="hidden sm:flex flex-col">
                <div class="text-lg font-bold text-neutral-900 leading-tight font-heading">
                    <?php echo e($setting->nama_expo ?? 'YBM PLN'); ?>

                </div>
                <div class="text-xs text-neutral-400 font-medium tracking-wide">Marketplace UMKM</div>
            </div>
        </a>

        
        <div class="hidden lg:flex items-center gap-6 xl:gap-8 flex-1 justify-center">
            <?php $__currentLoopData = [['route' => 'guest.beranda', 'label' => 'Beranda'], ['route' => 'guest.katalog', 'label' => 'Katalog'], ['route' => 'guest.umkm', 'label' => 'Daftar UMKM'], ['route' => 'guest.cek-pesanan', 'label' => 'Cek Pesanan']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e(route($link['route'])); ?>"
                class="text-sm font-bold transition-all
                    <?php echo e(request()->routeIs($link['route']) ? 'text-blue-500' : 'text-neutral-500 hover:text-blue-500'); ?>">
                <?php echo e($link['label']); ?>

            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <div class="flex items-center gap-2.5 sm:gap-3 shrink-0">
            <a href="<?php echo e(route('guest.katalog')); ?>"
                class="relative hidden sm:flex items-center gap-2 text-sm font-bold px-2 py-2
                        text-neutral-500 hover:text-blue-500 transition-all"
                x-data>
                <div class="relative">
                    <i class="fas fa-heart text-sm"></i>
                    <span x-show="$store.wishlist.count > 0" x-text="$store.wishlist.count"
                        class="absolute -top-1 -right-1 bg-red-500 text-white text-[8px] font-bold
                                w-3.5 h-3.5 rounded-full flex items-center justify-center ring-2 ring-white">
                    </span>
                </div>
                <span class="hidden md:inline">Favorit</span>
            </a>
            <a href="<?php echo e(route('login')); ?>"
                class="hidden sm:inline-flex px-6 py-2 rounded-full bg-blue-500 text-white text-sm font-bold
                        hover:bg-blue-600 transition-all whitespace-nowrap">
                Masuk
            </a>
            <button @click="$dispatch('toggle-mobile-menu')"
                class="lg:hidden flex items-center justify-center w-10 h-10 rounded-xl
                            hover:bg-neutral-100 transition-colors">
                <i class="fas fa-bars text-neutral-700 text-base"></i>
            </button>
        </div>
    </div>
</nav>


<div x-data="{ open: false }" @toggle-mobile-menu.window="open = !open" x-show="open" x-cloak
    class="fixed inset-0 z-[1100]" style="display:none">

    
    <div @click="open = false" x-transition:enter="transition-opacity duration-200" x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-200"
        x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
        class="absolute inset-0 bg-neutral-900/50 backdrop-blur-sm">
    </div>

    
    <div x-show="open" x-transition:enter="transition-transform duration-300"
        x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
        x-transition:leave="transition-transform duration-300" x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full"
        class="absolute top-0 right-0 bottom-0 w-[280px] sm:w-72 bg-white shadow-2xl overflow-y-auto">

        <div class="p-4 sm:p-5">
            <div class="flex items-center justify-between mb-6 sm:mb-7">
                <div class="flex items-center gap-3">
                    <?php if($setting?->logo_expo): ?>
                    <img src="<?php echo e(asset('storage/' . $setting->logo_expo)); ?>" alt="Logo"
                        class="w-10 h-10 rounded-lg object-contain bg-white border border-neutral-100 shadow-sm">
                    <?php endif; ?>
                    <span class="font-heading text-base font-bold text-neutral-900">Menu Navigasi</span>
                </div>
                <button @click="open = false"
                    class="w-9 h-9 rounded-xl bg-neutral-100 flex items-center justify-center
                            text-neutral-500 hover:bg-neutral-200 transition-colors">
                    <i class="fas fa-times text-sm"></i>
                </button>
            </div>

            
            <nav class="space-y-1">
                <?php $__currentLoopData = [['route' => 'guest.beranda', 'icon' => 'fa-home', 'label' => 'Beranda'], ['route' => 'guest.katalog', 'icon' => 'fa-shopping-bag', 'label' => 'Katalog Produk'], ['route' => 'guest.umkm', 'icon' => 'fa-store', 'label' => 'Daftar UMKM'], ['route' => 'guest.cek-pesanan', 'icon' => 'fa-search', 'label' => 'Cek Pesanan']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $link): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route($link['route'])); ?>"
                    class="flex items-center gap-3 px-4 py-2.5 sm:py-3 rounded-xl text-sm font-semibold transition-all
                        <?php echo e(request()->routeIs($link['route'])
                            ? 'bg-primary/10 text-primary'
                            : 'text-neutral-600 hover:bg-neutral-50 hover:text-primary'); ?>">
                    <i class="fas <?php echo e($link['icon']); ?> w-4 text-center text-sm"></i>
                    <?php echo e($link['label']); ?>

                </a>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                <a href="<?php echo e(route('guest.katalog')); ?>"
                    class="flex items-center gap-3 px-4 py-2.5 sm:py-3 rounded-xl text-sm font-semibold
                            text-neutral-600 hover:bg-neutral-50 hover:text-primary transition-all">
                    <i class="fas fa-heart w-4 text-center text-sm"></i>
                    Favorit
                </a>
            </nav>

            
            <div class="mt-6 sm:mt-7 pt-5 sm:pt-6 border-t border-neutral-100">
                <a href="<?php echo e(route('login')); ?>"
                    class="flex items-center justify-center gap-2 w-full bg-primary text-white
                            font-bold text-sm px-4 py-3 rounded-xl hover:bg-primary/90 transition-colors shadow-sm">
                    <i class="fas fa-sign-in-alt"></i>
                    Masuk / Daftar
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    [x-cloak] {
        display: none !important;
    }

    .hero-slider {
        position: relative !important;
    }
</style><?php /**PATH C:\laragon\www\ybm-umkm\resources\views/partials/guest/navbar.blade.php ENDPATH**/ ?>