// components/HeroBox.vue
<template>
  <section class="heroBox" :aria-label="ariaLabel">
    <NuxtImg
      provider="strapi"
      :src="image"
      class="hero-bg"
      sizes="sm:100vw md:100vw lg:100vw"
      alt=""
      aria-hidden="true"
      priority
      loading="eager"
      preload
      fetchpriority="high"
    />
    <div class="container-10 content">
      <h1>{{ $t(content.headline1) }}</h1>
      <h2>{{ $t(content.headline2) }}</h2>
      <h3>{{ $t(content.headline3) }}</h3>
    </div>
    <svg class="sectionWave wave-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
      <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
    </svg>
  </section>
</template>

<script setup>
defineProps({
  image: String,
  ariaLabel: String,
  content: {
    type: Object,
    required: true
  }
})
</script>

<style lang="sass" scoped>
.heroBox
  position: relative
  min-height: 35rem
  height: 70vh
  display: flex
  align-items: center
  justify-content: center
  overflow: hidden

  &::after
    position: absolute
    content: ""
    z-index: 0
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-image: linear-gradient(
      to bottom right,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0.3) 2%,
      rgba(0, 0, 0, 0.7) 60%,
      rgba(255, 255, 255, 0) 100%,
      transparent 100%
    )

  .hero-bg
    position: absolute
    inset: 0
    width: 100%
    height: 100%
    object-fit: cover
    object-position: center top
    z-index: -1

  .content, h1, h2, h3
    position: relative
    z-index: 1

  h1, h2, h3
    color: white
    z-index: 2
    line-height: 1.5
    max-width: 70%
    @media (max-width: 768px)
      max-width: 100%

  h1
    margin-top: 3rem
    font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
    margin-bottom: 0
    font-family: 'Comfortaa'

  h2
    font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
    margin: .8rem 0 .8rem 0
    font-family: 'Comfortaa'

  h3
    font-size: 1.2rem
</style>