"use client";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import AnimatedSection from "@/components/AnimatedSection";
import { Calendar, MapPin, Users, Clock } from "lucide-react";
import { getStoredLanguage } from "@/lib/language";
import { getTranslation } from "@/src/hooks/useTranslation";

export default function Festivals() {
  const lang = getStoredLanguage();
  const t = getTranslation(lang).festivalsPage;

  const upcomingEvents = [
    {
      title: t.event1Title,
      date: t.event1Date,
      time: t.event1Time,
      location: "Main Temple, New Delhi",
      attendees: t.event1Attendees,
      description: t.event1Desc,
    },
    {
      title: t.event2Title,
      date: t.event2Date,
      time: t.event2Time,
      location: "Online & In-Person",
      attendees: t.event2Attendees,
      description: t.event2Desc,
    },
  ];

  return (
    <div className="pt-20">
      <section className="relative py-20 bg-gradient-to-br from-[#FAA631] to-[#FAA631] text-white">
        <div className="container mx-auto px-4">
          <AnimatedSection className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-6xl font-bold mb-6">{t.title}</h1>
            <p className="text-xl md:text-2xl text-orange-100">{t.subtitle}</p>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <AnimatedSection className="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">{t.upcomingTitle}</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{t.upcomingDescription}</p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
            {upcomingEvents.map((event, index) => (
              <AnimatedSection key={index} delay={index * 100}>
                <Card className="h-full hover:shadow-xl transition-all duration-300">
                  <CardHeader>
                    <CardTitle className="text-2xl">{event.title}</CardTitle>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <p className="text-gray-600">{event.description}</p>
                    <div className="space-y-3 pt-4 border-t">
                      <div className="flex items-center space-x-3 text-gray-700"><Calendar className="w-5 h-5 text-[#FAA631]" /><span>{event.date}</span></div>
                      <div className="flex items-center space-x-3 text-gray-700"><Clock className="w-5 h-5 text-[#FAA631]" /><span>{event.time}</span></div>
                      <div className="flex items-center space-x-3 text-gray-700"><MapPin className="w-5 h-5 text-[#FAA631]" /><span>{event.location}</span></div>
                      <div className="flex items-center space-x-3 text-gray-700"><Users className="w-5 h-5 text-[#FAA631]" /><span>{event.attendees} {t.expected}</span></div>
                    </div>
                    <Button className="w-full bg-[#FAA631] hover:bg-orange-400 mt-4">{t.register}</Button>
                  </CardContent>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-br from-orange-50 to-white">
        <div className="container mx-auto px-4">
          <AnimatedSection className="max-w-3xl mx-auto text-center">
            <h2 className="text-4xl font-bold text-gray-900 mb-6">{t.stayUpdatedTitle}</h2>
            <p className="text-xl text-gray-600 mb-8">{t.stayUpdatedDescription}</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <input type="email" placeholder={t.emailPlaceholder} className="px-6 py-3 rounded-lg border-2 border-gray-300 focus:border-orange-600 focus:outline-none" />
              <Button className="bg-[#FAA631] hover:bg-orange-400 px-8 py-3">{t.subscribe}</Button>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}