import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@voilajsx/uikit/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@voilajsx/uikit/card';
import { useTheme } from '@voilajsx/uikit/theme-provider';
import { ArrowRight, Palette, Layout, BookOpen, Mail } from 'lucide-react';
import { SEO } from '../components';
import { asset } from '../utils/asset';

export const HomePage: React.FC = () => {
  const { theme } = useTheme();
  
  const themeDescriptions = {
    base: 'Clean default configuration showcasing the base system',
    elegant: 'Fresh sky blue theme with clean design', 
    metro: 'Dark teal theme with bright yellow accents',
    studio: 'Sophisticated neutral theme with golden accents',
    vivid: 'Premium cursive theme with sophisticated typography'
  };

  return (
    <>
      <SEO
        title="UIKit Multi-Page Demo - Home"
        description="Professional React components with file-based routing, showcasing layouts, navigation, and code organization"
      />
      <div className="space-y-12">
      {/* Hero Section */}
      <section className="text-center py-16 bg-gradient-to-b from-background to-muted/20 rounded-lg">
        <div className="space-y-6">
          <div className="mb-6">
            <img
              src={asset('/hero_multi.svg')}
              alt="UIKit Multi-Page Hero Illustration"
              className="mx-auto max-w-md w-full h-auto"
            />
          </div>
          <h1 className="voila-heading text-4xl md:text-6xl mb-6 text-accent">
            UIKit Multi-Page App
          </h1>
          <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Professional React components with file-based routing, showcasing layouts, navigation, and code organization
          </p>
          <div className="inline-flex items-center gap-3 text-sm text-muted-foreground bg-muted/50 backdrop-blur px-6 py-3 rounded-full border">
            <div className="w-2 h-2 bg-primary rounded-full animate-pulse"></div>
            {themeDescriptions[theme as keyof typeof themeDescriptions]}
          </div>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
            <Button size="lg" asChild>
              <Link to="/components">
                <Layout className="mr-2 h-4 w-4" />
                Explore Components
              </Link>
            </Button>
            <Button variant="secondary" size="lg" asChild>
              <Link to="/themes">
                <Palette className="mr-2 h-4 w-4" />
                Browse Themes
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section className="space-y-6">
        <div className="text-center">
          <h2 className="text-3xl font-bold mb-4">Multi-Page Architecture</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Explore different pages showcasing various UIKit features and components
          </p>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center mb-4">
                <Layout className="h-6 w-6 text-primary" />
              </div>
              <CardTitle>Components Gallery</CardTitle>
              <CardDescription>Comprehensive showcase of all UIKit components with examples and variations</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• Buttons & Interactive Elements</li>
                <li>• Cards & Content Containers</li>
                <li>• Form Controls & Inputs</li>
                <li>• Data Display & Charts</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/components">
                  View Components
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
          
          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center mb-4">
                <Palette className="h-6 w-6 text-secondary" />
              </div>
              <CardTitle>Theme System</CardTitle>
              <CardDescription>Interactive theme switching with live preview and color palette showcase</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• 5 Beautiful Theme Presets</li>
                <li>• OKLCH Color Science</li>
                <li>• Light & Dark Mode Support</li>
                <li>• Real-time Theme Switching</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/themes">
                  Browse Themes
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>

          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-accent/10 rounded-lg flex items-center justify-center mb-4">
                <BookOpen className="h-6 w-6 text-accent" />
              </div>
              <CardTitle>About & Documentation</CardTitle>
              <CardDescription>Learn about UIKit's architecture, design principles, and implementation details</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• File-based Routing Structure</li>
                <li>• Layout & Navigation Patterns</li>
                <li>• Component Organization</li>
                <li>• Development Best Practices</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/about">
                  Learn More
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>

          <Card className="border-2 hover:border-primary/50 transition-all duration-200 hover:shadow-lg">
            <CardHeader>
              <div className="w-12 h-12 bg-chart1/10 rounded-lg flex items-center justify-center mb-4">
                <Mail className="h-6 w-6 text-chart1" />
              </div>
              <CardTitle>Contact & Feedback</CardTitle>
              <CardDescription>Get in touch, provide feedback, or explore integration options</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <ul className="text-sm space-y-2 text-muted-foreground">
                <li>• Form Validation Examples</li>
                <li>• Input Field Variations</li>
                <li>• Submission Handling</li>
                <li>• User Experience Patterns</li>
              </ul>
              <Button asChild className="w-full">
                <Link to="/contact">
                  Contact Us
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Quick Start */}
      <section className="bg-muted/30 rounded-lg p-8">
        <div className="text-center space-y-4">
          <h2 className="text-2xl font-bold">Multi-Page Template Features</h2>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            This template demonstrates advanced UIKit usage with proper code organization and routing
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
            <div className="bg-background/80 border rounded-lg p-4">
              <div className="font-semibold mb-2">📁 File Organization</div>
              <div className="text-muted-foreground">pages/, layouts/, components/</div>
            </div>
            <div className="bg-background/80 border rounded-lg p-4">
              <div className="font-semibold mb-2">🔗 React Router</div>
              <div className="text-muted-foreground">Code splitting & lazy loading</div>
            </div>
            <div className="bg-background/80 border rounded-lg p-4">
              <div className="font-semibold mb-2">🎨 UIKit Layout</div>
              <div className="text-muted-foreground">PageLayout with navigation</div>
            </div>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default HomePage;