<script setup lang="ts">
const router = useRouter();

const startDesigning = () => {
  router.push('/designer');
};
</script>

<template>
  <div class="relative min-h-screen overflow-hidden bg-linear-to-br from-slate-950 via-slate-900 to-slate-950">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-20">
      <div class="absolute inset-0" style="background-image: radial-gradient(circle at 1px 1px, rgb(71 85 105) 1px, transparent 0); background-size: 40px 40px;"></div>
    </div>

    <!-- Animated Slipmat -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="relative">
        <!-- Turntable Base -->
        <div class="absolute -inset-48 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div>
        
        <!-- Spinning Slipmat -->
        <div class="relative h-[600px] w-[600px] sm:h-[700px] sm:w-[700px] md:h-[800px] md:w-[800px] animate-spin-slow">
          <!-- Vinyl Record Background -->
          <div class="absolute inset-0 rounded-full bg-linear-to-br from-slate-900 via-slate-800 to-black shadow-2xl"></div>
          
          <!-- Grooves -->
          <div class="absolute inset-8 rounded-full border-2 border-slate-700/30"></div>
          <div class="absolute inset-16 rounded-full border-2 border-slate-700/20"></div>
          <div class="absolute inset-24 rounded-full border-2 border-slate-700/10"></div>
          
          <!-- Center Label -->
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="h-48 w-48 sm:h-56 sm:w-56 md:h-64 md:w-64 rounded-full bg-linear-to-br from-sky-500 to-blue-600 shadow-lg flex items-center justify-center">
              <div class="h-16 w-16 sm:h-20 sm:w-20 md:h-24 md:w-24 rounded-full bg-slate-950 shadow-inner"></div>
            </div>
          </div>
          
          <!-- Slipmat Design Elements -->
          <div class="absolute inset-32 rounded-full border-4 border-sky-500/20"></div>
          
          <!-- Decorative Dots -->
          <div class="absolute left-1/2 top-16 h-3 w-3 -translate-x-1/2 rounded-full bg-sky-400"></div>
          <div class="absolute bottom-16 left-1/2 h-3 w-3 -translate-x-1/2 rounded-full bg-sky-400"></div>
          <div class="absolute left-16 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-sky-400"></div>
          <div class="absolute right-16 top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-sky-400"></div>
        </div>
        
        <!-- Tonearm -->
        <div class="absolute -right-24 top-1/2 h-2 w-40 sm:w-48 origin-left -translate-y-1/2 rotate-12 bg-linear-to-r from-slate-700 to-slate-600 shadow-lg"></div>
        <div class="absolute -right-28 top-1/2 h-4 w-4 -translate-y-1/2 rounded-full bg-slate-600 shadow-lg"></div>
      </div>
    </div>

    <!-- Content -->
    <div class="relative z-20 flex min-h-screen flex-col items-center justify-between px-4 py-12 text-center">
      <!-- Top Section - Title & Description -->
      <div class="w-full space-y-4 pt-8">
        <h1 class="text-6xl font-bold tracking-tight text-white drop-shadow-2xl sm:text-7xl md:text-8xl lg:text-9xl">
          Slipmatz
        </h1>
        <p class="text-xl text-sky-400 drop-shadow-lg sm:text-2xl md:text-3xl">
          Design Custom Slipmats for Your Vinyl
        </p>
        <div class="mx-auto max-w-2xl space-y-2 px-4 pt-2">
          <p class="text-base text-slate-300 drop-shadow-lg sm:text-lg">
            Create professional, print-ready slipmat designs in minutes.
          </p>
          <p class="text-sm text-slate-400 drop-shadow-md sm:text-base">
            Perfect for DJs, record labels, and vinyl enthusiasts.
          </p>
        </div>
      </div>

      <!-- Middle Section - Spacer (Turntable is in background) -->
      <div class="flex-1"></div>

      <!-- Bottom Section - Button & Stats -->
      <div class="w-full space-y-12 pb-8">
        <div>
          <NuxtLink
            to="/designer"
            class="group relative inline-flex overflow-hidden rounded-full bg-linear-to-r from-sky-500 to-blue-600 px-12 py-5 text-xl font-bold text-white shadow-2xl transition-all hover:scale-105 hover:shadow-sky-500/50 active:scale-95"
          >
            <span class="relative z-10 flex items-center gap-3">
              Start Designing
              <svg class="h-6 w-6 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </span>
            <div class="absolute inset-0 bg-linear-to-r from-blue-600 to-sky-500 opacity-0 transition-opacity group-hover:opacity-100"></div>
          </NuxtLink>
        </div>

        <div class="mx-auto grid max-w-4xl gap-8 px-4 sm:grid-cols-3">
          <div class="space-y-2 backdrop-blur-sm">
            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">12"</div>
            <div class="text-sm text-slate-400 drop-shadow-md">Standard Size</div>
          </div>
          <div class="space-y-2 backdrop-blur-sm">
            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">300 DPI</div>
            <div class="text-sm text-slate-400 drop-shadow-md">Print Quality</div>
          </div>
          <div class="space-y-2 backdrop-blur-sm">
            <div class="text-3xl font-bold text-sky-400 drop-shadow-lg md:text-4xl">$39.99</div>
            <div class="text-sm text-slate-400 drop-shadow-md">Per Design</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Wave -->
    <div class="absolute bottom-0 left-0 right-0 h-32 bg-linear-to-t from-slate-950 to-transparent"></div>
  </div>
</template>

<style scoped>
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}
</style>
