"use client";
import Link from "next/link";
import Image from "next/image";
import type { InnerPageData } from "@/constants/pages";
import { EnquireForm } from "@/components/shared/EnquireForm";
import { Reveal } from "../shared/Reveal";
import { useEffect } from "react";
import useEmblaCarousel from "embla-carousel-react";

export function InnerPageLayout({ data }: { data: InnerPageData }) {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
    align: "start",
    dragFree: false,
  });

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

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

    return () => window.clearInterval(autoplay);
  }, [emblaApi]);
  return (
    <>
      {/* Hero Header */}
      <section className="relative h-[80vh] min-h-[440px] w-full overflow-hidden bg-midnight">
        <Image
          src={data.heroImage}
          alt={data.title}
          title={data.title}
          fill
          sizes="100vw"
          className="object-cover opacity-70"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-midnight/40 via-midnight/30 to-midnight/80" />
        <div className="relative z-10 flex h-full flex-col justify-end px-12 pb-16 max-w-7xl mx-auto w-full">
          <nav aria-label="Breadcrumb" className="mb-5">
            <ol className="flex items-center gap-2 text-[10px] font-sans font-normal text-ivory/80 tracking-widest-x uppercase">
              <li>
                <Link href="/" title="Home" className="hover:text-gold">
                  Home
                </Link>
              </li>
              <li>›</li>
              {data.categoryHref ? (
                <>
                  <li>
                    <Link href={data.categoryHref} title={data.category} className="hover:text-gold">
                      {data.category}
                    </Link>
                  </li>
                  <li>›</li>
                </>
              ) : null}
              <li className="text-gold">{data.title}</li>
            </ol>
          </nav>
          <div>
            <h1 className="font-serif italic text-4xl md:text-6xl lg:text-7xl text-ivory font-light leading-none mb-3 tracking-tight">
              {data.title}
            </h1>
            <p className="font-sans text-xs md:text-sm font-light text-cream/90 max-w-xl leading-relaxed tracking-luxury uppercase">
              {data.tagline}
            </p>
          </div>
        </div>
      </section>

     
  {data.awardStorySections?.length ? (
  <section className="bg-ivory px-12 p-20 md:pb-32">
    <div className="mx-auto max-w-7xl space-y-24">
      {data.awardStorySections.map((section, index) => {
        const reverse = index % 2 === 1;

        return (
          <Reveal key={index}>
            <div
              className={`grid gap-12 md:grid-cols-2 items-center ${
                reverse ? "md:[&>*:first-child]:order-2 md:[&>*:last-child]:order-1" : ""
              }`}
            >
              <div className="relative aspect-[8/6] w-full overflow-hidden rounded-[1.05rem] bg-espresso/10">
                <Image
                  src={section.image}
                  alt={section.title}
                  title={section.title}
                  fill
                  sizes="(max-width:768px) 100vw,40vw"
                  className="object-cover hover:scale-105 will-change-transform transition-all duration-500"
                />
              </div>

              <div>
                <h2 className="font-serif italic text-3xl md:text-4xl text-espresso hover:text-gold-deep font-light leading-tight mt-4">
                  {section.title}
                </h2>

                <div className="font-sans text-xs mt-4 md:text-sm font-light text-mahogany leading-relaxed">
                  {section.content}
                </div>
              </div>
            </div>
          </Reveal>
        );
      })}
    </div>
  </section>
) : null}

     

      {/* Gallery masonry list */}
      {data.awardGallery?.length ? (
        <section className="bg-espresso/90 px-4 py-16 md:py-30">
          <Reveal>
            {/* Heading */}
            <div className="mx-auto max-w-7xl px-12">
              <div className="text-center mb-16">
                <span className="font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold block">
                  Gallery
                </span>

                <h2 className="font-serif italic text-3xl md:text-4xl text-ivory font-light leading-tight mt-4">
                  Trusted & Awarded
                </h2>
              </div>
            </div>

            {/* Embla Carousel — full width */}
            <div
              className="embla overflow-hidden"
              ref={emblaRef}
            >
              <div
                className={`flex gap-6 pl-8 touch-pan-y will-change-transform ${
                  (data.awardGallery?.length ?? 0) <= 2
                    ? "justify-center"
                    : "pl-8"
                }`}
              >
                {data.awardGallery.map((award, i) => (
                  <div
                    key={i}
                    className="
                      group
                      relative
                      min-w-[85%]
                      sm:min-w-[60%]
                      md:min-w-[45%]
                      lg:min-w-[31%]
                      aspect-[10/7]
                      overflow-hidden
                      rounded-[1rem]
                      bg-midnight
                      shrink-0
                    "
                  >
                    <Image
                      src={award.image}
                      alt={award.title}
                      title={award.title}
                      fill
                      sizes="(max-width: 640px) 85vw, (max-width: 1024px) 45vw, 31vw"
                      loading="lazy"
                      className="object-cover transition-transform duration-1000 ease-out group-hover:scale-105"
                    />

                    {/* Award Title Overlay */}
                    <div className="absolute inset-0 flex items-center justify-center bg-midnight/35 px-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                      <span className="border border-ivory/40 bg-midnight/30 px-4 py-2 font-sans text-[10px] font-normal uppercase tracking-widest-x text-white">
                        {award.title}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </section>
      ) : null}

      {/* Contact & Enquire Form */}
      <section className="bg-espresso text-ivory px-12 py-20 md:py-30">
        <Reveal>
        <div className="mx-auto max-w-7xl grid gap-12 md:grid-cols-2 items-start">
          <div className="space-y-6">
            <span className="font-sans text-[10px] font-normal uppercase tracking-widest-x text-gold block">
              Plan your visit
            </span>
            <h2 className="font-serif italic text-4xl text-ivory font-light leading-tight">
              Begin your enquiry.
            </h2>
            <p className="font-sans text-xs md:text-sm font-light text-ivory/80 leading-relaxed">
              Share a few details and our reservations team will be in touch within 24 hours.
            </p>
          </div>
          <div>
            <EnquireForm variant="dark" defaultEventType={data.category === "Stay & Rooms" ? "Staycation" : data.category} />
          </div>
        </div>
        </Reveal>
      </section>
    </>
  );
}
export default InnerPageLayout;