casa-daenzo-web/src/components/Header.astro

---
interface Props {
  lang?: 'de' | 'en';
}

const { lang = 'de' } = Astro.props;
const isDe = lang === 'de';
---

<header class="sticky top-0 z-40 w-full bg-stone-900/95 backdrop-blur-md border-b border-stone-800 transition-all">
  <!-- Top Utility Contact Bar -->
  <div class="bg-stone-950 border-b border-stone-800/80 py-1.5 px-4 text-[11px] sm:text-xs">
    <div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-stone-400">
      <!-- Dual Contacts -->
      <div class="flex flex-wrap items-center gap-4 sm:gap-6">
        <!-- Apartments Phone -->
        <a
          href="https://wa.me/4915207483196"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-1.5 text-emerald-400 hover:text-emerald-300 font-medium transition-colors"
          title="Apartment Anfragen & Concierge Alja"
        >
          <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
          <span class="text-stone-300">Apartments (WhatsApp):</span>
          <span class="underline font-semibold">+49 1520 7483196</span>
        </a>

        <!-- Trattoria Phone -->
        <a
          href="tel:+4915207483196"
          class="inline-flex items-center gap-1.5 text-[#C85A32] hover:text-[#e2724a] font-medium transition-colors"
          title="Trattoria Tischreservierung"
        >
          <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
          <span class="text-stone-300">Trattoria:</span>
          <span class="underline font-semibold">+49 1520 7483196</span>
        </a>
      </div>

      <!-- Right Utility Links: Eviivo & Language Switch -->
      <div class="flex items-center gap-4">
        <a
          href="https://guest.eviivo.com/casa-daenzo"
          target="_blank"
          rel="noopener noreferrer"
          class="inline-flex items-center gap-1 text-amber-400 hover:text-white transition-colors font-medium cursor-pointer"
          title="Digital Guest Directory"
        >
          <span>📖</span>
          <span class="underline">Eviivo Guest Directory</span>
        </a>

        <div class="flex items-center bg-stone-900 border border-stone-800 rounded-full px-2 py-0.5 text-[11px] font-bold">
          <span class="px-1.5 py-0.5 rounded-full bg-amber-500 text-stone-950">DE</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Navigation Bar -->
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
    <!-- Brand Logo -->
    <a href="/" class="flex items-center gap-3 group">
      <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-[#2D5A43] via-[#D4A373] to-[#C85A32] p-0.5 shadow-lg group-hover:scale-105 transition-transform">
        <div class="w-full h-full bg-stone-950 rounded-[14px] flex items-center justify-center font-serif text-xl font-bold text-amber-400">
          E
        </div>
      </div>
      <div class="flex flex-col">
        <span class="font-serif text-xl tracking-wide font-bold text-white group-hover:text-amber-400 transition-colors">
          Casa da Enzo
        </span>
        <div class="flex items-center gap-1.5 text-[10px] tracking-widest uppercase font-sans -mt-0.5">
          <span class="text-emerald-400 font-semibold">Apartments</span>
          <span class="text-stone-400">•</span>
          <span class="text-[#C85A32] font-semibold">Trattoria</span>
        </div>
      </div>
    </a>

    <!-- Desktop Navigation -->
    <nav class="hidden md:flex items-center gap-6 lg:gap-8 text-sm font-medium">
      <a href="/apartments" class="text-stone-200 hover:text-emerald-400 transition-colors flex items-center gap-1.5">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        <span>Apartments & Suiten</span>
      </a>
      <a href="/trattoria" class="text-stone-200 hover:text-[#C85A32] transition-colors flex items-center gap-1.5">
        <span class="w-1.5 h-1.5 rounded-full bg-[#C85A32]"></span>
        <span>Trattoria da Enzo</span>
      </a>
      <a href="/blog" class="text-stone-200 hover:text-amber-400 transition-colors">
        Blog & Magazin
      </a>
      <a href="/#geschichte" class="text-stone-200 hover:text-amber-400 transition-colors">
        Unsere Geschichte
      </a>
      <a href="/#faq" class="text-stone-200 hover:text-amber-400 transition-colors">
        FAQ
      </a>
    </nav>

    <!-- CTAs -->
    <div class="flex items-center gap-3">
      <a
        href="/apartments#booking"
        class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#C85A32] text-white font-medium text-xs lg:text-sm hover:bg-[#b04d2a] shadow-md transition-all hover:scale-105"
      >
        <span>Direkt buchen (Bestpreis)</span>
      </a>

      <!-- Mobile Menu Button -->
      <button
        id="mobile-menu-btn"
        class="md:hidden p-2 text-stone-200 hover:text-amber-400 rounded-xl bg-stone-800 border border-stone-700"
        aria-label="Menü öffnen"
      >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Navigation Dropdown -->
  <div id="mobile-menu" class="hidden md:hidden bg-stone-950 border-b border-stone-800 px-4 py-6 space-y-4">
    <a href="/apartments" class="block py-2 text-stone-200 font-medium hover:text-emerald-400 flex items-center gap-2">
      <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
      <span>Apartments & Suiten</span>
    </a>
    <a href="/trattoria" class="block py-2 text-stone-200 font-medium hover:text-[#C85A32] flex items-center gap-2">
      <span class="w-2 h-2 rounded-full bg-[#C85A32]"></span>
      <span>Trattoria da Enzo</span>
    </a>
    <a href="/blog" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
      Blog & Magazin
    </a>
    <a href="/#geschichte" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
      Unsere Geschichte
    </a>
    <a href="/#faq" class="block py-2 text-stone-200 font-medium hover:text-amber-400">
      FAQ
    </a>

    <div class="pt-2 border-t border-stone-800 space-y-2">
      <a href="https://wa.me/4915207483196" target="_blank" class="block py-1.5 text-xs text-emerald-400 font-semibold">
        💬 Apartments WhatsApp: +49 1520 7483196
      </a>
      <a href="https://guest.eviivo.com/casa-daenzo" target="_blank" class="block py-1.5 text-xs text-amber-400 font-semibold">
        📖 Eviivo Guest Directory
      </a>
    </div>

    <a href="/apartments#booking" class="block text-center py-3 rounded-2xl bg-[#C85A32] text-white font-bold text-sm">
      Jetzt Direkt buchen
    </a>
  </div>
</header>

<script>
  function setupHeader() {
    const btn = document.getElementById('mobile-menu-btn');
    const menu = document.getElementById('mobile-menu');
    if (btn && menu) {
      btn.addEventListener('click', () => {
        menu.classList.toggle('hidden');
      });
    }
  }

  document.addEventListener('DOMContentLoaded', setupHeader);
  document.addEventListener('astro:page-load', setupHeader);
</script>