<script setup lang="ts">
// Home page - MVP placeholder with shadcn-nuxt test
const { loggedIn, user } = useAuth()

// Sample button click handler
const handleClick = () => {
  console.log('shadcn-nuxt Button clicked!')
}
</script>

<template>
  <NuxtLayout name="default">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- Page Header -->
      <div class="mx-auto mb-12 max-w-container-wide text-center">
        <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
          <template v-if="loggedIn">
            Willkommen zurück, {{ user?.firstName }}!
          </template>
          <template v-else>
            Willkommen!
          </template>
        </h1>
        <p class="mx-auto max-w-2xl text-lg text-white/80">
          Entdecke die vielfältigen Angebote der experimenta - wir freuen uns auf dich!
        </p>
      </div>

      <!-- Login Button for guests -->
      <div v-if="!loggedIn" class="card-glass mb-8 text-center">
        <h2 class="text-2xl font-semibold mb-3 text-experimenta-accent">
          Melde dich an
        </h2>
        <p class="text-white/80 mb-6">
          Um Makerspace-Jahreskarten zu kaufen, musst du dich zuerst anmelden.
        </p>
        <NuxtLink to="/auth">
          <Button variant="experimenta" size="experimenta">
            Jetzt anmelden
          </Button>
        </NuxtLink>
      </div>

      <div class="card-info card-accent-border mb-8">
        <h2 class="text-xl font-semibold mb-2 text-experimenta-accent">MVP Development in Progress</h2>
        <p>
          Dies ist eine Platzhalter-Seite. Die vollständige E-Commerce-Funktionalität wird in
          kommenden Phasen implementiert.
        </p>
      </div>

      <!-- Example: Card with Safrangold Accent Border -->
      <div class="card-progress card-accent-border mb-8">
        <div class="progress-header">
          <h3 class="progress-title">Verlängerungsfortschritt</h3>
          <div class="progress-stats">2963 / 4931</div>
        </div>
        <div class="progress-bar-wrapper">
          <div class="progress-bar" style="width: 60.1%"></div>
          <div class="progress-percentage">60.1%</div>
        </div>
      </div>

      <!-- experimenta Button Showcase -->
      <div class="card-glass mb-8">
        <h3 class="text-xl font-semibold mb-4 text-experimenta-accent">experimenta Button</h3>
        <p class="mb-6 text-white/90">
          Der offizielle experimenta-Button mit animiertem Gradient-Effekt beim Hovern:
        </p>

        <div class="flex flex-wrap gap-4 items-center">
          <Button variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
            Zur experimenta Startseite
          </Button>

          <Button variant="experimenta" size="experimenta" @click="handleClick">
            Mit Click Handler
          </Button>
        </div>

        <p class="mt-6 text-sm text-white/70">
          Hinweis: Der Button hat einen animierten Gradient-Effekt von Pink zu Rot beim Hovern.
        </p>
      </div>

      <!-- shadcn-nuxt Button Component Test -->
      <div class="card-glass">
        <h3 class="text-xl font-semibold mb-4 text-experimenta-accent">shadcn-nuxt Components Test</h3>
        <p class="mb-6 text-white/90">Testing shadcn-nuxt Button component integration:</p>

        <div class="flex flex-wrap gap-4">
          <Button variant="default" @click="handleClick"> Default Button </Button>

          <Button variant="destructive" @click="handleClick"> Destructive </Button>

          <Button variant="outline" @click="handleClick"> Outline </Button>

          <Button variant="secondary" @click="handleClick"> Secondary </Button>

          <Button variant="ghost" @click="handleClick"> Ghost </Button>

          <Button variant="link" @click="handleClick"> Link </Button>
        </div>

        <p class="mt-6 text-sm text-white/70">Open browser console to see button click events.</p>
      </div>
    </div>
  </NuxtLayout>
</template>
