"use client";

interface Event {
  id: number;
  date: string;
  name: string;
  description: string;
  type: "summit" | "launch" | "festival" | "competition";
  status: "upcoming" | "live" | "past";
}

const events: Event[] = [
  {
    id: 1,
    date: "NOVEMBER 18th, 2023",
    name: "Tech Innovation Summit",
    description:
      "Join industry leaders and innovators for a day of cutting-edge technology discussions, AI breakthroughs, and networking opportunities.",
    type: "summit",
    status: "past",
  },
  {
    id: 2,
    date: "DECEMBER 3rd, 2023",
    name: "AI Revolution Launch",
    description:
      "Witness the launch of revolutionary AI systems that will reshape the gaming landscape. Exclusive previews and early access opportunities.",
    type: "launch",
    status: "past",
  },
  {
    id: 3,
    date: "DECEMBER 22nd, 2023",
    name: "Winter Code Festival",
    description:
      "A celebration of coding excellence with hackathons, coding challenges, and prizes. Showcase your skills and compete with the best developers.",
    type: "festival",
    status: "past",
  },
  {
    id: 4,
    date: "JANUARY 15th, 2024",
    name: "Quantum Computing Expo",
    description:
      "Explore the future of quantum computing in gaming. Interactive demos, expert talks, and hands-on workshops for all skill levels.",
    type: "summit",
    status: "upcoming",
  },
  {
    id: 5,
    date: "FEBRUARY 8th, 2024",
    name: "Cyber Arena Championship",
    description:
      "The ultimate competitive gaming event. Compete for glory, exclusive rewards, and the title of Cyber Arena Champion. Registration now open.",
    type: "competition",
    status: "upcoming",
  },
  {
    id: 6,
    date: "MARCH 12th, 2024",
    name: "Spring Tech Gala",
    description:
      "An elegant evening celebrating technological achievements. Awards ceremony, networking, and exclusive announcements from top tech companies.",
    type: "festival",
    status: "upcoming",
  },
];

const getEventTypeColor = (type: Event["type"]) => {
  switch (type) {
    case "summit":
      return "from-blue-600 to-cyan-500";
    case "launch":
      return "from-purple-600 to-pink-500";
    case "festival":
      return "from-pixel-gold to-orange-500";
    case "competition":
      return "from-red-600 to-orange-500";
    default:
      return "from-gray-600 to-gray-500";
  }
};

const getStatusBadge = (status: Event["status"]) => {
  switch (status) {
    case "upcoming":
      return (
        <span className="px-3 py-1 bg-green-900/50 border border-green-500/50 text-green-400 text-xs uppercase tracking-widest rounded">
          Upcoming
        </span>
      );
    case "live":
      return (
        <span className="px-3 py-1 bg-red-900/50 border border-red-500/50 text-red-400 text-xs uppercase tracking-widest rounded animate-pulse">
          Live Now
        </span>
      );
    case "past":
      return (
        <span className="px-3 py-1 bg-gray-800/50 border border-gray-600/50 text-gray-400 text-xs uppercase tracking-widest rounded">
          Past
        </span>
      );
  }
};

export default function EventsPageSection() {
  return (
    <section className="relative w-full min-h-screen flex flex-col items-center justify-center overflow-hidden pt-24 pb-16">
      {/* Background Image */}
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{
          backgroundImage: `url('/got-2.jpg')`,
        }}
      >
        {/* Dark overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/60 to-black/80"></div>
      </div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-6xl mx-auto px-8 py-16">
        {/* Title Section */}
        <div className="text-center mb-16">
          <h1 className="text-5xl md:text-7xl font-gaming font-black mb-4 tracking-tight">
            <span
              className="bg-gradient-to-r from-pixel-gold via-orange-400 to-pixel-gold bg-clip-text text-transparent"
              style={{
                textShadow: "0 0 30px rgba(218, 165, 32, 0.5)",
              }}
            >
              EVENTS
            </span>
          </h1>
          <div className="text-pixel-gold text-lg md:text-xl font-gaming-subtitle font-semibold flex items-center justify-center gap-2 mb-6 tracking-wide">
            <span>✦</span>
            <span>Upcoming & Past Events</span>
            <span>✦</span>
          </div>
          <p className="text-gray-400 text-sm max-w-2xl mx-auto">
            Join us for exciting tech events, competitions, and celebrations
            throughout the year
          </p>
        </div>

        {/* Events Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {events.map((event) => (
            <div
              key={event.id}
              className="bg-black/60 border border-pixel-gold/30 rounded-lg overflow-hidden backdrop-blur-sm hover:border-pixel-gold/50 transition group"
            >
              {/* Event Header */}
              <div
                className={`h-2 bg-gradient-to-r ${getEventTypeColor(
                  event.type
                )}`}
              ></div>

              {/* Event Content */}
              <div className="p-6">
                {/* Status Badge */}
                <div className="flex justify-between items-start mb-4">
                  {getStatusBadge(event.status)}
                  <span className="text-pixel-gold text-xs uppercase tracking-widest">
                    {event.type}
                  </span>
                </div>

                {/* Date */}
                <div className="text-white text-sm font-bold uppercase tracking-widest mb-3">
                  {event.date}
                </div>

                {/* Event Name */}
                <h3 className="text-xl font-bold text-white mb-3 group-hover:text-pixel-gold transition">
                  {event.name}
                </h3>

                {/* Description */}
                <p className="text-gray-400 text-sm leading-relaxed mb-4">
                  {event.description}
                </p>

                {/* Action Button */}
                {event.status === "upcoming" && (
                  <button className="w-full px-4 py-2 border border-pixel-gold/50 bg-black/40 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition">
                    Register Now
                  </button>
                )}
                {event.status === "live" && (
                  <button className="w-full px-4 py-2 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-xs tracking-widest rounded hover:bg-red-900/30 transition animate-pulse">
                    Join Live
                  </button>
                )}
                {event.status === "past" && (
                  <button className="w-full px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-500 uppercase text-xs tracking-widest rounded cursor-not-allowed">
                    Event Ended
                  </button>
                )}
              </div>
            </div>
          ))}
        </div>

        {/* Footer Info */}
        <div className="mt-12 text-center">
          <p className="text-gray-500 text-sm">
            Stay updated with our latest events and announcements
          </p>
        </div>
      </div>
    </section>
  );
}