<template>
  <section class="relative text-white">
    <!-- 背景图层 - 确保完全填充整个红色区域 -->
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat w-full h-full" 
         :style="bgImage ? `background-image: url('${bgImage}')` : ''"
    ></div>
    
    <!-- 轻微遮罩，确保文字可读性 -->
    <div class="absolute inset-0 bg-black/10"></div>
    
    <div class="container relative z-10 h-full flex items-center justify-end">
      <!-- 调整移动端和桌面端的宽度，保持布局结构 -->
      <div class="w-full md:w-3/5 lg:w-2/5 flex flex-col items-center md:items-end pt-12 px-6 md:px-0">
        <div class="text-center md:text-right">
          <!-- 参考图片标题样式 -->
          <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-1 text-white">
          <span class="transition-opacity duration-300 ease-in-out">{{ title || (titleKey ? $t(titleKey) : '') }}</span>
        </h1>
          <!-- 副标题样式调整：字体更小，颜色改为蓝色，添加加粗 -->
          <p class="text-base sm:text-lg md:text-lg text-blue-500 mb-1 font-semibold">
          <span class="transition-opacity duration-300 ease-in-out">{{ subtitle || (subtitleKey ? $t(subtitleKey) : '') }}</span>
        </p>
          <!-- 描述文本样式调整为细字体 -->
          <p v-if="descriptionKey" class="text-sm sm:text-base text-white mb-5 font-light tracking-wide max-w-md mx-auto md:mx-0 text-left">
            <span class="transition-opacity duration-300 ease-in-out">{{ $t(descriptionKey) }}</span>
          </p>
          <!-- 按钮布局保持不变 -->
          <div class="flex flex-col sm:flex-row gap-3 justify-center md:justify-end">
        <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  title?: string;
  subtitle?: string;
  titleKey?: string;
  subtitleKey?: string;
  descriptionKey?: string;
  bgImage?: string;
}>();
</script>

<style scoped>
/* 添加淡入淡出效果，语言切换时更平滑 */
.transition-opacity {
  transition: opacity 0.3s ease;
}

:deep([i18n-in-progress]) .transition-opacity {
  opacity: 0;
}

/* 确保Banner高度与设计图一致，移动端更小 */
section {
  height: 450px;
}

/* 移除文字阴影，符合参考图 */
h1, p {
  text-shadow: none;
}

/* 移动端响应式高度和内容调整 */
@media (max-width: 768px) {
  section {
    height: 400px;
  }
}

@media (max-width: 640px) {
  section {
    height: 350px;
  }
}
</style> 