---
import '../styles/global.css';

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

const {
  title = 'Aryx — A Desktop Workspace for Copilot-Powered Work',
  description = 'Aryx is a desktop workspace for Copilot-powered work across real projects. Orchestrate agents, connect local repos, and keep AI sessions organized.',
} = Astro.props;
---

<!doctype html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content={description} />
    <meta name="theme-color" content="#08080a" />

    <meta property="og:type" content="website" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={`${Astro.site}images/og.png`} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content={Astro.url.href} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={`${Astro.site}images/og.png`} />

    <link rel="icon" type="image/png" href="/favicon.png" />
    <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=Instrument+Serif&family=Outfit:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <title>{title}</title>

    <!-- Theme init (FOUC prevention) -->
    <script is:inline>
      (function () {
        var saved = localStorage.getItem('theme');
        var theme = saved || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
        if (theme === 'light') document.documentElement.setAttribute('data-theme', 'light');
      })();
    </script>
  </head>
  <body class="min-h-screen bg-deep font-body text-warm-100 antialiased">
    <!-- Navigation -->
    <nav
      class="fixed top-0 z-50 w-full border-b border-border-subtle/50 bg-deep/70 backdrop-blur-2xl"
    >
      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
        <a href="#" class="flex items-center gap-3">
          <img src="/images/logo.png" alt="Aryx" class="size-8 rounded-lg" />
          <span class="text-lg font-semibold tracking-tight text-warm-50">Aryx</span>
        </a>
        <div class="hidden items-center gap-8 md:flex">
          <a href="#features" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Features</a
          >
          <a href="#patterns" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Patterns</a
          >
          <a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Get Started</a
          >
          <button
            class="theme-toggle"
            id="theme-toggle-desktop"
            type="button"
            aria-label="Switch to light theme"
          >
            <svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
          <a
            href="https://github.com/davidkaya/aryx"
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center gap-2 rounded-lg border border-border bg-raised px-4 py-2 text-sm font-medium text-warm-100 transition hover:border-warm-600 hover:bg-card"
          >
            <svg class="size-4" viewBox="0 0 24 24" fill="currentColor">
              <path
                d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
              ></path>
            </svg>
            GitHub
          </a>
        </div>
        <button
          class="rounded-lg p-2 text-warm-400 transition hover:bg-raised hover:text-warm-100 md:hidden"
          onclick="document.getElementById('mobile-menu')?.classList.toggle('hidden')"
          aria-label="Toggle menu"
        >
          <svg class="size-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
      <div id="mobile-menu" class="hidden border-t border-border-subtle px-6 py-4 md:hidden">
        <div class="flex flex-col gap-4">
          <a href="#features" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Features</a
          >
          <a href="#patterns" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Patterns</a
          >
          <a href="#get-started" class="text-sm text-warm-400 transition hover:text-warm-50"
            >Get Started</a
          >
          <a
            href="https://github.com/davidkaya/aryx"
            target="_blank"
            rel="noopener noreferrer"
            class="text-sm text-warm-400 transition hover:text-warm-50">GitHub</a
          >
          <button
            class="theme-toggle self-start"
            id="theme-toggle-mobile"
            type="button"
            aria-label="Switch to light theme"
          >
            <svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
            </svg>
          </button>
        </div>
      </div>
    </nav>

    <main class="pt-16">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="border-t border-border-subtle/50 bg-deep">
      <div class="mx-auto max-w-6xl px-6 py-12">
        <div class="flex flex-col items-center justify-between gap-6 md:flex-row">
          <div class="flex items-center gap-3">
            <img src="/images/logo.png" alt="Aryx" class="size-6 rounded-md" />
            <span class="text-sm font-semibold text-warm-50">Aryx</span>
            <span class="text-warm-600">·</span>
            <span class="text-sm text-warm-400">A desktop workspace for Copilot-powered work</span>
          </div>
          <div class="flex items-center gap-6">
            <a
              href="https://github.com/davidkaya/aryx"
              target="_blank"
              rel="noopener noreferrer"
              class="text-sm text-warm-400 transition hover:text-warm-100">GitHub</a
            >
            <a
              href="https://github.com/davidkaya/aryx/releases"
              target="_blank"
              rel="noopener noreferrer"
              class="text-sm text-warm-400 transition hover:text-warm-100">Releases</a
            >
            <a
              href="https://github.com/davidkaya/aryx/issues"
              target="_blank"
              rel="noopener noreferrer"
              class="text-sm text-warm-400 transition hover:text-warm-100">Issues</a
            >
          </div>
        </div>
        <div
          class="mt-8 flex items-center justify-center gap-1.5 text-center text-xs text-warm-600"
        >
          <span>&copy; 2026 Built with</span>
          <svg
            aria-hidden="true"
            class="size-3.5 text-brand"
            viewBox="0 0 24 24"
            fill="currentColor"
          >
            <path
              d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
            ></path>
          </svg>
          <span>by Dávid Kaya.</span>
        </div>
        <p class="mt-4 text-center text-[11px] leading-relaxed text-warm-700">
          GitHub and GitHub Copilot are trademarks of Microsoft Corporation.<br />
          Aryx is an independent project, not affiliated with or endorsed by Microsoft or GitHub.
        </p>
      </div>
    </footer>

    <!-- Scroll reveal observer -->
    <script>
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              entry.target.classList.add('revealed');
              observer.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.08, rootMargin: '0px 0px -40px 0px' },
      );
      document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
    </script>

    <!-- Theme toggle + screenshot swap -->
    <script>
      function getTheme() {
        return document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
      }

      function applyTheme(theme) {
        if (theme === 'light') {
          document.documentElement.setAttribute('data-theme', 'light');
        } else {
          document.documentElement.removeAttribute('data-theme');
        }
        localStorage.setItem('theme', theme);

        // Update meta theme-color
        var meta = document.querySelector('meta[name="theme-color"]');
        if (meta) meta.setAttribute('content', theme === 'light' ? '#f6f4f1' : '#08080a');

        // Update aria-labels
        var label = theme === 'light' ? 'Switch to dark theme' : 'Switch to light theme';
        document.querySelectorAll('.theme-toggle').forEach(function (btn) {
          btn.setAttribute('aria-label', label);
        });

        // Swap themed images
        document.querySelectorAll('[data-src-dark]').forEach(function (img) {
          img.setAttribute('src', theme === 'light' ? img.getAttribute('data-src-light') : img.getAttribute('data-src-dark'));
        });
      }

      function toggleTheme() {
        applyTheme(getTheme() === 'light' ? 'dark' : 'light');
      }

      // Bind toggle buttons
      document.querySelectorAll('.theme-toggle').forEach(function (btn) {
        btn.addEventListener('click', toggleTheme);
      });

      // Apply on load (screenshots + aria)
      applyTheme(getTheme());

      // Listen for system preference changes
      matchMedia('(prefers-color-scheme: light)').addEventListener('change', function (e) {
        if (!localStorage.getItem('theme')) {
          applyTheme(e.matches ? 'light' : 'dark');
        }
      });
    </script>
  </body>
</html>
