import React from 'react';
import { motion } from 'framer-motion';
import { COLLECTIONS } from '../constants';

const Collections: React.FC = () => {
    return (
        <>
            <section className="pt-32 pb-24 px-6 md:px-12 bg-stone-50 dark:bg-stone-900 min-h-screen">
                <div className="max-w-[1920px] mx-auto">
                    {/* Header */}
                    <div className="mb-24 text-center">
                        <motion.h1
                            initial={{ y: 20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ delay: 0.5, duration: 0.8 }}
                            className="font-display text-5xl md:text-7xl font-light mb-6 text-text-main dark:text-white"
                        >
                            Collections
                        </motion.h1>
                        <motion.p
                            initial={{ y: 20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ delay: 0.7, duration: 0.8 }}
                            className="font-body text-stone-500 max-w-xl mx-auto text-lg font-light leading-relaxed"
                        >
                            Curated series of functional objects. Each collection explores a distinct form language and glaze palette.
                        </motion.p>
                    </div>

                    {/* Grid */}
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-16">
                        {COLLECTIONS.map((item, index) => (
                            <motion.div
                                key={item.id}
                                initial={{ y: 40, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                transition={{ delay: 0.2 + (index * 0.1), duration: 0.8, ease: "easeOut" }}
                                className="group cursor-pointer"
                            >
                                {/* Image Container with Darker Background for Contrast */}
                                <div className={`relative overflow-hidden mb-6 ${item.aspectRatio || 'aspect-[3/4]'} bg-stone-200 dark:bg-stone-800`}>
                                    <motion.img
                                        src={item.image}
                                        alt={item.title}
                                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 relative z-10"
                                        whileHover={{ scale: 1.05 }}
                                    />
                                    {/* Overlay on hover */}
                                    <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500 z-20 pointer-events-none" />
                                </div>

                                <div className="flex justify-between items-end border-b border-stone-200 dark:border-stone-800 pb-4">
                                    <div>
                                        <span className="text-xs uppercase tracking-widest text-stone-400 mb-1 block">{item.number}</span>
                                        <h3 className="font-display text-2xl text-text-main dark:text-white">{item.title}</h3>
                                    </div>
                                    <span className="material-symbols-outlined opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 text-stone-400">arrow_forward</span>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>
            </section>
        </>
    );
};

export default Collections;