import { usePage } from '@inertiajs/react';
import type { Branding } from '@/types';

/**
 * The shell the holding page sits in.
 *
 * Not the CRM layout and not the portal's: nobody reading this has an account.
 * What it carries is the company's own paint — the ground colour and the two
 * lights worked out in Settings -> Company profile — so a site that is not
 * public yet still looks like the business it belongs to, and the day it opens
 * nothing about the brand has to change.
 */
export default function LaunchLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const { branding, background_url: background } = usePage<{
        branding?: Branding;
        background_url?: string | null;
    }>().props;
    const panel = branding?.login_panel;

    return (
        <div className="relative flex min-h-svh flex-col overflow-hidden bg-[#070c14] text-white">
            <div aria-hidden className="pointer-events-none absolute inset-0">
                <div
                    className="absolute inset-0"
                    style={{ backgroundColor: panel?.color ?? '#0a1421' }}
                />

                {background ? (
                    <>
                        <div
                            className="absolute inset-0 bg-cover bg-center"
                            style={{ backgroundImage: `url(${background})` }}
                        />
                        {/* A photograph needs a stronger veil than the plain
                            ground does, or the words over it stop being the
                            first thing read. */}
                        <div className="absolute inset-0 bg-gradient-to-b from-[#070c14]/60 via-[#070c14]/45 to-[#070c14]/90" />
                    </>
                ) : (
                    <>
                        <div
                            className="absolute inset-0"
                            style={{ backgroundImage: panel?.glow }}
                        />
                        {/* The same quiet grid the staff sign-in panel wears,
                            so the two screens read as one system rather than
                            two designs. */}
                        <div
                            className="absolute inset-0 opacity-[0.12]"
                            style={{
                                backgroundImage:
                                    'repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(255,255,255,0.55) 0 1px, transparent 1px 72px)',
                                maskImage:
                                    'linear-gradient(to top, #000 0%, transparent 85%)',
                                WebkitMaskImage:
                                    'linear-gradient(to top, #000 0%, transparent 85%)',
                            }}
                        />
                        {/* One slow wash of the accent colour, low on the page,
                            so the centre has something to sit against on a
                            tall screen. */}
                        <div
                            className="absolute -bottom-56 left-1/2 size-[42rem] -translate-x-1/2 rounded-full opacity-[0.14] blur-3xl"
                            style={{
                                backgroundColor:
                                    branding?.primary_color ?? '#f0a020',
                            }}
                        />
                    </>
                )}
            </div>

            <div className="relative z-10 flex min-h-svh flex-col">
                {children}
            </div>
        </div>
    );
}