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

import { ViewTransitions } from 'astro:transitions';
import squadLogo from '../assets/images/squad-logo.png';
const { title, description = 'Squad — Your AI Development Team. Describe what you\'re building. Get a team of specialists that live in your repo.' } = Astro.props;
const fullTitle = `${title} — Squad Docs`;
const canonicalUrl = Astro.site ? new URL(Astro.url.pathname, Astro.site).href : undefined;
const ogImage = Astro.site ? new URL(squadLogo.src, Astro.site).href : squadLogo.src;
---

<!doctype html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <meta name="generator" content={Astro.generator} />
    <link rel="icon" type="image/png" href={squadLogo.src} />
    <title>{fullTitle}</title>

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content={fullTitle} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={ogImage} />
    {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={fullTitle} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogImage} />

    <ViewTransitions />

    <script is:inline>
      function restoreTheme() {
        const theme = localStorage.getItem('theme');
        if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
      }
      restoreTheme();
      document.addEventListener('astro:after-swap', restoreTheme);
      document.addEventListener('astro:page-load', restoreTheme);
      window.addEventListener('pageshow', (e) => { if (e.persisted) restoreTheme(); });
    </script>
  </head>
  <body class="min-h-screen bg-white dark:bg-surface-950 text-surface-900 dark:text-surface-100 antialiased">
    <slot />
    <!-- Code block copy button -->
    <script is:inline>
      function initCopyButtons() {
        document.querySelectorAll('pre').forEach((pre) => {
          if (pre.querySelector('.copy-btn')) return;
          const btn = document.createElement('button');
          btn.className = 'copy-btn absolute top-2 right-2 px-2 py-1 text-xs rounded bg-surface-700 text-surface-100 hover:bg-squad-600 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100';
          btn.setAttribute('aria-label', 'Copy code');
          btn.textContent = 'Copy';
          pre.classList.add('relative', 'group');
          pre.appendChild(btn);
          btn.addEventListener('click', async () => {
            const code = pre.querySelector('code')?.innerText ?? pre.innerText;
            await navigator.clipboard.writeText(code);
            btn.textContent = 'Copied!';
            setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
          });
        });
      }
      document.addEventListener('astro:page-load', initCopyButtons);
      initCopyButtons();
    </script>
  </body>
</html>
<style is:global>
  @import '../styles/global.css';
</style>
