<template>
  <div class="py-5 bg-slate-950 min-h-screen text-white">
    <div class="container py-3 sm:py-4 md:py-5">
      <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-black uppercase italic tracking-tighter mb-4 sm:mb-5">
        Раздел <span class="text-orange-600">Анатомия</span>
      </h1>

      <div class="row g-4 sm:g-5 mb-4 sm:mb-5 align-items-center">
        <div class="col-12 col-lg-6">
          <div class="space-y-6 sm:space-y-8 animate-in fade-in slide-in-from-left-4 duration-700">
            <router-link to="/anatomy/muscle-structure"
              class="bg-slate-900 border border-slate-800 p-6 sm:p-8 rounded-2xl sm:rounded-3xl group transition-all hover:border-orange-600 block text-decoration-none">
              <h2
                class="text-2xl sm:text-3xl font-black uppercase italic tracking-tighter mb-3 sm:mb-4 text-white group-hover:text-orange-500 transition-colors">
                Строение мышц</h2>
              <p class="text-slate-400 text-base sm:text-lg leading-relaxed mb-4 sm:mb-6">
                Мышечная ткань состоит из пучков мышечных волокон, которые, в свою очередь, состоят из миофибрилл.
                Понимание этого процесса критически важно для эффективного тренинга.
              </p>
              <ul class="list-none p-0 m-0 space-y-3 sm:space-y-4 text-slate-300">
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Медленные мышечные волокна (выносливость)
                </li>
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Быстрые мышечные волокна (сила и объем)
                </li>
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Процесс гипертрофии (рост мышц)
                </li>
              </ul>
            </router-link>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="space-y-6 sm:space-y-8 animate-in fade-in slide-in-from-left-4 duration-700">
            <router-link to="/anatomy/muscles-human"
              class="bg-slate-900 border border-slate-800 p-6 sm:p-8 rounded-2xl sm:rounded-3xl group transition-all hover:border-orange-600 block text-decoration-none">
              <h2
                class="text-2xl sm:text-3xl font-black uppercase italic tracking-tighter mb-3 sm:mb-4 text-white group-hover:text-orange-500 transition-colors">
                Мускулатура человека</h2>
              <p class="text-slate-400 text-base sm:text-lg leading-relaxed mb-4 sm:mb-6">
                Мускулатура человека — это сложная система из более чем 600 мышц, составляющих до 40% массы тела.
                Каждая мышца — это орган, образованный поперечно-полосатой мышечной тканью, способный сокращаться под
                влиянием нервных импульсов.
              </p>
              <ul class="list-none p-0 m-0 space-y-3 sm:space-y-4 text-slate-300">
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Скелетные мышцы (отвечают за движение тела)
                </li>
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Антагонисты и синергисты (взаимодействие мышц)
                </li>
                <li class="flex items-center gap-3 sm:gap-4">
                  <div class="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-600 rounded-full"></div> Основные мышечные группы: грудь, спина, ноги,
                  плечи, руки
                </li>
              </ul>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.h-100 {
  height: 100%;
}
</style>
