"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import Image from "next/image";

const RoyalFeastsIcon = () => (
  <Image src="/images/home/royal/icons/royal-feast.webp" alt="Royal Feasts" width={28} height={28} className="object-contain" />
);

const HeritageDinnersIcon = () => (
  <Image src="/images/home/royal/icons/heritage-dinner.webp" alt="Heritage Dinners" width={28} height={28} className="object-contain" />
);

const PrivateGatheringsIcon = () => (
  <Image src="/images/home/royal/icons/private-gatherings.webp" alt="Private Gatherings" width={28} height={28} className="object-contain" />
);

const KudumbaDiningIcon = () => (
  <Image src="/images/home/royal/icons/kudumba-dining.webp" alt="Kudumba Dining Experience" width={28} height={28} className="object-contain" />
);

export default function EventsAccordion() {
  const [activeIdx, setActiveIdx] = useState<number>(3); // Set Kudumba Dining (index 3) active by default

  const events = [
    {
      title: "Royal Feasts",
      tamilTitle: "கல்யாண விருந்து",
      subtitle: "WEDDING BANQUETS",
      desc: "Our South Indian catering service in Waterloo brings authentic flavours to weddings, family gatherings, and corporate events. Enjoy traditional multi-course menus for a true South Indian dining experience.",
      icon: RoyalFeastsIcon,
      bgImage: "/images/home/royal/cards/royal-feast.webp",
    },
    {
      title: "Heritage Dinners",
      tamilTitle: "ஆயுள் விருந்து",
      subtitle: "ANNIVERSARIES & MILESTONES",
      desc: "Celebrate life's biggest moments with a truly memorable dinner venue in Waterloo. Our heritage dining experience honors milestones and family chapters in an intimate, warm-lit setting designed for meaningful gatherings.",
      icon: HeritageDinnersIcon,
      bgImage: "/images/home/royal/cards/heritage-dinner.webp",
    },
    {
      title: "Private Gatherings",
      tamilTitle: "சபை கூட்டங்கள்",
      subtitle: "CORPORATE COLLABORATIONS",
      desc: "Looking for a corporate event venue in Waterloo? Host meetings, presentations, and executive dining in our private rosewood boardroom, complemented by gourmet South Indian catering for a refined and professional experience.",
      icon: PrivateGatheringsIcon,
      bgImage: "/images/home/royal/cards/private-gatherings.webp",
    },
    {
      title: "Kudumba Dining",
      tamilTitle: "குடும்ப விருந்து",
      subtitle: "GRAND FAMILY REUNIONS",
      desc: "Bring the whole family together at Waterloo's most authentic family reunion venue. Our Kudumba Dining experience recreates a true South Indian heritage reunion, complete with traditional brass servers and live folklore music that brings generations closer.",
      icon: KudumbaDiningIcon,
      bgImage: "/images/home/royal/cards/kudumba-dining.webp",
    },
  ];

  return (
    <section id="events" className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-[#fdfcf7]">
      
      {/* Background Decorative Layer 1: Pillars setting in soft focus */}
      <div className="absolute inset-0 bg-[url('/images/home/royal/royal-assemblies-bg.webp')] bg-cover bg-center opacity-[0.06] pointer-events-none select-none z-0" />
      
      {/* Background Decorative Layer 2: Parchment Overlay */}
      <div className="absolute inset-0 bg-[url('/images/sanctuary_bg.png')] bg-cover bg-center pointer-events-none select-none z-0 opacity-80 mix-blend-multiply" />

      {/* Traditional Temple Borders */}
      <div className="absolute top-0 left-0 w-full h-[6px] bg-gradient-to-r from-gold-dark via-gold-light to-gold-dark opacity-35 z-10" />

      {/* Ornate Hanging Brass Lamp - Left Side */}
      <div className="absolute left-3 sm:left-6 md:left-10 lg:left-20 top-0 pointer-events-none select-none z-10 w-16 h-80">
        <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 80 400" fill="none">
          {/* hanging chain line */}
          <line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="2" strokeDasharray="1 6" strokeLinecap="round" />
          <line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="1" />
          {/* hanging rings */}
          <circle cx="40" cy="100" r="4" stroke="#bc9e65" strokeWidth="1.5" />
          <circle cx="40" cy="200" r="4" stroke="#bc9e65" strokeWidth="1.5" />
          {/* Diya body structure */}
          <path d="M 40,280 C 35,280 30,285 30,290 C 30,300 50,300 50,290 C 50,285 45,280 40,280 Z" fill="#bc9e65" />
          <path d="M 15,310 C 15,300 65,300 65,310 L 60,315 C 60,325 20,325 20,315 Z" fill="#bc9e65" />
          <path d="M 30,290 L 30,300 L 50,300 L 50,290 Z" fill="#a08040" />
          <path d="M 35,315 L 35,335 C 35,340 45,340 45,335 L 45,315 Z" fill="#bc9e65" />
          {/* bottom bell */}
          <path d="M 40,335 L 37,345 C 35,348 45,348 43,345 Z" fill="#bc9e65" />
          <circle cx="40" cy="352" r="2" fill="#bc9e65" />
          {/* animated flames drop shadows */}
          <path d="M 16,302 C 14,302 12,298 16,290 C 20,298 18,302 16,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          <path d="M 64,302 C 62,302 60,298 64,290 C 68,298 66,302 64,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          <path d="M 40,282 C 38,282 36,278 40,270 C 44,278 42,282 40,282 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          {/* light glow screen blending */}
          <circle cx="40" cy="290" r="30" fill="url(#lampGlow)" opacity="0.15" />
        </svg>
      </div>

      {/* Ornate Hanging Brass Lamp - Right Side */}
      <div className="absolute right-3 sm:right-6 md:left-auto md:right-10 lg:right-20 top-0 pointer-events-none select-none z-10 w-16 h-80">
        <svg className="w-full h-full text-[#bc9e65]" viewBox="0 0 80 400" fill="none">
          {/* hanging chain line */}
          <line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="2" strokeDasharray="1 6" strokeLinecap="round" />
          <line x1="40" y1="0" x2="40" y2="280" stroke="#bc9e65" strokeWidth="1" />
          {/* hanging rings */}
          <circle cx="40" cy="100" r="4" stroke="#bc9e65" strokeWidth="1.5" />
          <circle cx="40" cy="200" r="4" stroke="#bc9e65" strokeWidth="1.5" />
          {/* Diya body structure */}
          <path d="M 40,280 C 35,280 30,285 30,290 C 30,300 50,300 50,290 C 50,285 45,280 40,280 Z" fill="#bc9e65" />
          <path d="M 15,310 C 15,300 65,300 65,310 L 60,315 C 60,325 20,325 20,315 Z" fill="#bc9e65" />
          <path d="M 30,290 L 30,300 L 50,300 L 50,290 Z" fill="#a08040" />
          <path d="M 35,315 L 35,335 C 35,340 45,340 45,335 L 45,315 Z" fill="#bc9e65" />
          {/* bottom bell */}
          <path d="M 40,335 L 37,345 C 35,348 45,348 43,345 Z" fill="#bc9e65" />
          <circle cx="40" cy="352" r="2" fill="#bc9e65" />
          {/* animated flames drop shadows */}
          <path d="M 16,302 C 14,302 12,298 16,290 C 20,298 18,302 16,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          <path d="M 64,302 C 62,302 60,298 64,290 C 68,298 66,302 64,302 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          <path d="M 40,282 C 38,282 36,278 40,270 C 44,278 42,282 40,282 Z" fill="#ff9800" filter="drop-shadow(0 0 3px #ff5722)" />
          {/* light glow screen blending */}
          <circle cx="40" cy="290" r="30" fill="url(#lampGlow)" opacity="0.15" />
        </svg>
      </div>

      {/* Shared SVG Radial Gradient for lamp glows */}
      <svg className="absolute w-0 h-0 pointer-events-none select-none" aria-hidden="true">
        <defs>
          <radialGradient id="lampGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="#ffb74d" />
            <stop offset="100%" stopColor="#ffb74d" stopOpacity="0" />
          </radialGradient>
        </defs>
      </svg>

      <div className="container max-w-7xl mx-auto relative z-10 flex flex-col h-full">
        
        {/* Title Block Header */}
        <motion.div
          initial={{ opacity: 0, y: 35 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.75, ease: "easeOut" }}
          className="mb-12 flex flex-col items-center text-center select-text"
        >
          {/* Gold Star/Diamond Emblem header */}
          <div className="flex flex-col items-center mb-2 pointer-events-none select-none">
            <svg className="w-5 h-5 text-[#bc9e65] mb-2" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2L14.5 9.5L22 12L14.5 14.5L12 22L9.5 14.5L2 12L9.5 9.5L12 2Z" />
            </svg>
            <span className="font-sans text-base sm:text-base tracking-[0.4em] uppercase text-[#bc9e65] font-bold block">
              ❖ CELEBRATIONS ❖
            </span>
          </div>

          {/* Main Headline */}
          <h2 className="font-serif text-3xl sm:text-4xl lg:text-5xl font-bold tracking-wider text-[#0a4a2b] leading-tight uppercase mb-4 text-glow">
            Royal Assemblies & Events
          </h2>

          {/* Traditional Gold leaf Divider */}
          <div className="flex items-center gap-3 w-40 mb-5 justify-center pointer-events-none select-none">
            <div className="h-[1px] flex-1 bg-gradient-to-r from-[#bc9e65] to-transparent" />
            <svg className="w-4 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
              <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
            </svg>
            <div className="h-[1px] flex-1 bg-gradient-to-l from-[#bc9e65] to-transparent" />
          </div>

          {/* Subheading / tagline */}
          <span className="font-sans text-[#bc9e65] text-sm sm:text-lg tracking-[0.3em] font-bold block mb-4 uppercase">
            Where Tradition Meets Grandeur
          </span>

          {/* Bio tagline details */}
          <p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed tracking-wider max-w-2xl mx-auto">
            From intimate royal gatherings to grand celebrations, experience curated culinary journeys that leave lasting impressions.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, delay: 0.1, ease: "easeOut" }}
          className="flex flex-col lg:flex-row gap-5 max-[400px]:h-[950px] h-[800px] lg:h-[460px] w-full items-stretch relative z-20"
        >
          {events.map((event, idx) => {
            const isActive = idx === activeIdx;
            const CategoryIcon = event.icon;

            // Compute dynamic width flex basis classes
            const flexClass = isActive 
              ? "flex-[4] lg:flex-[3.5] bg-opacity-100" 
              : "flex-[0.8] lg:flex-[0.8] opacity-80 lg:opacity-95 hover:opacity-100";

            return (
              <div
                key={idx}
                onMouseEnter={() => setActiveIdx(idx)}
                className={`clickable flex-1 flex flex-col justify-between rounded-2xl border border-[#d8c396]/45 transition-all duration-700 ease-out relative overflow-hidden shadow-sm bg-[#fcfaf2]/90 ${flexClass}`}
              >
                {/* Background Image Overlay for Opened Active Card */}
                {isActive && event.bgImage && (
                  <div className="absolute inset-0 z-0 pointer-events-none select-none overflow-hidden">
                    <Image
                      src={event.bgImage}
                      alt={event.title}
                      fill
                      sizes="600px"
                      className="object-cover opacity-[0.06] mix-blend-multiply transition-opacity duration-700 ease-in-out"
                    />
                  </div>
                )}

                {/* Thin inner Gold border outline frame */}
                <div className="absolute inset-1.5 border border-[#d8c396]/20 pointer-events-none rounded-xl" />

                {/* Accent strip (horizontal on mobile, vertical on desktop) */}
                <div
                  className="absolute left-0 top-0 lg:bottom-0 w-full h-[4px] lg:w-[4px] lg:h-full bg-[#0a4a2b] transition-opacity duration-500"
                  style={{ opacity: isActive ? 1 : 0 }}
                />

                {/* ==================== CLOSED VIEW CARD ==================== */}
                {!isActive && (
                  <div className="flex flex-row lg:flex-col justify-between items-center h-full w-full px-3 sm:px-6 py-4 lg:py-8 lg:px-0 pointer-events-none select-none relative z-10 gap-2">
                    
                    {/* Circle icon container */}
                    <div className="w-10 h-10 sm:w-11 sm:h-11 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/50 flex items-center justify-center shadow-sm">
                      <CategoryIcon />
                    </div>

                    {/* Title text */}
                    <div className="relative lg:absolute lg:left-1/2 lg:-translate-x-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:origin-center lg:-rotate-90 whitespace-nowrap text-center overflow-hidden">
                      <h3 className="font-serif text-xs sm:text-sm lg:text-base font-bold tracking-[0.1em] sm:tracking-[0.2em] lg:tracking-[0.3em] uppercase text-[#0a4a2b] truncate">
                        {event.title}
                      </h3>
                    </div>

                    {/* Lotus watermark at bottom (Desktop only) */}
                    <div className="hidden lg:block absolute bottom-16 left-1/2 -translate-x-1/2 w-8 h-8 text-[#bc9e65] opacity-[0.06] pointer-events-none">
                      <svg viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                      </svg>
                    </div>

                    {/* Circle number badge */}
                    <div className="w-6 h-6 sm:w-7 sm:h-7 flex-shrink-0 rounded-full bg-[#0a4a2b] border border-[#bc9e65]/40 flex items-center justify-center shadow-sm">
                      <span className="font-serif text-xs sm:text-base font-bold text-[#bc9e65]">
                        0{idx + 1}
                      </span>
                    </div>

                  </div>
                )}

                {/* ==================== OPENED VIEW CARD ==================== */}
                {isActive && (
                  <div className="p-6 lg:p-8 flex flex-col justify-between h-full select-text text-left relative z-10 w-full overflow-hidden">
                    
                    {/* Top Notch Shield Overlay */}
                    <div className="absolute -top-[1px] left-1/2 -translate-x-1/2 w-12 h-6 bg-[#0a4a2b] border-b border-r border-l border-[#bc9e65]/40 rounded-b-xl flex items-center justify-center z-20">
                      <svg className="w-3.5 h-3.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 21c4.5-3.5 6-7.5 6-10.5C18 7.5 15.5 6 12 10 8.5 6 6 7.5 6 10.5c0 3 1.5 7 6 10.5z" />
                      </svg>
                    </div>

                    {/* Details content section */}
                    <div className="flex flex-col items-start justify-between h-full lg:justify-center overflow-hidden pr-2">
                      
                      {/* Double gold-rim circle icon container */}
                      <div className="w-12 h-12 lg:w-14 lg:h-14 rounded-full border border-[#bc9e65]/45 flex flex-shrink-0 items-center justify-center bg-transparent shadow-sm mb-1 lg:mb-0 mt-4 lg:mt-0">
                        <div className="w-10 h-10 lg:w-12 lg:h-12 rounded-full border border-[#bc9e65]/25 flex items-center justify-center">
                          <CategoryIcon />
                        </div>
                      </div>

                      {/* Header subtitles */}
                      <div>
                        <span className="font-sans text-xs lg:text-sm tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase block mb-1 pointer-events-none select-none">
                          {event.subtitle}
                        </span>
                        <h3 className="font-serif text-xl sm:text-2xl lg:text-3xl font-bold text-[#0a4a2b] uppercase tracking-wider mb-1">
                          {event.title}
                        </h3>
                        <p className="font-serif text-xs lg:text-sm text-[#bc9e65] font-medium tracking-wide mb-2 lg:mb-3 pointer-events-none select-none">
                          — {event.tamilTitle} —
                        </p>
                      </div>

                      {/* Bio narrative */}
                      <p className="font-sans text-sm sm:text-base text-stone-700 leading-relaxed max-w-md">
                        {event.desc}
                      </p>
                      
                      {/* Notched Enquire CTA Button */}
                      <div className="mt-4 lg:mt-4 mb-4 lg:mb-0 select-none flex-shrink-0">
                        <button 
                          className="inline-flex items-center justify-center bg-[#0a4a2b] border border-[#d8c396]/80 text-[#fcfaf2] rounded-none px-5 py-2 lg:px-6 lg:py-2.5 uppercase font-sans font-bold text-sm lg:text-base tracking-wider relative hover:bg-[#0c5030] transition-colors duration-300 shadow-md"
                          style={{
                            clipPath: "polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px)"
                          }}
                        >
                          Enquire Now →
                        </button>
                      </div>

                    </div>

                    {/* Bottom Right Card Number Indicator */}
                    <div className="absolute bottom-4 right-6 lg:bottom-6 lg:right-8 font-serif text-2xl lg:text-3xl font-bold text-[#bc9e65]/35 pointer-events-none select-none">
                      0{idx + 1}
                    </div>

                  </div>
                )}

              </div>
            );
          })}
        </motion.div>

      </div>
    </section>
  );
}