import { Metadata } from 'next'
import { generateMetadata } from '@/lib/seo'
import { Header } from '@/components/header'
import { Footer } from '@/components/footer'

export const metadata: Metadata = generateMetadata({
  title: 'Features - NextJS Boilerplate',
  description: 'Explore all the features and capabilities of the NextJS Boilerplate.',
})

export default function FeaturesPage() {
  const features = [
    {
      category: 'Framework & Language',
      items: [
        {
          name: 'Next.js 15',
          description:
            'Latest Next.js with App Router, React Server Components, and improved performance',
          icon: '⚡',
          color: 'bg-blue-500',
        },
        {
          name: 'TypeScript',
          description: 'Full type safety with proper interfaces and strict type checking',
          icon: '🔷',
          color: 'bg-blue-600',
        },
        {
          name: 'React 19',
          description: 'Latest React with concurrent features and improved developer experience',
          icon: '⚛️',
          color: 'bg-cyan-500',
        },
      ],
    },
    {
      category: 'Authentication & Security',
      items: [
        {
          name: 'JWT Authentication',
          description: 'Secure JWT-based authentication with refresh token support',
          icon: '🔐',
          color: 'bg-green-500',
        },
        {
          name: 'Redis Sessions',
          description: 'High-performance session storage using Redis for scalability',
          icon: '⚡',
          color: 'bg-red-500',
        },
        {
          name: 'Protected Routes',
          description: 'Middleware-based route protection with automatic redirects',
          icon: '🛡️',
          color: 'bg-orange-500',
        },
      ],
    },
    {
      category: 'Database & Storage',
      items: [
        {
          name: 'MongoDB Integration',
          description: 'Complete MongoDB setup with Mongoose ODM and connection pooling',
          icon: '🗄️',
          color: 'bg-green-600',
        },
        {
          name: 'Zod Validation',
          description: 'Schema validation for APIs and forms with TypeScript inference',
          icon: '✅',
          color: 'bg-purple-500',
        },
        {
          name: 'File Upload System',
          description: 'Ready-to-use file upload with MinIO integration and validation',
          icon: '📁',
          color: 'bg-indigo-500',
        },
      ],
    },
    {
      category: 'UI & Styling',
      items: [
        {
          name: 'Tailwind CSS',
          description: 'Utility-first CSS framework with custom design system',
          icon: '🎨',
          color: 'bg-cyan-600',
        },
        {
          name: 'Custom UI Components',
          description: 'High-quality, accessible React components with consistent design',
          icon: '🧩',
          color: 'bg-violet-500',
        },
        {
          name: 'Dark Mode Support',
          description: 'Complete dark/light theme system with smooth transitions',
          icon: '🌓',
          color: 'bg-gray-600',
        },
      ],
    },
    {
      category: 'State Management',
      items: [
        {
          name: 'TanStack Query',
          description: 'Powerful server state management with caching and synchronization',
          icon: '🔄',
          color: 'bg-orange-600',
        },
        {
          name: 'React Context',
          description: 'Clean client state management for authentication and UI state',
          icon: '🎯',
          color: 'bg-pink-500',
        },
        {
          name: 'Form Handling',
          description: 'React Hook Form integration with validation and error handling',
          icon: '📝',
          color: 'bg-teal-500',
        },
      ],
    },
    {
      category: 'Developer Experience',
      items: [
        {
          name: 'Code Quality Tools',
          description: 'ESLint, Prettier, and Husky pre-commit hooks for consistent code',
          icon: '🔧',
          color: 'bg-yellow-600',
        },
        {
          name: 'Development Templates',
          description: 'Ready-to-use templates for components, pages, API routes, and hooks',
          icon: '📋',
          color: 'bg-emerald-500',
        },
        {
          name: 'Docker Ready',
          description: 'Multi-stage Dockerfile and docker-compose for development and production',
          icon: '🐳',
          color: 'bg-blue-700',
        },
      ],
    },
  ]

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <div className="container mx-auto px-4 pt-24 pb-16">
        <div className="max-w-6xl mx-auto">
          {/* Page Header */}
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 bg-clip-text text-transparent">
              Features & Capabilities
            </h1>
            <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
              Everything you need to build modern, scalable web applications with best practices
              built-in
            </p>
          </div>

          {/* Features Grid */}
          <div className="space-y-16">
            {features.map((category, categoryIndex) => (
              <section key={categoryIndex}>
                <h2 className="text-2xl font-semibold mb-8 text-center">{category.category}</h2>
                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {category.items.map((feature, featureIndex) => (
                    <div
                      key={featureIndex}
                      className="group p-6 rounded-2xl bg-card border hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1"
                    >
                      <div className="flex items-start space-x-4">
                        <div
                          className={`w-12 h-12 rounded-xl flex items-center justify-center text-white ${feature.color} group-hover:scale-110 transition-transform`}
                        >
                          <span className="text-xl">{feature.icon}</span>
                        </div>
                        <div className="flex-1">
                          <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
                            {feature.name}
                          </h3>
                          <p className="text-muted-foreground text-sm leading-relaxed">
                            {feature.description}
                          </p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </section>
            ))}
          </div>

          {/* Call to Action */}
          <div className="mt-20 text-center bg-card rounded-2xl p-12 border">
            <h2 className="text-3xl font-bold mb-4">Ready to Start Building?</h2>
            <p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
              All these features are ready to use out of the box. Clone the repository, customize it
              for your needs, and start building your next great application.
            </p>
            <div className="flex flex-wrap gap-4 justify-center">
              <div className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium">
                Production Ready
              </div>
              <div className="px-6 py-3 bg-secondary text-secondary-foreground rounded-lg font-medium">
                Well Documented
              </div>
              <div className="px-6 py-3 bg-accent text-accent-foreground rounded-lg font-medium">
                Easily Customizable
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  )
}