<script setup lang="ts">
import { onMounted } from "vue";

const router = useRouter();

const startDesigning = () => {
  router.push("/designer");
};

onMounted(() => {
  // Import model-viewer on client-side only
  if (process.client) {
    import("@google/model-viewer");
  }
});
</script>

<template>
  <div class="relative min-h-screen overflow-hidden bg-white">
    <!-- Subtle Background Pattern -->
    <div class="absolute inset-0 opacity-5">
      <div
        class="absolute inset-0"
        style="
          background-image: radial-gradient(
            circle at 1px 1px,
            rgb(156 163 175) 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-reverse 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-slate-900 sm:text-7xl md:text-8xl"
          >
            TableJerseys
          </h1>
          <div class="space-y-4">
            <p
              class="text-2xl font-semibold text-slate-700 sm:text-3xl md:text-4xl"
            >
              Design custom jerseys for your table
            </p>

            <p class="text-base text-slate-600 sm:text-lg">
              Create professional, print-ready jersey designs in minutes
            </p>
            <p class="text-sm text-slate-500 sm:text-base">
              Perfect for sports teams, events, and table enthusiasts.
            </p>
          </div>
          <div>
            <NuxtLink
              to="/designer"
              class="group relative inline-flex overflow-hidden rounded-lg border-2 border-slate-900 bg-slate-900 px-12 py-5 text-xl font-bold text-white shadow-lg transition-all hover:bg-white hover:text-slate-900 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>
            </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 lg:text-left">
              <div class="text-3xl font-bold text-slate-900 md:text-4xl">
                Custom
              </div>
              <div class="text-sm text-slate-600">Any Size</div>
            </div>
            <div class="space-y-2 text-center lg:text-left">
              <div class="text-3xl font-bold text-slate-900 md:text-4xl">
                300 DPI
              </div>
              <div class="text-sm text-slate-600">Print Quality</div>
            </div>
            <div class="space-y-2 text-center lg:text-left">
              <div class="text-3xl font-bold text-slate-900 md:text-4xl">
                $39.99
              </div>
              <div class="text-sm text-slate-600">Per Design</div>
            </div>
          </div>
        </div>

        <!-- Right Side - 3D Model -->
        <div class="relative w-full lg:w-1/2">
          <div class="relative mx-auto max-w-4xl">
            <div
              class="relative mx-auto h-[300px] w-[300px] sm:h-[400px] sm:w-[400px] md:h-[500px] md:w-[500px] lg:h-[600px] lg:w-[600px]"
            >
              <div
                class="flex h-full w-full items-center justify-center rounded-2xl border-2 border-slate-300 bg-linear-to-br from-slate-700 to-slate-900 shadow-xl overflow-hidden"
              >
                <model-viewer
                  src="/LAMESA-2.glb"
                  alt="Table with Jersey"
                  auto-rotate
                  rotation-per-second="15deg"
                  camera-controls
                  shadow-intensity="1"
                  class="w-full h-full"
                  style="--poster-color: transparent"
                ></model-viewer>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
