import { OfficerSvgLogo } from '@/components/Logos';
import { useLandingPage } from 'state/useLandingPage';
import { Bootstrap } from './Bootstrap';
import { Login } from './Login';

export function LandingPage() {
  const { registrationOpen, isLoading } = useLandingPage();
  if (isLoading) return null;

  return (
    <div className="relative overflow-hidden h-dvh outline-none inset-0">
      <header className="pt-12 md:pt-20 lg:pt-24 xl:pt-0 z-20 flex justify-center">
        <div className="hidden md:block md:pt-28">
          <OfficerSvgLogo size="2xl" />
        </div>
        <div className="block md:hidden">
          <OfficerSvgLogo size="lg" />
        </div>
      </header>

      <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-0 md:pb-2">
        {registrationOpen ? <Bootstrap /> : <Login />}
      </div>
    </div>
  );
}