'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { CategoryIcon, Icon } from './icons';
import { site } from '@/lib/site';

interface Props {
    counts?: Record<string, number>;
}

const meta: Record<string, { tagline: string }> = {
    'generators': { tagline: 'Diesel · Gasoline · Welding · Engines' },
    'water-pumps': { tagline: 'Submersible · Surface · Diesel · Petrol' },
    'agricultural-machinery-uganda': { tagline: 'Sprayers · Cutters · Harvesters · Tillers' },
    'power-tools': { tagline: 'Drills · Grinders · Hammers · Cordless' },
};

export function CategoryGrid({ counts = {} }: Props) {
    return (
        <section className="section-pad bg-mesh-steel bg-noise relative">
            <div className="container-jt">
                <SectionHead
                    eyebrow="Shop the catalog"
                    title="Browse by Category"
                    sub="Four core ranges, deep stock, and a quote turnaround you can plan around."
                />
                <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">
                    {site.categories.map((cat, i) => (
                        <motion.div
                            key={cat.slug}
                            initial={{ opacity: 0, y: 24 }}
                            whileInView={{ opacity: 1, y: 0 }}
                            viewport={{ once: true, amount: 0.4 }}
                            transition={{ duration: 0.5, delay: i * 0.08, ease: [0.22, 1, 0.36, 1] }}
                        >
                            <Link
                                href={`/category/${cat.slug}`}
                                className="group block glass border-glow rounded-2xl p-7 h-full"
                            >
                                <div className="w-14 h-14 rounded-xl bg-orange-600/10 text-orange-500 flex items-center justify-center mb-5 group-hover:bg-orange-600 group-hover:text-white transition-colors">
                                    <CategoryIcon slug={cat.slug} className="w-6 h-6" />
                                </div>
                                <h3 className="font-display text-2xl text-white mb-1.5">{cat.label}</h3>
                                <p className="text-sm text-steel-400 mb-5 min-h-[2.5em]">
                                    {meta[cat.slug]?.tagline ?? 'Browse the full range'}
                                </p>
                                <div className="flex items-center justify-between pt-4 border-t border-white/5">
                                    <span className="font-mono text-xs text-steel-500 uppercase tracking-widest">
                                        {counts[cat.slug] ? `${counts[cat.slug]} products` : 'Browse'}
                                    </span>
                                    <span className="text-orange-500 inline-flex items-center gap-1 text-sm font-semibold uppercase tracking-wide group-hover:gap-2 transition-all">
                                        Explore <Icon.ArrowRight className="w-4 h-4" />
                                    </span>
                                </div>
                            </Link>
                        </motion.div>
                    ))}
                </div>
            </div>
        </section>
    );
}

export function SectionHead({ eyebrow, title, sub, align = 'center' }: { eyebrow?: string; title: string; sub?: string; align?: 'left' | 'center' }) {
    return (
        <div className={`max-w-3xl ${align === 'center' ? 'mx-auto text-center' : ''}`}>
            {eyebrow && (
                <span className="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.18em] text-orange-500 mb-3">
                    <span className="w-7 h-px bg-orange-500" />
                    {eyebrow}
                </span>
            )}
            <h2 className="font-display text-white text-[clamp(2rem,3.6vw,3rem)] leading-tight mb-3">{title}</h2>
            {sub && <p className="text-steel-400 text-base lg:text-lg max-w-2xl mx-auto">{sub}</p>}
        </div>
    );
}