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

const {
  title = "TUIkit: Terminal UI Framework for Swift",
  description = "A declarative, SwiftUI-like framework for building Terminal User Interfaces in Swift. Pure Swift with no ncurses or C dependencies.",
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<!doctype html>
<html lang="en" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
    <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
    <link rel="apple-touch-icon" href="/favicon-512.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="canonical" href={canonicalURL} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <meta name="keywords" content="swift, terminal, TUI, framework, SwiftUI, CLI, ncurses alternative, macOS, Linux, terminal UI, declarative" />

    <!-- Open Graph -->
    <meta property="og:title" content={title} />
    <meta property="og:description" content="Build terminal apps with SwiftUI-like syntax. Pure Swift, no ncurses." />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:site_name" content="TUIkit" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="TUIkit: Terminal UI Framework for Swift" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content="Build terminal apps with SwiftUI-like syntax. Pure Swift, no ncurses." />
    <meta name="twitter:image" content="/og-image.png" />

    <!-- Fonts: combined request, preconnect for faster DNS/TLS -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Nunito:wght@400;500;600;700&display=swap" rel="stylesheet" />

    <!-- Preload sounds for instant playback -->
    <link rel="preload" href="/sounds/power-on.mp3" as="fetch" crossorigin />
    <link rel="preload" href="/sounds/hard-drive-boot.m4a" as="fetch" crossorigin />

    <!-- Analytics -->
    <link rel="preconnect" href="https://cloud.umami.is" />
    <script defer src="https://cloud.umami.is/script.js" data-website-id="4085eff5-2e56-4e3a-ba91-cf0828914169"></script>

    <!-- Theme initialization (blocks to prevent FOUC) -->
    <script is:inline>
      (function() {
        try {
          var stored = localStorage.getItem('tuikit-theme');
          if (stored && ['green','amber','red','violet','blue','white'].includes(stored)) {
            document.documentElement.setAttribute('data-theme', stored);
          } else {
            document.documentElement.setAttribute('data-theme', 'green');
          }
        } catch(e) {
          document.documentElement.setAttribute('data-theme', 'green');
        }
      })();
    </script>

    <!-- Structured Data -->
    <script type="application/ld+json" set:html={JSON.stringify({
      "@context": "https://schema.org",
      "@type": "SoftwareSourceCode",
      "name": "TUIkit",
      "description": "A declarative, SwiftUI-like framework for building Terminal User Interfaces in Swift.",
      "url": "https://tuikit.layered.work",
      "codeRepository": "https://github.com/phranck/TUIkit",
      "programmingLanguage": "Swift",
      "operatingSystem": ["macOS", "Linux"],
      "license": "https://opensource.org/licenses/MIT",
    })} />
  </head>
  <body class="antialiased">
    <slot />
  </body>
</html>

<style is:global>
  @import "../styles/global.css";
</style>
