---
import Logo from "components/Logo.astro";
---

<header id="main-header">
  <div class="inner-container">
    <Logo />
    <button id="get-started-button" class="button">Get Started</button>
  </div>
</header>
<script>
  import { animate } from "motion";
  import { ease } from "@unom/style";

  const getStartedButton = document.getElementById("get-started-button");
  const header = document.getElementById("main-header");

  if (header) {
    animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
  }

  if (getStartedButton) {
    animate(
      getStartedButton,
      { scale: [0, 1] },
      { ...ease.quart(0.6).out, delay: 0 }
    );
  }
</script>
<style lang="postcss">
  header {
    position: fixed;
    width: 100%;
    top: 2rem;
    z-index: 99;

    & .inner-container {
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      border-radius: 100px;
      margin: auto;
      max-width: var(--content-max-width);
      padding: var(--padding-main);
      background-color: var(--color-neutral-accent);
    }
  }
</style>