---
import { SITE } from '../data/site'

const columns = [
  {
    title: 'get started',
    links: [
      { href: '/docs/', label: 'overview' },
      { href: '/docs/installation/', label: 'installation' },
      { href: '/docs/quickstart/', label: 'quickstart' },
      { href: '/docs/providers/', label: 'providers' },
    ],
  },
  {
    title: 'reference',
    links: [
      { href: '/docs/slash-commands/', label: 'slash commands' },
      { href: '/docs/cli-reference/', label: 'cli reference' },
      { href: '/docs/configuration/', label: 'configuration' },
      { href: '/docs/keybindings/', label: 'keybindings' },
      { href: '/docs/skills/', label: 'skills' },
    ],
  },
  {
    title: 'project',
    links: [
      { href: SITE.github, label: 'github' },
      { href: SITE.npmUrl, label: 'npm' },
      { href: `${SITE.github}/blob/main/LICENSE`, label: 'license' },
      { href: `${SITE.github}/issues`, label: 'issues' },
    ],
  },
  {
    title: 'gitlawb',
    links: [
      { href: SITE.gitlawb, label: 'gitlawb.com' },
      { href: SITE.gitlawbRepo, label: 'repo mirror' },
      { href: `${SITE.gitlawb}/architecture`, label: 'architecture' },
      { href: `${SITE.gitlawb}/agents`, label: 'agents' },
    ],
  },
]
---

<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      {columns.map(col => (
        <div class="footer-col">
          <h4>{col.title}</h4>
          <ul>
            {col.links.map(l => (
              <li>
                <a href={l.href} rel={l.href.startsWith('http') ? 'noopener' : undefined}>{l.label}</a>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
    <div class="footer-bottom">
      <span class="brand">
        <img src="/openclaude.png" alt="" width="18" height="18" />
        <span>openclaude</span>
        <span class="ver">v{SITE.version}</span>
      </span>
      <span class="sep">·</span>
      <span>open source coding agent, aligned with <a href={SITE.gitlawb} rel="noopener">gitlawb</a></span>
      <span class="sep">·</span>
      <span>runs anywhere. uses anything.</span>
    </div>
  </div>
</footer>
