import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import { Link } from '@inertiajs/react';

const products = [
    { id: 1, name: 'Apex Hoodie', price: '€149', tag: 'New', category: 'Midnight Collection' },
    { id: 2, name: 'Velocity Tee', price: '€79', tag: 'Hot', category: 'Track Essentials' },
    { id: 3, name: 'Carbon Cap', price: '€59', tag: null, category: 'Apex Series' },
    { id: 4, name: 'Racing Jacket', price: '€299', tag: 'Limited', category: 'Midnight Collection' },
];

export default function ProductShowcase() {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-100px' });

    return (
        <section ref={ref} className="bg-[#0a0a0a] px-6 py-32 md:px-12">
            <motion.div
                initial={{ opacity: 0, y: 40 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.8 }}
                className="mb-16 text-center"
            >
                <p className="mb-3 text-xs tracking-[0.5em] text-red-600 uppercase">Bestsellers</p>
                <h2 className="text-[clamp(2.5rem,6vw,5rem)] font-black text-white"
                    style={{ fontFamily: '"Bebas Neue", "Arial Narrow", sans-serif' }}>
                    FEATURED PIECES
                </h2>
            </motion.div>

            <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
                {products.map((product, i) => (
                    <motion.div
                        key={product.id}
                        initial={{ opacity: 0, y: 60 }}
                        animate={inView ? { opacity: 1, y: 0 } : {}}
                        transition={{ duration: 0.8, delay: i * 0.1 }}
                    >
                        <Link href={`/product/${product.id}`} className="group block">
                            <div className="relative mb-4 overflow-hidden bg-[#111] aspect-[3/4] border border-white/5">
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <p className="text-[5rem] font-black text-white/5 select-none"
                                        style={{ fontFamily: '"Bebas Neue", "Arial Narrow", sans-serif' }}>
                                        V
                                    </p>
                                </div>
                                <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/60" />

                                {product.tag && (
                                    <div className="absolute left-3 top-3 bg-red-600 px-2 py-1 text-[9px] tracking-[0.2em] text-white uppercase">
                                        {product.tag}
                                    </div>
                                )}

                                <div className="absolute bottom-0 left-0 right-0 translate-y-full p-4 transition-transform duration-500 group-hover:translate-y-0">
                                    <button className="w-full border border-white/20 bg-black/80 py-3 text-xs tracking-[0.3em] text-white uppercase backdrop-blur-sm hover:border-red-600/50 hover:bg-red-600/10 transition-all">
                                        Add to Cart
                                    </button>
                                </div>

                                <div className="absolute inset-0 border border-red-600/0 transition-all duration-500 group-hover:border-red-600/20" />
                            </div>

                            <p className="mb-1 text-[10px] tracking-[0.3em] text-white/30 uppercase">{product.category}</p>
                            <div className="flex items-center justify-between">
                                <h3 className="text-sm font-medium text-white">{product.name}</h3>
                                <p className="text-sm text-red-600">{product.price}</p>
                            </div>
                        </Link>
                    </motion.div>
                ))}
            </div>
        </section>
    );
}