<script setup lang="ts">
// Demo page to showcase product detail page design

import { CheckCircle } from 'lucide-vue-next'

definePageMeta({
  layout: 'styleguide',
})

// Sample product data
const product = {
  id: 'makerspace-jk-2025',
  image: '/img/makerspace-jk-2025.jpg',
  name: 'Makerspace Jahreskarte',
  description:
    'Unbegrenzter Zugang zum Makerspace für 365 Tage. Nutze modernste Werkzeuge, 3D-Drucker, Lasercutter und vieles mehr. Perfekt für Maker, Tüftler und kreative Köpfe.',
  price: 120.0,
  stockQuantity: 100,
}

// Format price in EUR
const formattedPrice = computed(() => {
  return new Intl.NumberFormat('de-DE', {
    style: 'currency',
    currency: 'EUR',
  }).format(product.price)
})

// Handle "Add to Cart" action (placeholder)
const handleAddToCart = () => {
  alert('Add to Cart Demo - Diese Funktion wird in einer späteren Phase implementiert.')
}
</script>

<template>
  <div class="min-h-screen bg-gradient-primary px-4 py-12 md:px-6 lg:px-8">
    <!-- 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">
        Produktdetailseite Demo
      </h1>
      <p class="mx-auto max-w-2xl text-lg text-white/80">
        Mobile-optimierte Produktdetailseite für Jahreskarten mit Glassmorphism-Design.
      </p>
    </div>

    <!-- Product Detail Example -->
    <div class="mx-auto max-w-container-narrow">
      <div class="overflow-hidden rounded-2xl border border-white/20 bg-white/10 shadow-glass backdrop-blur-lg">
        <!-- Product Image (flush with top) -->
        <div class="relative aspect-[16/9] w-full overflow-hidden bg-purple-dark">
          <img
            :src="product.image"
            :alt="product.name"
            class="h-full w-full object-cover"
          />
          <!-- Gradient overlay -->
          <div
            class="absolute inset-0 bg-gradient-to-t from-purple-darkest/80 via-transparent to-transparent"
          />
        </div>

        <!-- Product Content -->
        <div class="space-y-6 p-8">
          <!-- Title -->
          <h2 class="text-3xl font-bold text-white md:text-4xl">
            {{ product.name }}
          </h2>

          <!-- Description -->
          <p class="text-lg leading-relaxed text-white/90">
            {{ product.description }}
          </p>

          <!-- Product Details -->
          <div class="grid gap-4 sm:grid-cols-2">
            <!-- Price Card -->
            <div class="rounded-xl bg-white/5 p-4 backdrop-blur-sm">
              <span class="mb-1 block text-xs uppercase tracking-wide text-white/60">Preis</span>
              <span class="text-3xl font-bold text-experimenta-accent">
                {{ formattedPrice }}
              </span>
            </div>

            <!-- Availability Card -->
            <div class="rounded-xl bg-white/5 p-4 backdrop-blur-sm">
              <span class="mb-1 block text-xs uppercase tracking-wide text-white/60">Verfügbarkeit</span>
              <div class="flex items-center gap-2 text-xl font-semibold text-green">
                <CheckCircle :size="24" />
                <span>Sofort</span>
              </div>
            </div>
          </div>

          <!-- Features / Benefits -->
          <div class="rounded-xl border border-white/20 bg-white/5 p-6 backdrop-blur-sm">
            <h3 class="mb-4 text-xl font-semibold text-white">
              Was du mit dieser Karte bekommst:
            </h3>
            <ul class="space-y-3 text-white/90">
              <li class="flex items-start gap-2">
                <span class="mt-1 text-experimenta-accent">✓</span>
                <span>365 Tage unbegrenzter Zugang</span>
              </li>
              <li class="flex items-start gap-2">
                <span class="mt-1 text-experimenta-accent">✓</span>
                <span>Keine versteckten Kosten</span>
              </li>
              <li class="flex items-start gap-2">
                <span class="mt-1 text-experimenta-accent">✓</span>
                <span>Sofort einsatzbereit nach Kauf</span>
              </li>
              <li class="flex items-start gap-2">
                <span class="mt-1 text-experimenta-accent">✓</span>
                <span>Flexible Nutzung – komme so oft du möchtest</span>
              </li>
            </ul>
          </div>

          <!-- Action Buttons -->
          <div class="flex flex-col gap-4 sm:flex-row">
            <Button
              variant="experimenta"
              size="experimenta"
              class="flex-1"
              @click="handleAddToCart"
            >
              In den Warenkorb
            </Button>
            <NuxtLink to="/internal/products-demo" class="btn-secondary flex-1 text-center">
              Weitere Produkte ansehen
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>

    <!-- Design Features -->
    <div class="mx-auto mt-20 max-w-container-wide">
      <div class="rounded-2xl border border-white/20 bg-white/10 p-8 backdrop-blur-lg">
        <h2 class="mb-6 text-2xl font-bold text-white">
          Design Features
        </h2>
        <ul class="space-y-3 text-white/90">
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Hero Image:</strong> 16:9 Aspect Ratio, bündig mit oberer Kartenrundung</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Glassmorphism Card:</strong> Backdrop blur mit experimenta Farbpalette</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Info Cards:</strong> Preis und Verfügbarkeit in separaten Cards mit Icons</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Feature List:</strong> Mit Häkchen-Icons in experimenta-accent Farbe</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Button Combo:</strong> Primary (experimenta) + Secondary (transparent border)</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Mobile-First:</strong> Responsive Grid (2 Spalten → 1 Spalte auf Mobile)</span>
          </li>
          <li class="flex items-start gap-2">
            <span class="mt-1 text-experimenta-accent">✓</span>
            <span><strong>Status-Anzeige:</strong> "Verfügbarkeit: Sofort" mit CheckCircle Icon (statt "Auf Lager")</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- Usage Example -->
    <div class="mx-auto mt-12 max-w-container-wide">
      <div class="rounded-2xl border border-white/20 bg-purple-darker/50 p-8 backdrop-blur-lg">
        <h2 class="mb-4 text-2xl font-bold text-white">
          Implementation
        </h2>
        <p class="mb-4 text-white/90">
          Die Produktdetailseite ist unter <code class="rounded bg-white/10 px-2 py-1">/products/[id]</code> verfügbar.
          Produktdaten werden aus der PostgreSQL-Datenbank über die API geladen.
        </p>
        <pre class="overflow-x-auto rounded-lg bg-purple-darkest p-4 text-sm text-white/90"><code>// API Endpoints
GET /api/products       - List all products
GET /api/products/[id]  - Get single product

// Page Routes
/products              - Product listing (ProductGrid)
/products/[id]         - Product detail page</code></pre>
      </div>
    </div>
  </div>
</template>
