@php
    $currentLocale = app()->getLocale();
    $languages = [
        'id' => [
            'label' => 'ID',
            'name' => __('ui.indonesian'),
            'flag' => 'lang-flag lang-flag-id',
        ],
        'en' => [
            'label' => 'EN',
            'name' => __('ui.english'),
            'flag' => 'lang-flag lang-flag-en',
        ],
    ];
    $activeLanguage = $languages[$currentLocale] ?? $languages['id'];
@endphp

<nav class="navbar navbar-expand-lg navbar-custom sticky-top">
    <div class="container">
        <a class="navbar-brand" href="{{ route('home') }}">
            Nova<span>lynk</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto align-items-center">
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('/') ? 'active' : '' }}" href="{{ route('home') }}">{{ __('ui.home') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('about') ? 'active' : '' }}" href="{{ route('about') }}">{{ __('ui.about') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('services*') ? 'active' : '' }}" href="{{ route('services') }}">{{ __('ui.solutions') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('technologies') ? 'active' : '' }}" href="{{ route('technologies') }}">{{ __('ui.products') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('portfolio*') ? 'active' : '' }}" href="{{ route('portfolio') }}">{{ __('ui.portfolio') }}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->is('blog*') ? 'active' : '' }}" href="{{ route('blog') }}">{{ __('ui.blog') }}</a>
                </li>
                <li class="nav-item dropdown ms-lg-3">
                    <button class="language-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="{{ __('ui.language') }}">
                        <span class="{{ $activeLanguage['flag'] }}" aria-hidden="true"></span>
                        <span class="language-code">{{ $activeLanguage['label'] }}</span>
                        <i class="fa-solid fa-chevron-down language-chevron"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end language-menu">
                        @foreach($languages as $locale => $language)
                        <li>
                            <a class="dropdown-item language-item {{ $currentLocale === $locale ? 'active' : '' }}" href="{{ route('locale.switch', $locale) }}">
                                <span class="{{ $language['flag'] }}" aria-hidden="true"></span>
                                <span class="language-copy">
                                    <strong>{{ $language['label'] }}</strong>
                                    <small>{{ $language['name'] }}</small>
                                </span>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </li>
                <li class="nav-item ms-lg-3">
                    <a class="btn btn-primary-custom" href="{{ route('contact') }}">{{ __('ui.contact_us') }}</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
.navbar-toggler {
    border: none;
    padding: 0.5rem;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler-icon {
    background-image: none;
    width: 24px;
    height: 2px;
    background: var(--primary-blue);
    position: relative;
    transition: all 0.3s ease;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background: var(--primary-blue);
    left: 0;
    transition: all 0.3s ease;
}
.navbar-toggler-icon::before {
    top: -8px;
}
.navbar-toggler-icon::after {
    top: 8px;
}

.language-trigger {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #FFFFFF;
    border-radius: 18px;
    padding: 0.65rem 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    color: var(--gray-900);
    transition: all 0.3s ease;
}

.language-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.1);
}

.language-chevron {
    font-size: 0.75rem;
    color: var(--gray-500);
}

.language-code {
    font-weight: 600;
    font-size: 0.9rem;
}

.language-menu {
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    padding: 0.4rem;
    min-width: 200px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.14);
}

.language-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 14px;
    padding: 0.7rem 0.8rem;
}

.language-item.active,
.language-item:active {
    background: rgba(59, 130, 246, 0.08);
    color: var(--primary-blue);
}

.language-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.language-copy small {
    color: var(--gray-500);
}

.lang-flag {
    width: 26px;
    height: 18px;
    border-radius: 999px;
    display: inline-block;
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.lang-flag-id {
    background: linear-gradient(180deg, #DC2626 0 50%, #FFFFFF 50% 100%);
}

.lang-flag-en {
    background:
        linear-gradient(90deg, transparent 44%, #FFFFFF 44% 56%, transparent 56% 100%),
        linear-gradient(180deg, transparent 40%, #FFFFFF 40% 60%, transparent 60% 100%),
        linear-gradient(90deg, transparent 46%, #DC2626 46% 54%, transparent 54% 100%),
        linear-gradient(180deg, transparent 44%, #DC2626 44% 56%, transparent 56% 100%),
        #1D4ED8;
}

@media (max-width: 991px) {
    .language-trigger {
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
    }
}
</style>