import { component$ } from "@builder.io/qwik";

export default component$(() => {
    type StatProps = {
        stat: string,
        description: string;
    }

    const Stat = component$(({ stat, description }: StatProps) => (
        <div class="group hover:scale-105 transition-all duration-300 bg-gradient-to-t from-stereo/30 to-transparent p-8 px-12 rounded-2xl h-96 flex flex-col items-center text-center shadow-2xl shadow-stereo/15">
            <div class="flex-grow flex items-center justify-center">
                <p class="text-7xl font-bold text-stereo group-hover:text-white transition-colours duration-300">
                    {stat.includes("+") ? stat.substring(0, stat.length - 1) : stat}
                    {stat.endsWith("+") ? <span class="text-stereo/80 text-4xl align-super">+</span> : ""}
                </p>
            </div>
            <p class="text-xl w-3/4 text-wrap text-white/30 group-hover:text-white/60 transition-colours duration-300">{description}</p>
        </div>
    )	);

    return (
        <div
            data-aos="fade-up"
            data-aos-duration="1000"
            class="flex flex-col gap-12 items-center justify-center w-full"
        >
            <div class="flex flex-col gap-1 items-center justify-center">
                <p class="text-lg text-stereo font-bold uppercase">statistics</p>
                <p class="text-2xl text-white/80">
                    we know what you're thinking, and we have the numbers to prove it.
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Stat stat="1.5M+" description="files hosted on stereo" />
                <Stat stat="100k+" description="active users on stereo" />
                <Stat stat="99.9%" description="uptime guarantee for all files" />
            </div>
        </div>
    )
});