import { GOD_MODE_URL } from "@buzzwaretech/constants";
// assets
import GradientBgLogo from "@/app/assets/auth/gradient-bg-logo.webp?url";
import GradientLogo from "@/app/assets/auth/gradient-logo.webp?url";
import DefaultLayout from "@/layouts/default-layout";
import { Button } from "@buzzwaretech/propel/button";
import { BuzzwareTechLockup } from "@buzzwaretech/propel/icons";

export function InstanceNotReady() {
  return (
    <DefaultLayout>
      <div className="relative z-10 flex h-screen w-screen overflow-hidden">
        {/* Background decorations */}
        <img
          src={GradientBgLogo}
          className="pointer-events-none absolute -top-24 -left-32 h-56 w-96 opacity-15"
          alt=""
          aria-hidden="true"
        />
        <img
          src={GradientBgLogo}
          className="pointer-events-none absolute -right-20 -bottom-16 h-56 w-96 opacity-15"
          alt=""
          aria-hidden="true"
        />
        {/* Main content */}
        <div className="flex h-full w-full flex-col items-center px-8 pt-6 pb-10">
          <div className="sticky top-0 flex w-full shrink-0 items-center justify-between gap-6">
            <BuzzwareTechLockup height={20} width={95} className="text-primary" />
          </div>
          <div className="flex h-full w-full flex-col items-center justify-center gap-7">
            <div className="flex flex-col items-center gap-11">
              <img
                src={GradientLogo}
                className="h-24 w-40 object-contain"
                alt="BuzzwareTech Logo"
              />
              <div className="flex max-w-124 flex-col items-center gap-3">
                <h1 className="text-h2-semibold text-primary">
                  Welcome to BuzzwareTech
                </h1>
                <p className="text-center text-body-md-regular text-secondary">
                  Set up your instance and create your first workspace to begin
                  managing projects and work.
                </p>
              </div>
            </div>
            <a href={GOD_MODE_URL} className="w-72">
              <Button variant="primary" className="w-full" size="xl">
                Get started
              </Button>
            </a>
          </div>
        </div>
      </div>
    </DefaultLayout>
  );
}