<script setup lang="ts">
import { ref } from 'vue'
import MobileLayout from './MobileLayout/index.vue'
import Logo from '@/pages/Home/logo.svg?component'
import MobileLogo from '@/pages/Home/mobile-logo.svg?component'

// --- State ---
const selectedPlanId = ref('p2')
const selectedPayment = ref('alipay')

// --- Handlers ---
const handlePlanSelect = (id: string) => {
  selectedPlanId.value = id
}
</script>

<template>
  <div class="min-h-screen bg-black text-black">
    <!-- Full Width Header -->
    <div class="h-[88px]">
      <header
        class="fixed top-[20px] right-[18px] left-[18px] z-50 flex h-[68px] items-center justify-between rounded-[90px] bg-[#ADFF5B] pr-[30px] pl-6"
      >
        <div class="flex items-center gap-2">
          <!-- Desktop Logo -->
          <Logo :src="Logo" alt="Hi快VPN" class="hidden h-10 w-auto text-black md:block" />
          <!-- Mobile Logo -->
          <MobileLogo
            :src="MobileLogo"
            alt="Hi快VPN"
            class="block h-[28px] w-[67px] text-black md:hidden"
          />
        </div>
        <div class="text-xl font-[600]">个人账户</div>
      </header>
    </div>
    <!-- Main Neon Green Card -->
    <div class="px-[18px]">
      <MobileLayout />
    </div>
  </div>
</template>

<style scoped>
/* Simplified layout font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');

.tracking-tight {
  font-family: 'Inter', 'PingFang SC', sans-serif;
}
</style>
