<template>
  <!-- 
    Login Left View Component 
    Tech Stack: Vue 3 + Tailwind CSS
    Width: 65vw (Responsive hidden on mobile)
  -->
  <div
    class="hidden lg:flex relative w-[65vw] h-full bg-indigo-900 overflow-hidden flex-col justify-between p-12 text-white"
  >
    <!-- 1. 背景装饰 (Background Effects) -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <!-- 动态光晕 -->
      <div
        class="absolute top-[-10%] right-[-10%] w-96 h-96 rounded-full bg-indigo-500 blur-3xl opacity-40 animate-pulse"
      ></div>
      <div
        class="absolute bottom-[-10%] left-[-10%] w-80 h-80 rounded-full bg-blue-600 blur-3xl opacity-40"
      ></div>
      <!-- 网格纹理 -->
      <div
        class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20"
      ></div>
      <div
        class="absolute inset-0"
        style="
          background-image: radial-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px);
          background-size: 32px 32px;
        "
      ></div>
    </div>

    <!-- 2. Logo 区域 -->
    <div class="relative z-10 flex items-center gap-3 animate-fade-in-down">
      <div
        class="w-10 h-10 bg-white/10 backdrop-blur-md rounded-lg flex items-center justify-center border border-white/20 shadow-inner text-indigo-300"
      >
        <!-- Logo Icon -->
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
          <line x1="3" x2="21" y1="9" y2="9" />
          <line x1="9" x2="9" y1="21" y2="9" />
        </svg>
      </div>
      <span class="text-xl font-bold tracking-wide text-white">CloudSaaS</span>
    </div>

    <!-- 3. 主要内容区 (Content) -->
    <div v-if="!hideContent" class="relative z-10 my-auto animate-fade-in-up">
      <h1 class="text-5xl font-bold leading-tight mb-6">
        欢迎回来，<br />
        <span class="text-indigo-300">掌控您的业务</span>
      </h1>
      <p class="text-indigo-100 text-lg leading-relaxed max-w-lg opacity-90">
        数以万计的企业正在使用 CloudSaaS 实现数字化转型。登录您的控制台，查看最新数据与报表。
      </p>

      <!-- 已移除“交易总额”数据卡片 -->
    </div>

    <!-- 4. 底部版权 -->
    <div class="relative z-10 text-sm text-indigo-300/60 flex gap-6">
      <span>© 2025 CloudSaaS Inc.</span>
      <a href="#" class="hover:text-white transition-colors">隐私政策</a>
      <a href="#" class="hover:text-white transition-colors">帮助中心</a>
    </div>
  </div>
</template>

<script setup lang="ts">
  // Props 定义
  defineProps<{
    hideContent?: boolean
  }>()
</script>

<style scoped>
  /* 自定义动画 - 如果 Tailwind 配置文件中没有 extend 这些动画 */
  .animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
  }

  .animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
</style>
