import { MapPin, Search, Star, TrendingUp, Globe, Users } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';

export function QuickActions() {
  const actions = [
    {
      icon: MapPin,
      title: 'Find Parks Near Me',
      description: 'Discover theme parks in your area',
      badge: 'Popular',
      color: 'from-primary/20 to-primary/10',
      borderColor: 'border-primary/20'
    },
    {
      icon: Search,
      title: 'Advanced Search',
      description: 'Filter by rides, location, and ratings',
      badge: 'New',
      color: 'from-secondary/20 to-secondary/10',
      borderColor: 'border-secondary/20'
    },
    {
      icon: Star,
      title: 'Top Rated Parks',
      description: 'Browse the highest-rated destinations',
      badge: 'Trending',
      color: 'from-accent/20 to-accent/10',
      borderColor: 'border-accent/20'
    },
    {
      icon: TrendingUp,
      title: 'Coaster Rankings',
      description: 'See the world\'s best roller coasters',
      badge: 'Hot',
      color: 'from-primary/20 to-secondary/10',
      borderColor: 'border-primary/20'
    },
    {
      icon: Globe,
      title: 'Browse by Country',
      description: 'Explore parks around the world',
      badge: null,
      color: 'from-secondary/20 to-accent/10',
      borderColor: 'border-secondary/20'
    },
    {
      icon: Users,
      title: 'Join Community',
      description: 'Connect with fellow enthusiasts',
      badge: 'Free',
      color: 'from-accent/20 to-primary/10',
      borderColor: 'border-accent/20'
    }
  ];

  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="text-center max-w-3xl mx-auto mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            Quick
            <span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"> Actions</span>
          </h2>
          <p className="text-xl text-muted-foreground">
            Jump right into exploring with these popular features
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {actions.map((action, index) => (
            <Card 
              key={index}
              className={`group cursor-pointer border-0 bg-gradient-to-br ${action.color} ${action.borderColor} border hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:scale-[1.02]`}
            >
              <CardContent className="p-6 text-center space-y-4">
                <div className="relative">
                  <div className="w-12 h-12 bg-background/80 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                    <action.icon className="w-6 h-6 text-foreground" />
                  </div>
                  {action.badge && (
                    <Badge 
                      className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs px-2 py-1"
                    >
                      {action.badge}
                    </Badge>
                  )}
                </div>
                
                <div>
                  <h3 className="font-semibold text-lg mb-2 group-hover:text-primary transition-colors">
                    {action.title}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {action.description}
                  </p>
                </div>

                <Button 
                  variant="ghost" 
                  size="sm"
                  className="w-full bg-background/50 hover:bg-background/80 transition-colors"
                >
                  Get Started
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}