"use client";

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

export default function ShikshaGuru() {
  const lang = getStoredLanguage();
  const t = getTranslation(lang).shikshaGuruPage;

  const teachers = [
    { name: "Radha Devi", specialization: t.teacher1Spec, experience: t.teacher1Exp },
    { name: "Arjun Das", specialization: t.teacher2Spec, experience: t.teacher2Exp },
    { name: "Saraswati Devi", specialization: t.teacher3Spec, experience: t.teacher3Exp },
    { name: "Krishna Das", specialization: t.teacher4Spec, experience: t.teacher4Exp },
  ];

  const features = [
    { icon: <BookOpen className="w-12 h-12" />, title: t.feature1Title, description: t.feature1Description },
    { icon: <Heart className="w-12 h-12" />, title: t.feature2Title, description: t.feature2Description },
    { icon: <Star 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 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.facultyTitle}</h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">{t.facultyDescription}</p>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {teachers.map((teacher, index) => (
              <AnimatedSection key={index} delay={index * 100}>
                <Card className="hover:shadow-xl transition-all duration-300">
                  <CardContent className="pt-8">
                    <div className="flex items-start space-x-4">
                      <div className="w-20 h-20 bg-gradient-to-br from-orange-100 to-orange-50 rounded-full flex items-center justify-center flex-shrink-0">
                        <Users className="w-10 h-10 text-[#FAA631]" />
                      </div>
                      <div className="flex-grow">
                        <h3 className="text-2xl font-bold text-gray-900 mb-2">{teacher.name}</h3>
                        <p className="text-[#FAA631] font-semibold mb-2">{teacher.specialization}</p>
                        <p className="text-gray-600">{teacher.experience} {t.experienceSuffix}</p>
                      </div>
                    </div>
                  </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="text-center mb-16">
            <h2 className="text-4xl font-bold text-gray-900 mb-4">{t.specialTitle}</h2>
          </AnimatedSection>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            {features.map((feature, index) => (
              <AnimatedSection key={index} delay={index * 100}>
                <Card className="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>
    </div>
  );
}