<template>
  <div class="min-h-screen flex items-center justify-center bg-gray-50">
    <div class="text-center">
      <div class="mb-8">
        <h1 class="text-9xl font-bold text-aws-orange">404</h1>
        <h2 class="text-4xl font-bold text-gray-900 mb-4">Page Not Found</h2>
        <p class="text-xl text-gray-600 mb-8 max-w-md mx-auto">
          The page you're looking for doesn't exist or has been moved.
        </p>
      </div>
      
      <div class="space-y-4">
        <NuxtLink to="/" class="btn-primary text-lg px-8 py-4">
          Go Home
        </NuxtLink>
        
        <div class="flex justify-center space-x-6">
          <a 
            href="https://t.me/pinnovatecloud" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
          >
            <MessageCircle class="w-6 h-6" />
          </a>
          <a 
            href="https://wa.me/19174029875" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-gray-600 hover:text-aws-orange transition-colors duration-200"
          >
            <Phone class="w-6 h-6" />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { MessageCircle, Phone } from 'lucide-vue-next'

// SEO
useSeoMeta({
  title: '404 - Page Not Found',
  description: 'The page you are looking for could not be found.',
  robots: 'noindex, nofollow'
})
</script>
