---
import WhatsAppButton from '@components/base/WhatsAppButton.astro'
import TechStack from '@components/home/TechStack.astro'
import HeroImage from '@components/home/HeroImage.astro'
import { pb } from '@lib/pocketbase';

interface HeroData {
  id: string;
  title: string;
  subtitle: string;
  tech_title: string;
  whatsapp_phone_number: string;
  btn_text: string;
  frontend_tech: string[];
  backend_tech: string[];
  is_active: boolean;
  [key: string]: any; // для остальных полей
}

const result = await pb.collection('home_hero').getList(1, 1, {
  filter: 'is_active = true',
  sort: '-created'
});

const heroData: HeroData = {
  ...result.items[0],
  id: result.items[0].id,
  title: result.items[0].title,
  subtitle: result.items[0].subtitle,
  tech_title: result.items[0].tech_title,
  whatsapp_phone_number: result.items[0].whatsapp_phone_number,
  btn_text: result.items[0].btn_text,
  frontend_tech: result.items[0].frontend_tech || [],
  backend_tech: result.items[0].backend_tech || [],
  is_active: result.items[0].is_active
};
---

<section class="w-full">
  <div class="flex flex-col md:flex-row items-center justify-between gap-10 lg:gap-20">

    <!-- ЛЕВАЯ КОЛОНКА -->
    <div class="flex-1 hero-content-animation">
      <div class="text-center md:text-left">
        <h1 class="mb-5 text-2xl md:text-4xl lg:text-5xl font-bold leading-tight dark:text-white animate-fade-in-up" style="animation-delay: 0.1s;">
          {heroData.title}
        </h1>
        <div class="mb-6 space-y-3 animate-fade-in-up" style="animation-delay: 0.2s;">
          <p class="text-base md:text-lg text-neutral-600 dark:text-neutral-400">
            {heroData.subtitle}
          </p>
        </div>
      </div>

      <!-- Стек и кнопка (внутри левой колонки) -->
      <div class="mt-8 animate-fade-in-up" style="animation-delay: 0.3s;">
        <h2 class="text-xl md:text-2xl font-bold text-center md:text-left mb-6 dark:text-white">
          {heroData.tech_title}
        </h2>
        <TechStack heroData={heroData} />
      </div>

      <div class="mt-8 flex justify-center animate-fade-in-up" style="animation-delay: 0.7s;">
        <WhatsAppButton
          phoneNumber={heroData.whatsapp_phone_number}
          btnText={heroData.btn_text}
        />
      </div>
    </div>

    <!-- ПРАВАЯ КОЛОНКА (Картинка) -->
    <div class="flex-1 w-full max-w-sm md:max-w-md lg:max-w-lg">
      <HeroImage heroData={heroData} />
    </div>

  </div>
</section>

<style>
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
  }
</style>