<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>

    <!-- Main Content Grid -->
    <div class="relative z-20 flex min-h-screen flex-col px-4 py-12 md:px-8 lg:px-16">
      <!-- Top Section - Split Layout -->
      <div class="flex flex-1 flex-col items-center justify-between gap-8 lg:flex-row lg:gap-16">
        <!-- Left Side - Title & Description -->
        <div class="w-full space-y-8 text-center lg:w-1/2 lg:text-left">
          <h1 class="text-6xl font-bold tracking-tight text-white drop-shadow-2xl sm:text-7xl md:text-8xl">
            Slipmatz
          </h1>
          <div class="space-y-4">
            <p class="text-2xl font-semibold text-sky-400 drop-shadow-lg sm:text-3xl md:text-4xl">
              Design custom slipmats for your vinyl
            </p>
            <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 DJ's, record labels, and vinyl enthusiast.
            </p>
          </div>
          <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>

          <!-- Stats Section - Now on Left Side -->
          <div class="mx-auto grid max-w-4xl gap-8 pt-12 grid-cols-3 sm:grid-cols-3 lg:mx-0">
            <div class="space-y-2 text-center backdrop-blur-sm lg:text-left">
              <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 text-center backdrop-blur-sm lg:text-left">
              <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 text-center backdrop-blur-sm lg:text-left">
              <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>

        <!-- Right Side - Animated Slipmat -->
        <div class="relative w-full lg:w-1/2">
          <div class="relative mx-auto max-w-4xl">
            <!-- Turntable Base -->
            <!-- <div class="absolute -inset-32 rounded-full bg-linear-to-br from-slate-800 to-slate-900 opacity-50 blur-3xl"></div> -->
            
            <!-- Spinning Slipmat with SVG -->
            <div class="relative mx-auto h-[300px] w-[300px] sm:h-[900px] sm:w-[900px]">
              <img 
                src="/SLIPMATZ.svg" 
                alt="Slipmatz Logo" 
                class="absolute inset-0 h-full w-full object-contain"
              />
            </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>
