<script setup lang="ts">
  import { useSEO } from '../composables/useSEO';
  import { useStructuredData } from '../composables/useStructuredData';

  const { addBreadcrumbSchema } = useStructuredData();

  // Set SEO synchronously
  useSEO({
    title: 'Contact Us - Get in Touch',
    description: "Contact the Spritesheet Generator team. Join our Discord community or report bugs and contribute on Gitea. We'd love to hear from you!",
    url: '/contact',
    type: 'website',
    keywords: 'contact spritesheet generator, support, discord, gitea',
  });

  addBreadcrumbSchema([
    { name: 'Home', url: '/' },
    { name: 'Contact', url: '/contact' },
  ]);
</script>

<template>
  <div class="w-full">
    <div class="glass-panel rounded-3xl shadow-2xl p-8 sm:p-12">
      <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6">Contact Us</h1>
      <div class="space-y-6">
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">We'd love to hear from you! Whether you have a question, feedback, or just want to say hi, feel free to reach out.</p>
        <div class="flex flex-col gap-4 mt-8">
          <a
            href="https://discord.gg/JTev3nzeDa"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
            title="Join our Discord community"
            aria-label="Join Discord server"
          >
            <i class="fab fa-discord text-2xl text-[#5865F2]"></i>
            <div>
              <div class="font-bold text-gray-900 dark:text-white">Join our Discord</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Chat with the community and developers</div>
            </div>
          </a>

          <a
            href="https://gitea.adhd.sh/root/spritesheet-generator"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center gap-3 p-4 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors no-underline"
            title="View source code and report bugs"
            aria-label="View source code repository"
          >
            <i class="fab fa-github text-2xl text-gray-900 dark:text-white"></i>
            <div>
              <div class="font-bold text-gray-900 dark:text-white">Source Code</div>
              <div class="text-sm text-gray-600 dark:text-gray-400">Report bugs or contribute on Gitea</div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
