'use client';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { CheckCircle2, Truck, Shield, DollarSign, Headphones, Wrench, Globe, ArrowRight } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/language-context';

const advantageIcons = [Truck, Shield, DollarSign, Headphones, Wrench, Globe];

export default function WhyUsPage() {
  const { t } = useLanguage();
  const advantages = t.whyUs.advantages;
  const steps = t.whyUs.steps;

  return (
    <div>
      {/* Hero */}
      <section className="relative h-[400px] overflow-hidden">
        <div className="absolute inset-0">
          <Image src="/images/why-us.jpg" alt="Why choose Evo Truck Sales" fill className="object-cover" />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-transparent" />
        </div>
        <div className="relative z-10 max-w-[1200px] mx-auto px-4 h-full flex items-center">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
            <h1 className="font-display text-4xl md:text-5xl font-bold text-white tracking-tight">{t.whyUs.title} <span className="text-red-500">{t.whyUs.titleHighlight}</span>?</h1>
            <p className="mt-3 text-gray-300 text-lg max-w-lg">{t.whyUs.subtitle}</p>
          </motion.div>
        </div>
      </section>

      {/* Advantages */}
      <section className="py-16 bg-[#faf5ef]">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {(advantages ?? [])?.map((adv: any, i: number) => {
              const Icon = advantageIcons[i] || Truck;
              return (
                <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.1 }} className="bg-white rounded-xl p-6 shadow-md hover:shadow-xl transition-all hover:-translate-y-1">
                  <div className="w-12 h-12 rounded-lg bg-red-50 flex items-center justify-center mb-4">
                    <Icon className="w-6 h-6 text-red-600" />
                  </div>
                  <h3 className="font-semibold text-lg text-gray-900">{adv?.title ?? ''}</h3>
                  <p className="text-gray-500 text-sm mt-2 leading-relaxed">{adv?.desc ?? ''}</p>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="py-16">
        <div className="max-w-[1200px] mx-auto px-4">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-12">
            <h2 className="font-display text-3xl font-bold tracking-tight">{t.whyUs.processTitle} <span className="text-red-600">{t.whyUs.processHighlight}</span></h2>
            <p className="text-gray-500 mt-2">{t.whyUs.processSubtitle}</p>
          </motion.div>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            {(steps ?? [])?.map((s: any, i: number) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.15 }} className="text-center">
                <div className="w-16 h-16 rounded-full bg-red-600 text-white flex items-center justify-center text-2xl font-bold mx-auto">{s?.step ?? ''}</div>
                <h3 className="font-semibold text-lg mt-4">{s?.title ?? ''}</h3>
                <p className="text-gray-500 text-sm mt-2">{s?.desc ?? ''}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="py-16 bg-[#1a1a1a] text-white">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="max-w-2xl mx-auto text-center">
            <h2 className="font-display text-3xl font-bold tracking-tight mb-8">{t.whyUs.testimonialTitle} <span className="text-red-500">{t.whyUs.testimonialHighlight}</span></h2>
            <div className="bg-white/5 rounded-xl p-8 border border-white/10">
              <p className="text-gray-300 text-lg italic leading-relaxed">
                &ldquo;{t.whyUs.testimonial}&rdquo;
              </p>
              <div className="mt-4 flex items-center justify-center gap-1">
                {[1, 2, 3, 4, 5]?.map((s: number) => <span key={s} className="text-yellow-400 text-xl">★</span>)}
              </div>
              <p className="mt-2 text-gray-400 text-sm">{t.whyUs.testimonialAuthor}</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-red-600 text-white text-center">
        <div className="max-w-[1200px] mx-auto px-4">
          <h2 className="font-display text-3xl font-bold tracking-tight">{t.whyUs.ctaTitle}</h2>
          <p className="mt-2 text-red-100">{t.whyUs.ctaDesc}</p>
          <Link href="/contact" className="inline-flex items-center gap-2 bg-white text-red-600 hover:bg-gray-100 px-8 py-3.5 rounded-lg font-semibold text-sm transition mt-6">
            {t.whyUs.contactUs} <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </section>
    </div>
  );
}