'use client';

import Image from 'next/image';
import { motion, AnimatePresence } from 'framer-motion';
import type { EventPromoCardData } from './EventPromoCard';

export default function EventPromoFeatured({
  item,
}: {
  item: EventPromoCardData;
}) {
  return (
    <section className="relative bg-[#1C1D1F] overflow-hidden">
      {/* Top wavy transition from white (Carousel) to black */}
      <div className="absolute top-0 left-0 w-full z-0 leading-none">
        <svg
          viewBox="0 0 1440 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-auto min-w-[1440px] text-white"
          preserveAspectRatio="none"
        >
          <path
            d="M0 45.4545C240 -15.1515 480 -15.1515 720 45.4545C960 106.061 1200 106.061 1440 45.4545V0H0V45.4545Z"
            fill="currentColor"
          />
        </svg>
      </div>

      {/* Featured Detail */}
      <AnimatePresence mode="wait">
        <motion.div
          key={item.id}
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.5 }}
          className="container mx-auto px-4 pt-32 pb-40 md:pt-40 md:pb-48 relative z-10"
        >
          <div className="max-w-[1200px] mx-auto flex flex-col md:flex-row gap-12 lg:gap-20 items-center md:items-start">
            {/* Left: Text content */}
            <div className="flex-1 min-w-0">
              {/* Title */}
              <h2 className="font-title text-3xl sm:text-4xl md:text-[52px] leading-snug text-[#FFD738] mb-4 uppercase tracking-wide">
                {item.title}
              </h2>

              {/* Date */}
              <div className="mb-8">
                <span className="text-white text-base md:text-lg font-medium">
                  {item.date.toUpperCase()}
                </span>
              </div>

              {/* Description */}
              <div className="text-sm sm:text-base md:text-[18px] text-white leading-[1.8] whitespace-pre-wrap">
                <p>{item.fullDescription || item.excerpt}</p>
              </div>
            </div>

            {/* Right: Floating promo image */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="shrink-0 w-[280px] sm:w-[350px] md:w-[400px] lg:w-[450px] relative"
            >
              <div className="relative aspect-[4/5] rounded-[24px] md:rounded-[32px] overflow-hidden drop-shadow-[0_20px_20px_rgba(0,0,0,0.5)] border-2 border-white/10">
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  sizes="(max-width: 768px) 350px, (max-width: 1024px) 400px, 450px"
                  className="object-cover"
                />
              </div>

              {/* Sparkle decorations around image */}
              <motion.svg
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.8 }}
                className="absolute -top-12 -left-12 w-12 h-12 hidden md:block"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z"
                  fill="white"
                />
              </motion.svg>

              <motion.svg
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 1.0 }}
                className="absolute -bottom-10 -left-6 w-10 h-10"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z"
                  fill="#FFD738"
                />
              </motion.svg>

              <motion.svg
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5, delay: 0.9 }}
                className="absolute top-0 -right-16 w-8 h-8 hidden lg:block"
                viewBox="0 0 24 24"
                fill="none"
              >
                <path
                  d="M12 0L14.5 9.5L24 12L14.5 14.5L12 24L9.5 14.5L0 12L9.5 9.5L12 0Z"
                  fill="#FFD738"
                />
              </motion.svg>
            </motion.div>
          </div>
        </motion.div>
      </AnimatePresence>

      {/* Bottom wavy transition from black to white (MascotBanner) */}
      <div className="absolute bottom-0 left-0 w-full z-0 leading-none">
        <svg
          viewBox="0 0 1440 90"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-auto min-w-[1440px] text-white rotate-180"
          preserveAspectRatio="none"
        >
          <path
            d="M0 45.4545C240 -15.1515 480 -15.1515 720 45.4545C960 106.061 1200 106.061 1440 45.4545V0H0V45.4545Z"
            fill="currentColor"
          />
        </svg>
      </div>
    </section>
  );
}