---
import Layout from "../layouts/Layout.astro";
import Hero from "../components/Hero.astro";
import Breadcrumbs from "../components/Breadcrumbs.astro";

const breadcrumbItems = [
  {
    title: "Главная",
    href: "/",
  },
  {
    title: "Наши города",
    href: "/cities",
  },
];

const cities = [
  {
    name: "Москва",
    subtitle: "ГОЛОВНОЙ ОФИС",
    region: "Центральный ФО",
    address: "г. Москва, ВН. ТЕР. Г. МУНИЦИПАЛЬНЫЙ ОКРУГ ТАГАНСКИЙ, НАБ КОТЕЛЬНИЧЕСКАЯ, Д.1/15 К.А. ПОМЕЩ. 8/1",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    manager: "Иванов Алексей Петрович",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00",
    isHeadOffice: true
  },
  {
    name: "Санкт-Петербург",
    region: "Северо-Западный ФО",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00"
  },
  {
    name: "Екатеринбург",
    region: "Уральский ФО",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00"
  },
  {
    name: "Новосибирск",
    region: "Сибирский ФО",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00"
  },
  {
    name: "Краснодар",
    region: "Южный ФО",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00"
  },
  {
    name: "Казань",
    region: "Приволжский ФО",
    phone: "+7 (925) 104-50-50",
    email: "ooo.dmdk@mail.ru",
    services: ["Аффинаж", "Торговля", "Консультации", "Логистика"],
    workingHours: "Пн-Пт: 9:00-18:00"
  }
];

const deliveryInfo = [
  {
    region: "Центральный ФО",
    deliveryTime: "1-2 дня",
    cost: "Бесплатно от 100 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  },
  {
    region: "Северо-Западный ФО",
    deliveryTime: "2-3 дня",
    cost: "Бесплатно от 150 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  },
  {
    region: "Уральский ФО",
    deliveryTime: "3-5 дней",
    cost: "Бесплатно от 200 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  },
  {
    region: "Сибирский ФО",
    deliveryTime: "5-7 дней",
    cost: "Бесплатно от 300 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  },
  {
    region: "Южный ФО",
    deliveryTime: "2-4 дня",
    cost: "Бесплатно от 150 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  },
  {
    region: "Приволжский ФО",
    deliveryTime: "3-5 дней",
    cost: "Бесплатно от 200 000 ₽",
    specialConditions: "Доставка осуществляется только ФГУП ГЦСС и ООО СФИНКС-СЛ"
  }
];
---

<Layout>
  <Fragment slot="head">
    <title>Наши города | ООО «ДМДК»</title>
    <meta name="description" content="География присутствия ООО «ДМДК». Региональные представительства, контакты, условия доставки по всей России." />
    <meta name="keywords" content="ДМДК представительства, региональные офисы, доставка драгоценных металлов, география работы" />
  </Fragment>

  <Hero />
  <Breadcrumbs items={breadcrumbItems} />

  <!-- Основной контент -->
  <main class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white py-12 sm:py-16 lg:py-20 px-4 sm:px-6 lg:px-8 xl:px-24 relative overflow-hidden">
    <!-- Декоративные элементы -->
    <div class="absolute inset-0 opacity-10">
      <div class="absolute top-16 sm:top-32 left-8 sm:left-32 w-32 sm:w-64 h-32 sm:h-64 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
      <div class="absolute bottom-16 sm:bottom-32 right-8 sm:right-32 w-40 sm:w-80 h-40 sm:h-80 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 sm:w-96 h-48 sm:h-96 bg-yellow-300 rounded-full blur-3xl animate-pulse opacity-30" style="animation-delay: 4s;"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto space-y-12 sm:space-y-16 lg:space-y-20">
      <!-- Заголовок -->
      <div class="text-center">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-8xl font-bold text-yellow-500 mb-6 sm:mb-8 font-nevduplenysh leading-tight animate-fade-in">
          Наши города
        </h1>
        <p class="text-lg sm:text-xl lg:text-2xl text-gray-300 max-w-4xl mx-auto font-gilroy leading-relaxed px-4">
          География присутствия ООО «ДМДК» охватывает ключевые регионы России. 
          <span class="text-yellow-400 font-semibold">Мы всегда рядом с нашими клиентами.</span>
        </p>
      </div>

      <!-- География присутствия -->
      <section class="bg-black/40 backdrop-blur-sm rounded-3xl p-4 sm:p-6 lg:p-8 xl:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-8 lg:mb-12 text-center font-nevduplenysh">
          География присутствия
        </h2>
        
        <div class="text-center mb-8 lg:mb-12">
          <p class="text-xl sm:text-2xl text-white font-gilroy px-4">
            ООО «ДМДК» работает в <span class="text-yellow-400 font-bold text-2xl sm:text-3xl">{cities.length}</span> крупнейших городах России
          </p>
        </div>
        
        <!-- Интерактивная карта-схема -->
        <div class="relative bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 sm:p-6 lg:p-8 xl:p-12 rounded-2xl border border-gray-700/50 min-h-96">
          <div class="text-center">
            <h3 class="text-2xl sm:text-3xl font-bold text-yellow-400 mb-6 lg:mb-8 font-nevduplenysh">Карта России</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 max-w-5xl mx-auto">
              {cities.map((city) => (
                <div class="group bg-gradient-to-br from-gray-700/50 to-gray-800/50 p-3 sm:p-4 rounded-xl shadow-lg hover:shadow-yellow-500/20 transition-all duration-300 transform hover:scale-105 border border-gray-600/30 hover:border-yellow-500/50 cursor-pointer">
                  <div class="flex items-center space-x-2 sm:space-x-3 mb-2">
                    <div class={`w-3 h-3 sm:w-4 sm:h-4 rounded-full ${city.isHeadOffice ? 'bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50' : 'bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50'} animate-pulse`}></div>
                    <span class="font-bold text-white text-base sm:text-lg group-hover:text-yellow-400 transition-colors duration-300">{city.name}</span>
                  </div>
                  <div class="text-xs sm:text-sm text-gray-400 font-gilroy">{city.region}</div>
                </div>
              ))}
            </div>
            <div class="mt-8 lg:mt-12 flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-8 text-base sm:text-lg font-gilroy">
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 shadow-lg shadow-yellow-500/50"></div>
                <span class="text-yellow-400 font-semibold">Головной офис</span>
              </div>
              <div class="flex items-center space-x-3">
                <div class="w-3 h-3 sm:w-4 sm:h-4 rounded-full bg-gradient-to-r from-blue-400 to-blue-600 shadow-lg shadow-blue-500/50"></div>
                <span class="text-blue-400 font-semibold">Региональное представительство</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Контакты региональных представителей -->
      <section>
        <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
          Контакты региональных представителей
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 xs:gap-6 lg:gap-8">
          {cities.map((city) => (
            <div class={`group bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl shadow-2xl border-l-4 ${city.isHeadOffice ? 'border-yellow-500 shadow-yellow-500/20' : 'border-blue-500 shadow-blue-500/20'} hover:shadow-2xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm border border-gray-700/50 hover:border-yellow-500/50`}>
              <div class="flex flex-col xs:flex-row xs:items-center justify-between mb-3 xs:mb-4 lg:mb-6 space-y-2 xs:space-y-0">
                <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-white group-hover:text-yellow-400 transition-colors duration-300 font-nevduplenysh">{city.name}</h3>
                {city.isHeadOffice && (
                  <span class="bg-gradient-to-r from-yellow-500 to-yellow-600 text-black px-2 xs:px-3 py-1 rounded-full text-xs font-bold self-start xs:self-center">
                    ГОЛОВНОЙ ОФИС
                  </span>
                )}
              </div>
              
              <div class="space-y-3 xs:space-y-4 text-gray-300 font-gilroy">
                <div class="flex items-start space-x-2 xs:space-x-3">
                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" 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>
                  <div>
                    <div class="text-xs xs:text-sm text-gray-400">Регион</div>
                    <div class="text-white font-medium text-sm xs:text-base">{city.region}</div>
                  </div>
                </div>
                
                {city.address && (
                  <div class="flex items-start space-x-2 xs:space-x-3">
                    <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                    </svg>
                    <div>
                      <div class="text-xs xs:text-sm text-gray-400">Адрес</div>
                      <div class="text-white text-sm xs:text-base">{city.address}</div>
                    </div>
                  </div>
                )}

                
                <div class="flex items-start space-x-2 xs:space-x-3">
                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                  </svg>
                  <div>
                    <div class="text-xs xs:text-sm text-gray-400">Телефон</div>
                    <div class="text-white font-medium text-sm xs:text-base">{city.phone}</div>
                  </div>
                </div>
                
                <div class="flex items-start space-x-2 xs:space-x-3">
                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                  </svg>
                  <div>
                    <div class="text-xs xs:text-sm text-gray-400">Email</div>
                    <div class="text-white text-sm xs:text-base">{city.email}</div>
                  </div>
                </div>
                
                {city.manager && (
                  <div class="flex items-start space-x-2 xs:space-x-3">
                    <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                    </svg>
                    <div>
                      <div class="text-xs xs:text-sm text-gray-400">Менеджер</div>
                      <div class="text-white text-sm xs:text-base">{city.manager}</div>
                    </div>
                  </div>
                )}

                
                <div class="flex items-start space-x-2 xs:space-x-3">
                  <svg class="w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <div>
                    <div class="text-xs xs:text-sm text-gray-400">Режим работы</div>
                    <div class="text-white text-sm xs:text-base">{city.workingHours}</div>
                  </div>
                </div>
              </div>
              
              <!-- Услуги -->
              <div class="mt-4 xs:mt-6 pt-4 xs:pt-6 border-t border-gray-700/50">
                <div class="text-xs xs:text-sm text-gray-400 mb-2 xs:mb-3">Услуги</div>
                <div class="flex flex-wrap gap-1.5 xs:gap-2">
                  {city.services.map((service) => (
                    <span class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 text-yellow-400 px-2 xs:px-3 py-1 rounded-full text-xs font-medium border border-yellow-500/30">
                      {service}
                    </span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <!-- Условия доставки -->
      <section class="bg-black/40 backdrop-blur-sm rounded-2xl xs:rounded-3xl p-4 xs:p-6 sm:p-8 lg:p-12 border border-yellow-500/20 hover:border-yellow-500/40 transition-all duration-500">
        <h2 class="text-2xl xs:text-3xl sm:text-4xl lg:text-5xl font-bold text-yellow-500 mb-6 xs:mb-8 lg:mb-12 text-center font-nevduplenysh">
          Условия доставки по регионам
        </h2>
        
        <!-- Мобильная версия - карточки -->
        <div class="block lg:hidden space-y-3 xs:space-y-4">
          {deliveryInfo.map((info, index) => (
            <div class="bg-gradient-to-br from-gray-800/50 to-gray-900/50 p-4 xs:p-6 rounded-xl xs:rounded-2xl shadow-2xl border border-gray-700/50 hover:border-yellow-500/50 transition-all duration-300">
              <h3 class="text-base xs:text-lg sm:text-xl font-bold text-yellow-400 mb-3 xs:mb-4 font-nevduplenysh">{info.region}</h3>
              <div class="space-y-2 xs:space-y-3 text-sm xs:text-base font-gilroy">
                <div class="flex justify-between items-center">
                  <span class="text-gray-400">Время доставки:</span>
                  <span class="text-white font-medium">{info.deliveryTime}</span>
                </div>
                <div class="flex justify-between items-start">
                  <span class="text-gray-400">Стоимость:</span>
                  <span class="text-white font-medium text-right">{info.cost}</span>
                </div>
                <div class="pt-2 border-t border-gray-700/50">
                  <span class="text-gray-400 block mb-2">Особенности:</span>
                  <span class="text-white text-sm xs:text-base">{info.specialConditions}</span>
                </div>
              </div>
            </div>
          ))}
        </div>

        <!-- Десктопная версия - таблица -->
        <div class="hidden lg:block overflow-x-auto">
          <table class="w-full bg-gradient-to-br from-gray-800/50 to-gray-900/50 rounded-2xl shadow-2xl border border-gray-700/50">
            <thead class="bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-b border-yellow-500/30">
              <tr>
                <th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Регион</th>
                <th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Время доставки</th>
                <th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Стоимость</th>
                <th class="px-6 xl:px-8 py-4 xl:py-6 text-left font-bold text-yellow-400 text-base xl:text-lg font-nevduplenysh">Особенности</th>
              </tr>
            </thead>
            <tbody>
              {deliveryInfo.map((info, index) => (
                <tr class={`${index % 2 === 0 ? 'bg-gray-800/30' : 'bg-gray-900/30'} hover:bg-yellow-500/10 transition-colors duration-300 border-b border-gray-700/30`}>
                  <td class="px-6 xl:px-8 py-4 xl:py-6 font-bold text-white font-gilroy text-sm xl:text-base">{info.region}</td>
                  <td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.deliveryTime}</td>
                  <td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.cost}</td>
                  <td class="px-6 xl:px-8 py-4 xl:py-6 text-gray-300 font-gilroy text-sm xl:text-base">{info.specialConditions}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        
        <div class="mt-6 xs:mt-8 lg:mt-12 bg-gradient-to-r from-yellow-500/20 to-yellow-600/20 border-l-4 border-yellow-500 p-4 xs:p-6 lg:p-8 rounded-xl xs:rounded-2xl backdrop-blur-sm">
          <h3 class="text-lg xs:text-xl sm:text-2xl font-bold text-yellow-400 mb-3 xs:mb-4 sm:mb-6 font-nevduplenysh flex items-center">
            <svg class="w-5 h-5 xs:w-6 xs:h-6 sm:w-8 sm:h-8 mr-2 xs:mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            Важная информация
          </h3>
          <ul class="space-y-2 xs:space-y-3 text-white font-gilroy text-sm xs:text-base sm:text-lg">
            <li class="flex items-start space-x-2 xs:space-x-3">
              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Все поставки драгоценных металлов осуществляются с соблюдением требований безопасности</span>
            </li>
            <li class="flex items-start space-x-2 xs:space-x-3">
              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Доставка производится только в рабочие дни с 9:00 до 18:00</span>
            </li>
            <li class="flex items-start space-x-2 xs:space-x-3">
              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Для крупных заказов возможна индивидуальная схема логистики</span>
            </li>
            <li class="flex items-start space-x-2 xs:space-x-3">
              <svg class="w-4 h-4 xs:w-5 xs:h-5 sm:w-6 sm:h-6 text-yellow-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>Все грузы застрахованы на полную стоимость</span>
            </li>
          </ul>
        </div>
      </section>


    </div>
  </main>
</Layout>

<style>
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 1s ease-out;
  }

  /* Градиент для текста */
  .text-gradient {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
</style>