<script lang="ts" setup>

import {Mail, MapPin, Phone} from 'lucide-vue-next'

import type {Profile} from '@/domain/models/Profile'

defineProps<{
  profile: Profile
}>()

</script>

<template>
  <section id="about" class="py-20 bg-white dark:bg-gray-800">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
          Sobre mí
        </h2>

        <div class="grid md:grid-cols-1 gap-12 items-center">
          <!-- Bio -->
          <div>
            <p class="text-lg text-gray-600 dark:text-gray-300 leading-relaxed mb-6">
              {{ profile?.bio }}
            </p>
            
            <div class="space-y-4">
              <div class="flex items-center space-x-3">
                <MapPin class="w-5 h-5 text-purple-600" />
                <span class="text-gray-700 dark:text-gray-300">{{ profile?.location }}</span>
              </div>
              <div class="flex items-center space-x-3">
                <Mail class="w-5 h-5 text-purple-600" />
                <a :href="`mailto:${profile?.email}`" class="text-purple-600 hover:underline">
                  {{ profile?.email }}
                </a>
              </div>
              <div class="flex items-center space-x-3" style="display:none">
                <Phone class="w-5 h-5 text-purple-600" />
                <span class="text-gray-700 dark:text-gray-300">{{ profile?.phone }}</span>
              </div>
            </div>
          </div>

          <!-- Stats -->
          <div v-if="1===3" class="grid grid-cols-2 gap-6">
            <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">7+</div>
              <div class="text-gray-600 dark:text-gray-300">Años de Experiencia</div>
            </div>
            <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">10+</div>
              <div class="text-gray-600 dark:text-gray-300">Proyectos Completados</div>
            </div>
            <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">15+</div>
              <div class="text-gray-600 dark:text-gray-300">Tecnologías</div>
            </div>
            <div class="text-center p-6 bg-purple-50 dark:bg-gray-700 rounded-xl">
              <div class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-2">100%</div>
              <div class="text-gray-600 dark:text-gray-300">Satisfacción</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

