karibeo_backend_admin/src/components/DestinationsSection.tsx

import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight, MapPin, Star, Camera } from "lucide-react";
import santoDomingoImage from "@/assets/santo-domingo.jpg";
import sanJuanImage from "@/assets/san-juan.jpg";
import puntaCanaImage from "@/assets/punta-cana.jpg";

const DestinationsSection = () => {
  const destinations = [
    {
      id: "santo-domingo",
      name: "Santo Domingo",
      region: "Zona Colonial",
      image: santoDomingoImage,
      listings: "89+",
      rating: 4.8,
      description: "Descubre el corazón histórico de América",
      highlights: ["Patrimonio UNESCO", "Catedral Primada", "Fortaleza Ozama"],
      isPopular: true
    },
    {
      id: "san-juan",
      name: "San Juan",
      region: "Viejo San Juan",
      image: sanJuanImage,
      listings: "124+",
      rating: 4.9,
      description: "Colores vibrantes y historia viva",
      highlights: ["El Morro", "Calles empedradas", "Gastronomía única"],
      isPopular: true
    },
    {
      id: "punta-cana",
      name: "Punta Cana",
      region: "Costa del Coco",
      image: puntaCanaImage,
      listings: "95+", 
      rating: 4.7,
      description: "Paraíso tropical de arena blanca",
      highlights: ["Playas pristinas", "Resorts de lujo", "Deportes acuáticos"],
      isPopular: false
    }
  ];

  return (
    <section className="py-20 bg-background">
      <div className="max-w-7xl mx-auto px-4">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-block px-4 py-2 bg-secondary/10 text-secondary rounded-full text-sm font-medium mb-4">
            Principales Regiones
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Explora <span className="text-secondary-gradient">Ciudades</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
            Descubre destinos emocionantes. Encuentra exactamente lo que estás buscando.
          </p>
        </div>

        {/* Destinations Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
          {destinations.map((destination, index) => (
            <Card key={destination.id} className="group overflow-hidden bg-card border-0 shadow-soft hover:shadow-medium transition-all duration-500 hover:-translate-y-2">
              {/* Image Container */}
              <div className="relative h-64 overflow-hidden">
                <img
                  src={destination.image}
                  alt={destination.name}
                  className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                />
                
                {/* Overlay */}
                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                
                {/* Popular Badge */}
                {destination.isPopular && (
                  <div className="absolute top-4 left-4 bg-secondary text-secondary-foreground px-3 py-1 rounded-full text-sm font-medium">
                    🔥 Popular
                  </div>
                )}

                {/* Rating */}
                <div className="absolute top-4 right-4 bg-white/90 text-gray-900 px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
                  <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                  {destination.rating}
                </div>

                {/* Hover Actions */}
                <div className="absolute bottom-4 left-4 right-4 transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300 opacity-0 group-hover:opacity-100">
                  <div className="flex gap-2">
                    <Button size="sm" className="flex-1 bg-white/20 text-white border-white/30 hover:bg-white/30">
                      <Camera className="w-4 h-4 mr-2" />
                      Ver Galería
                    </Button>
                    <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary-dark">
                      <MapPin className="w-4 h-4" />
                    </Button>
                  </div>
                </div>
              </div>

              {/* Content */}
              <div className="p-6">
                <div className="flex items-start justify-between mb-3">
                  <div>
                    <h3 className="text-2xl font-bold text-foreground mb-1">
                      {destination.name}
                    </h3>
                    <p className="text-lg font-medium text-primary">
                      {destination.region}
                    </p>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-secondary">
                      {destination.listings}
                    </div>
                    <div className="text-sm text-muted-foreground">
                      listings
                    </div>
                  </div>
                </div>

                <p className="text-muted-foreground mb-4 leading-relaxed">
                  {destination.description}
                </p>

                {/* Highlights */}
                <div className="flex flex-wrap gap-2 mb-6">
                  {destination.highlights.map((highlight, idx) => (
                    <span
                      key={idx}
                      className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm font-medium"
                    >
                      {highlight}
                    </span>
                  ))}
                </div>

                {/* CTA */}
                <Button className="w-full group-hover:bg-primary-dark transition-colors">
                  Explorar más
                  <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </div>
            </Card>
          ))}
        </div>

        {/* Stats Section */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 py-12 border-t border-border">
          <div className="text-center">
            <div className="text-4xl font-bold text-primary mb-2">2</div>
            <div className="text-muted-foreground">Países</div>
          </div>
          <div className="text-center">
            <div className="text-4xl font-bold text-secondary mb-2">15+</div>
            <div className="text-muted-foreground">Ciudades</div>
          </div>
          <div className="text-center">
            <div className="text-4xl font-bold text-success mb-2">500+</div>
            <div className="text-muted-foreground">Negocios</div>
          </div>
          <div className="text-center">
            <div className="text-4xl font-bold text-warning mb-2">50K+</div>
            <div className="text-muted-foreground">Usuarios</div>
          </div>
        </div>

        {/* Bottom CTA */}
        <div className="text-center">
          <Button size="lg" className="btn-hero text-lg px-8 py-4">
            Ver Todos los Destinos
            <ArrowRight className="w-5 h-5 ml-3" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export default DestinationsSection;