---
// src/components/layout/header/MobileMenu.astro
import Button from '@components/base/Button.astro';
interface Props {
  links: { text: string; href: string }[];
}
const { links } = Astro.props;
---

<!-- 1. ОВЕРЛЕЙ -->
<div
  id="menu-overlay"
  class="fixed inset-0 bg-black/80 z-[140] opacity-0 pointer-events-none transition-opacity duration-500 lg:hidden"
></div>

<!-- 2. DRAWER (Боковая панель) -->
<div
  id="mobile-menu"
  class="fixed top-0 left-0 bottom-0 w-[85%] max-w-[400px] bg-[#181611] z-[150] -translate-x-full transition-transform duration-500 ease-in-out lg:hidden flex flex-col shadow-[20px_0_60px_rgba(0,0,0,0.5)] border-r border-white/5"
>
  <!-- ШАПКА ВНУТРИ МЕНЮ (Теперь здесь лого вместо текста "Навигация") -->
  <div class="p-6 h-20 flex items-center border-b border-white/5 bg-[#181611]">
    <div class="flex items-center gap-4 text-white">
      <div class="size-10 bg-primary/20 rounded flex items-center justify-center">
        <span class="material-symbols-outlined text-primary text-2xl">local_shipping</span>
      </div>
      <div class="flex flex-col">
        <h2 class="text-white text-xl font-bold font-display leading-none tracking-tight uppercase">KHIMTRANS</h2>
        <span class="text-[10px] text-text-secondary font-display tracking-widest uppercase font-semibold">Service</span>
      </div>
    </div>
  </div>

  <!-- СПИСОК ССЫЛОК -->
  <div class="flex-grow overflow-y-auto p-8 bg-[#181611]">
    <nav class="flex flex-col gap-8">
      {links.map((link, index) => (
        <a
          href={link.href}
          class="text-3xl font-display font-black uppercase tracking-tighter text-white hover:text-primary transition-colors flex items-baseline gap-4 group mobile-link"
        >
          <span class="text-xs font-mono text-gray-700">0{index + 1}</span>
          {link.text}
        </a>
      ))}
    </nav>
  </div>

  <!-- ФУТЕР МЕНЮ -->
  <div class="p-8 bg-[#13110d] border-t border-white/5">
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-1">
        <span class="text-[10px] text-gray-500 uppercase tracking-[0.2em]">Круглосуточно:</span>
        <a href="tel:88005553535" class="text-xl font-bold text-white hover:text-primary transition-colors">
          8 (800) 555-35-35
        </a>
      </div>
      <Button href="/contacts" variant="primary" className="w-full justify-center">Оставить заявку</Button>
    </div>
  </div>
</div>