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

  const { addBreadcrumbSchema } = useStructuredData();

  // Set SEO synchronously
  useSEO({
    title: 'About Us - Our Mission & Story',
    description: 'Learn about Spritesheet Generator, a free tool designed to help game developers and artists streamline their workflow with optimized spritesheet creation.',
    url: '/about',
    type: 'website',
    keywords: 'about spritesheet generator, game development tools, open source sprite editor',
  });

  addBreadcrumbSchema([
    { name: 'Home', url: '/' },
    { name: 'About Us', url: '/about' },
  ]);
</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">About Us</h1>
      <div class="space-y-6">
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">Welcome to Spritesheet Generator, a tool designed to help game developers and artists streamline their workflow.</p>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Our mission is to provide a simple, powerful, and free tool for creating optimized spritesheets directly in your browser. Whether you are an indie developer, a hobbyist, or part of a large studio, we hope this tool makes your life easier.
        </p>
        <div class="space-y-3">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Our story</h3>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">This project started as a small utility for personal game jams and has grown into a full-featured spritesheet packer. We believe in open source and community-driven development.</p>
        </div>
      </div>
    </div>
  </div>
</template>
