const items = [
  { title: "Expert Instructors", desc: "Learn from licensed attorneys and certified estate planners", icon: "🧑‍🏫" },
  { title: "Live & On-Demand", desc: "Join live sessions or watch recordings at your convenience", icon: "🎥" },
  { title: "Certificates", desc: "Earn completion certificates for premium courses", icon: "🏅" },
  { title: "Secure Platform", desc: "Your data and payments are protected with enterprise security", icon: "🔒" },
];

export default function WhyWithUs() {
  return (
    <section className="py-28 bg-gradient-to-br from-gray-50 via-white to-blue-50 dark:from-darkbg dark:via-slate-900 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">
            🌟 Why Learn With <span className="text-primary">Us?</span>
          </h2>
          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
            Expert guidance, practical knowledge, and actionable insights to protect your legacy
          </p>
        </div>

        <div className="grid md:grid-cols-4 gap-6 mt-12">
          {items.map((it, idx) => (
            <div
              key={it.title}
              className="group relative"
            >
              {/* Subtle background gradient */}
              <div className="absolute -inset-0.5 bg-primary/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>

              <div className="relative bg-white dark:bg-slate-800/60 rounded-2xl p-8 border border-gray-200 dark:border-slate-700 transition-all duration-300 group-hover:shadow-elevation-2 group-hover:-translate-y-1 backdrop-blur-sm h-full flex flex-col">
                {/* Top border accent */}
                <div className="absolute top-0 left-0 right-0 h-1 bg-primary opacity-0 group-hover:opacity-100 rounded-t-2xl transition-opacity duration-300"></div>

                {/* Icon */}
                <div className="h-16 w-16 rounded-2xl bg-primary/20 flex items-center justify-center text-4xl group-hover:scale-110 group-hover:shadow-glow transition-all duration-300 mx-auto">
                  {it.icon}
                </div>

                {/* Title */}
                <h3 className="font-bold text-lg text-gray-900 dark:text-white mt-5 text-center group-hover:text-primary transition-colors duration-300">
                  {it.title}
                </h3>

                {/* Description */}
                <p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center leading-relaxed flex-grow font-medium">
                  {it.desc}
                </p>

                {/* Bottom accent bar */}
                <div className="mt-5 pt-5 border-t border-gray-200 dark:border-slate-700 text-xs font-bold text-primary dark:text-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-center">
                  Learn More →
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}