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 { PageLayout } from '@voilajsx/uikit/page';
import { useTheme } from '@voilajsx/uikit/theme-provider';
import { ArrowRight, Zap, Images, BookOpen, LogIn, Code2 } from 'lucide-react';
import { CTASection } from '../components/CTASection';
import { Header, Footer, SEO } from '../../../shared/components';
import { asset } from '../../../shared/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 (
    <PageLayout>
      <SEO
        title="UIKit FBCA Demo - Feature-Based Component Architecture"
        description="Experience Feature-Based Component Architecture with auto-discovery routing, UIKit components, and modern React patterns. Zero configuration, convention-based routing."
        keywords="react, fbca, feature-based architecture, uikit, components, typescript, auto-discovery, routing"
        ogTitle="UIKit FBCA Demo - Modern React Architecture"
        ogDescription="Discover Feature-Based Component Architecture with UIKit components and zero-config routing"
      />
      <Header />

      <PageLayout.Content>
        <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_fbca.svg')}
                  alt="UIKit FBCA 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-gradient-primary">
                UIKit FBCA Demo
              </h1>
              <p className="voila-subheading text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
                Experience Feature-Based Component Architecture with auto-discovery routing and modern React patterns
              </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="/gallery">
                    <Images className="mr-2 h-4 w-4" />
                    View Gallery
                  </Link>
                </Button>
                <Button variant="secondary" size="lg" asChild>
                  <Link to="/about">
                    <BookOpen className="mr-2 h-4 w-4" />
                    Learn FBCA
                  </Link>
                </Button>
              </div>
            </div>
          </section>


          {/* Features Grid */}
          <section className="space-y-6">
            <div className="text-center">
              <h2 className="text-3xl font-bold mb-4">Feature-Based Architecture</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Explore features organized by domain with auto-discovery routing and zero configuration
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 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">
                    <Images className="h-6 w-6 text-primary" />
                  </div>
                  <CardTitle>Gallery Feature</CardTitle>
                  <CardDescription>Image gallery with responsive design and custom hooks</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <ul className="text-sm space-y-2 text-muted-foreground">
                    <li>• Custom React Hooks</li>
                    <li>• Responsive Image Grid</li>
                    <li>• Feature-Based Organization</li>
                    <li>• Modern UI Components</li>
                  </ul>
                  <Button asChild className="w-full">
                    <Link to="/gallery">
                      View Gallery
                      <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">
                    <LogIn className="h-6 w-6 text-secondary" />
                  </div>
                  <CardTitle>Auth Feature</CardTitle>
                  <CardDescription>Authentication flow with login forms and user management</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <ul className="text-sm space-y-2 text-muted-foreground">
                    <li>• Login & Registration Forms</li>
                    <li>• Form Validation</li>
                    <li>• User State Management</li>
                    <li>• Route Protection</li>
                  </ul>
                  <Button asChild className="w-full">
                    <Link to="/auth">
                      Try Auth
                      <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>FBCA Architecture</CardTitle>
                  <CardDescription>Learn about Feature-Based Component Architecture and conventions</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                  <ul className="text-sm space-y-2 text-muted-foreground">
                    <li>• Convention-Based Routing</li>
                    <li>• Auto-Discovery Pattern</li>
                    <li>• Feature Organization</li>
                    <li>• Zero Configuration</li>
                  </ul>
                  <Button asChild className="w-full">
                    <Link to="/about">
                      Learn FBCA
                      <ArrowRight className="ml-2 h-4 w-4" />
                    </Link>
                  </Button>
                </CardContent>
              </Card>
            </div>
          </section>

          {/* FBCA Benefits */}
          <section className="bg-gradient-to-r from-primary/5 via-accent/5 to-primary/5 border border-primary/20 rounded-lg p-8">
            <div className="text-center space-y-6">
              <div className="flex items-center justify-center gap-3 mb-4">
                <div className="w-12 h-12 bg-primary/20 rounded-lg flex items-center justify-center">
                  <Zap className="h-6 w-6 text-primary" />
                </div>
                <h2 className="text-2xl font-bold">FBCA Architecture Benefits</h2>
              </div>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                This demo showcases Feature-Based Component Architecture with zero-configuration 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 space-y-2">
                  <div className="w-8 h-8 bg-primary/20 rounded flex items-center justify-center mb-3">
                    <Code2 className="h-4 w-4 text-primary" />
                  </div>
                  <div className="font-semibold">Feature Organization</div>
                  <div className="text-muted-foreground">features/*/pages/*.tsx</div>
                </div>
                <div className="bg-background/80 border rounded-lg p-4 space-y-2">
                  <div className="w-8 h-8 bg-secondary/20 rounded flex items-center justify-center mb-3">
                    <Zap className="h-4 w-4 text-secondary" />
                  </div>
                  <div className="font-semibold">Auto-Discovery</div>
                  <div className="text-muted-foreground">Zero configuration routing</div>
                </div>
                <div className="bg-background/80 border rounded-lg p-4 space-y-2">
                  <div className="w-8 h-8 bg-accent/20 rounded flex items-center justify-center mb-3">
                    <ArrowRight className="h-4 w-4 text-accent" />
                  </div>
                  <div className="font-semibold">Convention-Based</div>
                  <div className="text-muted-foreground">File path = route path</div>
                </div>
              </div>
            </div>
          </section>

          {/* CTA Section */}
          <CTASection
            title="Ready to Try FBCA?"
            description="Experience Feature-Based Component Architecture with auto-discovery routing and zero configuration."
            primaryAction="Learn Architecture"
            secondaryAction="View Gallery"
            onPrimaryClick={() => window.location.href = '/about'}
            onSecondaryClick={() => window.location.href = '/gallery'}
          />
        </div>
      </PageLayout.Content>

      <Footer />
    </PageLayout>
  );
};

export default HomePage;