@props(['page' => ''])

@php
    $nav = [
        ['route' => 'home', 'label' => 'Home', 'key' => 'home'],
        ['route' => 'about', 'label' => 'About', 'key' => 'about'],
        ['route' => 'classes', 'label' => 'Classes', 'key' => 'classes'],
        ['route' => 'membership', 'label' => 'Membership', 'key' => 'membership'],
        ['route' => 'gallery', 'label' => 'Gallery', 'key' => 'gallery'],
        ['route' => 'contact', 'label' => 'Contact', 'key' => 'contact'],
    ];
@endphp

<header class="site-header">
    <nav class="nav">
        <a href="{{ route('home') }}" class="brand" aria-label="Head Bangers home">
            <span class="mark"><span>HB</span></span>
            <span class="wordmark">Head Bangers<b>Dubai &middot; Est. 2024</b></span>
        </a>
        <div class="nav-links">
            @foreach ($nav as $item)
                <a href="{{ route($item['route']) }}" @class(['active' => $page === $item['key']])>{{ $item['label'] }}</a>
            @endforeach
        </div>
        <div class="nav-cta">
            <a href="{{ route('classes') }}" class="btn btn-primary">Book a class <span class="arrow">&rarr;</span></a>
            <button class="burger" aria-label="Open menu" type="button"><span></span><span></span><span></span></button>
        </div>
    </nav>
</header>

<div class="mobile-menu">
    <div class="mm-links">
        @foreach ($nav as $index => $item)
            <a href="{{ route($item['route']) }}" @class(['active' => $page === $item['key']])>
                {{ $item['label'] }}
                <span>0{{ $index + 1 }}</span>
            </a>
        @endforeach
    </div>
    <div class="mm-foot">
        <a href="{{ route('classes') }}" class="btn btn-primary" style="justify-content:center">Book your first class</a>
        <p class="kicker no-rule" style="margin-top:14px">Gate Village, DIFC &middot; Dubai</p>
    </div>
</div>
