"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { Reveal } from "@/components/shared/Reveal";
import Link from "next/link";
import type { VenueLandingSection } from "@/constants/pages";

type Props = {
  section: VenueLandingSection["occasions"];
};

export default function OccasionSection({ section }: Props) {
  return (
    <section className="py-12 md:py-16 px-6 md:px-12">
      <div className="max-w-7xl mx-auto">

        <Reveal>
          <div className="text-center mb-10">
            <h2 className="font-serif italic text-3xl md:text-5xl font-light text-espresso leading-tight">
              {section?.title}
            </h2>

            <div className="flex items-center justify-center gap-4 mt-6">
              <div className="h-0.5 w-20 bg-gradient-to-r from-transparent to-gold"></div>

              <div className="relative flex items-center justify-center">
                <div className="h-4 w-4 rotate-45 border border-gold bg-gold/20"></div>
                <div className="absolute h-2 w-2 rotate-45 bg-gold"></div>
              </div>

              <div className="h-0.5 w-20 bg-gradient-to-l from-transparent to-gold"></div>
            </div>
          </div>

          <div
            className="
              text-center
              font-sans
              text-base
              leading-7
              mb-10
              text-mahogany
              transition-colors
              duration-500
              group-hover:text-espresso
            "
          >
            {section?.description}
          </div>
        </Reveal>

        <div className="grid gap-8 md:grid-cols-2">

          {section?.items.map((item, index) => {
            const isLast = index === section.items.length - 1;
            const isOdd = section.items.length % 2 !== 0;

            return (
              <div
                key={item.title}
                className={
                  isOdd && isLast
                    ? "md:col-span-2 flex justify-center"
                    : ""
                }
              >
                <div
                  className={
                    isOdd && isLast
                      ? "w-full md:max-w-[48%]"
                      : "w-full h-full"
                  }
                >
                  {item.alternate ? (
  <FlippableOccasionCard
    item={item}
    alternate={item.alternate}
  />
) : item.link ? (
  <Link href={item.link} title={item.title} className="block h-full">
    <OccasionCard item={item} />
  </Link>
) : (
  <OccasionCard item={item} />
)}
                </div>
              </div>
            );
          })}

        </div>

      </div>
    </section>
  );
}


/* ========================================================= */
/* Flippable Occasion Card                                    */
/* ========================================================= */

function FlippableOccasionCard({
  item,
  alternate,
}: {
  item: NonNullable<VenueLandingSection["occasions"]>["items"][number];
  alternate: NonNullable<
    NonNullable<VenueLandingSection["occasions"]>["items"][number]["alternate"]
  >;
}) {
  const [flipped, setFlipped] = useState(false);

  useEffect(() => {
    const interval = window.setInterval(() => {
      setFlipped((current) => !current);
    }, 5000);

    return () => {
      window.clearInterval(interval);
    };
  }, []);

  return (
    <div
      className="relative grid h-full"
      style={{ perspective: "1200px" }}
      onClick={() => setFlipped((current) => !current)}
      onMouseEnter={() => {
        if (window.matchMedia("(hover: hover)").matches) {
          setFlipped(true);
        }
      }}
      onMouseLeave={() => {
        if (window.matchMedia("(hover: hover)").matches) {
          setFlipped(false);
        }
      }}
    >
      <div
        className="
          col-start-1
          row-start-1
          grid
          h-full
          transition-transform
          duration-700
          [transform-style:preserve-3d]
        "
        style={{
          transform: flipped
            ? "rotateY(180deg)"
            : "rotateY(0deg)",
        }}
      >

        {/* FRONT */}

        <div
          className="
            col-start-1
            row-start-1
            h-full
            [backface-visibility:hidden]
          "
        >
          {item.link ? (
            <Link
              href={item.link}
              title={item.title}
              className="block h-full"
              onClick={(e) => {
                if (
                  !window.matchMedia("(hover: hover)").matches &&
                  !flipped
                ) {
                  e.preventDefault();
                }
              }}
            >
              <OccasionCard item={item} />
            </Link>
          ) : (
            <OccasionCard item={item} />
          )}
        </div>

        {/* BACK */}

        <div
          className="
            col-start-1
            row-start-1
            h-full
            [backface-visibility:hidden]
            [transform:rotateY(180deg)]
          "
        >
          {alternate.link ? (
  <Link
    href={alternate.link}
    title={alternate.title}
    className="block h-full"
  >
    <OccasionCard item={alternate} />
  </Link>
) : (
  <OccasionCard item={alternate} />
)}
        </div>

      </div>
    </div>
  );
}


/* ========================================================= */
/* Occasion Card                                              */
/* ========================================================= */

function OccasionCard({
  item,
}: {
  item: NonNullable<VenueLandingSection["occasions"]>["items"][number];
}) {
  return (
    <div
      className="
        group
        relative
        h-full
        overflow-hidden
        rounded-2xl
        border
        border-stone-200
        bg-gradient-to-l
        from-[#fdf8ea]
        via-ivory
        to-[#fdf8ea]
        p-8
        will-change-transform
        transition-all
        duration-500
        hover:-translate-y-2
        hover:border-gold/40
        hover:shadow-[0_25px_60px_rgba(0,0,0,0.10)]
      "
    >

      {/* Soft Gold Glow */}

      <div
        className="
          pointer-events-none
          absolute
          inset-0
          opacity-0
          transition-opacity
          duration-700
          group-hover:opacity-100
          bg-[radial-gradient(circle_at_top_right,rgba(201,164,90,0.10),transparent_45%)]
        "
      />

      {/* Luxury Light Sweep */}

      <div
        className="
          pointer-events-none
          absolute
          inset-0
          overflow-hidden
        "
      >
        <div
          className="
            absolute
            -left-1/2
            top-0
            h-full
            w-1/3
            rotate-12
            bg-gradient-to-r
            from-transparent
            via-white/60
            to-transparent
            translate-x-[-200%]
            transition-transform
            duration-1000
            ease-out
            group-hover:translate-x-[500%]
          "
        />
      </div>

      {/* Image */}

      {item.image && (
        <div className="relative mb-5 w-full overflow-hidden rounded-[20px] aspect-[16/10]">
          <Image
            src={item.image}
            alt={item.title}
            title={item.title}
            fill
  sizes="(max-width: 767px) 100vw, 50vw"
  className="
    object-cover
    transition-transform
    duration-700
    group-hover:scale-105
  "
          />

          {/* Image overlay */}

          <div
            className="
              pointer-events-none
              absolute
              inset-0
              bg-gradient-to-t
              from-black/25
              via-transparent
              to-transparent
              opacity-60
            "
          />

          {/* Gold image frame */}

          <div
            className="
              pointer-events-none
              absolute
              inset-3
              rounded-[16px]
              border
              border-white/30
              transition-all
              duration-500
              group-hover:border-gold/70
            "
          />
        </div>
      )}

      {/* Content */}

      <div className="relative z-10">

        <h3
          className="
            text-center
            font-serif
            italic
            text-3xl
            text-espresso
            mb-5
            transition-colors
            duration-500
            group-hover:text-gold
          "
        >
          {item.title}

          <div className="my-4 h-px w-full bg-gradient-to-r from-transparent via-gold/80 to-transparent" />
        </h3>

        <div
          className="
            text-center
            font-sans
            text-base
            leading-7
            text-mahogany
            transition-colors
            duration-500
            group-hover:text-espresso
          "
        >
          {item.description}
        </div>

      </div>

      {/* Bottom Gold Accent */}

      <div
        className="
          absolute
          bottom-0
          left-0
          h-[2px]
          w-0
          bg-gold
          transition-all
          duration-700
          group-hover:w-full
        "
      />

    </div>
  );
}