<template>
  <section class="space-y-6">
    <div class="surface-card rounded-[30px] p-6 md:p-8">
      <h1 class="text-3xl font-extrabold text-[#0f2f20] md:text-4xl">Личный кабинет клиента</h1>
      <p class="mt-2 max-w-2xl text-sm text-[#28543f]/80 md:text-base">
        Быстрый доступ к каталогу, корзине, заказам и профилю в новом интерфейсе.
      </p>
      <div class="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        <NuxtLink to="/products" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
          <h2 class="font-bold text-[#123824]">Каталог</h2>
        </NuxtLink>
        <NuxtLink to="/cart" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
          <h2 class="font-bold text-[#123824]">Корзина</h2>
        </NuxtLink>
        <NuxtLink to="/orders" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
          <h2 class="font-bold text-[#123824]">Мои заказы</h2>
        </NuxtLink>
        <NuxtLink to="/profile" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
          <h2 class="font-bold text-[#123824]">Профиль</h2>
        </NuxtLink>
        <NuxtLink to="/notifications" class="rounded-2xl border border-[#d2e9db] bg-white/80 p-4 transition hover:-translate-y-0.5 hover:shadow-md">
          <h2 class="font-bold text-[#123824]">Уведомления</h2>
        </NuxtLink>
      </div>
    </div>
  </section>
</template>
