<script setup lang="ts">
const config = useRuntimeConfig()

function trackBot() {
  fetch(`${config.public.apiBase}/api/track/bot/`, { method: 'POST' }).catch(() => {})
}

function trackChannel() {
  fetch(`${config.public.apiBase}/api/track/channel/`, { method: 'POST' }).catch(() => {})
}
</script>

<template>
  <footer class="border-t border-slate-200 bg-white py-10 text-slate-700">
    <div class="container mx-auto max-w-6xl px-4">
      <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
        <div class="space-y-2">
          <div class="flex items-center gap-2 text-lg font-heading text-slate-900">
            <span class="flex h-9 w-9 items-center justify-center rounded-full bg-blue-600 text-white font-bold">AE</span>
            Anime Enigma Language Bot
          </div>
          <p class="text-sm text-slate-600">AI-помощник для английского A1–C2 и японского N5–N1.</p>
        </div>
        <div class="flex flex-wrap items-center gap-4 text-sm">
          <a class="inline-flex items-center gap-2 hover:text-blue-700" href="https://t.me/animeenigma_language_bot" target="_blank" rel="noreferrer" @click="trackBot">
            <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
            @animeenigma_language_bot
          </a>
          <a class="inline-flex items-center gap-2 hover:text-blue-700" href="https://t.me/animeenigmalanguage" target="_blank" rel="noreferrer" @click="trackChannel">
            <span class="h-2 w-2 rounded-full bg-cyan-500"></span>
            @animeenigmalanguage
          </a>
        </div>
      </div>
    </div>
  </footer>
</template>
