<template>
  <div class="min-h-screen bg-cloud text-ink">
    <aside class="fixed inset-y-0 left-0 z-20 hidden w-72 border-r border-slate-200 bg-white/90 p-6 backdrop-blur lg:block">
      <div class="mb-8">
        <p class="text-xs font-semibold uppercase tracking-[0.35em] text-brand">SaaS HRM</p>
        <h1 class="mt-2 text-2xl font-black">WorkforceOS</h1>
      </div>
      <nav class="max-h-[calc(100vh-9rem)] space-y-2 overflow-y-auto pr-1">
        <RouterLink v-for="item in nav" :key="item.to" :to="item.to" class="flex rounded-2xl px-4 py-3 text-sm font-semibold text-slate-600 hover:bg-slate-100" active-class="bg-ink text-white hover:bg-ink">
          {{ item.label }}
        </RouterLink>
      </nav>
    </aside>

    <main class="lg:pl-72">
      <header class="sticky top-0 z-10 border-b border-slate-200 bg-white/80 px-4 py-4 backdrop-blur md:px-8">
        <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div>
            <p class="text-xs font-bold uppercase tracking-[0.25em] text-slate-400">Realtime Workforce Command Center</p>
            <h2 class="text-xl font-black md:text-2xl">Attendance, Payroll, HRM, Devices</h2>
          </div>
          <div class="flex gap-2 overflow-x-auto lg:hidden">
            <RouterLink v-for="item in nav" :key="item.to" :to="item.to" class="whitespace-nowrap rounded-full bg-white px-4 py-2 text-sm font-semibold shadow-sm" active-class="bg-ink text-white">
              {{ item.label }}
            </RouterLink>
          </div>
        </div>
      </header>
      <RouterView />
    </main>
  </div>
</template>

<script setup>
const nav = [
  { to: '/super-admin', label: 'Super Admin' },
  { to: '/clients', label: 'Clients' },
  { to: '/packages', label: 'Packages' },
  { to: '/billing', label: 'Billing' },
  { to: '/monitoring', label: 'Monitoring' },
  { to: '/registration-control', label: 'Registration' },
  { to: '/client', label: 'Client Portal' },
  { to: '/organization', label: 'Organization' },
  { to: '/schedules', label: 'Schedules' },
  { to: '/employees', label: 'Employees' },
  { to: '/transfers', label: 'Transfers' },
  { to: '/attendance', label: 'Attendance' },
  { to: '/devices', label: 'Devices' },
  { to: '/rules', label: 'Rules' },
  { to: '/leave', label: 'Leave' },
  { to: '/holidays', label: 'Holidays' },
  { to: '/payroll', label: 'Payroll' },
  { to: '/finance', label: 'Finance' },
  { to: '/tasks', label: 'Tasks' },
  { to: '/contracts', label: 'Contracts' },
  { to: '/disciplinary', label: 'Disciplinary' },
  { to: '/reports', label: 'Reports' },
  { to: '/security', label: 'Security' },
  { to: '/settings', label: 'Settings' },
];
</script>
