---
import Header from "~/components/header.astro";
import Splash from "~/components/splash.astro";
import "~/styles/index.css";

const { site } = Astro;
const image = new URL("social.jpg", site);
const description =
  "Build fast websites, faster. Astro is a new kind of site builder for the modern web. Lightning-fast performance meets powerful developer experience.";
---

<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="/favicon.ico" sizes="any" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

    <title>Astro Reactive Library</title>
    <meta name="description" content={description} />

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="preload"
      as="style"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
      />
    </noscript>

    <!-- social media -->
    <meta property="og:title" content="Astro" />
    <meta property="og:type" content="website" />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={site} />
    <meta name="twitter:card" content="summary_large_image" />

    <!-- initialize theme -->
    <script is:inline>
      const themeSaved = localStorage.getItem("theme");

      if (themeSaved) {
        document.documentElement.dataset.theme = themeSaved;
      } else {
        const prefersDark = window.matchMedia(
          "(prefers-color-scheme: dark)"
        ).matches;
        document.documentElement.dataset.theme = prefersDark ? "dark" : "light";
      }

      window
        .matchMedia("(prefers-color-scheme: dark)")
        .addEventListener("change", (event) => {
          if (!localStorage.getItem("theme")) {
            document.documentElement.dataset.theme = event.matches
              ? "dark"
              : "light";
          }
        });
    </script>
  </head>
  <body
    class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
  >
    <Header />
    <Splash />
    <div class="h-screen">
      <h1>This section is added just to test the sticky header :)</h1>
    </div>
  </body>
</html>
