"use client";

import Link from "next/link";
import { MapPin, ArrowRight } from "lucide-react";
import type { Destination } from "@/generated/prisma/client";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

export function PopularDestinations({ destinations }: { destinations: Destination[] }) {
  if (!destinations || destinations.length === 0) return null;

  // Take up to 5 destinations for the perfect bento grid (1 big, 4 small)
  const displayDestinations = destinations.slice(0, 5);

  return (
    <section className="bg-white py-24">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        
        <FadeInUp className="mb-12 flex flex-col md:flex-row md:items-end md:justify-between gap-6">
          <div className="max-w-2xl">
            <p className="text-sm font-bold text-merah-ranata tracking-wider uppercase mb-3">
              EXPLORE DESTINATIONS
            </p>
            <h2 className="text-3xl md:text-5xl font-extrabold text-slate-900 tracking-tight mb-4">
              Destinasi Pilihan untukmu
            </h2>
            <p className="text-base md:text-lg text-slate-500 leading-relaxed">
              Temukan keindahan alam dan budaya nusantara melalui destinasi wisata terbaik yang telah kami kurasi khusus untuk pengalaman liburan tak terlupakan.
            </p>
          </div>
          <Link
            href="/tour"
            className="inline-flex items-center gap-2 font-bold text-merah-ranata hover:text-red-700 transition-colors group"
          >
            Lihat Semua
            <ArrowRight className="w-5 h-5 transition-transform group-hover:translate-x-1" />
          </Link>
        </FadeInUp>

        {/* Desktop Bento Grid / Mobile Horizontal Scroll */}
        <StaggerContainer className="flex overflow-x-auto lg:grid lg:grid-cols-4 lg:auto-rows-[280px] gap-6 pb-8 lg:pb-0 snap-x snap-mandatory hide-scrollbar">
          {displayDestinations.map((dest, index) => {
            const isLarge = index === 0;
            const fallbackImages = [
              "https://images.unsplash.com/photo-1533105079780-92b9be482077?auto=format&fit=crop&w=1200&q=80", // Bali Temple
              "https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?auto=format&fit=crop&w=1200&q=80", // Bali Rice Terraces
              "https://images.unsplash.com/photo-1573790387438-4da905039392?auto=format&fit=crop&w=1200&q=80", // Nusa Penida
              "https://images.unsplash.com/photo-1555400038-63f5ba517a47?auto=format&fit=crop&w=1200&q=80", // Labuan Bajo
              "https://images.unsplash.com/photo-1588668214407-6ea9a6d8c272?auto=format&fit=crop&w=1200&q=80"  // Raja Ampat
            ];
            const imageUrl = dest.imageUrl || fallbackImages[index % fallbackImages.length];

            return (
              <StaggerItem
                key={dest.id}
                className={`snap-center relative min-w-[85vw] sm:min-w-[300px] lg:min-w-0 h-[400px] lg:h-full rounded-[24px] overflow-hidden group cursor-pointer ${
                  isLarge ? "lg:col-span-2 lg:row-span-2" : "lg:col-span-1 lg:row-span-1"
                }`}
              >
                <Link href={`/tour?location=${dest.badge}`} className="block w-full h-full">
                  <img
                    src={imageUrl}
                    alt={dest.name}
                    className="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-slate-900/90 via-slate-900/20 to-transparent opacity-80 group-hover:opacity-100 transition-opacity duration-500" />

                  {/* Content Overlay */}
                  <div className="absolute inset-0 p-6 md:p-8 flex flex-col justify-end text-white">
                    <div className="transform transition-transform duration-500 translate-y-2 group-hover:translate-y-0">
                      {dest.badge && (
                        <span className="mb-3 inline-flex items-center gap-1.5 rounded-full bg-white/20 backdrop-blur-md px-3 py-1 text-[11px] font-bold uppercase tracking-wider border border-white/30 shadow-sm">
                          <MapPin className="w-3 h-3" />
                          {dest.badge}
                        </span>
                      )}
                      <h3 className={`${isLarge ? "text-3xl md:text-4xl" : "text-xl md:text-2xl"} font-bold mb-2 leading-tight drop-shadow-md`}>
                        {dest.name}
                      </h3>
                      {isLarge && (
                        <p className="text-white/80 line-clamp-2 text-sm md:text-base mt-2 max-w-md">
                          Jelajahi keajaiban {dest.name} bersama Ranata Tour dan dapatkan pengalaman wisata eksklusif yang tak terlupakan.
                        </p>
                      )}
                    </div>
                  </div>
                </Link>
              </StaggerItem>
            );
          })}
        </StaggerContainer>

      </div>
    </section>
  );
}