<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  theme: string
  t: (key: string) => string
}>()

const logoSrc = computed(() => {
  if (props.theme === 'unicorn') return '/src/assets/images/logo_unicorn.png'
  if (props.theme === 'luxury') return '/src/assets/images/logo_luxury.png'
  if (props.theme === 'win95') return '/src/assets/images/logo_win95.png'
  if (props.theme === 'nat') return '/src/assets/images/logo_nat.png'
  return '/src/assets/images/logo_classic.png'
})
</script>

<template>
  <section id="home" class="hero">
    <div class="container hero-content">
      <div class="logo-container">
        <img :src="logoSrc" :key="theme" alt="Haumdaucher Logo" class="hero-logo" />
      </div>
      <h1 class="hero-title">{{ t('hero.title') }}</h1>
      <p class="hero-subtitle">{{ t('hero.subtitle') }}</p>
      <div class="scroll-indicator">↓</div>
    </div>
  </section>
</template>

<style scoped>
.hero {
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-container {
  margin-bottom: 40px;
  perspective: 1000px;
}

.hero-logo {
  width: 300px;
  height: auto;
  animation: logo-entry 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes logo-entry {
  0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0); opacity: 1; }
}

.hero-title {
  font-size: clamp(1.8rem, 8vw, 4rem); /* Reduced base from 2rem to 1.8rem */
  margin-bottom: 10px;
  text-transform: uppercase;
  line-height: 1.1;
  width: 100%;
  max-width: 100vw;
  overflow-wrap: break-word;
}

.hero-subtitle {
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-style: italic;
  width: 100%;
  padding: 0 20px;
}

.scroll-indicator {
  margin-top: 60px;
  font-size: 2rem;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

[data-theme='luxury'] .hero-title {
  background: linear-gradient(45deg, #d4af37, #f7ef8a, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

[data-theme='unicorn'] .hero-title {
  background: linear-gradient(45deg, #f06292, #ba68c8, #64b5f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
