"use client";

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

type Props = {
  section: NonNullable<VenueLandingSection["showcase"]>[number];
};

export default function VenueShowcaseSection({ 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-12">

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

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

            </div>

            {/* Optional Section Description */}

            {section.description && (
              <div className="mx-auto mt-7 max-w-4xl font-sans text-sm font-light leading-7 text-mahogany md:text-base">
                {section.description}
              </div>
            )}

          </div>
        </Reveal>

        {/* Venue Cards */}

        <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">

          {section.venues.map((venue, index) => {
            const normalVenueIndexes = section.venues
            .map((item, i) => (!item.alternate ? i : -1))
            .filter((i) => i !== -1);

          const normalVenueCount = normalVenueIndexes.length;

          const lastNormalVenueIndex =
            normalVenueIndexes[normalVenueIndexes.length - 1];

          const isSingleLastNormalCard =
            !venue.alternate &&
            normalVenueCount % 2 !== 0 &&
            index === lastNormalVenueIndex;

            /* ============================================================
               CARD STYLE
            ============================================================ */

            const cardClassName = `
              group
              block
              relative
              overflow-hidden
              h-full
              flex
              flex-col
              rounded-[28px]
              border
              border-[#E7DCCF]
              bg-gradient-to-br
              from-white
              via-[#fcfaf5]
              to-[#fff0db]
              p-6
              will-change-transform
              transition-all
              duration-700
              hover:-translate-y-2
              hover:border-gold/50
              hover:shadow-[0_30px_70px_rgba(0,0,0,0.08)]
            `;


            /* ============================================================
               CARD CONTENT
            ============================================================ */

            const renderCardContent = (
              cardVenue: typeof venue
            ) => {
              return (
                <>

                  {/* Light Sweep */}

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


                  {/* Image */}

                  {cardVenue.image && (
                    <div
                      className="
                        relative
                        mb-5
                        w-full
                        overflow-hidden
                        rounded-[20px]
                        aspect-[9/6]
                      "
                    >

                      <Image
                        src={cardVenue.image}
                        alt={cardVenue.title}
                        title={cardVenue.title}
                        fill
                        sizes="(max-width: 768px) 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>
                  )}


                  {/* Title + Capacity */}

                  <div className="flex items-start justify-between gap-4">

                    <h3
                      className="
                        min-w-0
                        flex-1
                        font-serif
                        italic
                        text-2xl
                        sm:text-3xl
                        text-espresso
                        transition-colors
                        duration-500
                        group-hover:text-gold
                      "
                    >
                      {cardVenue.title}
                    </h3>


                    {/* Capacity */}

                    {cardVenue.capacity && (
                      <div className="shrink-0 w-32 sm:w-36">

                        <div className="text-center">

                          <p
                            className="
                              font-sans
                              text-[10px]
                              uppercase
                              tracking-[0.3em]
                              text-gold-deep
                              whitespace-nowrap
                            "
                          >
                            {cardVenue.capacity.label}
                          </p>

                          <div
                            className="
                              mx-auto
                              mt-1
                              h-px
                              w-28
                              bg-gradient-to-r
                              from-transparent
                              via-gold
                              to-transparent
                            "
                          />

                          <p
                            className="
                              whitespace-nowrap
                              font-serif
                              italic
                              text-sm
                              sm:text-lg
                              text-espresso
                            "
                          >
                            {cardVenue.capacity.value}
                          </p>

                        </div>

                      </div>
                    )}

                  </div>

                  {/* Divider */}

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

                  {/* Description */}

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

                  {/* Suitable For */}

                  {cardVenue.bestFor &&
                    cardVenue.bestFor.length > 0 && (

                      <div className="mt-2">

                        <h4
                          className="
                            font-serif
                            text-xl
                            italic
                            text-espresso
                            mb-2
                          "
                        >
                          Suitable For
                        </h4>

                        <ul className="grid grid-cols-2 gap-x-4 gap-y-2">

                          {cardVenue.bestFor.map((item) => (

                            <li
                              key={item}
                              className="
                                flex
                                items-start
                                gap-3
                                text-sm
                                leading-6
                                text-mahogany
                              "
                            >

                              <span
                                className="
                                  mt-2
                                  h-1.5
                                  w-1.5
                                  shrink-0
                                  rounded-full
                                  bg-gold
                                "
                              />

                              <span>
                                {item}
                              </span>

                            </li>

                          ))}

                        </ul>

                      </div>
                    )}

                  {/* Suitable For Description */}

                  {cardVenue.bestForDescription && (

                    <div
                      className="
                        mt-5
                        text-sm
                        leading-6
                        text-mahogany
                      "
                    >
                      {cardVenue.bestForDescription}
                    </div>

                  )}

                  {/* CTA */}

                  {cardVenue.link && (

                    <div className="mt-auto pt-6">

                      <div
                        className="
                          inline-flex
                          items-center
                          gap-3
                          rounded-full
                          border
                          border-gold
                          px-3
                          py-1
                          font-sans
                          text-[10px]
                          uppercase
                          tracking-[0.25em]
                          text-gold-deep
                          transition-all
                          duration-500
                          hover:bg-gold/40
                          hover:text-black
                        "
                      >

                        Explore {cardVenue.title}

                        <span className="text-sm">
                          →
                        </span>

                      </div>

                    </div>

                  )}

                </>
              );
            };


            /* ============================================================
               RENDER CARD
            ============================================================ */

            const renderCard = (
              cardVenue: typeof venue
            ) => {

              if (cardVenue.link) {

                return (
                  <Link
                    href={cardVenue.link}
                    title={cardVenue.title}
                    className={cardClassName}
                  >
                    {renderCardContent(cardVenue)}
                  </Link>
                );

              }

              return (
                <div className={cardClassName}>
                  {renderCardContent(cardVenue)}
                </div>
              );
            };


            /* ============================================================
               ALTERNATE / OR PAIR
            ============================================================ */

            if (venue.alternate) {

              const alternate = venue.alternate;

              return (
                <div
                  key={venue.title}
                  className="lg:col-span-2"
                >

                  <div
                    className="
                      grid
                      grid-cols-1
                      items-stretch
                      gap-4
                      md:grid-cols-[1fr_auto_1fr]
                    "
                  >

                    {/* Main */}

                    <div className="min-w-0">
                      {renderCard(venue)}
                    </div>


                    {/* OR */}

                    <div
                      className="
                        flex
                        items-center
                        justify-center
                        py-2
                        md:px-2
                        md:py-0
                      "
                    >

                      <span
                        className="
                          font-serif
                          italic
                          text-xl
                          text-gold-deep
                          whitespace-nowrap
                        "
                      >
                        OR
                      </span>

                    </div>

                    {/* Alternate */}

                    <div className="min-w-0">
                      {renderCard(alternate)}
                    </div>

                  </div>

                </div>
              );
            }


            /* ============================================================
               NORMAL CARD
            ============================================================ */

            return (
              <div
                key={venue.title}
                className={
                  isSingleLastNormalCard
                    ? "lg:col-span-2 flex justify-center"
                    : "min-w-0"
                }
              >
                <div
                  className={
                    isSingleLastNormalCard
                      ? "w-full lg:max-w-[48%]"
                      : "w-full h-full"
                  }
                >
                  {renderCard(venue)}
                </div>
              </div>
            );
          })}

        </div>

      </div>
    </section>
  );
}