<script setup lang="ts">
import {
  PATTERN_BACKGROUND_DIRECTION,
  PATTERN_BACKGROUND_SPEED,
  PATTERN_BACKGROUND_VARIANT,
} from '@/components/InspiraUI/pattern-background';
import { useLayout } from '@/layouts/sakai-vue/composables/layout';

const { isDarkTheme, toggleDarkMode } = useLayout();
const GradientButton_bgColor = computed(() => (isDarkTheme.value ? '#000' : '#fff'));
const particlesColor = computed(() => (isDarkTheme.value ? '#FFFFFF' : '#000000'));
</script>

<template>
  <div class="p-4 h-screen w-screen relative">
    <PatternBackground
      :animate="true"
      :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
      :variant="PATTERN_BACKGROUND_VARIANT.Dot"
      class="flex h-full w-full flex-col items-center gap-4 overflow-hidden border rounded-lg px-4 py-8"
      :speed="PATTERN_BACKGROUND_SPEED.Slow"
      shadow-2xl
    >
      <h3
        class="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-0 text-3xl font-bold text-transparent"
      >
        Spline
      </h3>

      <RouterLink :to="{ name: 'Home' }">
        <GradientButton :bg-color="GradientButton_bgColor">Zooooooooooom 🚀 </GradientButton>
        <!-- <InteractiveHoverButton text="Zooooooooooom 🚀" /> -->
      </RouterLink>

      <ShimmerButton class="isolate shadow-2xl" shimmer-size="2px" @click="toggleDarkMode">
        <span
          class="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10"
        >
          {{ isDarkTheme ? '🌜' : '🌞' }}
        </span>
      </ShimmerButton>

      <div class="relative h-40 w-[40rem]">
        <div
          class="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm"
        />
        <div
          class="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
        />
        <div
          class="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm"
        />
        <div
          class="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent"
        />

        <Sparkles
          background="transparent"
          :min-size="0.4"
          :max-size="1.4"
          :particle-density="1200"
          class="size-full"
          :particle-color="particlesColor"
        />

        <div class="absolute inset-0 size-full [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]">
          <!-- bg-white dark:bg-black -->
        </div>
      </div>

      <Spline scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode" />

      <BorderBeam :size="250" :duration="12" :delay="9" :border-width="2" />
    </PatternBackground>

    <FluidCursor />
  </div>
</template>

<style scoped></style>

<route lang="yaml">
meta:
  layout: false
</route>
