import { LogoMark } from '~/components/logo-mark';
import { ArIllustration } from '~/components/auth/ar-illustration';

export function AuthBrandPanel() {
    return (
        <aside className="relative hidden overflow-hidden border-r border-neutral-900 bg-[#0A0A0A] p-12 lg:flex lg:flex-col lg:justify-between">
            <div className="pointer-events-none absolute top-1/3 left-1/2 h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/10 blur-[140px]" />

            {/* Real-world floor grid */}
            <div className="pointer-events-none absolute inset-x-0 bottom-0 h-1/2 [perspective:600px]">
                <div
                    className="absolute inset-0 origin-bottom [transform:rotateX(60deg)] opacity-30"
                    style={{
                        backgroundImage:
                            'linear-gradient(to right, rgba(249,115,22,0.25) 1px, transparent 1px), linear-gradient(to bottom, rgba(249,115,22,0.25) 1px, transparent 1px)',
                        backgroundSize: '48px 48px',
                        maskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
                        WebkitMaskImage: 'linear-gradient(to top, black 10%, transparent 90%)',
                    }}
                />
            </div>

            <div className="relative z-10">
                <LogoMark className="h-10 w-10 text-2xl" />
            </div>

            <div className="relative z-10 flex flex-1 items-center justify-center py-8">
                <ArIllustration />
            </div>

            <p className="relative z-10 text-2xl font-semibold tracking-tight text-white">
                Step into <span className="text-orange-500">augmented reality.</span>
            </p>
        </aside>
    );
}