import { motion, useMotionValueEvent, useScroll, useTransform } from "motion/react"
import { useRef, useState } from "react"
import Braces from "./Braces"

const CardsSection = () => {
    const containerRef = useRef(null)
    const { scrollYProgress } = useScroll({
        target: containerRef,
        offset: ["start start", "end end"]
    })

    const leftValue = 100

    const [xValue, setXvalue] = useState(leftValue)
    const x = useTransform(scrollYProgress, [0, 1], [leftValue, 0])


    useMotionValueEvent(x, "change", (latest) => setXvalue(latest))

    const items = [
        { id: 1, color: "#ff0088", label: "Из идеи — в работающую концепцию", description: 'Мы погружаемся в задачу, формируем понятную и реализуемую концепцию и сразу определяем дальнейшие шаги', image: "/idea-BxLjsotP.png" },
        { id: 2, color: "#dd00ee", label: "Цены и процессы — без сюрпризов", description: 'Заранее фиксируем стоимость, этапы и зону ответственности, чтобы вы всегда понимали, за что платите и какой результат будет получен', image: "/money-DcU00l9G.png" },
        { id: 3, color: "#9911ff", label: "Ориентируемся на результат", description: 'Каждое решение мы строим так, чтобы приносить измеримый результат и реальную ценность вашему бизнесу', image: "/goal-BRVwp_WA.png" },
        { id: 4, color: "#0d63f8", label: "Контролируем сбои и устраняем", description: 'Мы оперативно реагируем на любые сбои, быстро устраняем их и гарантируем, что ваш проект всегда остаётся под полным контролем', image: "/info-CE1fB6DT.png" },
    ]

    return (
        <div ref={containerRef} style={{ height: "300vh" }} className='p-2 sm:p-0 flex justify-center overflow-clip'>
            <div style={{ position: "sticky", top: 0, height: "100vh" }} className='min-h-screen flex flex-col py-16 sm:py-24 max-w-7xl overflow-clip'>
                <div className='w-full flex justify-center mb-8'>
                    <span className='px-4 text-3xl sm:text-4xl py-2 sm:text-center'>
                        <span className='text-blue-500'>Преимущества</span> работы с нами
                    </span>
                </div>

                <motion.div
                    className='hidden sm:grid grid-cols-4 overflow-visible h-min min-h-96'
                >
                    {items.map((item, index) => (
                        <motion.div
                            key={item.id}
                            className='relative grid grid-rows-[min-content_min-content_min-content_1fr] gap-2 px-8 pt-4 min-w-full w-full shrink-0 overflow-visible'
                            style={{
                                marginLeft: `${xValue * index}px`,
                                zIndex: index,
                            }}>
                            <Braces text={(index + 1).toString()} />
                            <span className='text-xl'>
                                {item.label}
                            </span>

                            <span className="text-base-content/70">
                                {item.description}
                            </span>

                            <img className='mt-auto' src={item.image} />

                            <div className='absolute left-0 top-0 bottom-0 -right-8 rounded-2xl bg-base-200 outline-2 outline-base-100 -z-10 w-auto h-full'>

                            </div>
                        </motion.div>
                    ))}
                </motion.div>

                <motion.div
                    className='relative flex flex-col sm:hidden w-full h-full overflow-visible'
                >
                    {items.reverse().map((item, index) => {
                        const n = items.length;
                        const progress = Math.min(1, Math.max(0, (xValue - (index * 100) / n) * n / 100));

                        return (
                            <motion.div
                                key={item.id}
                                className="absolute grid grid-rows-[min-content_min-content_min-content_1fr] gap-2 w-full px-8 pt-4 h-auto shrink-0 overflow-visible"
                                style={{
                                    top: index === items.length - 1 ? '0%' : `${100 * (progress) + (5 * (n - index - 1))}%`, // from bottom → top
                                    zIndex: n - index,
                                }}
                                initial={{ opacity: 0, y: 20 }}
                                whileInView={{ opacity: 1, y: 0 }}
                                transition={{ duration: 0.4 }}
                                viewport={{ once: true, margin: "-100px" }}
                            >
                                <Braces
                                    text={(n - index).toString()}
                                />

                                <span className='text-xl'>
                                    {item.label}
                                </span>

                                <span className="text-base-content/70">
                                    {item.description}
                                </span>

                                <img className="mt-auto" src={item.image} />

                                <div className="absolute left-0 top-0 right-0 bottom-0 rounded-2xl bg-base-200 outline-2 outline-base-100 -z-10 w-auto h-full" />
                            </motion.div>
                        );
                    })}
                </motion.div>
            </div>
        </div>
    )
}

export default CardsSection