import { Head, Link, usePage } from '@inertiajs/react';
import { dashboard, login, register } from '@/routes';
import AppLogoIcon from '@/components/app-logo-icon';
import { BarChart3, Sparkles, ShieldCheck } from 'lucide-react';

export default function Welcome() {
    const { auth, name } = usePage().props as unknown as {
        auth: { user: unknown | null };
        name: string;
    };

    return (
        <>
            <Head title="Welcome" />
            <div className="min-h-dvh bg-background text-foreground">
                <header className="mx-auto flex max-w-6xl items-center justify-between px-6 py-5">
                    <div className="flex items-center gap-2">
                        <span className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground">
                            <AppLogoIcon className="size-5" />
                        </span>
                        <span className="text-lg font-semibold">{name}</span>
                    </div>
                    <nav className="flex items-center gap-3 text-sm">
                        {auth?.user ? (
                            <Link href={dashboard()} className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground hover:opacity-90">
                                Dashboard
                            </Link>
                        ) : (
                            <>
                                <Link href={login()} className="rounded-md px-4 py-2 font-medium hover:bg-muted">Log in</Link>
                                <Link href={register()} className="rounded-md bg-primary px-4 py-2 font-medium text-primary-foreground hover:opacity-90">
                                    Get started
                                </Link>
                            </>
                        )}
                    </nav>
                </header>

                <main className="mx-auto max-w-6xl px-6">
                    <section className="grid items-center gap-12 py-16 lg:grid-cols-2 lg:py-24">
                        <div>
                            <span className="inline-flex items-center gap-1.5 rounded-full bg-accent px-3 py-1 text-xs font-medium text-accent-foreground">
                                <Sparkles className="size-3.5" /> AI-powered analytics
                            </span>
                            <h1 className="mt-5 text-4xl font-semibold tracking-tight sm:text-5xl">
                                All your business data,<br />one clear view.
                            </h1>
                            <p className="mt-5 max-w-md text-base text-muted-foreground">
                                {name} unifies your advertising, CRM, accounting, and property data into
                                governed dashboards — and lets you ask questions in plain language.
                            </p>
                            <div className="mt-8 flex gap-3">
                                <Link href={register()} className="rounded-md bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground hover:opacity-90">
                                    Get started
                                </Link>
                                <Link href={login()} className="rounded-md border border-border px-5 py-2.5 text-sm font-medium hover:bg-muted">
                                    Log in
                                </Link>
                            </div>
                            <div className="mt-10 flex gap-6 text-sm text-muted-foreground">
                                <span className="flex items-center gap-1.5"><ShieldCheck className="size-4 text-primary" /> Multi-tenant &amp; secure</span>
                                <span className="flex items-center gap-1.5"><BarChart3 className="size-4 text-primary" /> Governed metrics</span>
                            </div>
                        </div>

                        <div className="relative">
                            <div className="rounded-2xl border border-border bg-card p-6 shadow-sm">
                                <div className="mb-4 flex items-center justify-between">
                                    <span className="text-sm font-medium">Performance overview</span>
                                    <span className="text-xs text-muted-foreground">Last 30 days</span>
                                </div>
                                <div className="grid grid-cols-2 gap-3">
                                    {[['Ad spend', '$13.9k'], ['Leads', '3,065'], ['Occupancy', '92%'], ['Revenue', '$81.7k']].map(([l, v]) => (
                                        <div key={l} className="rounded-xl bg-muted/50 p-4">
                                            <p className="text-xs text-muted-foreground">{l}</p>
                                            <p className="mt-1 text-xl font-semibold">{v}</p>
                                        </div>
                                    ))}
                                </div>
                                <div className="mt-4 flex h-24 items-end gap-1.5">
                                    {[40, 55, 45, 70, 60, 85, 75, 95, 80, 100, 90, 78].map((h, i) => (
                                        <div key={i} className="flex-1 rounded-t bg-primary/80" style={{ height: `${h}%` }} />
                                    ))}
                                </div>
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </>
    );
}
