<template>
  <div class="flex min-h-screen flex-col bg-black text-white">
    <!-- Full Width Header -->
    <div class="h-[60px] md:h-[125px]">
      <div class="fixed top-[20px] z-50 w-full md:top-[45px]">
        <div class="container">
          <header
            class="lucid-glass-bar flex h-[40px] items-center justify-between rounded-[90px] pr-[5px] pl-5 transition-all duration-300 md:h-[60px] md:pr-[10px]"
          >
            <router-link to="/" class="flex items-center gap-2">
              <!-- Desktop Logo -->
              <Logo alt="Hi快VPN" class="h-[18px] w-auto md:ml-8 md:h-[29px]" />
              <span class="ml-3 text-2xl font-black">高能合伙人</span>
            </router-link>
            <div v-if="isLoggedIn" class="flex items-center">
              <router-link
                to="/user-center"
                class="flex size-[30px] items-center justify-center rounded-full bg-[#78788029] text-xl font-bold text-white shadow-lg transition hover:scale-105 md:size-[40px] md:text-3xl"
              >
                {{ userLetter }}
              </router-link>
            </div>
            <button
              v-else
              class="flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-[#78788029] px-6 text-sm font-bold backdrop-blur-md transition hover:brightness-110 md:h-[40px] md:w-[220px] md:text-xl"
            >
              代理后台登录/注册
            </button>
          </header>
        </div>
      </div>
    </div>
    <div class="flex flex-1 flex-col">
      <!-- Main Neon Green Card -->
      <!--      <div class="container md:hidden">

      </div>-->
      <div class="flex flex-1 items-center justify-center pb-[50px]">
        <div class="mx-auto">
          <DesktopLayout />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import DesktopLayout from './DesktopLayout/index.vue'
import Logo from '@/pages/Home/logo.svg?component'
import { useLocalStorage } from '@vueuse/core'

const token = useLocalStorage('Authorization', '')
const userEmail = useLocalStorage('UserEmail', '')

const isLoggedIn = computed(() => !!token.value)
const userLetter = computed(() => {
  if (!userEmail.value) return '?'
  return userEmail.value.charAt(0).toUpperCase()
})
</script>

<style scoped></style>

<style scoped></style>
