---
import { getImageUrl } from '@lib/pocketbase';

const { heroData } = Astro.props;

const imageUrl = getImageUrl(heroData, heroData.image);
---

<div class="relative z-10 w-full max-w-sm mx-auto hero-image-container">
  <!-- Эмодзи 👋 -->
  <div class="absolute -top-4 -left-4 z-40 w-16 h-16 rounded-full">
    <span class="relative z-20 flex items-center justify-center w-full h-full text-2xl border-8 border-white rounded-full dark:border-neutral-950 bg-neutral-100 dark:bg-neutral-900 wave-emoji">
      <span class="flex items-center justify-center w-full h-full bg-white border border-dashed rounded-full dark:bg-neutral-950 border-neutral-300 dark:border-neutral-700">
        👋
      </span>
    </span>
  </div>

  <div class="relative z-30">
    <img
      src={imageUrl}
      alt={heroData.img_alt}
      width={790}
      height={1193}
      loading="eager"
      decoding="auto"
      class="relative z-30 w-full h-auto hero-image"
    />

    <span
      class="absolute bottom-[45%] left-[40%] -translate-x-1/2 z-40 rounded-full bg-white/80 dark:bg-black/80 px-3 py-1 text-sm font-semibold text-neutral-800 dark:text-neutral-200 opacity-0 greeting-text-animation shadow-lg"
    >
      {heroData.greeting_text}
    </span>
  </div>

  <!-- Декоративная рамка -->
  <div class="absolute inset-0 z-20 -m-4 border border-dashed rounded-2xl bg-gradient-to-r dark:from-neutral-950 dark:via-black dark:to-neutral-950 from-white via-neutral-50 to-white border-neutral-300 dark:border-neutral-700 hero-border">
  </div>
</div>

<style>
  @keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.8) rotate(-2deg); }
    70% { opacity: 1; }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  @keyframes borderGlow {
    0% { opacity: 0; transform: scale(0.95); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
    50% { opacity: 1; box-shadow: 0 0 20px 10px rgba(99, 102, 241, 0.3); }
    100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  }
  @keyframes wave {
    0% { transform: rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); opacity: 1; }
  }
  @keyframes greet-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .greeting-text-animation { animation: greet-fade-in 0.8s ease-out 2.0s forwards; }
  .hero-image-container { animation: fadeInScale 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s forwards; }
  .hero-image { animation: fadeInScale 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards; opacity: 0; }
  .hero-border { animation: borderGlow 1.5s ease-out 0.6s forwards; opacity: 0; }
  .wave-emoji { animation: wave 1s ease-in-out 1.5s forwards; opacity: 0; }
</style>