import Logo from '@/Components/shared/Logo';
import ThemeToggle from '@/Components/shared/ThemeToggle';
import { NoIndex } from '@/Components/shared/Seo';
import { ease } from '@/lib/motion';
import { Link } from '@inertiajs/react';
import { motion } from 'framer-motion';
import { PropsWithChildren, ReactNode } from 'react';

const SHOWCASE = [
    { t: 'Hollow Meridian', g: 'RPG · 2024', h: 262, s: '9.1' },
    { t: 'Gilded Orchard', g: 'Cozy · 2023', h: 160, s: '8.6' },
    { t: 'Last Signal', g: 'Horror · 2025', h: 330, s: '8.8' },
];

export default function GuestLayout({ children, title, subtitle, footer }: PropsWithChildren<{ title?: string; subtitle?: ReactNode; footer?: ReactNode }>) {
    return (
        <>
        <NoIndex />
        <div className="grid min-h-screen lg:grid-cols-[minmax(0,1fr)_minmax(0,1.05fr)]">
            <div className="relative flex flex-col px-5 py-6 sm:px-10">
                <div className="flex items-center justify-between">
                    <Link href="/" aria-label="Aether home"><Logo /></Link>
                    <ThemeToggle />
                </div>

                <div className="mx-auto flex w-full max-w-[400px] flex-1 flex-col justify-center py-10">
                    <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.45, ease }}>
                        {title && <h1 className="text-[26px] font-semibold tracking-tight">{title}</h1>}
                        {subtitle && <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{subtitle}</p>}
                        <div className="mt-7">{children}</div>
                        {footer && <div className="mt-6 text-center text-sm text-muted-foreground">{footer}</div>}
                    </motion.div>
                </div>

                <p className="text-center text-xs text-muted-foreground/70">© {new Date().getFullYear()} Aether</p>
            </div>

            <aside className="relative hidden overflow-hidden border-l border-border lg:block" aria-hidden>
                <div className="absolute inset-0 bg-[radial-gradient(60%_50%_at_30%_20%,color-mix(in_oklab,var(--primary)_28%,transparent),transparent),radial-gradient(50%_40%_at_80%_80%,color-mix(in_oklab,var(--primary)_16%,transparent),transparent)]" />
                <div className="absolute inset-0 [background-image:linear-gradient(var(--border)_1px,transparent_1px),linear-gradient(90deg,var(--border)_1px,transparent_1px)] [background-size:56px_56px] [mask-image:radial-gradient(70%_60%_at_50%_45%,#000,transparent)]" />

                <div className="relative flex h-full flex-col items-center justify-center gap-10 p-12">
                    <div className="flex items-end gap-4">
                        {SHOWCASE.map((c, i) => (
                            <motion.div
                                key={c.t}
                                initial={{ opacity: 0, y: 24 }}
                                animate={{ opacity: 1, y: [0, -6, 0] }}
                                transition={{ opacity: { delay: 0.2 + i * 0.12, duration: 0.6, ease }, y: { delay: 0.8 + i * 0.4, duration: 6 + i, repeat: Infinity, ease: 'easeInOut' } }}
                                className="glass w-40 overflow-hidden rounded-2xl border border-border shadow-2xl shadow-black/20"
                                style={{ marginBottom: i === 1 ? 40 : 0 }}
                            >
                                <div className="aspect-[3/4] p-3" style={{ background: `linear-gradient(160deg, oklch(0.3 0.08 ${c.h}), oklch(0.5 0.1 ${c.h + 40}))` }}>
                                    <span className="rounded-md bg-black/30 px-1.5 py-0.5 text-[11px] font-medium text-white">★ {c.s}</span>
                                </div>
                                <div className="p-3">
                                    <p className="truncate text-[13px] font-medium">{c.t}</p>
                                    <p className="text-[11px] text-muted-foreground">{c.g}</p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                    <div className="max-w-sm text-center">
                        <p className="text-xl font-medium leading-snug tracking-tight">Keep a quiet record of everything you've played, and everything you will.</p>
                        <p className="mt-3 text-sm text-muted-foreground">Rate, review and track your library.</p>
                    </div>
                </div>
            </aside>
        </div>
        </>
    );
}