---
import { Icon } from 'astro-icon/components'

const { name, title, bio, gitea, linkedin } = Astro.props;
---
<section id="hero" class="py-20 md:py-32 flex flex-col items-center justify-center min-h-[90vh]">
	<div class="flex flex-col md:flex-row items-center md:items-center text-center md:text-left max-w-4xl w-full">
		<div class="mb-6 md:mb-0 md:mr-12 flex-shrink-0 relative group">
			<img
				src="/avatar.webp"
				alt={`${name} Avatar`}
				class="w-32 h-32 md:w-48 md:h-48 rounded-full mx-auto border-4 border-gray-500 md:border-gray-300 relative z-20"
			/>
			<div class="absolute -inset-1 rounded-full blur-md bg-gradient-to-br from-gray-500 via-cyan-500 to-indigo-500 z-10 glow"></div>
		</div>
        <div class="flex-1 min-w-0">
            <h1
                class="text-4xl md:text-6xl font-extrabold tracking-tight bg-gradient-to-r from-gray-100 to-gray-300 bg-clip-text text-transparent mb-4 text-balance"
            >
                {name}
            </h1>
            <h2
                class="text-2xl md:text-3xl font-semibold tracking-tight bg-gradient-to-r from-cyan-500 to-indigo-500 bg-clip-text text-transparent mb-6"
            >
                {title}
            </h2>
            <p class="text-lg text-gray-300 max-w-full text-wrap">{bio}</p>
        </div>
    </div>
    <div class="mt-8 flex space-x-6 items-center justify-center max-w-4xl w-full">
        <a
            href={gitea}
            target="_blank"
            rel="noopener noreferrer"
            class="text-gray-400 hover:text-gray-200 transition-colors hover:scale-110 duration-500"
            aria-label="Gitea"
        >
            <Icon name="gitea" class="w-8 h-8" />
        </a>
        <a
            href={linkedin}
            target="_blank"
            rel="noopener noreferrer"
            class="text-gray-400 hover:text-gray-200 transition-colors hover:scale-110 duration-500"
            aria-label="LinkedIn"
        >
            <Icon name="linkedin" class="w-8 h-8" />
        </a>
    </div>
</section>
<style>
	/* Optional: Add any additional styles for the Hero component here */
	#header-nav {
	animation: blur linear both;
	animation-timeline: scroll();
	animation-range: 0 500px;
	/* height: 80px; */
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(0px);
}
/* Glow siempre visible */
.glow {
  opacity: 1;
  transform: scale(1);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Efecto pulsante al hacer hover */
.group:hover .glow {
  animation: pulse 1.5s infinite;
}

/* Animación de pulso */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}
</style>