"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { Calendar, Sparkles, Gift, Users, Award, ShieldAlert } from "lucide-react";

export default function EventsAccordion() {
  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);

  const events = [
    {
      title: "Kalyana Feasts",
      tamilTitle: "கல்யாண விருந்து",
      subtitle: "WEDDING BANQUETS",
      desc: "A grand imperial feast served to celebrate auspicious marital unions. Traditional multi-course menus served on fresh organic banana leaves with royal silver chalices, accommodating up to five hundred guests in heritage luxury.",
      icon: Sparkles,
      bgGradient: "from-[#fdfcf9] via-[#e4d7bc]/40 to-[#FAF7F2]",
      accentColor: "#188754",
    },
    {
      title: "Ayush Dinners",
      tamilTitle: "ஆயுள் விருந்து",
      subtitle: "ANNIVERSARIES & BIRTHDAYS",
      desc: "Honor milestones and life chapters. Our ancestral dining rooms provide an intimate, warm-lit atmosphere with traditional music ensembles and customized family menus curated by Chef Sundaram.",
      icon: Gift,
      bgGradient: "from-[#fdfcf9] via-[#e4d7bc]/20 to-[#FAF7F2]",
      accentColor: "#bc9e65",
    },
    {
      title: "Sabha Assemblies",
      tamilTitle: "சபை கூட்டங்கள்",
      subtitle: "CORPORATE COLLABORATIONS",
      desc: "Host partners and executives in private boardrooms crafted from vintage rosewood. Pair high-level meetings with gourmet curated South Indian starters, specialized filter coffee breaks, and impeccable service.",
      icon: Award,
      bgGradient: "from-[#fdfcf9] via-[#188754]/8 to-[#FAF7F2]",
      accentColor: "#188754",
    },
    {
      title: "Kudumba Dining",
      tamilTitle: "குடும்ப விருந்து",
      subtitle: "GRAND FAMILY REUNIONS",
      desc: "Bring generations together under one carved timber ceiling. We recreate the authentic community dining experience of South Indian heritage mansions, complete with traditional brass servers and folklore music.",
      icon: Users,
      bgGradient: "from-[#fdfcf9] via-[#bc9e65]/15 to-[#FAF7F2]",
      accentColor: "#bc9e65",
    },
  ];

  return (
    <section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg-light border-b border-gold/10">
      
      {/* Background Decorative */}
      <div className="absolute top-[5%] left-[50%] -translate-x-1/2 w-[500px] h-[500px] rounded-full bg-maroon/5 blur-[150px] pointer-events-none" />

      <div className="container max-w-6xl mx-auto relative z-10 flex flex-col h-full">
        
        {/* Title */}
        <div className="mb-16 flex flex-col items-center text-center">
          <span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
            <Calendar size={12} /> C E L E B R A T I O N S
          </span>
          <h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
            ROYAL ASSEMBLIES & EVENTS
          </h2>
          <div className="w-20 h-[1.5px] bg-maroon mt-4" />
        </div>

        {/* Horizontal Accordion Track */}
        <div className="flex flex-col lg:flex-row gap-4 h-[600px] lg:h-[450px] w-full items-stretch">
          {events.map((event, idx) => {
            const isHovered = hoveredIdx === idx;
            const isAnyHovered = hoveredIdx !== null;
            const Icon = event.icon;

            // Compute dynamic flex basis
            // Default: equal sizes. On hover: active scales up, rest shrink
            let flexClass = "lg:flex-[1]";
            if (isAnyHovered) {
              flexClass = isHovered ? "lg:flex-[3.5] bg-opacity-100" : "lg:flex-[0.8] opacity-60";
            }

            return (
              <div
                key={idx}
                onMouseEnter={() => setHoveredIdx(idx)}
                onMouseLeave={() => setHoveredIdx(null)}
                className={`clickable flex-1 flex flex-col justify-between p-6 md:p-8 rounded-xl border border-gold/10 transition-all duration-700 ease-out relative overflow-hidden group ${flexClass} bg-gradient-to-b ${event.bgGradient}`}
              >
                {/* Vintage Border overlay on hover */}
                <div className={`absolute inset-3 border border-gold/10 rounded-lg pointer-events-none transition-opacity duration-500 ${isHovered ? "opacity-100" : "opacity-0"}`} />
                <div className={`absolute inset-[18px] border border-dashed border-gold/5 rounded-lg pointer-events-none transition-opacity duration-500 ${isHovered ? "opacity-100" : "opacity-0"}`} />

                {/* Left Line Accent (Gold) */}
                <div
                  className="absolute left-0 top-0 bottom-0 w-[4px] transition-all duration-500"
                  style={{ backgroundColor: event.accentColor, opacity: isHovered ? 1 : 0.2 }}
                />

                {/* Top Section: Icon & Header */}
                <div className="flex justify-between items-start z-10">
                  <div className="flex items-center gap-3">
                    <div
                      className="w-10 h-10 rounded-full border border-gold/30 flex items-center justify-center transition-all duration-500"
                      style={{
                        borderColor: isHovered ? event.accentColor : "rgba(216,195,150,0.4)",
                        backgroundColor: isHovered ? "rgba(24,135,84,0.06)" : "transparent",
                      }}
                    >
                      <Icon
                        size={18}
                        style={{ color: isHovered ? event.accentColor : "#bc9e65" }}
                        className={isHovered ? "animate-pulse" : ""}
                      />
                    </div>
                    {/* Collapsed view Title details */}
                    <div className="lg:hidden group-hover:block transition-all duration-300">
                      <span className="font-sans text-[8px] tracking-[0.2em] uppercase text-gold-dark font-bold block">
                        {event.subtitle}
                      </span>
                      <h3 className="font-serif text-lg font-bold text-stone-900 uppercase tracking-wider">
                        {event.title}
                      </h3>
                    </div>
                  </div>

                  {/* Desktop Collapsed view rotated Title */}
                  <div className={`hidden lg:block absolute left-1/2 -translate-x-1/2 top-28 origin-center -rotate-90 whitespace-nowrap transition-opacity duration-500 pointer-events-none ${
                    isHovered ? "opacity-0" : "opacity-100"
                  }`}>
                    <h3 className="font-serif text-sm font-bold tracking-[0.4em] uppercase text-gold-dark/80 font-bold">
                      {event.title}
                    </h3>
                  </div>
                </div>

                {/* Expanded content view (Desktop only hides when collapsed, shows when hovered) */}
                <div className={`flex flex-col gap-4 mt-8 z-10 transition-all duration-500 ${
                  isHovered ? "lg:opacity-100 lg:translate-y-0" : "lg:opacity-0 lg:translate-y-4 lg:pointer-events-none"
                }`}>
                  {/* Category meta */}
                  <div>
                    <span className="font-sans text-[9px] tracking-[0.3em] text-gold-dark font-bold block mb-1">
                      {event.subtitle}
                    </span>
                    <h3 className="font-serif text-2xl md:text-3xl font-bold text-stone-900 uppercase tracking-wider text-glow mb-1">
                      {event.title}
                    </h3>
                    <p className="font-serif text-xs text-gold-dark/70 font-semibold italic tracking-wider">
                      {event.tamilTitle}
                    </p>
                  </div>

                  {/* Description */}
                  <p className="font-sans text-xs md:text-sm text-stone-700 leading-relaxed tracking-wider max-w-md">
                    {event.desc}
                  </p>

                  {/* Inquire CTA Button */}
                  <button className="clickable w-fit mt-2 font-serif text-[11px] tracking-[0.2em] uppercase text-maroon hover:text-white border border-maroon/30 hover:border-maroon hover:bg-maroon px-4 py-2 bg-transparent transition-all duration-300 relative group/btn overflow-hidden">
                    <span className="absolute inset-0 bg-maroon translate-x-[-100%] group-hover/btn:translate-x-0 transition-transform duration-300 z-0" />
                    <span className="relative z-10">Request Brochure</span>
                  </button>
                </div>

                {/* Bottom Number Indicator */}
                <div className="text-right z-10 mt-6 lg:mt-0">
                  <span className="font-serif text-lg font-bold text-maroon/35 tracking-widest">
                    0{idx + 1}
                  </span>
                </div>

              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}
