'use client';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Users, Award, Target, Heart, ArrowRight, MapPin } from 'lucide-react';
import { CounterAnimation } from '@/components/public/counter-animation';
import { useLanguage } from '@/lib/i18n/language-context';

export default function AboutPage() {
  const { t } = useLanguage();

  return (
    <div>
      {/* Hero */}
      <section className="relative h-[400px] overflow-hidden">
        <div className="absolute inset-0">
          <Image src="/images/about.jpg" alt="About 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.about.title} <span className="text-red-500">{t.about.titleHighlight}</span></h1>
            <p className="mt-3 text-gray-300 text-lg max-w-lg">{t.about.subtitle}</p>
          </motion.div>
        </div>
      </section>

      {/* Story */}
      <section className="py-16">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
              <h2 className="font-display text-3xl font-bold tracking-tight">{t.about.storyTitle} <span className="text-red-600">{t.about.storyHighlight}</span></h2>
              <p className="mt-4 text-gray-600 leading-relaxed">{t.about.storyP1}</p>
              <p className="mt-4 text-gray-600 leading-relaxed">{t.about.storyP2}</p>
              <p className="mt-4 text-gray-600 leading-relaxed">{t.about.storyP3}</p>
            </motion.div>
            <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="grid grid-cols-2 gap-6">
              {[
                { icon: Users, value: 500, label: t.about.happyClients, suffix: '+' },
                { icon: Award, value: 10, label: t.about.yearsExp, suffix: '+' },
                { icon: Target, value: 1000, label: t.about.equipSold, suffix: '+' },
                { icon: Heart, value: 98, label: t.about.satisfaction, suffix: '%' },
              ]?.map((stat: any, i: number) => (
                <div key={i} className="bg-white rounded-xl p-6 shadow-md text-center hover:shadow-lg transition">
                  <stat.icon className="w-8 h-8 text-red-500 mx-auto mb-3" />
                  <div className="text-2xl font-bold text-gray-900">
                    <CounterAnimation end={stat?.value ?? 0} suffix={stat?.suffix ?? ''} />
                  </div>
                  <p className="text-xs text-gray-500 mt-1">{stat?.label ?? ''}</p>
                </div>
              ))}
            </motion.div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-16 bg-[#1a1a1a] text-white">
        <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-10">
            <h2 className="font-display text-3xl font-bold tracking-tight">{t.about.valuesTitle} <span className="text-red-500">{t.about.valuesHighlight}</span></h2>
          </motion.div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { title: t.about.integrity, desc: t.about.integrityDesc },
              { title: t.about.quality, desc: t.about.qualityDesc },
              { title: t.about.service, desc: t.about.serviceDesc },
            ]?.map((v: 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="bg-white/5 p-8 rounded-xl border border-white/10">
                <h3 className="text-xl font-bold text-red-500 mb-3">{v?.title ?? ''}</h3>
                <p className="text-gray-400 leading-relaxed">{v?.desc ?? ''}</p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Location */}
      <section className="py-16">
        <div className="max-w-[1200px] mx-auto px-4 text-center">
          <MapPin className="w-10 h-10 text-red-500 mx-auto mb-4" />
          <h2 className="font-display text-3xl font-bold tracking-tight">{t.about.visitUs}</h2>
          <p className="text-gray-500 mt-2 text-lg">1444 North Broad St, Hillside NJ 07205</p>
          <Link href="/contact" className="inline-flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg font-semibold text-sm transition mt-6">
            {t.about.contactUs} <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </section>
    </div>
  );
}