<script lang="ts">
    import { onMount } from "svelte"
    import Header from "./lib/components/header/Header.svelte"
    import Footer from "./lib/components/Footer.svelte"
    import Notifications from "./lib/components/widgets/Notifications.svelte"
    import { isMobile, location, openModal } from "./lib/store"
    import StaticHomepage from "./routes/StaticHomepage.svelte"

    let innerWidth = $state(0)
    $effect(() => {
        $isMobile = innerWidth <= 1024
    })

    let googleCookiesAllowed = $state(false)
    const googleCookieName = "googleAnalytics"

    const syncModalState = () => {
        if (typeof document === "undefined") return
        $openModal = document.querySelectorAll(".dialog-open").length > 0
    }

    let previousPath = ""
    const unsubscribe = location.subscribe((value) => {
        if (typeof window !== "undefined" && value.push && previousPath !== value.path) {
            window.scrollTo({ top: 0, behavior: "smooth" })
        }
        previousPath = value.path
    })

    onMount(() => {
        const interval = setInterval(syncModalState, 150)
        let consentHandler: EventListener | null = null

        if (typeof window !== "undefined") {
            const evaluateCookieConsent = () => {
                googleCookiesAllowed = document.cookie
                    .split(";")
                    .map((cookie) => cookie.trim())
                    .some((cookie) => cookie.startsWith("ccTags") && cookie.includes(googleCookieName))
            }

            const onConsent = (event: CustomEvent<string[]>) => {
                const values = event.detail || []
                if (Array.isArray(values) && values.includes(googleCookieName)) {
                    googleCookiesAllowed = true
                }
            }

            evaluateCookieConsent()
            consentHandler = onConsent as EventListener
            window.addEventListener("ccAccept", consentHandler)
        }

        return () => {
            clearInterval(interval)
            if (typeof window !== "undefined" && consentHandler) {
                window.removeEventListener("ccAccept", consentHandler)
            }
            unsubscribe()
        }
    })
</script>

<svelte:window bind:innerWidth />

<svelte:head>
    {#if googleCookiesAllowed}
        <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=G-SH85R88QE0"
        ></script>
        <script>
            window.dataLayer = window.dataLayer || []
            function gtag() {
                dataLayer.push(arguments)
            }
            gtag("js", new Date())
            gtag("config", "G-SH85R88QE0")
        </script>
    {/if}
</svelte:head>

<div class="app-shell">
    <Header />
    <main>
        <StaticHomepage />
    </main>
    <Footer />
</div>

<Notifications />

<style
    lang="less"
    global
>
    @import "./lib/assets/css/variables.less";
    @import "./lib/assets/css/main.less";
    @import "../assets/fonts/fonts.css";
    @import "./lib/assets/css/formular.less";

    html,
    body {
        font-family: "Outfit", sans-serif;
        background-color: var(--bg-100);
        min-height: 100vh;

        button {
            font-family: inherit;
        }

        @media @mobile {
            font-size: 16px;
        }

        @media @min-tablet {
            font-size: 18px;
        }
        .app-shell {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--bg-100);
        }

        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
        }
    }
</style>
