<script setup>
import { RouterLink } from "vue-router"
import { Github, Heart } from "lucide-vue-next"

const currentYear = new Date().getFullYear()
</script>

<template>
  <footer class="border-t border-border bg-card">
    <div class="container py-12">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- Brand -->
        <div>
          <div class="flex items-center gap-2 mb-4">
            <div class="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
              <div class="h-4 w-4 rounded-full border-2 border-primary-foreground" />
            </div>
            <span class="font-bold text-lg">NoSys</span>
          </div>
          <p class="text-sm text-muted-foreground">
            A social network no one can control. 100% decentralized.
          </p>
        </div>

        <!-- Product -->
        <div>
          <h3 class="font-semibold mb-4">Product</h3>
          <ul class="space-y-3">
            <li>
              <RouterLink to="/about" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                About
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/how-it-works" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                How It Works
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/downloads" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Downloads
              </RouterLink>
            </li>
          </ul>
        </div>

        <!-- Resources -->
        <div>
          <h3 class="font-semibold mb-4">Resources</h3>
          <ul class="space-y-3">
            <li>
              <RouterLink to="/documentation" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Documentation
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/community" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Community
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/blog" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Blog
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/support" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Support
              </RouterLink>
            </li>
          </ul>
        </div>

        <!-- Legal -->
        <div>
          <h3 class="font-semibold mb-4">Legal</h3>
          <ul class="space-y-3">
            <li>
              <RouterLink to="/privacy" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Privacy Policy
              </RouterLink>
            </li>
            <li>
              <RouterLink to="/license" class="text-sm text-muted-foreground hover:text-foreground transition-colors">
                Open Source License
              </RouterLink>
            </li>
            <li>
              <RouterLink
                to="/community#donate"
                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
              >
                <Heart class="h-4 w-4" />
                Donate
              </RouterLink>
            </li>
            <li>
              <a
                href="https://github.com"
                target="_blank"
                rel="noopener noreferrer"
                class="text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2"
              >
                <Github class="h-4 w-4" />
                GitHub
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="mt-8 pt-8 border-t border-border text-center text-sm text-muted-foreground">
        <p>© {{ currentYear }} NoSys. Open source and decentralized.</p>
      </div>
    </div>
  </footer>
</template>
