@php
  $pathname = '/'.ltrim(request()->path(), '/');
  $isHome = $pathname === '/';
  $topBarGlass = 'border-b border-border/80 bg-background/80 shadow-sm backdrop-blur-xl supports-[backdrop-filter]:bg-background/72';
  $navItems = [
    ['route' => 'app.home', 'label' => 'Home', 'icon' => 'home', 'active' => $pathname === '/'],
    ['route' => 'app.groups', 'label' => 'Groups', 'icon' => 'users', 'active' => $pathname === '/groups' || str_starts_with($pathname, '/group/')],
    ['route' => 'app.shared-lists.intro', 'label' => 'Shared lists', 'icon' => 'shopping-cart', 'active' => str_starts_with($pathname, '/shared-lists')],
    ['route' => 'app.shared-purchases.intro', 'label' => 'Shared purchases', 'icon' => 'package', 'active' => str_starts_with($pathname, '/shared-purchases')],
    ['route' => 'app.activity', 'label' => 'Notifications', 'icon' => 'bell', 'active' => $pathname === '/activity'],
    ['route' => 'app.insights', 'label' => 'Insights', 'icon' => 'bar-chart-3', 'active' => $pathname === '/insights'],
    ['route' => 'app.account', 'label' => 'Profile', 'icon' => 'user', 'active' => $pathname === '/account'],
  ];

  if (request()->user()?->isSuperAdmin()) {
    array_splice($navItems, 6, 0, [[
      'route' => 'admin.dashboard',
      'label' => 'Admin',
      'icon' => 'shield-check',
      'active' => str_starts_with($pathname, '/admin'),
    ]]);
  }
@endphp

<div>
  @if (session()->has('impersonator_id'))
    <div class="fixed inset-x-0 top-0 z-50 border-b border-amber-200 bg-amber-50/95 backdrop-blur">
      <div class="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-2 text-sm text-amber-900 md:px-6 lg:px-8">
        <div class="min-w-0">
          <span class="font-semibold">Impersonating account</span>
          <span class="text-amber-800/90">You are browsing as {{ request()->user()?->email }}.</span>
        </div>

        <form method="POST" action="{{ route('admin.impersonation.leave') }}">
          @csrf
          <button type="submit" class="rounded-full bg-amber-900 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-amber-50">
            Exit impersonation
          </button>
        </form>
      </div>
    </div>
  @endif

  {{-- Desktop sidebar --}}
  <aside class="fixed inset-y-0 left-0 z-30 hidden w-[260px] flex-col border-r border-border/80 bg-[hsl(var(--sidebar-background))] lg:flex">
    <div class="flex h-14 items-center border-b border-[hsl(var(--sidebar-border))] px-5">
      <a href="{{ route('app.home') }}" class="text-left font-semibold tracking-tight text-[hsl(var(--sidebar-foreground))] transition-opacity hover:opacity-80">
        {{ config('app.name', 'WeShare') }}
      </a>
    </div>

    <nav class="flex flex-1 flex-col gap-0.5 p-3" aria-label="Main navigation">
      @foreach ($navItems as $tab)
        <a
          href="{{ route($tab['route']) }}"
          class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-[15px] font-medium transition-colors
            {{ $tab['active']
              ? 'bg-[hsl(var(--sidebar-accent))] text-[hsl(var(--sidebar-accent-foreground))]'
              : 'text-[hsl(var(--sidebar-foreground))]/80 hover:bg-[hsl(var(--sidebar-accent))]/60'
            }}"
        >
          <x-dynamic-component :component="'lucide-'.$tab['icon']" class="h-5 w-5 shrink-0 opacity-90" />
          {{ $tab['label'] }}
        </a>
      @endforeach
    </nav>

    <div class="border-t border-[hsl(var(--sidebar-border))] p-3">
      <a
        href="{{ route('app.add-expense') }}"
        class="flex w-full items-center justify-center gap-2 rounded-xl bg-primary py-3 text-[15px] font-semibold text-primary-foreground shadow-sm transition-opacity hover:opacity-95"
      >
        <x-lucide-plus class="h-5 w-5" />
        Add expense
      </a>
    </div>
  </aside>

  {{-- Tablet top bar --}}
  <header
    class="fixed inset-x-0 top-0 z-30 hidden h-14 items-stretch md:flex lg:hidden {{ $topBarGlass }} {{ session()->has('impersonator_id') ? 'top-[41px]' : '' }}"
  >
    <div class="flex w-full items-center gap-1 px-3 sm:px-4">
      <a
        href="{{ route('app.home') }}"
        class="mr-1 shrink-0 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-secondary/80"
      >
        <span class="block text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
          {{ config('app.name', 'WeShare') }}
        </span>
      </a>

      <nav
        class="flex min-w-0 flex-1 items-center justify-center gap-0.5 overflow-x-auto overscroll-x-contain sm:gap-1"
        aria-label="Main navigation"
      >
        @foreach (collect($navItems)->map(fn ($tab) => [
          'route' => $tab['route'],
          'label' => $tab['label'] === 'Shared lists' ? 'Lists' : ($tab['label'] === 'Shared purchases' ? 'Purchases' : $tab['label']),
          'active' => $tab['active'],
        ]) as $tab)
          <a
            href="{{ route($tab['route']) }}"
            class="tap-target shrink-0 rounded-full px-2.5 py-2 text-[13px] font-medium transition-colors sm:px-3
              {{ $tab['active']
                ? 'bg-primary-muted text-[hsl(var(--primary))]'
                : 'text-muted-foreground hover:bg-secondary/80'
              }}"
          >
            {{ $tab['label'] }}
          </a>
        @endforeach
      </nav>

      <a
        href="{{ route('app.add-expense') }}"
        aria-label="Add expense"
        class="tap-target flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm transition-opacity hover:opacity-95"
      >
        <x-lucide-plus class="h-5 w-5" />
      </a>
    </div>
  </header>

  <div class="min-h-[100dvh] {{ session()->has('impersonator_id') ? 'pt-[41px]' : '' }} md:pt-14 {{ session()->has('impersonator_id') ? 'md:pt-[97px]' : '' }} lg:pt-0 {{ session()->has('impersonator_id') ? 'lg:pt-[41px]' : '' }} lg:pl-[260px]">
    {{ $slot }}
  </div>
</div>