---
import dotsBackgroundUrl from "~/assets/dots-background.svg"
import AppFooter from "~/components/app-footer.astro"
import AppLogo from "~/components/app-logo.astro"
import { LandingAnimation } from "~/components/landing-animation"
import Layout from "~/components/layout.astro"
import MainNavigation from "~/components/main-navigation.astro"
---

<Layout>
	<div
		class="fixed inset-0 rotate-6 scale-125 opacity-20"
		style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
	>
	</div>
	<div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
		<header class="container">
			<MainNavigation />
		</header>
		<div class="my-auto flex flex-col gap-4 px-4">
			<AppLogo class="mx-auto w-full max-w-lg" />

			<div class="isolate mx-auto h-44 w-full max-w-md">
				<LandingAnimation client:only />
			</div>

			<p class="-mb-1 text-center text-lg font-light">
				Create interactive Discord messages with React.
			</p>

			<div class="flex gap-4 self-center">
				<a href="/guides/getting-started" class="button button-solid">
					Get Started
				</a>

				<!-- <UncontrolledModal
          button={(button) => (
            <button {...button} class={buttonClass({ variant: "semiblack" })}>
              Show Code
            </button>
          )}
        >
          <div class="text-sm sm:text-base">
            <LandingCode />
          </div>
        </UncontrolledModal> -->
			</div>
		</div>

		<div class="container text-center">
			<AppFooter />
		</div>
	</div>
</Layout>