---
import { Icon } from 'astro-icon/components'
import type { AboutData } from '@globalInterfaces';

interface Props {
  aboutData: AboutData;
}

const { aboutData } = Astro.props;
---

<section class="py-8 md:py-12 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-neutral-900 dark:to-neutral-800 rounded-xl md:rounded-2xl">
  <div class="max-w-4xl mx-auto px-4 sm:px-5 lg:px-8">
    <div class="text-center">
      <!-- Заголовок -->
      <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 dark:text-white mb-4 md:mb-6">
        {aboutData.contact_title}
      </h2>

      <!-- Описание -->
      <p class="text-base md:text-lg lg:text-xl text-gray-600 dark:text-neutral-300 mb-6 md:mb-8 lg:mb-10 max-w-2xl mx-auto">
        {aboutData.contact_description}
      </p>

      <!-- Кнопки контактов -->
      <div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center items-center">
        <!-- WhatsApp -->
        <a
          href={aboutData.whatsapp_link}
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center px-5 py-3 md:px-6 md:py-3 lg:px-8 lg:py-4 text-sm md:text-base font-semibold rounded-xl md:rounded-2xl shadow-md md:shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 md:hover:-translate-y-1 bg-green-500 hover:bg-green-600 text-white contact-cta-button w-full sm:w-auto justify-center"
        >
          <Icon name="whatsapp" class="w-5 h-5 md:w-6 md:h-6 mr-2 md:mr-3" />
          Написать в WhatsApp
        </a>

        <!-- Email -->
        <a
          href={`mailto:${aboutData.email}`}
          class="inline-flex items-center px-5 py-3 md:px-6 md:py-3 lg:px-8 lg:py-4 text-sm md:text-base font-semibold rounded-xl md:rounded-2xl shadow-md md:shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 md:hover:-translate-y-1 bg-white dark:bg-neutral-800 text-gray-700 dark:text-neutral-300 border border-gray-200 dark:border-neutral-700 contact-cta-button w-full sm:w-auto justify-center"
        >
          <Icon name="envelope" class="w-4 h-4 md:w-5 md:h-5 mr-2" />
          <span class="truncate">{aboutData.email}</span>
        </a>
      </div>

      <!-- Дополнительная информация -->
      <div class="mt-6 md:mt-8 p-3 md:p-4 bg-white dark:bg-neutral-800 rounded-xl md:rounded-2xl shadow-sm">
        <p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400">
          ⚡ Обычно отвечаю в течение 1-2 часов в рабочее время
        </p>
      </div>
    </div>
  </div>
</section>

<style>
  /* Уникальные стили для компонента ContactCTA */
  .contact-cta-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .contact-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  /* Адаптивность для мобильных устройств */
  @media (max-width: 640px) {
    .contact-cta-button {
      padding: 0.75rem 1.25rem;
      font-size: 0.875rem;
    }
  }
</style>