<template>
  <footer class="bg-slate-900 border-t border-slate-800 pt-12 sm:pt-16 pb-6 sm:pb-8 text-white">
    <div class="container mb-8 sm:mb-12">
      <div class="row g-4 sm:g-5">
        <!-- Working Hours -->
        <div class="col-12 col-md-4">
          <h3 class="text-orange-500 font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 sm:mb-6 flex items-center gap-2">
            <Clock :size="14" class="sm:w-4 sm:h-4" /> Рабочее время
          </h3>
          <ul class="text-slate-400 p-0 m-0 list-none space-y-1 sm:space-y-2">
            <li class="flex justify-between border-b border-slate-800 pb-1 sm:pb-2 text-xs sm:text-sm">
              <span>Вторник / Четверг / Суббота</span>
              <span class="text-slate-200">08:00-21:00</span>
            </li>
            <li class="flex justify-between text-slate-500 italic text-xs sm:text-sm">
              <span>Остальные дни</span>
              <span>Выходной</span>
            </li>
          </ul>
        </div>

        <!-- Social Networks -->
        <div class="col-12 col-md-4">
          <h3 class="text-orange-500 font-bold uppercase tracking-widest text-xs sm:text-sm mb-4 sm:mb-6 flex items-center gap-2">
            <Share2 :size="14" class="sm:w-4 sm:h-4" /> Наши соц сети
          </h3>
          <div class="row">
            <div class="col-12 mb-3 sm:mb-4">
              <div class="font-semibold text-slate-200 mb-1 sm:mb-2 text-sm sm:text-base">Людмила Богатырь</div>
              <div class="flex gap-3 sm:gap-4">
                <a href="#" class="text-slate-400 hover:text-orange-500 transition-colors">
                  <Instagram :size="18" class="sm:w-5 sm:h-5" />
                </a>
                <a href="#" class="text-slate-400 hover:text-orange-500 transition-colors">
                  <Facebook :size="18" class="sm:w-5 sm:h-5" />
                </a>
              </div>
            </div>
            <div class="col-12">
              <div class="font-semibold text-slate-200 mb-1 sm:mb-2 text-sm sm:text-base">Александр Сахаров</div>
              <div class="flex gap-3 sm:gap-4">
                <a href="#" class="text-slate-400 hover:text-orange-500 transition-colors">
                  <Instagram :size="18" class="sm:w-5 sm:h-5" />
                </a>
                <a href="#" class="text-slate-400 hover:text-orange-500 transition-colors">
                  <Facebook :size="18" class="sm:w-5 sm:h-5" />
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- About/Logo -->
        <div class="col-12 col-md-4 text-md-end">
          <div class="inline-flex items-center gap-1 sm:gap-2 mb-2 sm:mb-4">
           <div class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12">
              <img src="@/assets/images/vendor/logo-small.png" alt="" class="w-full h-full object-contain">
            </div>
            <div class="text-left leading-tight">
              <div class="font-bold text-base uppercase tracking-tighter">Людмила Богатырь и Александр Сахаров</div>
              <div class="text-[9px] text-slate-400 uppercase tracking-widest leading-none">Fitness & Bodybuilding</div>
            </div>
          </div>
          <p class="text-xs sm:text-sm text-slate-500 md:ml-auto max-w-xs sm:max-w-sm md:max-w-none mx-auto md:mx-0">
            Профессиональная подготовка, персональные тренировки и консультации по питанию.
          </p>
        </div>
      </div>
    </div>

    <div class="container pt-4 sm:pt-6 md:pt-8 border-t border-slate-800">
      <div class="row align-items-center">
        <div class="col-12 col-md-6 mb-2 sm:mb-3 md:mb-0">
          <div class="text-[10px] sm:text-xs text-slate-600 text-center md:text-left">
            &copy; {{ new Date().getFullYear() }} Людмила Богатырь и Александр Сахаров. Все права защищены.
          </div>
        </div>
        <div class="col-12 col-md-6 text-center md:text-end">
          <div class="text-[10px] sm:text-xs text-slate-600">
            Разработка сайта: <a href="https://vadim-0795.uz" target="_blank" class="text-slate-600 hover:text-orange-500 transition-colors text-decoration-none">vadim-0795.uz</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { Clock, Share2, Instagram, Facebook } from 'lucide-vue-next'
</script>
