---
import '@/styles/global.css'
import '@/styles/typography.css'

import Footer from '@/components/Footer.astro'
import Head from '@/components/Head.astro'
import Navbar from '../components/svelte/Navbar.svelte'
import { SITE } from '@/consts'
import { cn } from '@/lib/utils'
import { ClientRouter } from 'astro:transitions'

const {
  isWide = false
} = Astro.props
---

<!doctype html>
<html lang={SITE.locale}>
  <Head>
    <ClientRouter />
    <slot name="head" />
    <script is:inline src="https://analytics.ahrefs.com/analytics.js" data-key="+FHMgRP7/Duxaq5D0gZtJw" async></script>
    
    <!-- Preload critical resources -->
    <link rel="preload" href="/fonts/ClashDisplay/ClashDisplay-Semibold.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="/fonts/Lexend/Lexend-Regular.woff2" as="font" type="font/woff2" crossorigin />

    <!-- DNS prefetch for external resources -->
    <link rel="dns-prefetch" href="//analytics.ahrefs.com" />
    
    <script is:inline data-astro-rerun>
      (function() {
        try {
          const localStorageTheme = localStorage.getItem('theme');
          const isDark = 
            (localStorageTheme === 'dark') || 
            (!localStorageTheme && window.matchMedia('(prefers-color-scheme: dark)').matches);
          
          document.documentElement.classList.toggle('dark', isDark);
          localStorage.setItem('theme', isDark ? 'dark' : 'light');
          
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (!localStorage.getItem('theme')) {
              document.documentElement.classList.toggle('dark', e.matches);
              localStorage.setItem('theme', e.matches ? 'dark' : 'light');
            }
          });
        } catch (error) {
          console.warn('Theme setting failed:', error);
        }
      })();
    </script>
    <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="/rss.xml" />
  </Head>
  <body>
    <div class="flex h-fit min-h-screen w-full max-w-full flex-col gap-y-4 sm:gap-y-6 font-sans overflow-x-hidden">
      <Navbar client:load />
      <main class="flex grow flex-col bg-background mt-16 lg:mt-6" aria-label="Main content" role="main">
        <div
          class={cn(
            'mx-auto flex grow flex-col gap-y-4 sm:gap-y-6 w-full',
            isWide ? 'py-10 sm:py-16 md:py-20 lg:py-24' : 'px-3 py-10 sm:py-16 md:py-20 lg:py-24 sm:px-6 lg:px-8 max-w-5xl'
          )}
        >
          <slot />
        </div>
      </main>
      <Footer />
    </div>
  </body>
</html>
