<script lang="ts" setup>
import {ChevronDown, Github, Globe, Linkedin} from 'lucide-vue-next'
import avatarUser from '@/assets/avatar-bot.png'
import config from "@/config";
import type {Profile} from '@/domain/models/Profile'

defineProps<{
  profile: Profile
}>()

function getSocialIcon(platform) {
  const icons = {
    github: Github,
    linkedin: Linkedin,
    portfolio: Globe
  }
  return icons[platform] || Globe
}

function scrollToSection(sectionId) {
  document.getElementById(sectionId)?.scrollIntoView({behavior: 'smooth'})
}
</script>

<template>
  <section
      class="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-200 to-pink-200 dark:from-gray-900 dark:to-purple-900 pt-16">
    <div class="container mx-auto px-4 text-center">
      <div class="max-w-4xl mx-auto">
        <!-- Avatar -->
        <div class="mb-8">
          <img
              :alt="profile?.name"
              :src="avatarUser"
            class="w-32 h-32 rounded-full mx-auto shadow-2xl border-4 border-white dark:border-gray-700"
          />
        </div>

        <!-- Name and Title -->
        <h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-4">
          {{ profile?.name }}
        </h1>
        <h2 class="text-2xl md:text-3xl text-purple-600 dark:text-purple-400 font-semibold mb-6">
          <VueTyper
              :erase-delay='250'
              :erase-on-complete='false'
              :pre-erase-delay='2000'
              :pre-type-delay='100'
              :repeat='Infinity'
              :shuffle='false'
              :text="profile?.title ? [profile.title] : ['Cargando...']"
              :type-delay='100'
              caret-animation='smooth'
              erase-style='clear'
              initial-action='typing'
          ></VueTyper>
        </h2>

        <p class="text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
          {{ profile?.subtitle }}
        </p>

        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
          <button v-if="config.sections.projectsEnabled"
            @click="scrollToSection('projects')"
            class="px-8 py-4 bg-purple-600 hover:bg-purple-700 text-white rounded-full font-semibold transition-all transform hover:scale-105 shadow-lg"
          >
            Ver Proyectos
          </button>
          <button v-if="config.sections.contactEnabled"
            @click="scrollToSection('contact')"
            class="px-8 py-4 border-2 border-purple-600 text-purple-600 dark:text-purple-400 hover:bg-purple-600 hover:text-white rounded-full font-semibold transition-all"
          >
            Contactar
          </button>
        </div>

        <!-- Social Links -->
        <div class="flex justify-center gap-4 mb-12">
          <a
              v-for="social in profile?.social"
              :key="social.platform"
              :href="social.url"
            target="_blank"
            class="p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg hover:shadow-xl transition-all transform hover:scale-110"
          >
            <component :is="getSocialIcon(social.platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300"/>
          </a>
        </div>

        <!-- Scroll Indicator -->
        <div class="flex flex-col sm:flex-row justify-center animate-bounce">
          <ChevronDown class="w-8 h-8 text-gray-400" />
        </div>
      </div>
    </div>
  </section>
</template>

