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

type SharedProps = {
    wedding: {
        id: string;
        name: string;
        slug: string;
    } | null;
};

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

    return (
        <>
            <Head title={wedding?.name ?? 'Willkommen'} />
            <main className="welcome-shell">
                <div className="botanical botanical-left" aria-hidden="true" />
                <div className="botanical botanical-right" aria-hidden="true" />
                <section className="welcome-card text-center">
                    <span className="eyebrow">Unsere Hochzeit</span>
                    <h1>{wedding?.name ?? 'Wedster'}</h1>
                    <div className="ornament" aria-hidden="true">
                        <span />
                        <i>♥</i>
                        <span />
                    </div>
                    <p className="lead-copy">
                        Schön, dass du da bist. Hier entsteht unser gemeinsamer Ort für Einladung,
                        Veranstaltungen und all die kleinen Momente rund um den großen Tag.
                    </p>
                    <Link className="primary-action" href="/login">
                        Zur Anmeldung
                    </Link>
                </section>
            </main>
        </>
    );
}
