---
import { cn } from "@/lib/utils";

const title =
  "Placeholder title of your website";
const description =
  "Placeholder description of your website";
const url = "https://placeholder.com";
const image = "/public/preview.webp";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="index, follow" />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />

    <title>
      {title}
    </title>
    <meta name="description" content={description} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={url} />
    <meta property="og:type" content="website" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta property="twitter:title" content={title} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={image} />

    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "url": "https://placeholder.com",
        "name":   "Placeholder title of your website",
        "description": "Placeholder title of your website"
      }
    </script>

    <!-- Script for light/dark mode -->
    <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>
  </head>
  <body class={cn("bg-background font-sans text-primary")}>
    <slot />
  </body>
</html>
