---
import heroImage from '@assets/images/hero/heroImg.avif';
import Button from '@components/base/Button.astro';

const truckList = [
  { model: "MAN TGX 6x4", width: "w-8" },
  { model: "VOLVO FH16", width: "w-4" },
  { model: "SCANIA R730", width: "w-4" },
];
---

<div class="relative w-full">
  <div class="relative flex min-h-[90vh] md:min-h-[85vh] flex-col items-center justify-center overflow-hidden bg-cover bg-center bg-no-repeat"
       style={`background-image: linear-gradient(rgba(17, 24, 39, 0.7) 0%, rgba(17, 24, 39, 0.4) 50%, rgba(26, 30, 35, 1) 100%), url("${heroImage.src}");`}>

    <div class="layout-content-container flex flex-col max-w-[1280px] w-full px-4 md:px-10 z-10">

      <!-- Группирующий контейнер с адаптивным выравниванием -->      
      <div class="flex flex-col items-center md:items-start text-center md:text-left gap-6 max-w-[900px] mx-auto md:mx-0">

        <!-- Верхний бейдж -->
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded bg-primary/20 border border-primary/30 w-fit backdrop-blur-md">
          <span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
          <span class="text-primary text-[10px] md:text-xs font-bold uppercase tracking-[0.2em] font-display">Логистика проектных грузов</span>
        </div>

        <!-- ЗАГОЛОВОК -->
        <h1 class="text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black font-display leading-[1.1] md:leading-[1.05] tracking-tight uppercase drop-shadow-2xl break-words w-full">
          Негабаритные<br class="hidden sm:block"/>
          <span class="text-transparent bg-clip-text bg-gradient-to-r from-white via-white to-gray-500">перевозки</span><br/>
          <span class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl opacity-90">любой сложности</span>
        </h1>

        <!-- Описание -->
        <!-- border-l-0 на мобилках, md:border-l-4 на десктопе -->
        <p class="text-gray-300 text-base md:text-lg lg:text-xl font-light max-w-[600px] border-l-0 md:border-l-4 border-primary pl-0 md:pl-6 leading-relaxed">
          Перевозка промышленного оборудования и спецтехники по всей России.
          <br class="hidden md:block"/>
          <span class="text-white font-medium italic">Надежность. Точность. Масштаб.</span>
        </p>

        <!-- Кнопки -->
        <div class="flex flex-col sm:flex-row gap-4 mt-6 md:mt-4 w-full sm:w-auto items-center">
          <Button href="#calculate" variant="primary" className="w-full sm:w-auto text-sm md:text-base min-w-[200px]">
            Рассчитать стоимость
          </Button>

          <Button href="#fleet" variant="outline" className="w-full sm:w-auto text-sm md:text-base min-w-[200px]">
            Наш автопарк
          </Button>
        </div>
      </div>
    </div>

    <!-- Декоративные элементы -->
    <div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#181611] to-transparent"></div>

    <!-- Список техники (по-прежнему только на больших экранах) -->
    <div class="absolute right-10 bottom-10 hidden xl:flex flex-col gap-4 text-white/30 font-display text-[10px] uppercase tracking-[0.3em]">
      {truckList.map((truck, index) => (
        <div class="flex items-center gap-3 hover:text-primary transition-colors cursor-default group">
          <span class={`h-[1px] bg-primary group-hover:w-12 transition-all ${truck.width}`}></span>
          0{index + 1} {truck.model}
        </div>
      ))}
    </div>
  </div>
</div>