import { motion } from "framer-motion";
import { useLanguage } from "@/contexts/LanguageContext";
import { Star, Quote } from "lucide-react";

const testimonials = [
  { textKey: "testimonial.1.text", authorKey: "testimonial.1.author" },
  { textKey: "testimonial.2.text", authorKey: "testimonial.2.author" },
  { textKey: "testimonial.3.text", authorKey: "testimonial.3.author" },
];

const TestimonialsSection = () => {
  const { t } = useLanguage();

  return (
    <section className="relative py-28 md:py-36 section-dark">
      <div className="section-divider-glow w-full absolute top-0" />

      {/* Ambient glow */}
      <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[500px] h-[300px] pointer-events-none" style={{
        background: "radial-gradient(ellipse, hsl(0 100% 50% / 0.025) 0%, transparent 70%)",
      }} />

      <div className="container mx-auto px-6 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8 }}
          className="text-center mb-20"
        >
          <span className="eyebrow-label mb-4 block">Testimonials</span>
          <h2 className="section-heading">
            {t("testimonials.title")}
          </h2>
          <p className="section-subheading">
            {t("testimonials.subtitle")}
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
          {testimonials.map((item, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.12, duration: 0.6 }}
              className="glass-panel-elevated rounded-xl p-7 flex flex-col group hover:border-primary/15 transition-all duration-500"
            >
              {/* Quote icon */}
              <div className="mb-5">
                <Quote className="w-8 h-8 text-primary/30 group-hover:text-primary/50 transition-colors duration-500" strokeWidth={1.5} />
              </div>

              {/* Stars */}
              <div className="flex gap-1 mb-4">
                {[...Array(5)].map((_, s) => (
                  <Star key={s} className="w-3.5 h-3.5 fill-primary text-primary" />
                ))}
              </div>

              <p className="font-body text-sm text-muted-foreground leading-relaxed flex-1 italic">
                {t(item.textKey)}
              </p>

              {/* Author */}
              <div className="mt-6 pt-5 border-t border-foreground/[0.06]">
                <p className="font-display text-sm text-foreground font-semibold tracking-wide">
                  {t(item.authorKey)}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TestimonialsSection;
