@php
    $content = $data['content'] ?? [];
    $logo = $content['logo'] ?? null;
    $menuItems = $content['menu_items'] ?? [];
    $ctaButton = $content['cta_button'] ?? null;
    $website = $website ?? null;
@endphp

<style>
/* Mobile Menu Fix - ensure collapse behavior works properly */
@media (max-width: 991px) {
    .navbar-collapse {
        display: none !important;
    }

    .navbar-collapse.show {
        display: block !important;
    }

    .navbar-collapse.collapsing {
        display: block !important;
        transition: height 0.35s ease;
        overflow: hidden;
    }

    .navbar-nav {
        padding-top: 1rem;
    }

    .navbar-nav .nav-item {
        margin: 0.25rem 0;
    }
}
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
    <div class="container">
        <a class="navbar-brand" href="/">
            @if($logo)
                <img src="{{ $logo }}" alt="{{ $website->name ?? 'Logo' }}" style="height: 40px;">
            @else
                <span class="fw-bold">{{ $website->name ?? 'Website' }}</span>
            @endif
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto align-items-center align-items-lg-center">
                @if(is_array($menuItems) && !empty($menuItems))
                    @foreach($menuItems as $item)
                        <li class="nav-item">
                            <a class="nav-link" href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? $item['label'] ?? 'Link' }}</a>
                        </li>
                    @endforeach
                @else
                    {{-- Default menu items --}}
                    <li class="nav-item">
                        <a class="nav-link" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">Contact</a>
                    </li>
                @endif

                @if($ctaButton)
                    <li class="nav-item ms-lg-3 mt-2 mt-lg-0">
                        <a class="btn btn-primary" href="{{ $ctaButton['url'] ?? '#' }}">{{ $ctaButton['text'] ?? 'Get Started' }}</a>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>