@php
  $accountTabs = [
    [
      'route' => 'mariachi.account.security.edit',
      'label' => 'Seguridad',
      'icon' => 'tabler-lock',
      'active' => request()->routeIs('mariachi.account.security.*'),
    ],
    [
      'route' => 'mariachi.account.notifications.edit',
      'label' => 'Notificaciones',
      'icon' => 'tabler-bell',
      'active' => request()->routeIs('mariachi.account.notifications.*'),
    ],
  ];
@endphp

<style>
  .account-settings-nav {
    position: relative;
  }

  .account-settings-nav__scroll {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.2rem 0 0.4rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .account-settings-nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .account-settings-nav__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    border: 1px solid rgba(15, 122, 85, 0.14);
    border-radius: 999px;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.94);
    color: #4b5563;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 10px 30px -24px rgba(15, 23, 42, 0.45);
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }

  .account-settings-nav__item:hover {
    border-color: rgba(15, 122, 85, 0.22);
    background: #fff;
    color: #111827;
    box-shadow: 0 16px 34px -26px rgba(15, 122, 85, 0.26);
  }

  .account-settings-nav__item.is-active {
    border-color: transparent;
    background: linear-gradient(135deg, #0f7a55 0%, #0b5d42 100%);
    color: #fff;
    box-shadow: 0 18px 36px -24px rgba(11, 93, 66, 0.4);
  }

  .account-settings-nav__item .icon-base {
    font-size: 0.95rem;
    line-height: 1;
  }

  @media (min-width: 992px) {
    .account-settings-nav {
      margin-bottom: 1.9rem;
      padding: 0.25rem;
      border: 1px solid rgba(15, 122, 85, 0.08);
      border-radius: 1.4rem;
      background: linear-gradient(180deg, rgba(247, 251, 249, 0.9) 0%, rgba(255, 255, 255, 0.98) 100%);
      box-shadow: 0 20px 40px -34px rgba(15, 23, 42, 0.24);
    }

    .account-settings-nav__scroll {
      flex-wrap: wrap;
      overflow: visible;
      gap: 0.65rem;
      padding: 0;
    }

    .account-settings-nav__item {
      min-height: 2.75rem;
      border-radius: 1rem;
      padding: 0.7rem 0.9rem;
    }
  }
</style>

<div class="account-settings-nav mb-4 mb-lg-6">
  <div class="account-settings-nav__scroll">
    @foreach($accountTabs as $tab)
      <a class="account-settings-nav__item {{ $tab['active'] ? 'is-active' : '' }}" href="{{ route($tab['route']) }}">
        <i class="icon-base ti {{ $tab['icon'] }}" aria-hidden="true"></i>
        <span>{{ $tab['label'] }}</span>
      </a>
    @endforeach
  </div>
</div>