'use client';

import { motion } from 'framer-motion';
import { ShieldCheck, Headphones, Zap, Heart, Lock, BarChart3 } from 'lucide-react';

const reasons = [
  { icon: ShieldCheck, title: 'IRS Compliant', desc: 'All filings meet federal and state compliance standards with zero discrepancies.', color: 'text-emerald-600', bg: 'bg-emerald-50' },
  { icon: Headphones, title: 'Dedicated Support', desc: 'Personal account manager available for all your financial questions and needs.', color: 'text-blue-600', bg: 'bg-blue-50' },
  { icon: Zap, title: 'Fast Turnaround', desc: 'Quick processing times without sacrificing accuracy or attention to detail.', color: 'text-amber-600', bg: 'bg-amber-50' },
  { icon: Heart, title: 'Client-Centric', desc: 'Personalized strategies tailored to your unique financial situation and goals.', color: 'text-rose-600', bg: 'bg-rose-50' },
  { icon: Lock, title: 'Secure & Confidential', desc: 'Bank-level security protocols to protect your sensitive financial information.', color: 'text-violet-600', bg: 'bg-violet-50' },
  { icon: BarChart3, title: 'Data-Driven', desc: 'Leverage financial insights and analytics to make informed business decisions.', color: 'text-cyan-600', bg: 'bg-cyan-50' },
];

export function WhyChooseUs() {
  return (
    <section className="py-24 sm:py-32 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-b from-[hsl(var(--muted))] via-white to-white" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-[var(--gold)]/[0.03] rounded-full blur-[100px]" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block px-4 py-1.5 bg-[var(--navy)]/5 text-[var(--navy)] text-sm font-semibold rounded-full mb-4">Why Alpha CPA</span>
          <h2 className="font-display text-3xl sm:text-4xl font-bold text-[var(--navy)] tracking-tight mb-4">
            Why Clients <span className="text-gradient-gold">Trust</span> Us
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
            We combine expertise, technology, and personal attention to deliver exceptional financial services.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {reasons?.map((item: any, i: number) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-40px' }}
              transition={{ duration: 0.4, delay: i * 0.08 }}
              className="card-3d group bg-white rounded-2xl p-7 shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-lg)] border border-transparent hover:border-[var(--gold)]/10 transition-all"
            >
              <div className={`w-12 h-12 rounded-xl ${item.bg} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
                <item.icon className={`w-6 h-6 ${item.color}`} />
              </div>
              <h3 className="font-display font-bold text-[var(--navy)] mb-2">{item?.title ?? ''}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{item?.desc ?? ''}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}