---
import Header from "../components/Header.astro";
import Up from "../components/Up.astro";
import Footer from "../components/Footer.astro";
import FloatingFAQ from "../components/FloatingFAQ.astro";
import Analytics from "../components/Analytics.astro";
import "../styles/tailwind.css";

// Оптимизированные ключевые слова для SEO
const commonKeywords =
  "драгоценные металлы, золото, серебро, платина, производство, переработка, слитки, проволоки, гранулы, порошки, аффинаж, металлургия";
const silverKeywords =
  "аноды серебряные, серебряные аноды, анод серебряный, серебро 999, чистое серебро, анодирование серебром, серебряная проволока, техническое серебро, серебряные изделия";
const goldKeywords =
  "золотые сплавы, золотые слитки, очистка золота, золото для ювелиров, золотые аноды";
const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
---

<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Основные мета-теги -->
    <title>
      ООО «ДМДК» - Производство и переработка драгоценных металлов, серебряные
      аноды
    </title>
    <meta
      name="description"
      content="ООО «ДМДК» - ведущий производитель серебряных анодов и других изделий из драгоценных металлов. Предлагаем серебро, золото и платину в различных формах: аноды серебряные, проволока, гранулы. Высокое качество и надежность."
    />
    <meta name="keywords" content={allKeywords} />
    <meta name="author" content="ООО «ДМДК»" />

    <!-- Мета-теги для поисковых систем -->
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <meta name="google" content="notranslate" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="theme-color" content="#111827" />

    <!-- Open Graph для социальных сетей -->
    <meta
      property="og:title"
      content="ООО «ДМДК» - Производство и переработка драгоценных металлов, серебряные аноды"
    />
    <meta
      property="og:description"
      content="Мы предлагаем высококачественные серебряные аноды и другие изделия из драгоценных металлов. Наши услуги включают переработку и аффинаж металлов."
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://ooodmdk.ru" />
    <meta
      property="og:image"
      content="https://i.ytimg.com/vi/duJNQ-EJ5nY/maxresdefault.jpg"
    />
    <meta property="og:locale" content="ru_RU" />
    <meta property="og:site_name" content="ООО «ДМДК»" />

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="ООО «ДМДК» - Производство и переработка драгоценных металлов, серебряные аноды"
    />
    <meta
      name="twitter:description"
      content="Мы предлагаем высококачественные серебряные аноды и другие изделия из драгоценных металлов. Наши услуги включают переработку и аффинаж металлов."
    />
    <meta
      name="twitter:image"
      content="https://i.ytimg.com/vi/duJNQ-EJ5nY/maxresdefault.jpg"
    />

    <!-- Безопасность -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; img-src 'self' https: data: mc.yandex.ru; script-src 'self' 'unsafe-inline' 'unsafe-eval' www.googletagmanager.com mc.yandex.ru; style-src 'self' 'unsafe-inline'; font-src 'self'; connect-src 'self' https://api.telegram.org https://mc.yandex.ru https://www.google-analytics.com; frame-src 'self' https://mc.yandex.ru;"
    />

    <!-- Canonical URL -->
    <link rel="canonical" href="https://ooodmdk.ru" />

    <!-- SVG Favicon -->
    <link rel="icon" href="/logo.svg" type="image/svg+xml" />

    <!-- CSS -->
    <link rel="stylesheet" href="/styles/global.css" />

    <!-- Schema.org разметка -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "ООО «ДМДК»",
        "description": "Производство и переработка драгоценных металлов, серебряные аноды",
        "url": "https://ooodmdk.ru",
        "logo": "https://ooodmdk.ru/logo.svg",
        "contactPoint": {
          "@type": "ContactPoint",
          "telephone": "+7-925-104-50-50",
          "contactType": "customer service",
          "areaServed": "RU",
          "availableLanguage": "Russian"
        },
        "address": {
          "@type": "PostalAddress",
          "addressCountry": "RU",
          "addressLocality": "Россия"
        },
        "sameAs": ["https://vk.com/ooodmdk", "https://t.me/ooodmdk"],
        "keywords": "${allKeywords}"
      }
    </script>

    <!-- Analytics -->
    <Analytics />

    <slot name="head" />
  </head>
  <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white">
    <!-- Загрузчик страницы -->
    <div id="page-loader" class="fixed inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-black z-50 flex items-center justify-center">
      <div class="text-center">
        <!-- Логотип -->
        <div class="mb-8">
          <img src="/logo.svg" alt="ООО «ДМДК»" class="h-16 xs:h-20 sm:h-24 md:h-28 lg:h-32 mx-auto animate-logo-pulse" />
        </div>
        
        <!-- Название компании -->
        <h1 class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-bold text-white font-nevduplenysh mb-6 xs:mb-8 animate-fade-in">
          ООО «ДМДК»
        </h1>
        
        <!-- Подзаголовок -->
        <p class="text-gray-300 text-sm xs:text-base lg:text-lg font-gilroy mb-8 animate-fade-in" style="animation-delay: 0.3s;">
          Драгоценные металлы высшей пробы
        </p>
        
        <!-- Анимированные точки загрузки -->
        <div class="flex justify-center space-x-2 mb-8">
          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce"></div>
          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.1s;"></div>
          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.2s;"></div>
        </div>
        
        <!-- Прогресс бар -->
        <div class="w-64 xs:w-80 sm:w-96 mx-auto">
          <div class="bg-gray-700 rounded-full h-2 xs:h-3 overflow-hidden shadow-inner">
            <div id="progress-bar" class="progress-shimmer h-full rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
          </div>
          <p id="loading-text" class="text-gray-300 text-sm xs:text-base mt-4 font-gilroy">Загрузка...</p>
        </div>
        
        <!-- Декоративные элементы -->
        <div class="absolute inset-0 opacity-10 pointer-events-none">
          <div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
          <div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
          <div class="absolute top-1/2 left-1/3 w-24 h-24 xs:w-36 xs:h-36 bg-yellow-300 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s;"></div>
        </div>
      </div>
    </div>

    <div id="page-content" style="display: none;">
      <Header />
      <slot />
      <FloatingFAQ />
      <Up />
      <Footer />
    </div>

    <!-- Скрипт для управления загрузчиком -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const loader = document.getElementById('page-loader');
        const progressBar = document.getElementById('progress-bar');
        const loadingText = document.getElementById('loading-text');
        let progress = 0;
        
        // Массив сообщений для загрузки
        const loadingMessages = [
          'Загрузка...',
          'Подготовка драгоценных металлов...',
          'Инициализация системы...',
          'Проверка качества...',
          'Почти готово...'
        ];
        
        let messageIndex = 0;
        
        // Функция для скрытия загрузчика
        function hideLoader() {
          const pageContent = document.getElementById('page-content');
          loadingText.textContent = 'Готово!';
          
          setTimeout(() => {
            loader.style.opacity = '0';
            loader.style.transform = 'scale(0.95)';
            loader.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
            
            setTimeout(() => {
              loader.style.display = 'none';
              pageContent.style.display = 'block';
              document.body.style.overflow = 'auto';
            }, 500);
          }, 300);
        }
        
        // Анимация прогресс-бара
        const progressInterval = setInterval(() => {
          progress += Math.random() * 12 + 3; // Случайный прирост от 3 до 15%
          if (progress > 100) progress = 100;
          
          progressBar.style.width = progress + '%';
          
          // Обновляем сообщение в зависимости от прогресса
          if (progress >= 20 && messageIndex === 0) {
            messageIndex = 1;
            loadingText.textContent = loadingMessages[messageIndex];
          } else if (progress >= 40 && messageIndex === 1) {
            messageIndex = 2;
            loadingText.textContent = loadingMessages[messageIndex];
          } else if (progress >= 60 && messageIndex === 2) {
            messageIndex = 3;
            loadingText.textContent = loadingMessages[messageIndex];
          } else if (progress >= 80 && messageIndex === 3) {
            messageIndex = 4;
            loadingText.textContent = loadingMessages[messageIndex];
          }
          
          if (progress >= 100) {
            clearInterval(progressInterval);
            hideLoader();
          }
        }, 80);
        
        // Блокируем прокрутку во время загрузки и скрываем контент
        document.body.style.overflow = 'hidden';
        const pageContent = document.getElementById('page-content');
        pageContent.style.display = 'none';
        
        // Принудительно скрыть загрузчик через 4 секунды на случай медленной загрузки
        setTimeout(() => {
          if (loader.style.display !== 'none') {
            progress = 100;
            progressBar.style.width = '100%';
            clearInterval(progressInterval);
            hideLoader();
          }
        }, 4000);
        
        // Скрыть загрузчик когда страница полностью загружена
        window.addEventListener('load', function() {
          if (progress < 100) {
            progress = 100;
            progressBar.style.width = '100%';
            clearInterval(progressInterval);
            hideLoader();
          }
        });
      });
    </script>
  </body>
</html>
