"use client";

import React, { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import Link from "next/link";

gsap.registerPlugin(useGSAP);

interface HeroProps {
    authButton?: React.ReactNode;
}

const Hero = ({ authButton }: HeroProps) => {
    const container = useRef(null);
    const titleRef = useRef(null);
    const textRef = useRef(null);
    const btnRef = useRef(null);

    useGSAP(
        () => {
            const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

            tl.from(titleRef.current, {
                y: 50,
                opacity: 0,
                duration: 1,
                stagger: 0.2,
            })
                .from(
                    textRef.current,
                    {
                        y: 30,
                        opacity: 0,
                        duration: 0.8,
                    },
                    "-=0.5"
                )
                .from(
                    btnRef.current,
                    {
                        y: 20,
                        opacity: 0,
                        duration: 0.6,
                    },
                    "-=0.4"
                );
        },
        { scope: container }
    );

    return (
        <section
            ref={container}
            className="min-h-screen flex flex-col items-center justify-center text-center px-4 relative"
        >
            <div className="max-w-4xl mx-auto space-y-8">
                <div className="inline-block px-4 py-1 mb-4 border border-blue-500/30 rounded-full bg-blue-500/10 backdrop-blur-sm">
                    <span className="text-sm font-medium text-blue-300">Under Development - If you want pre-release access, contact <span className="font-bold">_void_x_</span> on Discord.</span>
                </div>
                <h1
                    ref={titleRef}
                    className="text-6xl md:text-8xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-200 to-slate-400"
                >
                    VOID SENTINEL
                </h1>
                <p
                    ref={textRef}
                    className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto italic"
                >
                    &ldquo;I am the sentinel at the edge of the void. A warden against the shadows and an echo of light for those within. I protect, I entertain, I watch.&rdquo;
                </p>
                <div
                    ref={btnRef}
                    className="flex flex-col sm:flex-row gap-4 justify-center items-center"
                >
                    {authButton}
                    <Link href="/docs" className="px-8 py-2 bg-white/5 hover:bg-white/10 border border-white/10 hover:border-white/20 text-white rounded-full font-semibold transition-all hover:scale-105 flex items-center gap-2 backdrop-blur-sm">
                        Documentation
                    </Link>
                </div>
            </div>
        </section>
    );
};

export default Hero;