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

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

const { title, description = 'Open protocol for AI agent reputation. Evidence-linked, cryptographically signed skill attestations.', narrow = false } = Astro.props;
const currentPath = Astro.url.pathname;
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:type" content="website" />

  <title>{title}</title>
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <slot name="head" />
</head>
<body>
  <nav>
    <div class="nav-inner">
      <a href="/" class="logo">KREDO</a>
      <button class="nav-toggle" aria-label="Toggle navigation">&#9776;</button>
      <div class="nav-links">
        <a href="/protocol" class={currentPath.startsWith('/protocol') ? 'active' : ''}>Protocol</a>
        <a href="/drift" class={currentPath.startsWith('/drift') ? 'active' : ''}>Drift</a>
        <a href="/developers" class={currentPath.startsWith('/developers') ? 'active' : ''}>Developers</a>
        <a href="/faq" class={currentPath.startsWith('/faq') ? 'active' : ''}>FAQ</a>
        <a href="/about" class={currentPath.startsWith('/about') ? 'active' : ''}>About</a>
        <a href="/app/" class="nav-cta">Launch App</a>
      </div>
    </div>
  </nav>

  <main class={narrow ? 'narrow' : ''}>
    <slot />
  </main>

  <footer>
    <div class="footer-inner">
      <div class="footer-brand">
        <span class="footer-logo">KREDO</span>
        <p class="tagline">Because trust should come with receipts.</p>
      </div>
      <div class="footer-col">
        <h4>Protocol</h4>
        <a href="/protocol">Specification</a>
        <a href="/developers">For Developers</a>
        <a href="/faq">FAQ</a>
        <a href="/about">About</a>
      </div>
      <div class="footer-col">
        <h4>Resources</h4>
        <a href="https://api.aikredo.com" target="_blank" rel="noopener">Discovery API</a>
        <a href="https://github.com/jimmotes2024/kredo" target="_blank" rel="noopener">GitHub</a>
        <a href="https://pypi.org/project/kredo/" target="_blank" rel="noopener">PyPI</a>
        <a href="mailto:trustwrit@gmail.com">Contact</a>
      </div>
    </div>
    <div class="footer-bottom">
      <p class="copyright">Kredo Protocol &mdash; Jim Motes &amp; Vanguard, 2026</p>
    </div>
  </footer>

  <script>
    const toggle = document.querySelector('.nav-toggle');
    const links = document.querySelector('.nav-links');
    if (toggle && links) {
      toggle.addEventListener('click', () => links.classList.toggle('open'));
    }
  </script>
</body>
</html>
