<script lang="ts" setup>
// import { useRouter } from "vue-router";

// const router = useRouter();
//
// // 跳转到登录页
// const goToLogin = () => {
//   router.push("/user/login");
// };
//
// // 跳转到注册页
// const goToRegister = () => {
//   router.push("/user/register");
// };
</script>

<template>
  <div class="auth-layout min-h-screen flex flex-col">
    <!-- 极简头部 -->
    <header class="auth-header py-6">
      <div class="container mx-auto px-4">
        <div class="flex justify-center">
          <div class="flex items-center space-x-3">
            <i class="fa-solid fa-store text-3xl text-blue-600"></i>
            <h1 class="text-2xl font-bold text-gray-800">致微商城</h1>
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1">
      <div class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
          <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="md:flex">
              <!-- 左侧宣传区 -->
              <div
                class="md:w-2/5 bg-gradient-to-br from-blue-500 to-indigo-600 p-8 text-white hidden md:block"
              >
                <div class="h-full flex flex-col justify-center">
                  <h2 class="text-3xl font-bold mb-4">欢迎加入致微商城</h2>
                  <p class="mb-6 opacity-90">
                    发现更多优质商品，享受便捷购物体验
                  </p>
                  <ul class="space-y-3">
                    <li class="flex items-center">
                      <i class="fa-solid fa-check-circle mr-2"></i>
                      <span>海量商品，品质保证</span>
                    </li>
                    <li class="flex items-center">
                      <i class="fa-solid fa-check-circle mr-2"></i>
                      <span>快速配送，售后无忧</span>
                    </li>
                    <li class="flex items-center">
                      <i class="fa-solid fa-check-circle mr-2"></i>
                      <span>专享优惠，会员特权</span>
                    </li>
                  </ul>
                </div>
              </div>

              <!-- 右侧表单区 -->
              <div class="md:w-3/5 p-8">
                <slot />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 简化底部 -->
    <footer class="auth-footer py-6">
      <div class="container mx-auto px-4">
        <div class="text-center text-gray-500 text-sm">
          <div class="flex flex-wrap justify-center gap-4 mb-2">
            <a href="#" class="hover:text-blue-600 transition-colors"
              >用户协议</a
            >
            <a href="#" class="hover:text-blue-600 transition-colors"
              >隐私政策</a
            >
            <a href="#" class="hover:text-blue-600 transition-colors"
              >联系我们</a
            >
          </div>
          <p>© 2025 致微商城 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.auth-layout {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
}

.auth-header {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.auth-footer {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
</style>
