@php
    use App\Models\Category;

    $categories = Category::where('is_active', 1)
        ->orderBy('name')
        ->get();

    $topCategories = $categories->take(5);
@endphp

<div class="lux-submenu">

    <div class="container">

        {{-- DESKTOP --}}
        <div class="d-none d-md-flex align-items-center lux-submenu-bar">

            <div class="lux-submenu-left">

                {{-- DROPDOWN --}}
                <div class="dropdown">

                    <a class="lux-link dropdown-toggle"
                       href="#"
                       data-bs-toggle="dropdown">
                        Explorar Categorias
                    </a>

                    <ul class="dropdown-menu lux-dropdown shadow-lg">

                        @foreach($categories as $category)
                            <li>
                                <a class="dropdown-item"
                                   href="{{ route('categories.show', $category->slug) }}">
                                    {{ $category->name }}
                                </a>
                            </li>
                        @endforeach

                    </ul>

                </div>

                {{-- TOP CATEGORIES --}}
                @foreach($topCategories as $category)
                    <a href="{{ route('categories.show', $category->slug) }}"
                       class="lux-link">
                        {{ $category->name }}
                    </a>
                @endforeach

            </div>

        </div>

        {{-- MOBILE --}}
        <div class="d-md-none py-2">

            <button class="lux-mobile-btn w-100"
                    data-bs-toggle="collapse"
                    data-bs-target="#mobileCategories">

                Explorar Categorias
                <i class="fas fa-chevron-down ms-2"></i>

            </button>

            <div class="collapse mt-3" id="mobileCategories">

                <div class="lux-mobile-list">

                    @foreach($categories as $category)
                        <a href="{{ route('categories.show', $category->slug) }}">
                            {{ $category->name }}
                        </a>
                    @endforeach

                </div>

            </div>

        </div>

    </div>
</div>

<style>

/* MAIN BAR */
.lux-submenu{
    background: rgba(255,247,237,0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(251,146,60,0.2);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* DESKTOP BAR */
.lux-submenu-bar{
    padding: 10px 0;
}

/* LEFT AREA */
.lux-submenu-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap: wrap;
}

/* LINKS */
.lux-link{
    text-decoration:none;
    color:#1e293b;
    font-weight:500;
    font-size:14px;

    padding:8px 14px;
    border-radius:999px;

    transition:.25s ease;
}

/* HOVER PREMIUM */
.lux-link:hover{
    background: linear-gradient(135deg,#fb923c,#f97316);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(251,146,60,.25);
}

/* DROPDOWN */
.lux-dropdown{
    border:none;
    border-radius:14px;
    padding:10px 0;

    background:#fff7ed;
}

.lux-dropdown .dropdown-item{
    font-size:14px;
    padding:10px 18px;
    color:#1e293b;
    transition:.2s;
}

.lux-dropdown .dropdown-item:hover{
    background: linear-gradient(135deg,#fb923c,#f97316);
    color:#fff;
}

/* MOBILE BUTTON */
.lux-mobile-btn{
    background: linear-gradient(135deg,#fb923c,#f97316);
    border:none;
    color:#fff;
    font-weight:600;
    padding:12px;
    border-radius:12px;
}

/* MOBILE LIST */
.lux-mobile-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.lux-mobile-list a{
    background:#fff;
    padding:10px 14px;
    border-radius:10px;
    text-decoration:none;
    color:#1e293b;
    font-size:14px;
    border:1px solid rgba(251,146,60,0.2);
    transition:.2s;
}

.lux-mobile-list a:hover{
    background:#fb923c;
    color:#fff;
}

</style>