@php
    $eyebrow ??= 'Member account';
    $subtitle ??= null;
    $active ??= null;
    $sections = [
        ['account.dashboard', 'Overview', 'layout-dashboard'],
        ['account.orders', 'Orders', 'package'],
        ['account.store-credit', 'Store credit', 'wallet-cards'],
        ['account.addresses', 'Addresses', 'map-pin'],
        ['account.returns', 'Returns', 'rotate-ccw'],
        ['wishlist.index', 'Wishlist', 'heart'],
    ];
@endphp
<div class="flex flex-wrap items-end justify-between gap-4">
    <div>
        <p class="tra-eyebrow">{{ $eyebrow }}</p>
        <h1 class="store-display mt-2 text-3xl font-bold tracking-tight text-white sm:text-4xl">{{ $title }}</h1>
        @if($subtitle)
            <p class="mt-2 text-sm text-white/60">{{ $subtitle }}</p>
        @endif
    </div>
    @auth('customer')
        <form method="post" action="{{ route('account.logout') }}">@csrf
            <button class="tra-btn tra-btn-quiet"><i data-lucide="log-out" class="h-4 w-4"></i> Sign out</button>
        </form>
    @endauth
</div>

@auth('customer')
    <nav class="mt-7 flex flex-wrap gap-2" aria-label="Account sections">
        @foreach($sections as [$route, $label, $icon])
            <a href="{{ route($route) }}" @class(['tra-pill', 'tra-pill-gold' => $active === $route]) @if($active === $route) aria-current="page" @endif>
                <i data-lucide="{{ $icon }}" class="h-4 w-4"></i> {{ $label }}
            </a>
        @endforeach
    </nav>
@endauth