const items = [
  { quote: "The webinar on revocable living trusts was incredibly informative. I finally understand how to protect my assets and avoid probate.", name: "James Wilson", title: "Small Business Owner", role: "👨‍💼" },
  { quote: "As a senior citizen, I was confused about healthcare directives. The instructor explained everything clearly and answered all my questions.", name: "Margaret Foster", title: "Retiree", role: "👵" },
  { quote: "The tax planning webinar saved me thousands. I learned strategies I never knew existed. Worth every penny and more!", name: "Carlos Rodriguez", title: "Real Estate Investor", role: "🏢" },
];

export default function Testimonials() {
  return (
    <section className="py-28 bg-gradient-to-br from-white via-white to-blue-50 dark:from-darkbg dark:via-darkbg dark:to-slate-900">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center space-y-3 mb-16">
          <h2 className="text-5xl font-black text-gray-900 dark:text-white">
            ⭐ Trusted by <span className="text-primary">Thousands</span>
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
            Real feedback from people who transformed their financial future with us
          </p>
        </div>

        <div className="grid md:grid-cols-3 gap-6 mt-12">
          {items.map((t) => (
            <div
              key={t.name}
              className="group relative"
            >
              {/* Gradient border effect */}
              <div className="absolute -inset-0.5 bg-primary rounded-2xl opacity-0 group-hover:opacity-100 blur transition duration-300 group-hover:blur-lg"></div>

              <div className="relative bg-white dark:bg-slate-800/80 rounded-2xl shadow-soft group-hover:shadow-elevation-3 p-8 transition-all duration-300 group-hover:-translate-y-2 backdrop-blur-sm border border-gray-100 dark:border-slate-700">
                {/* Top accent */}
                <div className="absolute top-0 left-0 w-1 h-12 bg-primary rounded-bl-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                {/* Star rating */}
                <div className="flex gap-1 text-xl">
                  {[...Array(5)].map((_, i) => (
                    <span key={i} className="group-hover:scale-110 transition-transform duration-300" style={{ transitionDelay: `${i * 50}ms` }}>
                      ⭐
                    </span>
                  ))}
                </div>

                {/* Quote */}
                <p className="text-gray-700 dark:text-gray-300 mt-5 leading-relaxed font-medium text-sm md:text-base">
                  "{t.quote}"
                </p>

                {/* Author */}
                <div className="mt-6 flex items-center gap-4 pt-6 border-t border-gray-100 dark:border-slate-700">
                  <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center text-xl font-bold text-white shadow-glow group-hover:shadow-lg transition-all duration-300">
                    {t.role}
                  </div>
                  <div>
                    <div className="font-bold text-gray-900 dark:text-white text-sm md:text-base">{t.name}</div>
                    <div className="text-xs text-gray-500 dark:text-gray-400 font-semibold">{t.title}</div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Trust metrics */}
        <div className="grid md:grid-cols-3 gap-6 mt-20 pt-12 border-t border-gray-200 dark:border-gray-700">
          <div className="text-center hover-lift">
            <div className="text-4xl font-black text-primary">15,000+</div>
            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Students Graduated</div>
          </div>
          <div className="text-center hover-lift">
            <div className="text-4xl font-black text-secondary">4.9⭐</div>
            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Average Rating</div>
          </div>
          <div className="text-center hover-lift">
            <div className="text-4xl font-black text-accent">500+</div>
            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Expert-Led Courses</div>
          </div>
        </div>
      </div>
    </section>
  );
}