"use client";

import { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import useEmblaCarousel from "embla-carousel-react";
import { Reveal } from "@/components/shared/Reveal";

type RoomSlide = {
  label: string;
  href: string;
  image: string;
};

const roomSlides: RoomSlide[] = [
  {
    label: "Stone Palace – 4 BHK Villa",
    href: "/rooms/stone-palace-heritage-rooms-pune",
    image:
      "https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/home-spaces/stone-palace.jpg",
  },
  {
    label: "Queen Palace Heritage Rooms",
    href: "/rooms/queen-palace-heritage-rooms-pune",
    image:
      "https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/queen-palace/queen-palace-rooms-near-pune.png",
  },
  {
    label: "Shaniwar Wada Heritage Rooms",
    href: "/rooms/shaniwar-wada-heritage-rooms-in-pune",
    image:
      "https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/home-spaces/group-stay-resort-near-pune.webp",
  },
  {
    label: "Vishrambaug Wada Heritage Rooms",
    href: "/rooms/vishrambaug-wada-heritage-rooms-pune",
    image:
      "https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/home-spaces/vishrambaug-wada.jpg",
  },
  {
    label: "Imperial Rooms",
    href: "/rooms/imperial-rooms-pune",
    image:
      "https://pub-b0bc1a7c71a54576bbf43595e30e6188.r2.dev/images/imperial-rooms/luxury-rooms-pune.png",
  },
];

export function RoomsSection() {

  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
    align: "start",
    dragFree: false,
    containScroll: "trimSnaps",
  });

  useEffect(() => {
    if (!emblaApi) return;

    const autoplay = window.setInterval(() => {
      emblaApi.scrollNext();
    }, 3000);

    return () => window.clearInterval(autoplay);
  }, [emblaApi]);

  return (
    <section className="bg-espresso text-ivory py-12 md:py-16">
      <div className="mx-auto max-w-screen-2xl px-2">
        <Reveal>
          <div className="max-w-5xl px-12 mb-12">
            <span className="font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold block">
              Heritage Spaces
            </span>

            <h2 className="font-serif italic text-3xl md:text-4xl text-ivory font-light leading-tight mt-4">
              Five Unique Stay Spaces. One Timeless Legacy.
            </h2>

            <div className="w-20 h-[1px] bg-gold my-6" />

            <p className="font-sans text-xs md:text-sm font-light text-ivory/70 leading-relaxed">
              Explore five beautifully designed heritage stays at The Grand
              Heritage Resorts, each offering its own character, comfort and
              timeless charm. From elegant rooms and spacious suites to private
              villas, every stay combines heritage-inspired interiors with
              modern amenities.
            </p>
          </div>
        </Reveal>

        <div className="embla overflow-hidden" ref={emblaRef}>
          <div className="flex gap-8 pl-2 md:pl-4 touch-pan-y">
            {roomSlides.map((slide) => {
              const cardClasses =
                "group block min-w-[85%] sm:min-w-[60%] md:min-w-[45%] lg:min-w-[28%] overflow-hidden rounded-[1.05rem] border border-ivory/10 bg-midnight shadow-xl transition-shadow duration-300 hover:shadow-2xl last:mr-10";

              const inner = (
                <div>
                  <div className="relative aspect-[5/3] overflow-hidden bg-espresso/10">
                      <Image
                        src={slide.image}
                        alt={slide.label}
                        title={slide.label}
                        fill
                        sizes="(max-width: 640px) 85vw, (max-width: 1024px) 50vw, 28vw"
                        loading="lazy"
                        className="object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
                      />
                  </div>

                  <div className="px-4 py-2">
                      <h3 className="font-serif text-lg text-ivory transition-colors duration-300 group-hover:text-gold">
                        {slide.label}
                      </h3>

                      {slide.label === "Imperial Rooms" ? (
                        <div className="flex justify-center">
                        <span className="inline-block rounded-full border border-gold/40 px-2.5 py-1 text-[9px] uppercase tracking-[0.3em] text-ivory group-hover:text-gold transition-colors duration-300">
                          Available for Booking from October 2026
                        </span>
                        </div>
                      ) : null}
                  </div>
                </div>
              );

              return (
                <Link
                  key={slide.href}
                  href={slide.href}
                  title={slide.label}
                  className={cardClasses}
                >
                  {inner}
                </Link>
              );
            })}
          </div>
        </div>

        <Reveal>
          <div className="mt-10 text-center">
            <Link
              href="/rooms/staycation-resort-near-pune"
              title="Staycation Resort Near Pune"
              className="inline-block border border-ivory text-ivory px-8 py-3.5 uppercase tracking-luxury text-[10px] font-sans hover:bg-ivory hover:text-midnight transition-all duration-300"
            >
              Explore All Stay Spaces
            </Link>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

export default RoomsSection;