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

function useCountdown(target: Date) {
    const [time, setTime] = useState({ d: 0, h: 0, m: 0, s: 0 });
    useEffect(() => {
        const tick = () => {
            const diff = target.getTime() - Date.now();
            if (diff <= 0) return;
            setTime({
                d: Math.floor(diff / 86400000),
                h: Math.floor((diff % 86400000) / 3600000),
                m: Math.floor((diff % 3600000) / 60000),
                s: Math.floor((diff % 60000) / 1000),
            });
        };
        tick();
        const id = setInterval(tick, 1000);
        return () => clearInterval(id);
    }, [target]);
    return time;
}

export default function LimitedDrop() {
    const ref = useRef<HTMLDivElement>(null);
    const inView = useInView(ref, { once: true, margin: '-100px' });
    const dropDate = new Date(Date.now() + 3 * 86400000 + 14 * 3600000);
    const { d, h, m, s } = useCountdown(dropDate);

    return (
        <section ref={ref} className="relative overflow-hidden bg-[#0d0d0d] px-6 py-32 md:px-12">
            <div className="pointer-events-none absolute inset-0">
                <div className="absolute left-1/2 top-1/2 h-[800px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-red-600/3 blur-[150px]" />
            </div>

            <div className="relative mx-auto max-w-4xl text-center">
                <motion.div
                    initial={{ opacity: 0, y: 40 }}
                    animate={inView ? { opacity: 1, y: 0 } : {}}
                    transition={{ duration: 0.8 }}
                >
                    <p className="mb-4 text-xs tracking-[0.5em] text-red-600 uppercase">Limited Drop</p>
                    <h2 className="mb-6 text-[clamp(3rem,8vw,7rem)] font-black leading-none text-white"
                        style={{ fontFamily: '"Bebas Neue", "Arial Narrow", sans-serif' }}>
                        VELOCITY DROP<br />
                        <span className="text-transparent" style={{ WebkitTextStroke: '1px rgba(255,255,255,0.2)' }}>
                            001
                        </span>
                    </h2>
                    <p className="mx-auto mb-12 max-w-sm text-sm leading-relaxed text-white/40">
                        48 pieces. One chance. When they're gone, they're gone forever.
                    </p>
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={inView ? { opacity: 1, scale: 1 } : {}}
                    transition={{ duration: 0.8, delay: 0.2 }}
                    className="mb-12 flex justify-center gap-6"
                >
                    {[
                        [d, 'Days'],
                        [h, 'Hours'],
                        [m, 'Minutes'],
                        [s, 'Seconds'],
                    ].map(([val, label]) => (
                        <div key={String(label)} className="flex flex-col items-center gap-2">
                            <div className="flex h-20 w-20 items-center justify-center border border-white/10 bg-white/3 backdrop-blur">
                                <span className="text-3xl font-black text-white tabular-nums"
                                    style={{ fontFamily: '"Bebas Neue", "Arial Narrow", sans-serif' }}>
                                    {String(val).padStart(2, '0')}
                                </span>
                            </div>
                            <p className="text-[9px] tracking-[0.3em] text-white/30 uppercase">{label}</p>
                        </div>
                    ))}
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={inView ? { opacity: 1, y: 0 } : {}}
                    transition={{ duration: 0.8, delay: 0.4 }}
                >
                    <Link
                        href="/drop"
                        className="group relative inline-block overflow-hidden border border-red-600/50 bg-red-600/10 px-12 py-5 text-xs tracking-[0.4em] text-white uppercase transition-all duration-500 hover:bg-red-600"
                    >
                        Notify Me
                    </Link>
                </motion.div>
            </div>
        </section>
    );
}