import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Plus, Search, Star } from 'lucide-react';
import Layout from '@/components/layout/layout';
import { mockPhotocards, mockGroups } from '@/data/mockData';
import PhotocardGrid from '@/components/photocard/photocard-grid';
import { Badge } from '@/components/ui/badge';

const Index = () => {
  const featuredPhotocards = mockPhotocards.slice(0, 5);
  
  return (
    <Layout>
      {/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-primary/5 to-secondary/20 z-0" />
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-20 md:py-28 relative z-10">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 space-y-6 animate-slide-up">
              <Badge className="mb-4 bg-primary/10 text-primary hover:bg-primary/20 px-3 py-1 text-sm">
                New Collection Tracking
              </Badge>
              
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight">
                Your K-pop Photocard Collection
              </h1>
              
              <p className="text-lg text-muted-foreground max-w-md">
                Track, trade, and showcase your photocard collection with our beautiful, minimalist dashboard.
              </p>
              
              <div className="flex flex-wrap gap-4 pt-2">
                <Link to="/collection">
                  <Button size="lg" className="rounded-lg gap-2">
                    <Star className="h-5 w-5" /> View Collection
                  </Button>
                </Link>
                
                <Link to="/add">
                  <Button size="lg" variant="outline" className="rounded-lg gap-2">
                    <Plus className="h-5 w-5" /> Add Photocard
                  </Button>
                </Link>
              </div>
            </div>
            
            <div className="md:w-1/2 mt-12 md:mt-0 flex justify-end animate-fade-in opacity-0" style={{ animationDelay: '0.5s', animationFillMode: 'forwards' }}>
              <div className="grid grid-cols-2 gap-4 rotate-6 hover:rotate-0 transition-transform duration-500">
                {mockPhotocards.slice(0, 4).map((photocard, index) => (
                  <div
                    key={photocard.id}
                    className={`overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2`}
                    style={{ 
                      animationDelay: `${0.5 + index * 0.1}s`,
                      transform: `translateY(${index * 5}px)`, 
                      zIndex: 5 - index
                    }}
                  >
                    <img
                      src={photocard.image}
                      alt={photocard.member}
                      className="w-full h-full object-cover aspect-[3/4]"
                    />
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Groups */}
      <section className="py-16 bg-background">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="mb-10 text-center">
            <h2 className="text-3xl font-bold">Popular Groups</h2>
            <p className="text-muted-foreground mt-2">Organize your collection by artist</p>
          </div>
          
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
            {mockGroups.map((group) => (
              <Link 
                to={`/collection?group=${group.name}`}
                key={group.id}
                className="bg-card rounded-xl p-4 text-center hover:shadow-md transition-all duration-300 hover:-translate-y-1"
              >
                <div className="h-16 flex items-center justify-center mb-3">
                  {group.logoUrl ? (
                    <img 
                      src={group.logoUrl} 
                      alt={group.name} 
                      className="h-full object-contain"
                    />
                  ) : (
                    <div className="text-2xl font-bold">{group.name}</div>
                  )}
                </div>
                <h3 className="font-medium">{group.name}</h3>
                <p className="text-sm text-muted-foreground">{group.members.length} members</p>
              </Link>
            ))}
          </div>
        </div>
      </section>
      
      {/* Featured Cards */}
      <section className="py-16 bg-secondary/30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="flex justify-between items-center mb-10">
            <div>
              <h2 className="text-3xl font-bold">Featured Photocards</h2>
              <p className="text-muted-foreground mt-2">Discover some of the most popular photocards</p>
            </div>
            
            <Link to="/collection">
              <Button variant="ghost">View All</Button>
            </Link>
          </div>
          
          <PhotocardGrid photocards={featuredPhotocards} />
        </div>
      </section>
      
      {/* Call to Action */}
      <section className="py-20 bg-primary/5">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 text-center">
          <h2 className="text-3xl font-bold mb-4">Start Tracking Your Collection Today</h2>
          <p className="text-muted-foreground text-lg mb-8 max-w-2xl mx-auto">
            Keep a detailed record of your K-pop photocards, manage trades, and showcase your collection with our beautiful interface.
          </p>
          
          <div className="flex flex-wrap justify-center gap-4">
            <Link to="/add">
              <Button size="lg" className="rounded-lg gap-2">
                <Plus className="h-5 w-5" /> Add Your First Photocard
              </Button>
            </Link>
            
            <Link to="/search">
              <Button size="lg" variant="outline" className="rounded-lg gap-2">
                <Search className="h-5 w-5" /> Browse Photocards
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </Layout>
  );
};

export default Index;