import { usePage } from '@inertiajs/react';

const Hero = () => {
    const { stats } = usePage().props;
    return (
        <section className="relative bg-gradient-to-b to-transparent pt-6 dark:from-neutral-900 dark:to-transparent">
            <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                <div className="space-y-4 text-center">
                    {/* Badge */}
                    <div className="bg-background/50 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm backdrop-blur-sm">
                        <div className="h-2 w-2 rounded-full bg-green-500"></div>
                        <span className="text-muted-foreground">Instant meme videos • No signup required</span>
                    </div>

                    {/* Main heading */}
                    <div className="space-y-0">
                        <div className="flex items-center justify-center gap-2">
                            <img alt="MEMEFA.ST LOGO" className="h-16 w-16 md:h-18 md:w-18 lg:h-24 lg:w-24" src="logo/memefast-logo-180.png"></img>
                            <h1 className="font-display text-4xl font-black tracking-tight sm:text-6xl lg:text-8xl">
                                <span className="text-foreground">MEME</span>
                                <span className="text-[#00DD00] dark:text-[#00FF00]">FA.ST</span>
                            </h1>
                        </div>

                        <h2 className="text-foreground mx-auto max-w-4xl text-xl leading-relaxed font-bold sm:text-2xl lg:text-2xl">
                            Make meme videos right in your browser
                        </h2>
                        <p className="text-muted-foreground">No additional software required! Just press the Download button when you're done.</p>
                    </div>

                    {/* Stats */}
                    {/* <div className="flex flex-wrap justify-center gap-8 sm:gap-12">
                        <div className="text-center">
                            <CountUp
                                from={0}
                                to={stats?.meme_count || 200}
                                separator=","
                                direction="up"
                                duration={1}
                                className="text-foreground text-3xl font-bold sm:text-4xl"
                                postFix=""
                            />{' '}
                            <div className="text-muted-foreground text-sm">Memes</div>
                        </div>
                        <div className="text-center">
                            <CountUp
                                from={0}
                                to={stats?.background_count || 200}
                                separator=","
                                direction="up"
                                duration={1}
                                className="text-foreground text-3xl font-bold sm:text-4xl"
                                postFix=""
                            />
                            <div className="text-muted-foreground text-sm">Backgrounds</div>
                        </div>
                        <div className="text-center">
                            <div className="text-foreground text-3xl font-bold sm:text-4xl">720p</div>
                            <div className="text-muted-foreground text-sm">Export</div>
                        </div>
                    </div> */}
                </div>
            </div>
        </section>
    );
};

export default Hero;