"use client";

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

export default function SummerCamp() {
  const lang = getStoredLanguage();
  const t = getTranslation(lang).summerCampPage;

  const schedule = [
    { time: "6:00 AM - 7:00 AM", activity: t.schedule1 },
    { time: "7:00 AM - 8:00 AM", activity: t.schedule2 },
    { time: "8:00 AM - 10:00 AM", activity: t.schedule3 },
    { time: "10:00 AM - 11:00 AM", activity: "Tea Break & Discussion" },
    { time: "11:00 AM - 1:00 PM", activity: t.schedule4 },
    { time: "1:00 PM - 2:00 PM", activity: "Lunch" },
    { time: "2:00 PM - 3:00 PM", activity: "Rest & Personal Study" },
    { time: "3:00 PM - 5:00 PM", activity: "Spiritual Activities" },
    { time: "5:00 PM - 6:00 PM", activity: "Evening Prayer & Kirtan" },
    { time: "6:00 PM - 7:00 PM", activity: "Dinner" },
    { time: "7:00 PM - 8:30 PM", activity: "Satsang & Q&A" },
  ];

  const highlights = [
    t.highlight1,
    t.highlight2,
    t.highlight3,
    "Personal one-on-one mentorship sessions",
    "Traditional kirtan and bhajan singing",
    "Visits to sacred temples and spiritual sites",
    "Vegetarian meals prepared with love",
    t.highlight4,
  ];

  const features = [
    { icon: <Sunrise className="w-12 h-12" />, title: t.feature1Title, description: t.feature1Description },
    { icon: <BookOpen className="w-12 h-12" />, title: t.feature2Title, description: t.feature2Description },
    { icon: <Heart className="w-12 h-12" />, title: t.feature3Title, description: t.feature3Description },
  ];

  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>
            <div className="max-w-4xl mx-auto text-center">
              <div className="inline-block mb-4 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-full text-sm font-semibold">{t.badge}</div>
              <h1 className="text-5xl md:text-6xl font-bold mb-6">{t.title}</h1>
              <p className="text-xl md:text-2xl text-orange-100 mb-8">{t.subtitle}</p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <Button size="lg" className="bg-white text-[#FAA631] hover:bg-orange-50 text-lg px-8 py-6">{t.registerNow}</Button>
                <Button size="lg" variant="outline" className="text-lg px-8 py-6 border-2 border-white text-[#FAA631] hover:bg-white/10">{t.downloadBrochure}</Button>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
            <AnimatedSection>
              <Card className="text-center hover:shadow-xl transition-all duration-300">
                <CardContent className="pt-8">
                  <Calendar className="w-12 h-12 text-[#FAA631] mx-auto mb-4" />
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{t.durationTitle}</h3>
                  <p className="text-gray-600">{t.durationText}</p>
                  <p className="text-sm text-gray-500 mt-2">{t.durationDate}</p>
                </CardContent>
              </Card>
            </AnimatedSection>

            <AnimatedSection delay={100}>
              <Card className="text-center hover:shadow-xl transition-all duration-300">
                <CardContent className="pt-8">
                  <MapPin className="w-12 h-12 text-[#FAA631] mx-auto mb-4" />
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{t.locationTitle}</h3>
                  <p className="text-gray-600">{t.locationText}</p>
                  <p className="text-sm text-gray-500 mt-2">{t.locationPlace}</p>
                </CardContent>
              </Card>
            </AnimatedSection>

            <AnimatedSection delay={200}>
              <Card className="text-center hover:shadow-xl transition-all duration-300">
                <CardContent className="pt-8">
                  <Users className="w-12 h-12 text-[#FAA631] mx-auto mb-4" />
                  <h3 className="text-xl font-bold text-gray-900 mb-2">{t.capacityTitle}</h3>
                  <p className="text-gray-600">{t.capacityText}</p>
                  <p className="text-sm text-gray-500 mt-2">{t.capacityNote}</p>
                </CardContent>
              </Card>
            </AnimatedSection>
          </div>

          <AnimatedSection className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">{t.highlightsTitle}</h2>
              <p className="text-xl text-gray-600">{t.highlightsDescription}</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {highlights.map((item, index) => (
                <div key={index} className="flex items-start space-x-3">
                  <CheckCircle className="w-6 h-6 text-[#FAA631] flex-shrink-0 mt-1" />
                  <span className="text-gray-700 text-lg">{item}</span>
                </div>
              ))}
            </div>
          </AnimatedSection>
        </div>
      </section>

      <section className="py-20 bg-gradient-to-br from-orange-50 to-white">
        <div className="container mx-auto px-4">
          <AnimatedSection className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">{t.scheduleTitle}</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{t.scheduleDescription}</p>
          </AnimatedSection>

          <div className="max-w-3xl mx-auto">
            {schedule.map((item, index) => (
              <AnimatedSection key={index} delay={index * 30}>
                <div className="flex items-center space-x-4 mb-4 p-4 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300">
                  <div className="flex-shrink-0 w-32 text-[#FAA631] font-semibold text-sm">{item.time}</div>
                  <div className="flex-grow text-gray-700 text-lg">{item.activity}</div>
                </div>
              </AnimatedSection>
            ))}
          </div>
        </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 md:text-5xl font-bold text-gray-900 mb-4">{t.specialTitle}</h2>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <AnimatedSection key={index} delay={index * 100}>
                <Card className="h-full text-center hover:shadow-xl transition-all duration-300">
                  <CardContent className="pt-8">
                    <div className="flex justify-center text-[#FAA631] mb-4">{feature.icon}</div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3">{feature.title}</h3>
                    <p className="text-gray-600">{feature.description}</p>
                  </CardContent>
                </Card>
              </AnimatedSection>
            ))}
          </div>
        </div>
      </section>

      <section className="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">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 md:p-12">
              <h2 className="text-4xl md:text-5xl font-bold mb-6 text-center">{t.investmentTitle}</h2>
              <div className="text-center mb-8">
                <div className="text-6xl font-bold mb-2">{t.price}</div>
                <p className="text-xl text-orange-100">{t.investmentDescription}</p>
              </div>
              <div className="space-y-3 mb-8">
                <div className="flex items-center justify-center space-x-2"><CheckCircle className="w-5 h-5" /><span>{t.investmentItem1}</span></div>
                <div className="flex items-center justify-center space-x-2"><CheckCircle className="w-5 h-5" /><span>{t.investmentItem2}</span></div>
                <div className="flex items-center justify-center space-x-2"><CheckCircle className="w-5 h-5" /><span>{t.investmentItem3}</span></div>
              </div>
              <div className="text-center">
                <Button size="lg" className="bg-white text-[#FAA631] hover:bg-orange-50 text-lg px-12 py-6">{t.reserveNow}</Button>
                <p className="text-sm mt-4 text-orange-100">{t.earlyBird}</p>
              </div>
            </div>
          </AnimatedSection>
        </div>
      </section>
    </div>
  );
}