---
import "@/style/globals.css";
import { ClientRouter } from "astro:transitions";

import Header from "@/components/header";
import Footer from "@/components/footer";
import Background from "@/components/background";
import ThemeSwitcher from "@/components/theme-switcher";
import AnimationSwitcher from "@/components/animation-switcher";
import VercelAnalytics from "@/components/analytics";
import MobileNav from "@/components/mobile-nav";
import { THEME_LOADER_SCRIPT, THEME_NAV_SCRIPT } from "@/lib/themes/loader";
import { ANIMATION_LOADER_SCRIPT, ANIMATION_NAV_SCRIPT } from "@/lib/animations/loader";

export interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
const ogImage = "https://timmypidashev.dev/og-image.jpg";
---

<html lang="en">
  <head>
    <title>{title}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta property="og:image" content={ogImage} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:image" content={ogImage} />
    <meta name="twitter:description" content={description} />
    <meta name="description" content={description} />
    <meta property="og:description" content={description} />
    <link rel="icon" type="image/jpeg" href="/me.jpeg" />
    <ClientRouter
      defaultTransition={false}
      handleFocus={false}
    />
    <script is:inline>
      if (window.innerWidth < 1024 || navigator.maxTouchPoints > 0) {
        document.addEventListener('click', function(e) {
          var a = e.target.closest('a[href]');
          if (a && a.href && !a.target && a.origin === location.origin) {
            e.preventDefault();
            e.stopPropagation();
            window.location.href = a.href;
          }
        }, true);
      }
    </script>
    <script is:inline set:html={THEME_LOADER_SCRIPT} />
    <script is:inline set:html={ANIMATION_LOADER_SCRIPT} />
  </head>
  <body class="bg-background text-foreground min-h-screen flex flex-col">
    <Header client:load />
    <main class="flex-1 flex flex-col">
      <div class="max-w-5xl mx-auto pt-2 lg:pt-12 px-4 py-4 lg:py-8 pb-20 lg:pb-8 flex-1 relative z-10">
        <Background layout="content" position="right" client:only="react" transition:persist />
        <div>
          <slot />
        </div>
        <Background layout="content" position="left" client:only="react" transition:persist />
      </div>
    </main>
    <div class="mt-auto">
      <Footer client:load transition:persist />
    </div>
    <ThemeSwitcher client:only="react" transition:persist />
    <AnimationSwitcher client:only="react" transition:persist />
    <VercelAnalytics client:load />
    <MobileNav client:load />
    <script is:inline set:html={`window.scrollTo(0,0);` + THEME_NAV_SCRIPT} />
    <script is:inline set:html={ANIMATION_NAV_SCRIPT} />
  </body>
</html>
