'use client';

import { motion } from 'framer-motion';
import { Icon } from './icons';
import { SectionHead } from './category-grid';

const features = [
    { icon: Icon.Shield, title: 'Manufacturer Warranty', body: 'Every unit ships with manufacturer warranty terms. Honored locally — no overseas claim runaround.' },
    { icon: Icon.Truck, title: 'Country-wide Delivery', body: 'Dispatch to Mbarara, Gulu, Mbale, Jinja and beyond. Logistics tracked and confirmed.' },
    { icon: Icon.Cog, title: 'Genuine Spare Parts', body: 'OEM parts stocked in Industrial Area. A service call doesn’t become a 3-week wait.' },
    { icon: Icon.Headphones, title: 'Technician Support', body: 'You speak to someone who has actually serviced the kit. Not a sales script.' },
];

export function WhyChooseUs() {
    return (
        <section className="section-pad bg-ink-950 relative">
            <div className="container-jt">
                <SectionHead eyebrow="Why JamaliTech" title="Equipment is only half the job" sub="What separates us is what happens after the truck leaves the yard." />
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5 lg:gap-6 xl:gap-7 mt-10 lg:mt-14">
                    {features.map((f, i) => (
                        <motion.div
                            key={f.title}
                            initial={{ opacity: 0, y: 24 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true, amount: 0.4 }}
                            transition={{ duration: 0.5, delay: i * 0.08 }}
                            className="glass border-glow rounded-xl p-7"
                        >
                            <div className="w-12 h-12 rounded-lg bg-orange-600/10 text-orange-500 flex items-center justify-center mb-5">
                                <f.icon className="w-6 h-6" />
                            </div>
                            <h3 className="font-display text-xl text-white mb-2">{f.title}</h3>
                            <p className="text-sm text-steel-400 leading-relaxed">{f.body}</p>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
}