import AppLogoIcon from '@/components/app-logo-icon';
import { type SharedData } from '@/types';
import { Head, Link, usePage } from '@inertiajs/react';

export default function Welcome() {
    const { auth } = usePage<SharedData>().props;

    return (
        <>
            <Head title="Qualification Verification Exchange" />
            <main className="bg-background text-foreground flex min-h-screen items-center justify-center p-6">
                <section className="w-full max-w-3xl rounded-2xl border p-8 shadow-sm md:p-12">
                    <div className="flex items-center gap-3">
                        <div className="bg-foreground text-background flex size-11 items-center justify-center rounded-xl">
                            <AppLogoIcon className="size-7" />
                        </div>
                        <div>
                            <p className="font-semibold">QVX</p>
                            <p className="text-muted-foreground text-sm">Qualification Verification Exchange</p>
                        </div>
                    </div>

                    <h1 className="mt-10 text-3xl font-semibold tracking-tight md:text-5xl">A clean foundation for trusted qualification verification.</h1>
                    <p className="text-muted-foreground mt-5 max-w-2xl leading-7">
                        QVX will connect awarding institutions, learner achievement records and authorised verification workflows through a secure digital exchange.
                    </p>

                    <div className="mt-8 flex flex-wrap gap-3">
                        {auth.user ? (
                            <Link href="/dashboard" className="bg-foreground text-background rounded-lg px-4 py-2 text-sm font-medium">
                                Open dashboard
                            </Link>
                        ) : (
                            <>
                                <Link href="/login" className="bg-foreground text-background rounded-lg px-4 py-2 text-sm font-medium">
                                    Log in
                                </Link>
                                <Link href="/register" className="rounded-lg border px-4 py-2 text-sm font-medium">
                                    Create account
                                </Link>
                            </>
                        )}
                    </div>
                </section>
            </main>
        </>
    );
}
