<script setup>
const props = defineProps({
  /** 커버 이미지 URL */
  imageUrl: {
    type: String,
    default: ''
  },
  /** 다크모드 커버 이미지 URL */
  darkImageUrl: {
    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()))
/** @type {import('vue').ComputedRef<boolean>} */
const lightImageUrl = computed(() => props.imageUrl?.trim() || props.darkImageUrl?.trim() || '')
/** @type {import('vue').ComputedRef<boolean>} */
const hasDarkImage = computed(() => Boolean(props.imageUrl?.trim() && props.darkImageUrl?.trim()))
</script>

<template>
  <section
    v-if="lightImageUrl"
    class="home-hero relative mx-auto w-full max-w-[720px] overflow-hidden"
    data-home-hero
  >
    <div class="home-hero__frame relative aspect-[720/215] w-full bg-[var(--site-panel)]">
      <img
        :class="[
          'home-hero__cover home-hero__cover--light absolute inset-0 h-full w-full object-cover',
          hasDarkImage ? '' : 'home-hero__cover--single'
        ]"
        :src="lightImageUrl"
        alt=""
        loading="eager"
      >
      <img
        v-if="hasDarkImage"
        class="home-hero__cover home-hero__cover--dark absolute inset-0 h-full w-full object-cover"
        :src="darkImageUrl"
        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] whitespace-pre-line text-sm leading-relaxed text-white/85"
          >
            {{ text }}
          </p>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.home-hero__cover--dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .home-hero__cover--light:not(.home-hero__cover--single) {
    display: none;
  }

  .home-hero__cover--dark {
    display: block;
  }
}

html[data-theme='light'] .home-hero__cover--light {
  display: block;
}

html[data-theme='light'] .home-hero__cover--dark {
  display: none;
}

html[data-theme='dark'] .home-hero__cover--light:not(.home-hero__cover--single) {
  display: none;
}

html[data-theme='dark'] .home-hero__cover--dark {
  display: block;
}
</style>
