---
interface Props {
  heroData: {
    frontend_tech: string[];
    backend_tech: string[];
  };
}

const { heroData }: Props = Astro.props;

const frontendTech: string[] = heroData.frontend_tech;
const backendTech: string[] = heroData.backend_tech;
---

<div class="flex flex-col md:flex-row gap-4 border border-dashed rounded-lg border-neutral-200 dark:border-neutral-700 mt-8">

  <!-- Секция Фронтенд -->
  <div class="flex-1 p-6">
    <h3 class="mb-4 text-lg font-semibold text-center text-neutral-700 dark:text-neutral-300 md:text-left">
      Фронтенд
    </h3>
    <ul class="space-y-2 text-sm text-center text-neutral-500 dark:text-neutral-400 md:text-left">
      {
        frontendTech.map((tech, index) => (
          <li
            class="transition-all duration-200 ease-in-out hover:translate-x-2 hover:text-neutral-800 dark:hover:text-neutral-200 animate-fade-in-up"
            style={`animation-delay: ${0.4 + index * 0.05}s;`}
          >
            🔘 {tech}
          </li>
        ))
      }
    </ul>
  </div>

  <!-- Секция Бэкенд -->
  <div class="flex-1 p-6">
    <h3 class="mb-4 text-lg font-semibold text-center text-neutral-700 dark:text-neutral-300 md:text-left">
      Бэкенд
    </h3>
    <ul class="space-y-2 text-sm text-center text-neutral-500 dark:text-neutral-400 md:text-left">
      {
        backendTech.map((tech, index) => (
          <li
            class="transition-all duration-200 ease-in-out hover:translate-x-2 hover:text-neutral-800 dark:hover:text-neutral-200 animate-fade-in-up"
            style={`animation-delay: ${0.4 + index * 0.05}s;`}
          >
            🔘 {tech}
          </li>
        ))
      }
    </ul>
  </div>
</div>

<style>
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
  }
</style>