"use client";

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

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

export default function CollectionSection({ section }: Props) {
  const {
    position,
    handleMouseMove,
    handleMouseLeave,
  } = useMouseGlow();

  return (
    <section className="py-12 md:py-16 px-6 md:px-12">
      <div className="max-w-7xl mx-auto">

        <Reveal>
          <div className="max-w-4xl mx-auto text-center">

            <h2 className="font-serif italic text-3xl md:text-5xl font-light text-espresso">
              {section.title}
            </h2>

            <div className="flex items-center justify-center gap-4 mt-4">

              <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>

            <p className="mt-8 text-lg leading-8 text-gold-deep max-w-3xl mx-auto">
              {section.subtitle}
            </p>

          </div>
        </Reveal>

        {section.experiences && section.experiences.length > 0 && (
          <Reveal delay={0.15}>
            <div className="grid gap-6 lg:grid-cols-3 mt-8">

              {section.experiences.map((item) => (
                <div
                  key={item.title}
                  onMouseMove={handleMouseMove}
                  onMouseLeave={handleMouseLeave}
                  className="
                    group
                    relative
                    overflow-hidden
                    rounded-3xl
                    border
                    border-[#E8DED1]
                    bg-gradient-to-br
                    from-white
                    via-[#FFFCF6]
                    to-[#F7EFE2]
                    p-6
                    transition-all
                    duration-700
                    hover:-translate-y-2
                    hover:border-gold
                    hover:shadow-[0_30px_70px_rgba(0,0,0,.12)]
                  "
                >
                  <div className="relative z-20">

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

                    <p className="mt-2 text-gold-deep leading-8">
                      {item.description}
                    </p>

                  </div>
                </div>
              ))}

            </div>
          </Reveal>
        )}

        <div
          className={
            section.collections.length >= 3
              ? "mt-10 grid gap-8 lg:grid-cols-3 items-stretch"
      : "mt-10 flex flex-wrap justify-center gap-12 items-stretch"
          }
        >

          {section.collections.map((collection) => {

            const hasExpandableContent =
              Boolean(collection.stayIncluded) ||
              Boolean(collection.eventPlan?.length) ||
              Boolean(collection.eventSpaces?.length) ||
              Boolean(collection.capacity);

            return (
              <div
                key={collection.title}
                className={
                  section.collections.length >= 3
                    ? "h-full w-full"
                    : "h-full w-full max-w-[420px]"
                }
              >

                <div
                  onMouseMove={handleMouseMove}
                  onMouseLeave={handleMouseLeave}
                  className={`
                    group
                    relative
                    flex
                    h-full
                    flex-col
                    overflow-hidden
                    rounded-[32px]
                    border
                    border-[#E8DED1]
                    bg-gradient-to-br
                    from-white
                    via-[#FFFDF9]
                    to-[#F7EFE2]
                    p-6
                    will-change-transform
                    transition-all
                    duration-1000
                    hover:-translate-y-2
                    hover:border-gold
                    hover:shadow-[0_35px_90px_rgba(0,0,0,.15)]
                  `}
                >

                  <div
                    className="
                      pointer-events-none
                      absolute
                      inset-2
                      rounded-[28px]
                      border
                      border-gold/20
                      transition-all
                      duration-1000
                      group-hover:border-gold
                    "
                  />

                  <div className="relative z-20 flex flex-1 flex-col">

                    <h3
                      className="
                        font-serif
                        italic
                        text-2xl
                        leading-tight
                        text-espresso
                        group-hover:text-gold-deep
                        transition-colors
                        duration-500
                      "
                    >
                      {collection.title}
                    </h3>

                    <div className="mt-3 font-medium text-mahogany">
                      {collection.subtitle}
                    </div>

                    <div className="mt-2 leading-7 text-mahogany">
                      {collection.description}
                    </div>

                    {collection.link && (
                      <div className="mt-auto pt-4">

                        <Link
                          href={collection.link.href}
                          title={collection.title}
                          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-espresso
                          "
                        >
                          {collection.link.text}

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

                      </div>
                    )}

                  </div>

                  {hasExpandableContent && (
                    <div
                      className="
                        relative
                        z-20
                        mt-6
                        flex
                        items-center
                        gap-3
                        text-gold-deep
                        transition-all
                        duration-500
                        group-hover:opacity-0
                        group-hover:-translate-y-2
                      "
                    >
                      <span className="font-sans text-[10px] uppercase tracking-[0.3em]">
                        Explore Details
                      </span>

                      <span
                        className="
                          flex
                          h-5
                          w-5
                          items-center
                          justify-center
                          rounded-full
                          border
                          border-gold/40
                          transition-transform
                          duration-500
                          group-hover:rotate-180
                        "
                      >
                        <svg
                          viewBox="0 0 20 20"
                          fill="none"
                          className="h-3.5 w-3.5"
                        >
                          <path
                            d="M5 7.5L10 12.5L15 7.5"
                            stroke="currentColor"
                            strokeWidth="1.5"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                          />
                        </svg>
                      </span>
                    </div>
                  )}

                  {hasExpandableContent && (
                    <div
                      className="
                        relative
                        z-20
                        overflow-hidden
                        max-h-0
                        opacity-0
                        transition-all
                        duration-1000
                        ease-in-out
                        group-hover:max-h-[1200px]
                        group-hover:opacity-100
                      "
                    >

                      {collection.stayIncluded && (
                        <div className="mt-8 mb-6">

                          <div className="font-serif italic text-2xl text-espresso mb-2">
                            {collection.stayIncluded.title}
                          </div>

                          <div className="space-y-0">

                            {collection.stayIncluded.items.map(
                              (item, index) => (
                                <div
                                  key={index}
                                  className="flex items-start gap-4"
                                >

                                  <span className="mt-3 h-1 w-1 rounded-full bg-mahogany shrink-0" />

                                  <div className="leading-7 text-mahogany">
                                    {item}
                                  </div>

                                </div>
                              )
                            )}

                          </div>

                        </div>
                      )}

                      {collection.eventPlan &&
                        collection.eventPlan.length > 0 && (
                          <div className="mb-6">

                            <h4 className="font-serif italic text-2xl text-espresso mb-4">
                              Wedding Event Plan
                            </h4>

                            <div className="overflow-hidden rounded-2xl border border-gold/20">

                              <table className="w-full">

                                <thead>
                                  <tr className="bg-gold/10">

                                    <th className="px-6 py-2 text-left font-semibold text-espresso">
                                      Event
                                    </th>

                                    <th className="px-6 py-2 text-left font-semibold text-espresso">
                                      Venue
                                    </th>

                                  </tr>
                                </thead>

                                <tbody>

                                  {collection.eventPlan.map((row) => (
                                    <tr
                                      key={row.event}
                                      className="border-t border-gold/10"
                                    >

                                      <td className="px-6 py-2 text-mahogany">
                                        {row.event}
                                      </td>

                                      <td className="px-6 py-2 text-mahogany">
                                        {row.venue}
                                      </td>

                                    </tr>
                                  ))}

                                </tbody>

                              </table>

                            </div>

                          </div>
                        )}

                      {collection.eventSpaces &&
                        collection.eventSpaces.length > 0 && (
                          <div className="mb-6">

                            <h4 className="font-serif italic text-2xl text-espresso mb-5">
                              Event Spaces Included
                            </h4>

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

                              {collection.eventSpaces.map((space) => (
                                <div
                                  key={space}
                                  className="flex items-center gap-3"
                                >

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

                                  <p className="text-sm text-mahogany">
                                    {space}
                                  </p>

                                </div>
                              ))}

                            </div>

                          </div>
                        )}

                      {collection.capacity && (
                        <div
                          className="
                            rounded-2xl
                            border
                            border-gold/25
                            bg-gradient-to-r
                            from-gold/10
                            to-gold/5
                            p-4
                            mb-2
                          "
                        >
                          <h4 className="font-serif italic text-xl text-espresso">
                            {collection.capacity}
                          </h4>
                        </div>
                      )}

                    </div>
                  )}

                </div>

              </div>
            );
          })}

        </div>

      </div>
    </section>
  );
}