Stack Scroll

"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform } from "framer-motion";

interface StackScrollItem {
    title: string;
    description: string;
    gradient: string;
}

interface StackScrollProps {
    items: StackScrollItem[];
}

function StackCard({ item, index, total }: { item: StackScrollItem; index: number; total: number }) {
    const ref = useRef<HTMLDivElement>(null);
    const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });

    const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.85, 1, 0.9]);
    const y = useTransform(scrollYProgress, [0, 0.5, 1], [60, 0, -20]);
    const opacity = useTransform(scrollYProgress, [0, 0.2, 0.8, 1], [0, 1, 1, 0.3]);

    return (
        <motion.div
            ref={ref}
            style={{ scale, y, opacity, zIndex: index }}
            className={`relative w-full rounded-3xl p-10 border border-white/10 min-h-[260px] flex flex-col justify-between overflow-hidden ${item.gradient}`}
        >
            <div className="absolute inset-0 bg-black/20" />
            <div className="relative">
                <span className="text-xs font-mono text-white/50 uppercase tracking-widest mb-3 block">{String(index + 1).padStart(2, "0")}</span>
                <h3 className="text-white text-2xl font-bold">{item.title}</h3>
                <p className="text-white/60 mt-3 leading-relaxed max-w-lg">{item.description}</p>
            </div>
        </motion.div>
    );
}

export function StackScroll({ items }: StackScrollProps) {
    return (
        <div className="relative flex flex-col gap-6">
            {items.map((item, i) => (
                <StackCard key={i} item={item} index={i} total={items.length} />
            ))}
        </div>
    );
}