<script lang="ts">
  import { onMount } from "svelte";
  import Header from "$lib/components/Header.svelte";
  import Footer from "$lib/components/Footer.svelte";
  import favicon from "$lib/assets/favicon.svg";
  import "$lib/styles/global.css";

  let { children } = $props();

  onMount(() => {
    const loadFonts = () => {
      if (document.querySelector('link[data-app-fonts="true"]')) return;

      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href =
        "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";
      link.setAttribute("data-app-fonts", "true");
      document.head.appendChild(link);
    };

    const loadAnalytics = () => {
      if (document.querySelector('script[data-goatcounter-script="true"]'))
        return;

      const script = document.createElement("script");
      script.src = "https://stats.wsap.dev/count.js";
      script.async = true;
      script.defer = true;
      script.setAttribute("data-goatcounter", "https://stats.wsap.dev/count");
      script.setAttribute("data-goatcounter-script", "true");
      document.head.appendChild(script);
    };

    const runDeferredLoads = () => {
      loadFonts();
      loadAnalytics();
    };

    if (document.readyState === "complete") {
      window.setTimeout(runDeferredLoads, 0);
      return;
    }

    window.addEventListener("load", runDeferredLoads, { once: true });
    return () => window.removeEventListener("load", runDeferredLoads);
  });
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

<Header title="Berke Güzel" description="Super. Bad. Code." />

<main class="container">
  {@render children()}
</main>

<Footer />
