<template>
  <footer
    class="bg-gray-100 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-8 transition-colors"
  >
    <div class="max-w-full mx-auto px-6 py-8">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
        <div>
          <h3 class="font-semibold mb-3 text-gray-900 dark:text-gray-100">
            KohakuBoard
          </h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">
            ML Experiment Tracking & Visualization
          </p>
        </div>

        <div>
          <h3 class="font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Resources
          </h3>
          <div class="flex flex-col gap-2 text-sm">
            <a
              href="https://github.com/KohakuBlueleaf/KohakuHub"
              target="_blank"
              rel="noopener noreferrer"
              class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
            >
              Documentation
            </a>
            <a
              href="https://github.com/KohakuBlueleaf/KohakuHub"
              target="_blank"
              rel="noopener noreferrer"
              class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
            >
              GitHub
            </a>
          </div>
        </div>

        <div>
          <h3 class="font-semibold mb-3 text-gray-900 dark:text-gray-100">
            Community
          </h3>
          <div class="flex flex-col gap-2 text-sm">
            <a
              href="https://discord.gg/xWYrkyvJ2s"
              target="_blank"
              rel="noopener noreferrer"
              class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
            >
              Discord
            </a>
          </div>
        </div>
      </div>

      <div
        class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-600 text-center text-sm text-gray-600 dark:text-gray-400"
      >
        © 2025 KohakuBoard. Part of KohakuHub Project
      </div>
    </div>
  </footer>
</template>
