"use client";

import { Reveal } from "@/components/shared/Reveal";
import type {
  ExploreSectionData,
  ExploreContentBlock,
} from "@/constants/pages";

type Props = {
  section: ExploreSectionData;
};

function ContentBlock({ block }: { block: ExploreContentBlock }) {
  const hasExpandableContent =
    Boolean(block.description) || Boolean(block.points?.length) || Boolean(block.footerText);

  return (
    <div>
      <div
        className="
          group
          relative
          overflow-hidden
          rounded-[32px]
          min-h-[180px]
          group-hover:max-h-[1000px]
          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-3
          hover:border-gold
          hover:shadow-[0_35px_90px_rgba(0,0,0,.15)]
        "
      >
        {/* Premium Border */}
        <div
          className="
            pointer-events-none
            absolute
            inset-2
            rounded-[28px]
            border
            border-gold/20
            transition-all
            duration-700
            group-hover:border-gold
          "
        />

        {/* ========================= */}
        {/* CARD HEADER */}
        {/* ========================= */}

        <div className="relative z-20">
          {/* TITLE */}
          {block.title && (
            <h3
              className="
              h-[72px]
    overflow-hidden
                font-serif
                italic
                text-3xl
                leading-tight
                text-espresso
                transition-colors
                duration-500
                group-hover:text-gold-deep
              "
            >
              {block.title}
            </h3>
          )}

          {/* DESCRIPTION */}
          {block.description && (
            <div
              className="
                mt-6
                font-medium
                leading-7
                text-mahogany

                max-h-[56px]
                overflow-hidden

                transition-all
                duration-500
                ease-in-out

                group-hover:max-h-[500px]
              "
            >
              {block.description}
            </div>
          )}
        </div>

        {/* ========================= */}
        {/* EXPLORE DETAILS */}
        {/* ========================= */}

        {hasExpandableContent && (
          <div
            className="
              relative
              z-20
              flex
              items-center
              gap-3
              mt-6
              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>
        )}

        {/* ========================= */}
        {/* EXPANDABLE CONTENT */}
        {/* ========================= */}

        {hasExpandableContent && (
          <div
            className="
              relative
              z-20

              overflow-hidden
              max-h-0
              opacity-0

              transition-all
              duration-1000
              ease-in-out

              group-hover:max-h-[1000px]
              group-hover:opacity-100
            "
          >
            {/* POINTS */}

            {block.points && block.points.length > 0 && (
              <div>
                {block.pointsTitle && (
                  <h4 className="mb-4 font-serif italic text-2xl text-espresso">
                    {block.pointsTitle}
                  </h4>
                )}

                <div className="space-y-0">
                  {block.points.map((point, index) => (
                    <div
                      key={index}
                      className="flex items-start gap-4"
                    >
                      <span className="mt-3 h-1 w-1 shrink-0 rounded-full bg-gold" />

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

            {/* FOOTER TEXT */}

            {block.footerText && (
              <div
                className="
                  mt-4
                  p-4
                "
              >
                <p className="leading-7 text-mahogany">
                  {block.footerText}
                </p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

export default function ExploreSection({ section }: Props) {
  const cardCount = section.cards.length;

  const gridClass =
    cardCount === 1
      ? "grid-cols-1 max-w-xl mx-auto"
      : cardCount === 2
        ? "grid-cols-1 md:grid-cols-2 max-w-4xl mx-auto"
        : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";

  return (
    <section className="py-12 md:py-16 px-6 md:px-12">
      <div className="mx-auto max-w-7xl">
        <div
          className={`
            grid
            ${gridClass}
            gap-8
            items-start
          `}
        >
          {section.cards.map((card, index) => (
            <Reveal
              key={card.title ?? index}
            >
              <ContentBlock block={card} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}