---
import { ClientRouter } from "astro:transitions";
import BackToTop from "@/components/ui/back-to-top";
import { useTranslations } from "@/i18n/utils";
import type { Lang } from "@/types/i18n";
import { defaultLang } from "@/i18n/ui";
import "../styles/global.css";

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

const lang = Astro.currentLocale as Lang || defaultLang;
const { title = "Joey Z. - Portfolio", description = "Engineering-focused personal website" } =
  Astro.props;
const t = useTranslations(lang);
---

<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <!-- Preload critical fonts - using WOFF2 for better compression -->
    <link rel="preload" href="/fonts/archivo-700.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="/fonts/space-grotesk-400.woff2" as="font" type="font/woff2" crossorigin />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <title>{title} | {t("site.title")}</title>
    <!-- View Transitions for smooth page transitions -->
    <ClientRouter />
    <meta name="view-transition" content="same-origin" />
    {
      import.meta.env.MODE === 'production' && (
      <script defer src="https://cloud.umami.is/script.js" data-website-id="a79f759b-74ae-4165-b738-56d123a1c6be"></script>
      )
    }
  </head>
  <body
    class="min-h-screen bg-background font-sans antialiased selection:bg-primary/20 selection:text-primary"
  >
    <div
      class="fixed inset-0 -z-10 h-full w-full bg-background"
    >
      <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(37,99,235,0.12),rgba(255,255,255,0))]"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(139,92,246,0.08),transparent_40%)]"></div>
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(249,115,22,0.05),transparent_40%)]"></div>
    </div>
    <slot />
    <BackToTop client:idle />
  </body>
</html>

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme");
    }
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };
  const isDark = getThemePreference() === "dark";
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");

  if (typeof localStorage !== "undefined") {
    const observer = new MutationObserver(() => {
      const isDark = document.documentElement.classList.contains("dark");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
</script>

<style>
  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
  }

  :root {
    --transition-standard: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  body {
    transition:
      background-color var(--transition-standard),
      color var(--transition-standard);
  }

  /* Page transition animations */
  @keyframes pageIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  main {
    animation: pageIn 0.4s ease-out forwards;
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    main {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
</style>
