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

const breadcrumbItems = [
  {
    title: "Главная",
    href: "/",
  },
  {
    title: "Часто задаваемые вопросы",
    href: "/faq",
  },
];

const faqCategories = [
  {
    title: "Вопросы о продукции",
    questions: [
      {
        question: "Какие драгоценные металлы вы предлагаете?",
        answer: "Мы работаем с полным спектром драгоценных металлов: золото, серебро, платина, палладий, родий, иридий, рутений и осмий. Предлагаем различные формы: слитки, гранулы, проволока, фольга, химические соединения."
      },
      {
        question: "Какова чистота ваших драгоценных металлов?",
        answer: "Мы гарантируем высочайшую чистоту продукции: золото 999,9 пробы, серебро 999,9 пробы, платина 999,5 пробы, палладий 999,5 пробы. Каждая партия сопровождается сертификатом качества."
      },
      {
        question: "В каких формах поставляются драгоценные металлы?",
        answer: "Драгоценные металлы поставляются в виде: слитков различного веса (от 1 г до 12,5 кг), гранул, порошков, проволоки различного диаметра, фольги, губки, химических соединений и солей."
      },
      {
        question: "Какие сертификаты качества предоставляются?",
        answer: "К каждой поставке прилагается полный пакет документов: сертификат качества, паспорт качества, протокол анализа, справка о происхождении металла, документы соответствия ГОСТ."
      },
      {
        question: "Возможно ли изготовление продукции по индивидуальным техническим требованиям?",
        answer: "Да, мы изготавливаем продукцию по индивидуальным техническим условиям: нестандартные размеры слитков, специальные сплавы, продукция с особыми физико-химическими свойствами."
      },
      {
        question: "Какие гарантии качества вы предоставляете?",
        answer: "Мы предоставляем полную гарантию качества на всю продукцию. В случае несоответствия заявленным характеристикам - полный возврат средств или замена товара."
      },
      {
        question: "Как происходит контроль качества продукции?",
        answer: "Контроль качества осуществляется на всех этапах: входной контроль сырья, контроль технологического процесса, финальная проверка готовой продукции с использованием современного аналитического оборудования. Контроль ОТК и РТ-Техприемка."
      },
      {
        question: "Какой срок годности у ваших драгоценных металлов?",
        answer: "Драгоценные металлы не имеют срока годности. При правильном хранении в сухих условиях они сохраняют свои свойства неограниченное время."
      }
    ]
  },
  {
    title: "Вопросы о лицензировании и сертификации",
    questions: [
      {
        question: "Какие лицензии имеет ваша компания?",
        answer: "ООО «ДМДК» имеет все необходимые лицензии: лицензия на аффинаж драгоценных металлов, лицензия на торговлю драгоценными металлами, разрешение на работу с драгоценными камнями."
      },
      {
        question: "Зарегистрирована ли компания в ГИИС ДМДК?",
        answer: "Да, ООО «ДМДК» зарегистрировано в Государственной информационной системе учета и контроля драгоценных металлов и драгоценных камней под номером ДМДК-2023-001234."
      },


      {
        question: "Проходит ли компания аудиты качества?",
        answer: "Да, компания регулярно проходит внутренние и внешние аудиты качества, включая аудиты со стороны Пробирной палаты России."
      },

    ]
  },
  {
    title: "Вопросы о доставке и оплате",
    questions: [
      {
        question: "Какие способы оплаты вы принимаете?",
        answer: "Мы принимаем оплату: только безналичная оплата от юрлиц зарегистрированных в ГИИС ДМДК."
      },
      {
        question: "Какие сроки доставки по России?",
        answer: "Сроки доставки зависят от региона: Москва и МО - 1-2 дня, Центральный ФО - 2-3 дня, другие регионы - 3-7 дней. Возможна экспресс-доставка."
      },
      {
        question: "Как обеспечивается безопасность при доставке?",
        answer: "Все поставки осуществляются специализированными службами доставки ценных грузов, с полным страхованием, GPS-мониторингом и сопровождением охраны."
      },
      {
        question: "Какова стоимость доставки?",
        answer: "Стоимость доставки зависит от региона и веса груза. Бесплатная доставка при заказе от 100 000 рублей по Москве, от 150 000 рублей по России."
      },
      {
        question: "Возможна ли доставка за границу?",
        answer: "Да, мы осуществляем международные поставки в страны СНГ и дальнего зарубежья с соблюдением всех таможенных процедур."
      },
      {
        question: "Какие документы нужны для получения груза?",
        answer: "Для получения груза необходимы: документ, удостоверяющий личность, доверенность (при получении третьим лицом), документы организации (для юридических лиц)."
      },
      {
        question: "Возможна ли отсрочка платежа?",
        answer: "Для постоянных клиентов возможна отсрочка платежа до 30 дней. Условия определяются индивидуально в зависимости от объемов закупок и истории сотрудничества."
      }
    ]
  },
  {
    title: "Процедуры заказа и переработки",
    questions: [
      {
        question: "Как оформить заказ на продукцию?",
        answer: "Заказ можно оформить через сайт, по телефону, электронной почте или в офисе. Необходимо указать наименование, количество, требования к качеству и условия поставки."
      },
      {
        question: "Какой минимальный объем заказа?",
        answer: "Минимальный объем заказа зависит от вида металла и вида продукции: от 1г."
      },
      {
        question: "Предоставляете ли вы услуги аффинажа?",
        answer: "Да, мы предоставляем полный цикл аффинажных услуг: переработка лома драгоценных металлов, очистка от примесей, получение металлов высокой чистоты."
      },
      {
        question: "Какие материалы принимаются на переработку?",
        answer: "На переработку принимаются: ювелирный лом, промышленные отходы, катализаторы, электронный лом, зубопротезные сплавы, фотоматериалы."
      },
      {
        question: "Как происходит оценка стоимости переработки?",
        answer: "Стоимость переработки определяется после анализа материала. Учитывается содержание драгоценных металлов, сложность переработки, объем партии."
      }
    ]
  }
];
---

<Layout>
  <Fragment slot="head">
    <title>Часто задаваемые вопросы | ООО «ДМДК»</title>
    <meta name="description" content="Ответы на часто задаваемые вопросы о продукции, услугах, доставке и оплате ООО «ДМДК». Полная информация для клиентов." />
    <meta name="keywords" content="FAQ ДМДК, вопросы и ответы, драгоценные металлы, аффинаж, доставка" />
  </Fragment>

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

  <!-- Декоративные элементы фона -->
  <div class="fixed inset-0 pointer-events-none overflow-hidden">
    <div class="absolute top-20 right-10 w-72 h-72 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 rounded-full blur-3xl"></div>
    <div class="absolute bottom-20 left-10 w-96 h-96 bg-gradient-to-tr from-blue-500/10 to-purple-500/10 rounded-full blur-3xl"></div>
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-gradient-to-r from-green-500/5 to-teal-500/5 rounded-full blur-3xl"></div>
  </div>

  <main class="relative bg-gradient-to-br from-black via-gray-900 to-black text-white py-12 xs:py-16 px-4 xs:px-6 sm:px-8 lg:px-24 min-h-screen">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.02),transparent)] pointer-events-none"></div>
    
    <div class="relative z-10">
      <h1 class="text-3xl xs:text-4xl sm:text-5xl lg:text-6xl font-bold mb-8 xs:mb-12 text-transparent bg-gradient-to-r from-yellow-400 via-yellow-500 to-orange-500 bg-clip-text font-nevduplenysh text-center">
        Часто задаваемые вопросы
      </h1>

      <div class="max-w-6xl mx-auto">
        <div class="mb-8 xs:mb-12 text-center">
          <p class="text-base xs:text-lg text-gray-300 leading-relaxed max-w-3xl mx-auto">
            Здесь собраны ответы на наиболее популярные вопросы наших клиентов. 
            Если вы не нашли ответ на свой вопрос, свяжитесь с нами.
          </p>
        </div>

        {faqCategories.map((category, categoryIndex) => (
          <section class="mb-12 xs:mb-16">
            <div class="relative bg-gradient-to-r from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mb-6 xs:mb-8">
              <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/5 to-orange-500/5 rounded-xl xs:rounded-2xl"></div>
              <h2 class="relative text-2xl xs:text-3xl font-bold text-white flex items-center gap-3 xs:gap-4">
                <div class="w-1.5 xs:w-2 h-6 xs:h-8 bg-gradient-to-b from-yellow-400 to-orange-500 rounded-full"></div>
                {category.title}
              </h2>
            </div>
            
            <div class="space-y-3 xs:space-y-4">
              {category.questions.map((faq, index) => (
                <div class="group relative bg-gradient-to-br from-gray-900/60 via-gray-800/60 to-gray-900/60 backdrop-blur-sm border border-gray-700/30 rounded-lg xs:rounded-xl overflow-hidden hover:border-gray-600/50 transition-all duration-300">
                  <div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/[0.02] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                  
                  <div class="faq-item relative">
                    <button 
                      class="faq-question w-full text-left flex justify-between items-start focus:outline-none p-4 xs:p-6 group-hover:bg-white/[0.02] transition-colors duration-300"
                      onclick={`toggleFaq('faq-${categoryIndex}-${index}')`}
                    >
                      <h3 class="text-base xs:text-lg font-semibold text-white pr-3 xs:pr-4 group-hover:text-yellow-300 transition-colors duration-300">
                        {faq.question}
                      </h3>
                      <div class="flex-shrink-0 w-8 h-8 xs:w-10 xs:h-10 bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-lg flex items-center justify-center group-hover:from-yellow-500/30 group-hover:to-orange-500/30 transition-all duration-300">
                        <svg 
                          class="faq-icon w-4 h-4 xs:w-5 xs:h-5 text-yellow-400 transition-transform duration-300"
                          fill="none" 
                          stroke="currentColor" 
                          viewBox="0 0 24 24"
                        >
                          <path 
                            stroke-linecap="round" 
                            stroke-linejoin="round" 
                            stroke-width="2" 
                            d="M19 9l-7 7-7-7"
                          />
                        </svg>
                      </div>
                    </button>
                    
                    <div 
                      id={`faq-${categoryIndex}-${index}`}
                      class="faq-answer hidden px-4 xs:px-6 pb-4 xs:pb-6"
                    >
                      <div class="border-t border-gray-700/50 pt-3 xs:pt-4">
                        <p class="text-sm xs:text-base text-gray-300 leading-relaxed">
                          {faq.answer}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        ))}

        <!-- Контактная информация -->
        <section class="relative bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/50 rounded-xl xs:rounded-2xl p-6 xs:p-8 mt-12 xs:mt-16 overflow-hidden">
          <div class="absolute inset-0 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 rounded-xl xs:rounded-2xl"></div>
          <div class="absolute top-0 right-0 w-24 h-24 xs:w-32 xs:h-32 bg-gradient-to-br from-yellow-500/20 to-orange-500/20 rounded-full blur-2xl"></div>
          
          <div class="relative z-10">
            <h2 class="text-xl xs:text-2xl font-bold text-white mb-3 xs:mb-4 text-center flex items-center justify-center gap-2 xs:gap-3">
              <div class="w-6 h-6 xs:w-8 xs:h-8 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center">
                <svg class="w-3 h-3 xs:w-4 xs:h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
              </div>
              Не нашли ответ на свой вопрос?
            </h2>
            <p class="text-sm xs:text-base text-gray-300 text-center mb-6 xs:mb-8 max-w-2xl mx-auto">
              Свяжитесь с нашими специалистами, и мы обязательно поможем вам
            </p>
            <div class="flex flex-col sm:flex-row justify-center items-center gap-4 xs:gap-6">
              <a 
                href="tel:+79251045050" 
                class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-blue-600/80 to-blue-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-blue-500 hover:to-blue-400 transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
              >
                <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
                  <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                  </svg>
                </div>
                <span class="font-semibold">+7 (925) 104-50-50</span>
              </a>
              <a 
                href="mailto:ooo.dmdk@mail.ru" 
                class="group flex items-center gap-2 xs:gap-3 px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-purple-600/80 to-purple-500/80 backdrop-blur-sm text-white rounded-lg xs:rounded-xl hover:from-purple-500 hover:to-purple-400 transition-all duration-300 shadow-lg hover:shadow-purple-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto"
              >
                <div class="w-6 h-6 xs:w-8 xs:h-8 bg-white/20 rounded-lg flex items-center justify-center group-hover:bg-white/30 transition-colors">
                  <svg class="w-3 h-3 xs:w-4 xs:h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                    <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                  </svg>
                </div>
                <span class="font-semibold">ooo.dmdk@mail.ru</span>
              </a>
              <button class="open-modal group px-4 py-2.5 xs:px-6 xs:py-3 bg-gradient-to-r from-yellow-600 to-orange-600 text-white rounded-lg xs:rounded-xl font-semibold hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-yellow-500/25 hover:scale-105 text-sm xs:text-base w-full sm:w-auto">
                <span class="flex items-center justify-center gap-2">
                  <svg class="w-3 h-3 xs:w-4 xs:h-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                  </svg>
                  Задать вопрос
                </span>
              </button>
            </div>
          </div>
        </section>
      </div>
    </div>
  </main>

  <script>
    function toggleFaq(id: string) {
      const answer = document.getElementById(id);
      const button = answer?.previousElementSibling as HTMLElement;
      const icon = button?.querySelector('.faq-icon') as HTMLElement;
      
      if (answer?.classList.contains('hidden')) {
        answer.classList.remove('hidden');
        if (icon) icon.style.transform = 'rotate(180deg)';
        button?.classList.add('bg-white/[0.05]');
      } else {
        answer?.classList.add('hidden');
        if (icon) icon.style.transform = 'rotate(0deg)';
        button?.classList.remove('bg-white/[0.05]');
      }
    }

    // Глобальная функция для использования в onclick
    (window as any).toggleFaq = toggleFaq;
  </script>
</Layout> 