import { Calendar, MapPin, Clock, ArrowRight } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

const events = [
  {
    id: '1',
    title: 'Festival da Capulana',
    location: 'Parque Indígena, Luanda',
    date: '15-18 Agosto 2024',
    price: 5000,
    image: 'https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=800&q=80',
    category: 'Festival',
  },
  {
    id: '2',
    title: 'Luanda Business Summit',
    location: 'Centro de Conferências, Talatona',
    date: '10-12 Setembro 2024',
    price: 25000,
    image: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=800&q=80',
    category: 'Conferência',
  },
  {
    id: '3',
    title: 'Meia Maratona de Luanda',
    location: 'Marginal de Luanda',
    date: '20 Outubro 2024',
    price: 2000,
    image: 'https://images.unsplash.com/photo-1452626038306-9aae5e071dd3?w=800&q=80',
    category: 'Desporto',
  },
];

export function EventsSection() {
  return (
    <section className="py-16">
      <div className="container mx-auto px-4">
        <div className="flex justify-between items-end mb-8">
          <div>
            <h2 className="text-3xl font-bold text-gray-900">Próximos Eventos</h2>
            <p className="text-gray-600 mt-2">
              Não perca os eventos mais aguardados em Angola
            </p>
          </div>
          <Button variant="outline" className="hidden md:flex">
            Ver todos
            <ArrowRight className="ml-2 h-4 w-4" />
          </Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {events.map((event) => (
            <Card
              key={event.id}
              className="overflow-hidden group hover:shadow-xl transition-all duration-300"
            >
              <div className="relative aspect-video">
                <img
                  src={event.image}
                  alt={event.title}
                  className="object-cover w-full h-full group-hover:scale-105 transition-transform duration-300"
                />
                <div className="absolute top-3 left-3">
                  <Badge className="bg-orange-600">{event.category}</Badge>
                </div>
              </div>

              <CardContent className="p-4">
                <h3 className="font-semibold text-lg text-gray-900 mb-2">
                  {event.title}
                </h3>
                <div className="space-y-2 text-sm text-gray-500">
                  <div className="flex items-center gap-2">
                    <MapPin className="h-4 w-4 text-orange-600" />
                    <span>{event.location}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <Calendar className="h-4 w-4 text-orange-600" />
                    <span>{event.date}</span>
                  </div>
                </div>
                <div className="mt-4 flex justify-between items-center">
                  <div>
                    <span className="text-lg font-bold text-orange-600">
                      {event.price.toLocaleString()} Kz
                    </span>
                  </div>
                  <Button size="sm" className="bg-orange-600 hover:bg-orange-700">
                    Comprar Bilhete
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}