---
import GermanyFlag from '../ui/GermanyFlag.astro';
---

<div class="mobile-menu">
  <button
    id="mobile-menu-toggle"
    class="p-2.5 theme-accent rounded-xl theme-border border shadow-sm hover:theme-bg-05 transition-all duration-300"
    aria-label="Open menu"
    aria-expanded="false"
  >
    <svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M4 6h16M4 12h16M4 18h16"></path>
    </svg>
  </button>
  
  <div id="mobile-menu-overlay" class="fixed inset-0 bg-black opacity-0 z-90 pointer-events-none transition-opacity duration-300"></div>
  
  <div id="mobile-menu-panel" class="fixed top-0 bottom-0 right-0 w-full sm:w-80 z-100 h-[100dvh] translate-x-full transition-transform duration-300">
    <div class="nav-glass w-full h-full flex flex-col shadow-2xl" style="backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);">
      <button 
        id="mobile-menu-close"
        class="absolute top-4 right-4 p-2.5 theme-accent rounded-xl theme-border border z-110 shadow-sm hover:theme-bg-05 transition-all duration-300"
        aria-label="Close menu"
      >
        <svg class="w-5 h-5 theme-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    
      <div class="w-full h-full p-6 pt-16 flex flex-col overflow-y-auto">
        <nav class="mb-8">
          <div class="flex flex-col space-y-3">
            {[
              { href: "#about", label: "About" },
              { href: "#work", label: "Work" }
            ].map((item) => (
              <a
                href={item.href}
                class="menu-link p-4 text-xl font-medium theme-primary rounded-xl theme-bg-05 border theme-border flex items-center hover:bg-white/[0.03] transition-all duration-300 shadow-sm"
              >
                <span>{item.label}</span>
                <svg class="ml-auto w-5 h-5 theme-primary opacity-70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M5 12h14M12 5l7 7-7 7"/>
                </svg>
              </a>
            ))}
          </div>
        </nav>
      
        <div class="mt-auto">
          <div class="pt-6 border-t theme-border">
            <a 
              href="mailto:jleibl@proton.me" 
              class="flex items-center justify-center gap-3 w-full py-4 px-6 theme-button-primary rounded-xl transition-all duration-300 shadow-sm hover:shadow-md"
            >
              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
              </svg>
              <span class="font-medium">Contact Me</span>
            </a>
          </div>
        
          <div class="pt-8 flex justify-center pb-6 opacity-70">
            <GermanyFlag />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const toggle = document.getElementById('mobile-menu-toggle');
    const close = document.getElementById('mobile-menu-close');
    const overlay = document.getElementById('mobile-menu-overlay');
    const panel = document.getElementById('mobile-menu-panel');
    const menuLinks = document.querySelectorAll('.menu-link');
    
    function openMenu() {
      document.body.style.overflow = 'hidden';
      toggle?.setAttribute('aria-expanded', 'true');
      overlay?.classList.remove('opacity-0', 'pointer-events-none');
      overlay?.classList.add('opacity-90');
      panel?.classList.remove('translate-x-full');
    }
    
    function closeMenu() {
      document.body.style.overflow = '';
      toggle?.setAttribute('aria-expanded', 'false');
      overlay?.classList.add('opacity-0', 'pointer-events-none');
      overlay?.classList.remove('opacity-90');
      panel?.classList.add('translate-x-full');
    }
    
    toggle?.addEventListener('click', openMenu);
    close?.addEventListener('click', closeMenu);
    overlay?.addEventListener('click', closeMenu);
    menuLinks.forEach(link => link.addEventListener('click', closeMenu));
    
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && toggle?.getAttribute('aria-expanded') === 'true') {
        closeMenu();
      }
    });
  });
</script> 