<script setup lang="ts">
/**
 * 内页 Hero 公共区：overline + 标题 + 副标题 + 可选背景图
 *
 * 非首页导航栏为 glass 风格（深色文字），因此无背景图时使用深色文字，
 * 有背景图时叠加半透明遮罩并使用白色文字。
 */
defineProps<{
  title: string;
  subtitle?: string;
  overline?: string;
  bgUrl?: string;
}>();
</script>

<template>
  <section class="relative overflow-hidden">
    <!-- 背景图 + 遮罩 -->
    <div v-if="bgUrl" class="absolute inset-0 bg-cover bg-center" :style="{ backgroundImage: `url(${bgUrl})` }" />
    <div v-if="bgUrl" class="absolute inset-0 bg-black/45" />

    <!-- 内容 -->
    <div
      class="section-container relative flex flex-col items-center text-center gap-16px py-72px md:py-96px"
      :class="bgUrl ? 'text-white' : 'text-gray-900 dark:text-white'"
    >
      <p v-if="overline" class="text-sm tracking-[0.35em] uppercase opacity-80 font-medium">
        {{ overline }}
      </p>
      <h1 class="text-3xl md:text-5xl font-bold leading-tight">{{ title }}</h1>
      <p v-if="subtitle" class="max-w-680px text-base md:text-lg opacity-90 leading-relaxed">
        {{ subtitle }}
      </p>
    </div>
  </section>
</template>
