<template>
  <section class="relative text-white">
    <!-- Background layer -->
    <div class="absolute inset-0 bg-cover bg-center bg-no-repeat w-full h-full" 
         :style="bgImage ? `background-image: url('${bgImage}')` : ''"
    ></div>
    
    <!-- Overlay for readability -->
    <div class="absolute inset-0 bg-black/5"></div>
    
    <div class="relative z-10 h-full flex items-center justify-center md:justify-end pt-16 md:pt-24 pb-8 sm:pb-8 px-8 sm:px-12 lg:px-16">
      <div class="bg-blue-600/80 p-8 rounded-lg shadow-lg w-full md:w-auto md:max-w-3xl">
        <div class="flex flex-col items-end text-right">
          <!-- Main Title -->
          <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 text-white">
            {{ $t(line1Key) }}
          </h1>
          
          <!-- Subtitle 1 -->
          <p class="text-md sm:text-xl md:text-2xl text-white mb-4 font-semibold">
            {{ $t(line2Key) }}
          </p>

          <!-- Subtitle 2 -->
          <p class="text-sm sm:text-lg text-gray-200 font-light mb-2 tracking-wide max-w-2xl">
            {{ $t(line3Key) }}
          </p>
          <!-- Subtitle 3 -->
          <p v-if="line4Key" class="text-sm sm:text-lg text-gray-200 mb-4 font-light max-w-3xl">
            {{ $t(line4Key) }}
          </p>
          <!-- Subtitle 4 -->
          <p v-if="line5Key" class="text-md sm:text-2xl text-white mb-6 font-semibold max-w-3xl">
            {{ $t(line5Key) }}
          </p>
          
          <!-- Buttons -->
          <div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
            <slot></slot>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
defineProps<{
  line1Key: string;
  line2Key: string;
  line3Key: string;
  line4Key?: string;
  line5Key?: string;
  bgImage?: string;
}>();
</script>

<style scoped>
section {
  min-height: 550px;
}

h1, p {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1024px) {
  section {
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  section {
    min-height: 450px;
  }
  .container {
    justify-content: center;
  }
  .w-full.md\:w-4\/5 {
    align-items: center;
    text-align: center;
  }
}

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