---
import { generateImage } from "astro-eleventy-img";
import { Icon } from "astro-icon";
import Starfield from "~/components/starfield.astro";

const widths = [450, 800];
const sizes = "(min-width: 640px) 42vw, 67vw";

const { webp, avif, png } = generateImage("src/assets/astronaut.png", {
  widths,
  formats: ["webp", "avif", "png"],
  outputDir: "public/assets/images/astronaut",
  urlPath: "/assets/images/astronaut",
});

const avifSrcset = avif.map(({ srcset }) => srcset).join(",");
const webpSrcset = webp.map(({ srcset }) => srcset).join(",");
const pngSrcset = png.map(({ srcset }) => srcset).join(",");
---

<section class="relative h-full bg-black">
  <Starfield />
  <div class="relative grid h-full sm:grid-cols-2 place-items-center">
    <h2
      class="flex flex-col self-end gap-2 sm:gap-4 sm:self-auto sm:justify-self-end"
    >
      <Icon name="logomark" class="h-24 text-white md:h-32" />
      <div
        class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
      >
        Build fast
        <br /> websites,
        <br /> faster.
      </div>
    </h2>
    <picture
      class="self-start w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start"
    >
      <source type="image/avif" srcset={avifSrcset} sizes={sizes} />
      <source type="image/webp" srcset={webpSrcset} sizes={sizes} />
      <source type="image/png" srcset={pngSrcset} sizes={sizes} />
      <img
        class="object-cover w-full h-full"
        src={png[0].url}
        width={png[0].width}
        height={png[0].height}
        alt="A floating astronaut in a space suit"
      />
    </picture>
  </div>
</section>

<noscript>
  <style>
    #splash-bg-fallback {
      display: block;
    }
  </style>
</noscript>

<style>
  @keyframes float {
    0% {
      transform: translate3d(0, 0, 0);
    }

    100% {
      transform: translate3d(0, 30px, 0);
    }
  }

  picture {
    animation: float linear 2.5s infinite alternate;
  }

  @media (prefers-reduced-motion: reduce) {
    picture {
      @apply animate-none;
    }

    :global(#starfield) {
      @apply hidden;
    }

    #splash-bg-fallback {
      @apply block;
    }
  }
</style>