<template>
    <div class="min-h-screen bg-slate-100 flex">

    <!-- Sidebar -->
    <aside
      class="w-64 bg-white border-r border-slate-200 hidden md:flex flex-col"
    >
      <!-- Brand -->
      <div class="h-16 flex items-center px-6 border-b border-slate-200">
        <span class="text-lg font-semibold tracking-tight">
          PolicyManager
        </span>
      </div>

      <!-- Navigation -->
      <nav class="flex-1 p-4 space-y-1">

        <NuxtLink
          to="/"
          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
        >
          Dashboard
        </NuxtLink>

        <NuxtLink
          to="/customers"
          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
                 bg-primary-50 text-primary-700 border border-primary-100"
        >
          Customers
        </NuxtLink>

        <NuxtLink
          to="/policies"
          class="group flex items-center px-3 py-2 rounded-lg text-sm font-medium
                 text-slate-600 hover:bg-slate-100 hover:text-slate-900 transition"
        >
          Policies
        </NuxtLink>

      </nav>
    </aside>

    <!-- Main -->
    <main class="flex-1">
      <div class="p-8">
        <NuxtPage />
      </div>
    </main>

  </div>
</template>
