<template>
  <section id="hero" class="hero-gradient min-h-screen flex items-center justify-center px-4 py-24">
    <div class="max-w-4xl mx-auto text-center section-hidden" ref="sectionRef">
      <div class="mb-6">
        <UBadge color="primary" variant="soft" size="lg" class="mb-4">
          Доступен для новых проектов
        </UBadge>
      </div>
      <h1 class="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
        Алексей<br>
        <span class="text-indigo-400">Разработчик</span>
      </h1>
      <p class="text-xl md:text-2xl text-gray-400 mb-4 font-medium">
        Fullstack Developer · NestJS · Nuxt 3 · TypeScript
      </p>
      <p class="text-lg text-gray-500 max-w-2xl mx-auto mb-10">
        Создаю современные веб-приложения с чистым кодом и отличным UX.
        От MVP до production-ready решений.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <UButton
          size="xl"
          color="primary"
          icon="i-heroicons-paper-airplane"
          @click="scrollTo('#contact')"
        >
          Связаться
        </UButton>
        <UButton
          size="xl"
          variant="ghost"
          color="neutral"
          icon="i-heroicons-code-bracket"
          @click="scrollTo('#projects')"
        >
          Проекты
        </UButton>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const sectionRef = ref<HTMLElement | null>(null);

function scrollTo(selector: string) {
  document.querySelector(selector)?.scrollIntoView({ behavior: 'smooth' });
}

onMounted(() => {
  if (sectionRef.value) {
    sectionRef.value.classList.remove('section-hidden');
    sectionRef.value.classList.add('section-visible');
  }
});
</script>
