import { Head, Link } from '@inertiajs/react';

export default function Welcome({ auth, laravelVersion, phpVersion }) {
    return (
        <>
            {/* Set the page title */}
            <Head title="Welcome to House of Coffee" />

            {/* Full-page container */}
            <div className="relative flex min-h-screen flex-col bg-[#f7f3ed] text-[#5c4033]">
                {/* Background image (optional) */}
                <img
                    src="https://images.unsplash.com/photo-1513373319109-a5f1ae4b27e1?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80"
                    alt="Coffee background"
                    className="absolute inset-0 h-full w-full object-cover opacity-30"
                />

                {/* Overlay for background tint */}
                <div className="absolute inset-0 bg-[#f7f3ed]/70"></div>

                {/* Main content */}
                <div className="relative z-10 flex flex-1 flex-col items-center justify-center p-6">
                    {/* Header / Logo section */}
                    <header className="mb-10 flex flex-col items-center space-y-4">
                        <h1 className="text-3xl font-extrabold text-[#4b2e1a] md:text-5xl">
                            House of Coffee
                        </h1>
                        <p className="max-w-xl text-center text-sm text-[#5c4033]/80 md:text-base">
                            Welcome to the rich aromas and delightful flavors of
                            our coffee haven. Come in and enjoy!
                        </p>
                    </header>

                    {/* Navigation / Auth buttons */}
                    <nav className="mb-8 flex space-x-4">
                        {auth.user ? (
                            <Link
                                href={route('dashboard')}
                                className="rounded-md bg-[#4b2e1a] px-4 py-2 text-white transition hover:bg-[#613b25] focus:outline-none focus:ring-2 focus:ring-[#613b25]"
                            >
                                Go to Dashboard
                            </Link>
                        ) : (
                            <>
                                <Link
                                    href={route('login')}
                                    className="rounded-md bg-[#4b2e1a] px-4 py-2 text-white transition hover:bg-[#613b25] focus:outline-none focus:ring-2 focus:ring-[#613b25]"
                                >
                                    Log in
                                </Link>
                                <Link
                                    href={route('register')}
                                    className="rounded-md border border-[#4b2e1a] px-4 py-2 text-[#4b2e1a] transition hover:bg-[#eae2db] focus:outline-none focus:ring-2 focus:ring-[#613b25]"
                                >
                                    Register
                                </Link>
                            </>
                        )}
                    </nav>

                    {/* Decorative / Could be replaced with a login form */}
                    <div className="max-w-xl rounded-md bg-white/70 p-6 text-center shadow-xl">
                        <h2 className="mb-2 text-xl font-semibold text-[#4b2e1a]">
                            Love Coffee?
                        </h2>
                        <p className="text-sm text-[#5c4033]/80">
                            Experience an array of specialty blends,
                            sustainably-sourced beans, and the friendliest
                            baristas around. Get started by logging in or
                            registering for a membership to receive exclusive
                            offers and rewards.
                        </p>
                    </div>
                </div>

                {/* Footer section */}
                <footer className="relative z-10 border-t border-[#5c4033]/20 p-4 text-center text-xs text-[#5c4033]/70">
                    <p>
                        Powered by Laravel v{laravelVersion} &middot; PHP v{phpVersion}
                    </p>
                </footer>
            </div>
        </>
    );
}
