@php
    $socials = array_filter([
        'facebook' => $site('social_facebook'),
        'instagram' => $site('social_instagram'),
        'youtube' => $site('social_youtube'),
        'x' => $site('social_x'),
    ]);
    $tel = $site('phone') ? '+'.\App\Support\Fmt::digits($site('phone')) : null;

    // Login button: donors go to their account, admins to the admin panel, everyone else to sign in.
    $me = auth()->user();
    [$accountUrl, $accountLabel] = match (true) {
        $me && $me->role === 'donor' => [route('donor.dashboard'), 'My account'],
        $me && $me->canAccessAdmin() => [route('admin.dashboard'), 'Admin'],
        default => [route('donor.login'), 'Login'],
    };
@endphp

<div class="topbar" role="complementary" aria-label="Contact information">
    <div class="container topbar__in">
        <p class="topbar__tag"><svg class="i" aria-hidden="true"><use href="#i-leaf"/></svg>{{ $site('tagline') ?: 'For the welfare of others' }}</p>
        <div class="topbar__right">
            @if ($site('phone'))
                <a href="tel:{{ $tel }}"><svg class="i" aria-hidden="true"><use href="#i-phone"/></svg>{{ $site('phone') }}</a>
            @endif
            @if ($site('email'))
                <a href="mailto:{{ $site('email') }}"><svg class="i" aria-hidden="true"><use href="#i-mail"/></svg>{{ $site('email') }}</a>
            @endif
            @if ($site('reg_80g'))
                <span class="topbar__badge"><svg class="i" aria-hidden="true"><use href="#i-shield"/></svg>80G tax benefit</span>
            @endif
            <a class="topbar__link" href="{{ route('volunteer') }}"><svg class="i" aria-hidden="true"><use href="#i-users"/></svg>Volunteer with us</a>
            @if ($socials)
                <span class="topbar__social">
                    @foreach ($socials as $name => $url)
                        <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ ucfirst($name) }}"><svg class="i" aria-hidden="true"><use href="#i-{{ $name }}"/></svg></a>
                    @endforeach
                </span>
            @endif
        </div>
    </div>
</div>

<header class="header" id="header">
    <div class="container header__in">
        <a class="brand" href="{{ route('home') }}" aria-label="{{ seo()->orgName() }}: home">
            <img src="{{ asset('images/logo-300.webp') }}" srcset="{{ asset('images/logo-300.webp') }} 1x, {{ asset('images/logo-600.webp') }} 2x"
                 width="150" height="51" alt="{{ seo()->orgName() }}">
        </a>

        {{-- Desktop menu with dropdowns (config parhit.menu). Hover or click opens a panel; resources/js/nav.js
             handles click, touch and the keyboard. On narrower desktops the Home link is hidden: the logo is home. --}}
        <nav class="nav" id="site-nav" aria-label="Main">
            <ul class="nav__list">
                @foreach (config('parhit.menu') as $i => $item)
                    @php
                        $active = request()->routeIs(...$item['match']);
                        $mega = ($item['mega'] ?? null) === 'causes';
                        $hasSub = $mega || ! empty($item['children']);
                        $panelId = 'nav-panel-'.$i;
                    @endphp
                    <li @class(['nav__item', 'nav__item--wide' => ! empty($item['wide']), 'has-sub' => $hasSub, 'nav__item--mega' => $mega])>
                        @if (! $hasSub)
                            <a href="{{ route($item['route']) }}" @class(['nav__link', 'is-active' => $active]) @if ($active) aria-current="page" @endif>{{ $item['label'] }}</a>
                        @else
                            <button type="button" @class(['nav__link', 'nav__trigger', 'is-active' => $active]) aria-expanded="false" aria-controls="{{ $panelId }}">
                                {{ $item['label'] }}<svg class="i nav__chev" aria-hidden="true"><use href="#i-chevron"/></svg>
                            </button>

                            @if ($mega)
                                <div class="nav__panel nav__panel--mega" id="{{ $panelId }}">
                                    <div class="mega">
                                        <div class="mega__main">
                                            <div class="mega__head">
                                                <p class="mega__title">Choose a cause</p>
                                                <a class="mega__all" href="{{ route('causes') }}">View all campaigns <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                                            </div>
                                            <ul class="mega__grid">
                                                @foreach ($categories as $c)
                                                    <li>
                                                        <a @class(['mega__cat', 'mega__cat--'.$c->icon, 'is-active' => request()->is('causes/'.$c->slug)]) href="{{ route('causes.category', $c) }}">
                                                            <span class="mega__ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $c->icon }}"/></svg></span>
                                                            <span class="mega__txt"><strong>{{ $c->name }}</strong>@if ($c->summary)<small>{{ $c->summary }}</small>@endif</span>
                                                        </a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="mega__promo">
                                            <span class="mega__promo-ico" aria-hidden="true"><svg class="i"><use href="#i-heart"/></svg></span>
                                            <p class="mega__promo-title">Not sure where to give?</p>
                                            <p>Your gift goes where it is needed most, right now.</p>
                                            <a class="btn btn--white btn--sm" href="{{ route('donate') }}">Donate now</a>
                                            <a class="mega__promo-link" href="{{ route('donate', ['frequency' => 'monthly']) }}">or give monthly <svg class="i" aria-hidden="true"><use href="#i-arrow"/></svg></a>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <div class="nav__panel" id="{{ $panelId }}">
                                    <ul class="drop">
                                        @foreach ($item['children'] as $ch)
                                            @php $on = empty($ch[4]) && request()->routeIs($ch[1]); @endphp
                                            <li>
                                                <a @class(['drop__link', 'is-active' => $on]) href="{{ route($ch[1], $ch[4] ?? []) }}" @if ($on) aria-current="page" @endif>
                                                    <span class="drop__ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $ch[2] }}"/></svg></span>
                                                    <span><strong>{{ $ch[0] }}</strong><small>{{ $ch[3] }}</small></span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        @endif
                    </li>
                @endforeach
            </ul>
        </nav>

        <div class="header__actions">
            <a class="header__login" href="{{ $accountUrl }}">
                <svg class="i" aria-hidden="true"><use href="#i-user"/></svg><span>{{ $accountLabel }}</span>
            </a>
            <a class="header__cart" href="{{ route('causes') }}" data-cart-open aria-label="Your cart">
                <svg class="i" aria-hidden="true"><use href="#i-cart"/></svg>
                <span class="header__cart-dot" data-cart-dot aria-hidden="true"></span>
                <span class="header__cart-count" data-cart-count hidden>0</span>
            </a>
            <a class="btn btn--ghost btn--sm header__donate" href="{{ route('donate') }}">Donate<span class="header__donate-now">&nbsp;now</span></a>
            <button class="menu-btn" type="button" id="menu-btn" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
                <svg class="i i--lg menu-btn__open" aria-hidden="true"><use href="#i-menu"/></svg>
                <svg class="i i--lg menu-btn__close" aria-hidden="true"><use href="#i-close"/></svg>
            </button>
        </div>
    </div>
</header>

{{-- Mobile menu: a donate card, the account link, the main pages as tiles, causes to browse,
     ways to get involved and quick ways to reach us. --}}
@php
    $accountNote = match (true) {
        $me && $me->role === 'donor' => 'Your donations and receipts',
        $me && $me->canAccessAdmin() => 'Go to the admin panel',
        default => 'Track donations and download receipts',
    };
    $involved = [
        ['Volunteer with us', 'volunteer', 'users', 'Give your time and skills'],
        ['Partner with us (CSR)', 'partner', 'gift', 'For companies and groups'],
        ['Start a campaign', 'campaign.start', 'plus', 'Raise support for a cause you know'],
    ];
    $more = [
        ['Reports', 'transparency', 'shield'],
        ['Gallery', 'gallery', 'camera'],
        ['FAQ', 'faq', 'info'],
    ];
@endphp
<div class="mobile-menu" id="mobile-menu" hidden>
    <nav aria-label="Mobile">
        <div class="mm__sec mm__hero">
            <p class="mm__hero-tag"><svg class="i" aria-hidden="true"><use href="#i-leaf"/></svg>{{ $site('tagline') ?: 'For the welfare of others' }}</p>
            <p class="mm__hero-title">Your kindness can change a life today</p>
            <div class="mm__hero-btns">
                <a class="btn btn--white" href="{{ route('donate') }}">Donate now</a>
                <a class="btn btn--glass" href="{{ route('donate', ['frequency' => 'monthly']) }}">Give monthly</a>
            </div>
        </div>

        <a class="mm__sec mm__account" href="{{ $accountUrl }}">
            <span class="mm__account-ico" aria-hidden="true"><svg class="i"><use href="#i-user"/></svg></span>
            <span class="mm__account-txt"><strong>{{ $accountLabel }}</strong><small>{{ $accountNote }}</small></span>
            <svg class="i mm__go" aria-hidden="true"><use href="#i-arrow"/></svg>
        </a>

        <div class="mm__sec">
            <p class="mm__title">Menu</p>
            <ul class="mm__grid">
                @foreach (config('parhit.nav') as $item)
                    @php $on = request()->routeIs($item['match']); @endphp
                    <li>
                        <a @class(['mm__tile', 'is-active' => $on]) href="{{ route($item['route']) }}" @if ($on) aria-current="page" @endif>
                            <span class="mm__tile-ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $item['icon'] }}"/></svg></span>{{ $item['label'] }}
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>

        @if ($categories->isNotEmpty())
            <div class="mm__sec">
                <p class="mm__title">Browse causes</p>
                <ul class="mm__cats">
                    @foreach ($categories as $c)
                        <li>
                            <a class="mm__cat mega__cat--{{ $c->icon }}" href="{{ route('causes.category', $c) }}">
                                <span class="mm__cat-ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $c->icon }}"/></svg></span>{{ $c->name }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="mm__sec">
            <p class="mm__title">Get involved</p>
            <ul class="mm__rows">
                @foreach ($involved as [$label, $route, $icon, $note])
                    <li>
                        <a @class(['mm__row', 'is-active' => request()->routeIs($route)]) href="{{ route($route) }}">
                            <span class="mm__row-ico" aria-hidden="true"><svg class="i"><use href="#i-{{ $icon }}"/></svg></span>
                            <span class="mm__row-txt"><strong>{{ $label }}</strong><small>{{ $note }}</small></span>
                            <svg class="i mm__go" aria-hidden="true"><use href="#i-arrow"/></svg>
                        </a>
                    </li>
                @endforeach
            </ul>
            <ul class="mm__more">
                @foreach ($more as [$label, $route, $icon])
                    <li><a @class(['mm__chip', 'is-active' => request()->routeIs($route)]) href="{{ route($route) }}"><svg class="i" aria-hidden="true"><use href="#i-{{ $icon }}"/></svg>{{ $label }}</a></li>
                @endforeach
            </ul>
        </div>

        @if ($site('phone') || $site('whatsapp') || $site('email'))
            <div class="mm__sec mm__talk">
                <p class="mm__title">Talk to us</p>
                <div class="mm__talk-btns">
                    @if ($site('phone'))<a href="tel:{{ $tel }}"><svg class="i" aria-hidden="true"><use href="#i-phone"/></svg>Call</a>@endif
                    @if ($site('whatsapp'))<a href="https://wa.me/{{ \App\Support\Fmt::digits($site('whatsapp')) }}" target="_blank" rel="noopener"><svg class="i" aria-hidden="true"><use href="#i-whatsapp"/></svg>WhatsApp</a>@endif
                    @if ($site('email'))<a href="mailto:{{ $site('email') }}"><svg class="i" aria-hidden="true"><use href="#i-mail"/></svg>Email</a>@endif
                </div>
                @if ($socials)
                    <div class="mm__social">
                        @foreach ($socials as $name => $url)
                            <a href="{{ $url }}" target="_blank" rel="noopener" aria-label="{{ ucfirst($name) }}"><svg class="i" aria-hidden="true"><use href="#i-{{ $name }}"/></svg></a>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif
    </nav>
</div>