<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Header from './components/layout/Header.vue'
import Hero from './components/sections/Hero.vue'
import ClubSpirit from './components/sections/ClubSpirit.vue'
import Impressum from './components/sections/Legal/Impressum.vue'
import Datenschutz from './components/sections/Legal/Datenschutz.vue'
import HaumdaucherGame from './components/layout/HaumdaucherGame.vue'
import { messages } from './locales/i18n'
import { useAuth } from './composables/useAuth'

const { isAllowed } = useAuth()

const theme = ref('classic')
const showGame = ref(false)
const isNatUnlocked = ref(false)
const boars = ref<{id: number, top: number}[]>([])

const toggleTheme = (newTheme: string) => {
  theme.value = newTheme
  document.documentElement.setAttribute('data-theme', newTheme)
  localStorage.setItem('haumdaucher-theme', newTheme)
  
  if (newTheme === 'nat') {
    startBoarRun()
  }
}

const unlockNat = () => {
  isNatUnlocked.value = true
  localStorage.setItem('haumdaucher-nat-unlocked', 'true')
}

const handleBackdoor = () => {
  const secret = prompt('Bitte Geheimcode eingeben (Unlock NAT):')
  if (secret?.toLowerCase() === 'nat mode') {
    unlockNat()
    alert('🐗 NAT-Modus freigschaltet! Wiedaschaun, reinghaun!')
  }
}

const startBoarRun = () => {
  setInterval(() => {
    if (theme.value === 'nat') {
      const id = Date.now()
      boars.value.push({ id, top: Math.random() * 80 + 10 })
      setTimeout(() => {
        boars.value = boars.value.filter(b => b.id !== id)
      }, 5000)
    }
  }, 8000)
}

onMounted(() => {
  const savedTheme = localStorage.getItem('haumdaucher-theme')
  if (savedTheme) toggleTheme(savedTheme)

  const savedNat = localStorage.getItem('haumdaucher-nat-unlocked')
  if (savedNat === 'true') isNatUnlocked.value = true
})

// Simplified translation: German only
const t = (key: string) => {
  const keys = key.split('.')
  let result: any = messages.de
  for (const k of keys) {
    if (result[k]) result = result[k]
    else return key
  }
  return result
}
</script>

<template>
  <Header 
    :currentTheme="theme" 
    :isNatUnlocked="isNatUnlocked"
    @update:theme="toggleTheme" 
    @open:game="showGame = true"
    :t="t"
  />
  <main>
    <Hero :theme="theme" :t="t" />
    <ClubSpirit :t="t" id="spirit" />
    
    <div class="legal-separator"></div>
    
    <section id="impressum" class="legal-section">
      <Impressum :t="t" />
    </section>
    <section id="datenschutz" class="legal-section">
      <Datenschutz :t="t" />
    </section>
    
    <div class="backdoor" @click.stop="handleBackdoor"></div>
  </main>
  
  <HaumdaucherGame 
    v-if="showGame" 
    :t="t" 
    :theme="theme"
    @close="showGame = false" 
    @unlock-nat="unlockNat"
  />
  
  <div v-for="boar in boars" :key="boar.id" class="running-boar" :style="{ top: boar.top + '%' }">🐗💨</div>
  
  <footer class="site-footer">
    <div class="container footer-content">
      <div class="footer-info">
        © {{ new Date().getFullYear() }} HAUMDAUCHER Wurst und Spezialitäten n.e.V.
      </div>
      <nav class="footer-links">
        <a href="#impressum">Impressum</a>
        <span class="sep">•</span>
        <a href="#datenschutz">Datenschutz</a>
      </nav>
    </div>
  </footer>
</template>


<style>
@import './assets/styles/global.css';

.running-boar {
  position: fixed;
  left: -100px;
  font-size: 3rem;
  z-index: 1500;
  animation: run-across 5s linear forwards;
}

@keyframes run-across {
  0% { left: -100px; }
  100% { left: 100vw; }
}

.backdoor {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  cursor: pointer;
  z-index: 9999;
  opacity: 0;
}

.legal-section {
  min-height: auto !important;
  padding: 60px 20px !important;
  opacity: 0.8;
}

.legal-separator {
  height: 1px;
  background: var(--glass-border);
  margin: 40px 10% 0;
  opacity: 0.3;
}

.site-footer {
  padding: 60px 0 100px; /* Extra bottom padding for mobile drawer */
  border-top: 1px solid var(--glass-border);
  background: var(--bg-color);
  opacity: 0.8;
  font-size: 0.85rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.footer-links {
  display: flex;
  gap: 15px;
  align-items: center;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.sep {
  opacity: 0.3;
}

@media (min-width: 768px) {
  .site-footer {
    padding: 60px 0;
  }
  .footer-content {
    flex-direction: row;
    justify-content: space-between;
  }
}
</style>
