---
import { generateImage } from "astro-eleventy-img";
import { Icon } from "astro-icon";
import Starfield from "~/components/starfield.astro";
import Copynpm from "~/components/copynpm.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 flex flex-col-reverse justify-end pt-16 h-full astro-lg:grid-cols-2 place-items-center astro-lg:grid astro-lg:pt-0 astro-img:pt-10"
  >
    <!-- <div class="relative grid h-full astro-lg:grid-cols-2 place-items-center"> -->
    <div class="flex flex-col">
      <h2
        class="flex flex-col items-center gap-2 sm:gap-4 sm:self-auto sm:justify-self-end w-screen"
      >
        <div
          class="font-extrabold tracking-tighter text-center text-8xl gradient-text"
        >
          Build fast
          <br /> websites,
          <br /> faster.
        </div>
      </h2>
      <div
        class="mt-8 flex justify-center flex-col items-center astro-lg:flex-row astro-lg:justify-center astro-sm:w-screen"
      >
        <button
          class="flex items-center w-4/5 astro-md:w-1/2 justify-center bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded transition-colors astro-lg:w-auto"
        >
          <span>Get Started</span>
          <Icon name="mdi:arrow-right" width="20px" height="20px" />
        </button>
        <Copynpm />
      </div>
    </div>
    <picture
      class="w-2/3 max-w-3xl sm:w-10/12 sm:self-auto sm:justify-self-start flex justify-center"
    >
      <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 ml-[-3rem] astro-lg:ml-0 astro-img:w-[50%]"
        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>
