<script setup lang="ts">
// Home page - MVP placeholder with shadcn-nuxt test
// 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">
      <h1 class="text-4xl font-bold mb-4">Welcome to experimenta Shop</h1>
      <p class="text-lg mb-8 text-white/90">Your gateway to Makerspace annual passes and more.</p>

      <div class="card-info mb-8">
        <h2 class="text-xl font-semibold mb-2">MVP Development in Progress</h2>
        <p>
          This is a placeholder page. The full e-commerce functionality will be implemented in
          upcoming phases.
        </p>
      </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">
          <UiButton variant="experimenta" size="experimenta" as="a" href="https://www.experimenta.science/">
            Zur experimenta Startseite
          </UiButton>

          <UiButton variant="experimenta" size="experimenta" @click="handleClick">
            Mit Click Handler
          </UiButton>
        </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">
          <UiButton variant="default" @click="handleClick"> Default Button </UiButton>

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

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

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

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

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

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