"use client";

import { motion } from "framer-motion";
import { Quote, Star } from "lucide-react";

export default function ClientTestimonials({ dict, testimonials }: { dict: any, testimonials?: any[] }) {
  const defaultTestimonial = {
    quote: dict.testimonials?.quote || "\"We required a robust solution capable of destroying over 500 hard drives per week to comply with DoD standards. The high-security shredder provided not only met but exceeded our throughput expectations with zero downtime.\"",
    author: "James T.",
    company: dict.testimonials?.authorCompany || "Director of IT Security, Defense Contractor",
    rating: 5
  };

  const activeTestimonial = testimonials && testimonials.length > 0 ? testimonials[0] : defaultTestimonial;

  return (
    <section className="py-24 bg-brand-black relative overflow-hidden">
      <div className="absolute inset-0 z-0 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-brand-accent/20 via-transparent to-transparent opacity-60 blur-3xl" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          
          <motion.div 
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
          >
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-1 bg-brand-accent"></div>
              <span className="text-sm font-bold tracking-widest text-gray-400 uppercase">
                {dict.testimonials?.label || "Case Studies"}
              </span>
            </div>
            <h2 className="text-4xl md:text-5xl font-black text-white mb-8">
              {dict.testimonials?.title1 || "PROVEN RESULTS IN"} <br/>
              <span className="text-brand-accent">{dict.testimonials?.title2 || "SECURE DESTRUCTION"}</span>
            </h2>
            <p className="text-gray-400 text-lg mb-8">
              {dict.testimonials?.desc || "Discover how our shredding solutions have helped enterprises and government bodies achieve absolute data security and massive improvements in recycling efficiency."}
            </p>
          </motion.div>

          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="bg-white/5 border border-white/10 p-10 rounded-2xl relative"
          >
            <Quote className="absolute top-8 right-8 w-16 h-16 text-brand-accent/20" />
            <div className="flex gap-1 mb-6">
              {[...Array(activeTestimonial.rating || 5)].map((_, i) => (
                <Star key={i} className="w-5 h-5 text-brand-accent fill-brand-accent" />
              ))}
            </div>
            <p className="text-xl text-gray-200 font-medium italic mb-8 leading-relaxed relative z-10">
              "{activeTestimonial.content || activeTestimonial.quote}"
            </p>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-gray-700 rounded-full flex items-center justify-center text-white font-bold text-xl uppercase">
                {activeTestimonial.author ? activeTestimonial.author[0] : "C"}
              </div>
              <div>
                <div className="text-white font-bold">{activeTestimonial.author}</div>
                <div className="text-gray-400 text-sm">{activeTestimonial.company}</div>
              </div>
            </div>
          </motion.div>

        </div>
      </div>
    </section>
  );
}
