import React from 'react';
import { useSEO } from '../hooks/useSEO';

const About: React.FC = () => {
  // SEO optimization for About page
  useSEO({
    title: 'About AiFigure - AI Action Figure Generator | Free AI Art Creation Platform',
    description: 'Learn about AiFigure, the leading AI-powered platform for creating custom action figures. Using Google\'s Gemini AI technology to transform photos into stunning anime-style collectibles. Free to start, professional quality results.',
    keywords: 'about AiFigure, AI action figure generator, Google Gemini AI, anime action figures, AI art platform, custom collectibles creator, free AI image generation',
    ogTitle: 'About AiFigure - AI Action Figure Generator | Free AI Art Creation Platform',
    ogDescription: 'Learn about AiFigure, the leading AI-powered platform for creating custom action figures. Using Google\'s Gemini AI technology to transform photos into stunning anime-style collectibles.',
    ogImage: 'https://aifigure.com/about-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'About AiFigure - AI Action Figure Generator | Free AI Art Creation Platform',
    twitterDescription: 'Learn about AiFigure, the leading AI-powered platform for creating custom action figures. Using Google\'s Gemini AI technology to transform photos into stunning anime-style collectibles.',
    twitterImage: 'https://aifigure.com/about-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });

  const features = [
    {
      title: 'AI-Powered Generation',
      description: 'Using Google\'s Gemini 2.5 Flash with image preview capabilities to transform your photos into stunning anime action figures.',
      icon: '🤖'
    },
    {
      title: 'Token-Based System',
      description: 'Flexible pricing with multiple subscription tiers and token bundles to fit your creative needs.',
      icon: '🪙'
    },
    {
      title: 'Community Gallery',
      description: 'Share your creations with the community and get inspired by other artists\' amazing work.',
      icon: '🎨'
    },
    {
      title: 'Professional Quality',
      description: 'Generate high-resolution images with professional-grade AI models and advanced customization options.',
      icon: '⭐'
    }
  ];

  const techStack = [
    { name: 'React 19', description: 'Modern React with latest features' },
    { name: 'TypeScript', description: 'Type-safe development' },
    { name: 'Tailwind CSS', description: 'Utility-first styling' },
    { name: 'Firebase', description: 'Backend services & authentication' },
    { name: 'Gemini AI', description: 'Google\'s latest AI model' },
    { name: 'Vite', description: 'Fast build tool & dev server' }
  ];

  return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Hero Section */}
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            About PicGen
          </h1>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
            Transform your photos into stunning anime action figures using cutting-edge AI technology.
            Join our creative community and bring your imagination to life.
          </p>
        </div>

        {/* Features Grid */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-md rounded-xl p-6 border border-gray-800 hover:border-gray-600 transition-colors">
                <div className="text-4xl mb-4">{feature.icon}</div>
                <h3 className="text-xl font-semibold mb-3 text-blue-400">{feature.title}</h3>
                <p className="text-gray-300">{feature.description}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Technology Stack */}
        <div className="mb-16">
          <h2 className="text-3xl font-bold text-center mb-12">Technology Stack</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {techStack.map((tech, index) => (
              <div key={index} className="bg-gray-800/50 rounded-lg p-6 border border-gray-700">
                <h3 className="text-lg font-semibold text-white mb-2">{tech.name}</h3>
                <p className="text-gray-400 text-sm">{tech.description}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Mission Section */}
        <div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 rounded-2xl p-8 border border-gray-800">
          <div className="text-center">
            <h2 className="text-3xl font-bold mb-6">Our Mission</h2>
            <p className="text-xl text-gray-300 max-w-4xl mx-auto leading-relaxed">
              We're on a mission to democratize AI-powered creativity, making professional-grade image generation
              accessible to everyone. Whether you're an artist, hobbyist, or just love creating cool stuff,
              PicGen empowers you to transform your ideas into reality with just a few clicks.
            </p>
          </div>
        </div>

        {/* Call to Action */}
        <div className="text-center mt-12">
          <div className="bg-gray-900/50 backdrop-blur-md rounded-xl p-8 border border-gray-800">
            <h2 className="text-2xl font-bold mb-4">Ready to Create?</h2>
            <p className="text-gray-300 mb-6">
              Join thousands of creators who are already using PicGen to bring their visions to life.
            </p>
            <button className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-8 rounded-xl shadow-lg transition-all transform hover:scale-105">
              Start Creating Now
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default About;