<script setup lang="ts">
useSeoMeta({
  title: 'Site in Construction — CrowMate Studio',
  description: 'Our website is currently under construction. Please check back soon.',
  ogImage: '/images/og-default.jpg',
})
</script>

<template>
  <div
    class="min-h-screen bg-zinc-950 flex flex-col items-center justify-center text-center p-6 relative overflow-hidden"
  >
    <!-- Abstract Background Glow -->
    <div
      class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[30rem] h-[30rem] bg-orange-500/20 rounded-full blur-[128px]"
    ></div>

    <div class="z-10 flex flex-col items-center relative">
      <div class="mb-6 relative hover:scale-110 transition-transform duration-300">
        <div class="text-7xl drop-shadow-2xl">🚧</div>
      </div>

      <h1
        class="text-5xl md:text-7xl font-black mb-6 tracking-tight bg-gradient-to-br from-amber-400 to-orange-600 text-transparent bg-clip-text drop-shadow-sm"
      >
        Under Construction
      </h1>

      <p class="text-lg md:text-xl text-zinc-400 max-w-lg font-medium leading-relaxed">
        <strong class="text-zinc-200">CrowMate Studio</strong> is working hard behind the scenes
        crafting a new experience.
      </p>

      <div
        class="mt-10 flex items-center gap-3 bg-zinc-900/50 px-6 py-3 rounded-full border border-zinc-800 backdrop-blur-sm"
      >
        <span class="flex h-3 w-3 relative">
          <span
            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-400 opacity-75"
          ></span>
          <span class="relative inline-flex rounded-full h-3 w-3 bg-orange-500"></span>
        </span>
        <span class="text-sm font-semibold tracking-wider text-orange-500 uppercase"
          >Coming Soon</span
        >
      </div>
    </div>

    <!-- Social Links -->
    <div class="absolute bottom-10 flex items-center gap-8 z-10">
      <a
        href="tiktok.com/@crowmate_studio"
        target="_blank"
        rel="noopener noreferrer"
        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
        aria-label="TikTok"
      >
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path
            d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.95-.53 3.93-1.6 5.56-1.46 2.22-3.87 3.55-6.52 3.6-2.58.05-5.18-.84-7.07-2.61-1.99-1.87-2.91-4.78-2.31-7.46.59-2.64 2.45-4.85 4.95-5.83 2.11-.84 4.54-.7 6.55.35v4.11c-1.2-.55-2.64-.61-3.87-.1-1.25.52-2.19 1.6-2.48 2.92-.3 1.34.1 2.8 1.05 3.79s2.44 1.48 3.78 1.25c1.45-.25 2.66-1.26 3.19-2.59.32-.78.43-1.64.44-2.49V6.47c1.3.62 2.62 1.25 3.95 1.83V.021S12.525.02 12.525.02z"
          />
        </svg>
      </a>
      <a
        href="https://www.instagram.com/crowmate_studio/"
        target="_blank"
        rel="noopener noreferrer"
        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
        aria-label="Instagram"
      >
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path
            d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"
          />
        </svg>
      </a>
      <a
        href="https://www.linkedin.com/company/crowmate-studio"
        target="_blank"
        rel="noopener noreferrer"
        class="text-zinc-500 hover:text-orange-500 hover:-translate-y-1 transition-all duration-300"
        aria-label="LinkedIn"
      >
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
          <path
            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
          />
        </svg>
      </a>
    </div>
  </div>
</template>
