<template>
  <div class="min-h-screen bg-gray-50 font-sans">
    <!-- Client Layout Header -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex">
            <div class="flex-shrink-0 flex items-center">
              <span class="text-2xl font-bold text-vitality-orange">智护链</span>
              <span class="ml-2 text-sm text-gray-500">守护端</span>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <router-link to="/" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium flex items-center">
              <span class="mr-1">🏠</span> 退出
            </router-link>
            <router-link to="/client/dashboard" class="text-gray-600 hover:text-vitality-orange px-3 py-2 rounded-md text-sm font-medium">首页</router-link>
            <router-link to="/client/timebank" class="text-gray-600 hover:text-vitality-orange px-3 py-2 rounded-md text-sm font-medium">时间银行</router-link>
            <div class="ml-4 flex items-center">
              <img class="h-8 w-8 rounded-full" src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" alt="User Avatar" />
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <router-view></router-view>
    </main>
  </div>
</template>

<script setup>
</script>
