<script setup>
const props = defineProps({
  /** 커버 이미지 URL */
  imageUrl: {
    type: String,
    default: ''
  },
  /** 오버레이 제목 */
  title: {
    type: String,
    default: ''
  },
  /** 오버레이 본문 */
  text: {
    type: String,
    default: ''
  }
})

/** @type {import('vue').ComputedRef<boolean>} */
const hasOverlay = computed(() => Boolean(props.title?.trim() || props.text?.trim()))
</script>

<template>
  <section
    v-if="imageUrl"
    class="home-hero relative mx-auto w-full max-w-[720px] overflow-hidden rounded-[10px]"
    data-home-hero
  >
    <div class="home-hero__frame relative aspect-[720/215] w-full bg-[var(--site-panel)]">
      <img
        class="home-hero__cover absolute inset-0 h-full w-full object-cover"
        :src="imageUrl"
        alt=""
        loading="eager"
      >
      <div
        v-if="hasOverlay"
        class="home-hero__overlay pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/35 to-transparent px-4 pb-4 pt-12 sm:px-5 sm:pb-5"
      >
        <div class="home-hero__overlay-inner flex flex-col items-start gap-1 text-left">
          <h2
            v-if="title"
            class="home-hero__title text-base font-semibold leading-snug text-white sm:text-lg"
          >
            {{ title }}
          </h2>
          <p
            v-if="text"
            class="home-hero__text max-w-[32rem] text-sm leading-relaxed text-white/85"
          >
            {{ text }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>
