import { Head, Link, usePage } from '@inertiajs/react';
import { Button } from '@/components/ui/button';

type LandingProps = {
    canRegister?: boolean;
};

type PageProps = {
    auth: {
        user: unknown | null;
    };
};

export default function Landing({ canRegister = true }: LandingProps) {
    const { auth } = usePage<PageProps>().props;

    return (
        <>
            <Head title="Welcome" />

            <main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col justify-center gap-8 px-6 py-12">
                <div className="space-y-4">
                    <p className="text-sm font-medium uppercase tracking-wide text-muted-foreground">
                        ContaFlow
                    </p>
                    <h1 className="text-4xl font-semibold tracking-tight md:text-5xl">
                        Accounting workspace for firms and clients
                    </h1>
                    <p className="max-w-2xl text-muted-foreground">
                        A modular foundation ready for accountant workflows, client
                        collaboration, and future AI-powered document processing.
                    </p>
                </div>

                <div className="grid gap-4 md:grid-cols-2">
                    <div className="rounded-lg border bg-card p-6">
                        <h2 className="text-lg font-semibold">Admin area</h2>
                        <p className="mt-2 text-sm text-muted-foreground">
                            Built for accountants to review files, monitor status,
                            and coordinate client operations.
                        </p>
                    </div>
                    <div className="rounded-lg border bg-card p-6">
                        <h2 className="text-lg font-semibold">Client portal</h2>
                        <p className="mt-2 text-sm text-muted-foreground">
                            Built for clients to upload documents, follow progress,
                            and communicate with the accounting team.
                        </p>
                    </div>
                </div>

                <div className="flex flex-wrap items-center gap-3">
                    {auth.user ? (
                        <Button asChild>
                            <Link href="/dashboard">Go to dashboard</Link>
                        </Button>
                    ) : (
                        <>
                            <Button asChild>
                                <Link href="/login">Log in</Link>
                            </Button>
                            {canRegister && (
                                <Button asChild variant="outline">
                                    <Link href="/register">Create account</Link>
                                </Button>
                            )}
                        </>
                    )}
                </div>
            </main>
        </>
    );
}
