---
import { Image } from 'astro:assets';
import squadLogo from '../assets/images/squad-logo.png';
const base = import.meta.env.BASE_URL;
---

<footer class="border-t border-surface-200 dark:border-surface-800 mt-16" data-pagefind-ignore>
  <div class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
      <div>
        <div class="flex items-center gap-2 mb-3">
          <Image src={squadLogo} alt="Squad" class="h-6 w-6" />
          <span class="font-semibold text-surface-900 dark:text-white">Squad</span>
        </div>
        <p class="text-base text-surface-500 dark:text-surface-400">
          Your AI Development Team. Describe what you're building. Get a team of specialists that live in your repo.
        </p>
      </div>

      <div>
        <h4 class="font-semibold text-surface-900 dark:text-white mb-3 text-base">Documentation</h4>
        <ul class="space-y-2 text-base">
          <li><a href={`${base}docs/get-started/installation/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">Get Started</a></li>
          <li><a href={`${base}docs/features/team-setup/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">Features</a></li>
          <li><a href={`${base}docs/reference/cli/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">CLI Reference</a></li>
          <li><a href={`${base}docs/reference/sdk/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">SDK Reference</a></li>
        </ul>
      </div>

      <div>
        <h4 class="font-semibold text-surface-900 dark:text-white mb-3 text-base">Community</h4>
        <ul class="space-y-2 text-base">
          <li><a href="https://github.com/bradygaster/squad/discussions" class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors" target="_blank" rel="noopener">Discussions</a></li>
          <li><a href="https://github.com/bradygaster/squad/issues" class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors" target="_blank" rel="noopener">Issues</a></li>
          <li><a href={`${base}docs/guide/contributing/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">Contributing</a></li>
          <li><a href={`${base}blog/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">Blog</a></li>
        </ul>
      </div>

      <div>
        <h4 class="font-semibold text-surface-900 dark:text-white mb-3 text-base">Resources</h4>
        <ul class="space-y-2 text-base">
          <li><a href="https://www.npmjs.com/package/@bradygaster/squad-cli" class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors" target="_blank" rel="noopener">npm — squad-cli</a></li>
          <li><a href="https://www.npmjs.com/package/@bradygaster/squad-sdk" class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors" target="_blank" rel="noopener">npm — squad-sdk</a></li>
          <li><a href="https://github.com/bradygaster/squad" class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors" target="_blank" rel="noopener">GitHub</a></li>
          <li><a href={`${base}docs/whatsnew/`} class="text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">What's New</a></li>
        </ul>
      </div>
    </div>

    <div class="mt-8 pt-6 border-t border-surface-200 dark:border-surface-800 text-center text-base text-surface-500 dark:text-surface-400">
      <p>MIT License · Built with <a href="https://astro.build" class="text-squad-600 dark:text-squad-400 hover:underline" target="_blank" rel="noopener">Astro</a></p>
      <p class="text-xs text-surface-400 dark:text-surface-500 mt-1">
        v{__VERSION__} · {(__COMMIT_SHA__ as string).slice(0, 7)} · {__BUILD_DATE__}
      </p>
    </div>
  </div>
</footer>
