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

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

<template>
  <section class="py-16 sm:py-20 lg:py-24">
    <div class="container mx-auto max-w-5xl px-4">
      <div class="section-shell p-[1px] bg-gradient-to-r from-blue-100 via-white to-indigo-100">
        <div class="rounded-3xl bg-white px-8 py-10 text-center shadow-card sm:px-12 sm:py-14">
          <p class="badge mx-auto">Готов к старту</p>
          <h2 class="mt-4 font-heading text-3xl sm:text-4xl">Начни изучать язык сегодня</h2>
          <p class="mt-3 text-lg text-slate-700 sm:text-xl">Учись в удобном формате с помощью AI</p>
          <div class="mt-6 flex flex-wrap items-center justify-center gap-4">
            <a
              class="inline-flex items-center gap-2 rounded-full bg-blue-600 px-6 py-3 text-base font-semibold text-white shadow-floating transition hover:-translate-y-1 hover:bg-blue-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
              href="https://t.me/animeenigma_language_bot"
              target="_blank"
              rel="noreferrer"
              @click="trackBot"
            >
              Открыть Telegram-бота
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 12h14m0 0-5-5m5 5-5 5" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
