import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const horizontalImages = [
    { src: '/pottery-vase.png', title: 'Handcrafted Vases', description: 'Each vase tells a story of patience and craft' },
    { src: '/pottery-bowls.png', title: 'Artisan Bowls', description: 'Organic forms inspired by nature' },
    { src: '/pottery-plates.png', title: 'Dinner Collection', description: 'Elevate your everyday dining experience' },
    { src: '/pottery-studio.png', title: 'Our Studio', description: 'Where creativity meets tradition' },
    { src: '/ceramic-cups.png', title: 'Ceramic Cups', description: 'Handmade with love and intention' },
];

const HorizontalScrollSection: React.FC = () => {
    const containerRef = useRef<HTMLDivElement>(null);
    const scrollRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const container = containerRef.current;
        const scrollContainer = scrollRef.current;

        if (!container || !scrollContainer) return;

        const scrollWidth = scrollContainer.scrollWidth - window.innerWidth;

        const tween = gsap.to(scrollContainer, {
            x: -scrollWidth,
            ease: 'none',
            scrollTrigger: {
                trigger: container,
                start: 'top top',
                end: () => `+=${scrollWidth * 0.5}`,
                scrub: 1,
                pin: true,
                anticipatePin: 1,
            },
        });

        return () => {
            tween.scrollTrigger?.kill();
            tween.kill();
        };
    }, []);

    return (
        <section ref={containerRef} className="relative overflow-hidden bg-clay-dark">
            <div
                ref={scrollRef}
                className="flex h-screen items-center"
            >
                {horizontalImages.map((image, index) => (
                    <div
                        key={index}
                        className="relative flex-shrink-0 w-[90vw] md:w-[75vw] h-screen flex items-center justify-center p-4 md:p-8"
                    >
                        <div className="relative w-full h-full max-w-5xl max-h-[80vh] overflow-hidden rounded-lg shadow-2xl group">
                            <img
                                src={image.src}
                                alt={image.title}
                                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                            />
                            <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent" />
                            <div className="absolute bottom-0 left-0 p-12 text-white">
                                <h3 className="font-display text-5xl md:text-6xl font-light mb-4">{image.title}</h3>
                                <p className="font-body text-lg font-light opacity-80 max-w-md">{image.description}</p>
                            </div>
                        </div>
                        <div className="absolute top-1/2 right-8 -translate-y-1/2 text-white/20 font-display text-[15rem] leading-none select-none pointer-events-none">
                            {String(index + 1).padStart(2, '0')}
                        </div>
                    </div>
                ))}
            </div>
            <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex items-center gap-4 text-white/60">
                <span className="material-symbols-outlined text-sm">arrow_back</span>
                <span className="text-xs uppercase tracking-[0.3em] font-light">Scroll to explore</span>
                <span className="material-symbols-outlined text-sm">arrow_forward</span>
            </div>
        </section>
    );
};

export default HorizontalScrollSection;