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

import { dashboard } from '@/routes';
import { type SharedData } from '@/types';

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

    return (
        <>
            <Head title="Welcome">
                <link rel="preconnect" href="https://fonts.bunny.net" />
                <link
                    href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600"
                    rel="stylesheet"
                />
            </Head>
            <div className="flex min-h-screen flex-col items-center bg-[#FDFDFC] p-6 text-[#1b1b18] lg:justify-center lg:p-8 dark:bg-[#0a0a0a]">
                <header className="mb-6 w-full max-w-[335px] text-sm not-has-[nav]:hidden lg:max-w-4xl">
                    <nav className="flex items-center justify-end gap-4">
                        {auth.user ? (
                            <Link
                                href={dashboard()}
                                className="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                            >
                                Dashboard
                            </Link>
                        ) : (
                            <>
                                <Link
                                    href="/client/login"
                                    className="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
                                >
                                    Iniciar Sesion
                                </Link>
                            </>
                        )}
                    </nav>
                </header>
                <div className="flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0">
                    <main className="flex w-full max-w-[335px] flex-col-reverse lg:max-w-4xl lg:flex-row">
                        <div className="flex-1 rounded-br-lg rounded-bl-lg bg-neutral-100 p-6 pb-12 text-[13px] leading-[20px] lg:rounded-tl-lg lg:rounded-br-none lg:p-20 dark:bg-neutral-900 dark:text-[#EDEDEC] dark:shadow-[inset_0px_0px_0px_1px_#fffaed2d]">
                            <h1 className="mb-1 text-xl font-semibold">GESA</h1>
                            <p className="mb-4 text-sm font-medium text-[#706f6c] dark:text-[#A1A09A]">
                                Curso: Taller de Programación Web
                            </p>
                            <p className="mb-4 text-[#706f6c] dark:text-[#A1A09A]">
                                Plataforma integral para la administracion y
                                control de activos tecnologicos, especializada
                                en el alquiler de servidores y unidades de
                                computo.
                            </p>
                            
                            <ul className="mb-6 flex flex-col gap-2">
                                <li className="flex items-start gap-2">
                                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[#f53003] dark:bg-[#FF4433]" />
                                    <span>
                                        Registro y seguimiento de servidores
                                    </span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[#f53003] dark:bg-[#FF4433]" />
                                    <span>Control de unidades de computo</span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[#f53003] dark:bg-[#FF4433]" />
                                    <span>
                                        Gestion de contratos de alquiler
                                    </span>
                                </li>
                                <li className="flex items-start gap-2">
                                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-[#f53003] dark:bg-[#FF4433]" />
                                    <span>
                                        Reportes y metricas en tiempo real
                                    </span>
                                </li>
                            </ul>
                            <div className="mb-6 border-t border-[#e3e3e0] pt-4 dark:border-[#3E3E3A]">
                                <p className="text-xs text-[#706f6c] dark:text-[#A1A09A]">
                                    Desarrollado por Jesus Llica García{' '}
                                    <span className="font-medium text-[#1b1b18] dark:text-[#EDEDEC]">
                                        (MizterFrek)
                                    </span>
                                </p>
                                <p className="mt-1 text-xs text-[#706f6c] dark:text-[#A1A09A]">
                                    Construido con Laravel, React y Tailwind CSS
                                </p>
                            </div>
                            <ul className="flex gap-3 text-sm leading-normal">
                                <li>
                                    <Link
                                        href={auth.user ? dashboard() : '/client/login'}
                                        className="inline-block rounded-sm border border-black bg-[#1b1b18] px-5 py-1.5 text-sm leading-normal text-white hover:border-black hover:bg-black dark:border-[#eeeeec] dark:bg-[#eeeeec] dark:text-[#1C1C1A] dark:hover:border-white dark:hover:bg-white"
                                    >
                                        {auth.user
                                            ? 'Ir al Dashboard'
                                            : 'Iniciar Sesion'}
                                    </Link>
                                </li>
                            </ul>
                        </div>
                        <div className="relative -mb-px flex aspect-[335/376] w-full shrink-0 items-center justify-center overflow-hidden shadow-[inset_0px_0px_0px_1px_rgba(26,26,0,0.16)] rounded-t-lg bg-white lg:mb-0 lg:-ml-px lg:aspect-auto lg:w-[438px] lg:rounded-t-none lg:rounded-r-lg">
                            <img
                                src="/storage/brand/welcome.gif"
                                alt="Servidores y unidades de computo"
                                className="w-full max-w-[80%] object-contain"
                            />
                        </div>
                    </main>
                </div>
                <div className="hidden h-14.5 lg:block"></div>
            </div>
        </>
    );
}
