import { Button } from "@/components/ui/button";
import santoImage from "@/assets/santo-domingo.jpg";
import puntaImage from "@/assets/punta-cana.jpg";
import sanJuanImage from "@/assets/san-juan.jpg";

const ExploreSection = () => {
  const destinations = [
    {
      image: santoImage,
      city: "Santo Domingo",
      area: "Zona Colonial",
      listings: "89+ listings",
      link: "/explore/santo-domingo"
    },
    {
      image: puntaImage,
      city: "Punta Cana",
      area: "Resort Area",
      listings: "124+ listings", 
      link: "/explore/punta-cana"
    },
    {
      image: sanJuanImage,
      city: "San Juan",
      area: "Old San Juan",
      listings: "67+ listings",
      link: "/explore/san-juan"
    }
  ];

  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4">
      <div className="text-center mb-16">
        <p className="text-primary font-medium mb-4">Top Regions</p>
        <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
          Explore Cities
        </h2>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          Discover exciting categories. Find what you're looking for.
        </p>
      </div>

      {/* Carousel Container */}
      <div className="owl-carousel-container relative">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 overflow-x-auto pb-4">
          {/* Region Card 1 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://images.visitarepublicadominicana.org/Punta-Cana-Republica-Dominicana.jpg" 
                alt="Punta Cana" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">La Romana</h4>
                <h3 className="text-3xl font-bold mb-2">Punta Cana</h3>
                <span className="text-white/90">100+ listings</span>
              </div>
              <a href="/offer/punta-cana" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>

          {/* Region Card 2 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://static-resources-elementor.mirai.com/wp-content/uploads/sites/345/Playa-Bavaro-Punta-Cana-Garden-Hotels.jpg" 
                alt="Bavaro Beach" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">La Romana</h4>
                <h3 className="text-3xl font-bold mb-2">Bavaro Beach</h3>
                <span className="text-white/90">59+ listings</span>
              </div>
              <a href="/offer/bavaro-beach" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>

          {/* Region Card 3 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://www.soycaribepremium.es/wp-content/uploads/2018/06/Plaza-Espana_3-e1659698866331.jpg" 
                alt="Zona Colonial" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">Santo Domingo</h4>
                <h3 className="text-3xl font-bold mb-2">Zona Colonial</h3>
                <span className="text-white/90">89+ listings</span>
              </div>
              <a href="/offer/zona-colonial" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>

          {/* Region Card 4 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://assets.simpleviewinc.com/simpleview/image/upload/c_fill,f_jpg,h_749,q_65,w_639/v1/clients/dominicanrepublic/laromana_home_slide_2_1_b31a4780-1959-469d-93f1-ebd659183098.jpg" 
                alt="Santiago" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">Santiago</h4>
                <h3 className="text-3xl font-bold mb-2">Santiago</h3>
                <span className="text-white/90">65+ listings</span>
              </div>
              <a href="/offer/santiago" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>

          {/* Region Card 5 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://images.visitarepublicadominicana.org/catedral-de-san-pedro-de-macoris.jpg" 
                alt="San Pedro" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">Region Norte</h4>
                <h3 className="text-3xl font-bold mb-2">San Pedro</h3>
                <span className="text-white/90">65+ listings</span>
              </div>
              <a href="/offer/san-pedro" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>

          {/* Region Card 6 */}
          <div className="region-card rounded-xl overflow-hidden relative text-white min-w-[300px] h-[458px] group cursor-pointer">
            <div className="region-card-image h-full">
              <img 
                src="https://encrypted-tbn2.gstatic.com/licensed-image?q=tbn:ANd9GcRizxrFtCGsxUo0DCHu0y-n1aw4G_2xddLVaxUQr-W8jF1EPCyhZTntrTlifAjmSXcVDdpECkPfge6LA0rqy7ope0tOSv5ZMA4QmNZpwQ" 
                alt="Barahona" 
                className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
            </div>
            <div className="region-card-content absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent flex flex-col justify-between p-6">
              <div></div>
              <div className="region-card-info">
                <h4 className="font-caveat text-xl mb-0">Region Sur</h4>
                <h3 className="text-3xl font-bold mb-2">Barahona</h3>
                <span className="text-white/90">65+ listings</span>
              </div>
              <a href="/offer/barahona" className="region-card-link flex items-center justify-between mt-auto text-white hover:text-primary transition-colors">
                <div className="text-xs uppercase font-semibold">Explore more</div>
                <div className="w-10 h-10 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path fillRule="evenodd" d="M14 2.5a.5.5 0 0 0-.5-.5h-6a.5.5 0 0 0 0 1h4.793L2.146 13.146a.5.5 0 0 0 .708.708L13 3.707V8.5a.5.5 0 0 0 1 0v-6z"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      </div>
    </section>
  );
};

export default ExploreSection;