import { Head, Link, usePage } from '@inertiajs/react';
import { dashboard, login } from '@/routes';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';

export default function Homepage() {
    const { auth } = usePage().props as any;
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    return (
        <>
            <Head title="Welcome to VN Group" />
            <div className="relative min-h-screen overflow-hidden bg-[#0a0a0a] font-sans text-white selection:bg-indigo-500/30">
                {/* Background Blobs */}
                <div className="absolute top-[-10%] left-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-600/20 blur-[120px]"></div>
                <div className="absolute bottom-[-10%] right-[-10%] h-[500px] w-[500px] rounded-full bg-blue-600/10 blur-[120px]"></div>

                <div className="relative z-10 flex min-h-screen flex-col">
                    {/* Header / Navbar */}
                    <header className="fixed top-6 left-0 right-0 z-50 px-6">
                        <nav className="mx-auto flex max-w-6xl items-center justify-between rounded-2xl border border-white/10 bg-white/5 px-6 py-3 shadow-2xl backdrop-blur-xl">
                            {/* Left: Logo */}
                            <div className="flex items-center gap-2">
                                <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg shadow-indigo-500/20"></div>
                                <span className="text-xl font-bold tracking-tight text-white">VN Group</span>
                            </div>

                            {/* Center: Menu (Desktop) */}
                            <div className="hidden items-center gap-8 md:flex">
                                <Link href="/" className="text-sm font-medium text-white transition-colors hover:text-indigo-500">Beranda</Link>
                                <Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Produk</Link>
                                <Link href="#" className="text-sm font-medium text-zinc-400 transition-colors hover:text-white">Cara Order</Link>
                            </div>

                            {/* Right: Actions */}
                            <div className="flex items-center gap-4">
                                <div className="hidden md:block">
                                    {auth.user ? (
                                        <Link
                                            href={dashboard()}
                                            className="rounded-xl bg-white/10 px-6 py-2 text-sm font-medium text-white transition-all hover:bg-white/20"
                                        >
                                            Dashboard
                                        </Link>
                                    ) : (
                                        <Link
                                            href={login()}
                                            className="rounded-xl bg-indigo-600 px-6 py-2 text-sm font-bold text-white transition-all hover:bg-indigo-500 hover:shadow-lg hover:shadow-indigo-600/20"
                                        >
                                            Masuk
                                        </Link>
                                    )}
                                </div>

                                {/* Burger Menu Button */}
                                <button 
                                    className="flex h-10 w-10 items-center justify-center rounded-xl bg-white/5 text-white md:hidden"
                                    onClick={() => setIsMenuOpen(!isMenuOpen)}
                                >
                                    {isMenuOpen ? <X size={20} /> : <Menu size={20} />}
                                </button>
                            </div>
                        </nav>

                        {/* Mobile Menu Dropdown */}
                        {isMenuOpen && (
                            <div className="mt-4 overflow-hidden rounded-2xl border border-white/10 bg-[#0a0a0a]/90 p-4 shadow-2xl backdrop-blur-2xl animate-in fade-in zoom-in-95 duration-200 md:hidden">
                                <div className="flex flex-col gap-4">
                                    <Link href="/" className="px-4 py-2 text-sm font-medium text-white">Beranda</Link>
                                    <Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Produk</Link>
                                    <Link href="#" className="px-4 py-2 text-sm font-medium text-zinc-400">Cara Order</Link>
                                    <hr className="border-white/10" />
                                    {auth.user ? (
                                        <Link href={dashboard()} className="rounded-xl bg-white/10 px-4 py-3 text-center text-sm font-medium text-white">Dashboard</Link>
                                    ) : (
                                        <Link href={login()} className="rounded-xl bg-indigo-600 px-4 py-3 text-center text-sm font-bold text-white">Masuk</Link>
                                    )}
                                </div>
                            </div>
                        )}
                    </header>

                    {/* Main Content */}
                    <main className="flex flex-1 flex-col items-center justify-center px-6 pt-32 text-center">
                        <div className="animate-in fade-in slide-in-from-bottom-8 duration-1000">
                            <h2 className="mb-2 text-sm font-semibold uppercase tracking-[0.3em] text-indigo-500">
                                Premium Experience
                            </h2>
                            <h1 className="mb-6 bg-gradient-to-b from-white to-white/60 bg-clip-text text-6xl font-extrabold tracking-tight text-transparent lg:text-8xl">
                                Hello World.
                            </h1>
                            <p className="mx-auto max-w-2xl text-lg leading-relaxed text-zinc-400">
                                Welcome to the next generation of our platform. We've built something beautiful 
                                for you to explore. Stay tuned for more updates.
                            </p>
                            
                            <div className="mt-10 flex items-center justify-center gap-4">
                                <button className="group relative rounded-full bg-white px-8 py-3 text-sm font-bold text-black transition-all hover:scale-105 active:scale-95">
                                    Get Started
                                </button>
                                <button className="rounded-full border border-white/10 bg-white/5 px-8 py-3 text-sm font-bold transition-all hover:bg-white/10">
                                    Learn More
                                </button>
                            </div>
                        </div>
                    </main>

                    {/* Footer */}
                    <footer className="px-8 py-10 text-center text-sm text-zinc-600 lg:px-12">
                        <p>© {new Date().getFullYear()} VN Group. All rights reserved.</p>
                    </footer>
                </div>
            </div>
        </>
    );
}
