---
// Статичные данные для раздела О НАС
const about = {
  title: "О НАС",
  paragraph1: "Наша компания занимается производством продукции из драгоценных металлов.",
  imageUrls: [
    "/images/1.jpg",
    "/images/12.jpg",
    "/images/123.jpg",
    "/images/1234.jpg"
  ]
};
---

<section
  id="about"
  class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 xs:py-16 sm:py-20 md:py-24 lg:py-28 px-4 xs:px-6 sm:px-8 md:px-12 lg:px-24 relative overflow-hidden"
>
  <!-- Декоративные элементы -->
  <div class="absolute inset-0 opacity-5">
    <div class="absolute top-16 xs:top-20 sm:top-24 md:top-32 left-16 xs:left-20 sm:left-24 md:left-32 w-24 xs:w-28 sm:w-32 md:w-40 h-24 xs:h-28 sm:h-32 md:h-40 bg-yellow-500 rounded-full blur-3xl"></div>
    <div class="absolute bottom-16 xs:bottom-20 sm:bottom-24 md:bottom-32 right-16 xs:right-20 sm:right-24 md:right-32 w-28 xs:w-32 sm:w-36 md:w-48 h-28 xs:h-32 sm:h-36 md:h-48 bg-yellow-400 rounded-full blur-3xl"></div>
  </div>

  <div class="relative z-10 flex flex-col lg:flex-row items-center justify-between max-w-7xl mx-auto">
    <!-- Левая часть: заголовок и описание -->
    <div class="lg:w-1/2 mb-8 xs:mb-10 sm:mb-12 lg:mb-0 lg:pr-8 xl:pr-16">
      <h2
        class="text-4xl xs:text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-yellow-500 mb-4 xs:mb-6 sm:mb-8 font-nevduplenysh leading-tight"
      >
        {about.title}
      </h2>
      <div class="text-base xs:text-lg sm:text-xl md:text-2xl text-gray-300 leading-relaxed font-gilroy">
        <p class="text-xl xs:text-2xl sm:text-3xl md:text-4xl text-white font-semibold mb-3 xs:mb-4 leading-tight">{about.paragraph1}</p>
      </div>
      
      <!-- Блок быстрых ссылок -->
      <div class="mt-8 xs:mt-10 sm:mt-12 flex flex-col xs:flex-row gap-3 xs:gap-4">
        <a href="/cities" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-yellow-500 to-yellow-600 text-black rounded-lg xs:rounded-xl hover:from-yellow-400 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold shadow-lg shadow-yellow-500/25 text-sm xs:text-base">
          <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
          Наши города
        </a>
        <a href="/requisites" class="group inline-flex items-center justify-center px-4 xs:px-5 sm:px-6 py-2.5 xs:py-3 sm:py-3.5 bg-gradient-to-r from-gray-700 to-gray-800 text-white rounded-lg xs:rounded-xl hover:from-gray-600 hover:to-gray-700 transition-all duration-300 transform hover:scale-105 font-gilroy font-semibold border border-gray-600 hover:border-gray-500 text-sm xs:text-base">
          <svg class="w-4 h-4 xs:w-5 xs:h-5 mr-2 xs:mr-3 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
          Реквизиты
        </a>
      </div>
    </div>

    <!-- Правая часть: коллаж из изображений -->
    <div class="lg:w-1/2 grid grid-cols-2 gap-3 xs:gap-4 sm:gap-6">
      {
        about.imageUrls.map((imageUrl, index) => (
          <div class="group relative overflow-hidden rounded-xl xs:rounded-2xl shadow-2xl hover:shadow-yellow-500/20 transition-all duration-500 transform hover:scale-105 h-32 xs:h-36 sm:h-40 md:h-44 lg:h-48 xl:h-52">
            <img
              src={imageUrl}
              alt={`О нас изображение ${index + 1}`}
              class="w-full h-full object-cover object-center transition-transform duration-700 group-hover:scale-110"
            />
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
          </div>
        ))
      }
    </div>
  </div>
</section>

<style>
  p {
    line-height: 1.8;
  }

  /* Фиксированные размеры для изображений в сетке */
  .grid img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
  
  /* Дополнительные адаптивные стили для изображений */
  @media (max-width: 320px) {
    .grid > div {
      height: 7rem !important;
    }
  }
  
  @media (min-width: 321px) and (max-width: 479px) {
    .grid > div {
      height: 8rem !important;
    }
  }
  
  @media (min-width: 480px) and (max-width: 639px) {
    .grid > div {
      height: 9rem !important;
    }
  }
  
  @media (min-width: 640px) and (max-width: 767px) {
    .grid > div {
      height: 10rem !important;
    }
  }
  
  @media (min-width: 768px) and (max-width: 1023px) {
    .grid > div {
      height: 11rem !important;
    }
  }
  
  @media (min-width: 1024px) and (max-width: 1279px) {
    .grid > div {
      height: 12rem !important;
    }
  }
  
  @media (min-width: 1280px) {
    .grid > div {
      height: 13rem !important;
    }
  }
</style>
