<% const _f = site.architecture && site.architecture.footer ? site.architecture.footer : {}; %>
<% const _angebot = _f.angebot && _f.angebot.length ? _f.angebot : [
  { path: '/leistungen', label: 'Leistungen & Preise' },
  { path: '/galerie', label: 'Galerie' },
  { path: '/team', label: 'Team' },
]; %>
<% const _kt = _f.kontaktTermin && _f.kontaktTermin.length ? _f.kontaktTermin : [
  { path: '/kontakt', label: 'Nachricht senden' },
  { path: '/kontakt#oeffnungszeiten', label: 'Öffnungszeiten' },
  { path: '/buchung', label: 'Termin anfragen' },
]; %>
<footer class="w-full pt-16 sm:pt-20 pb-[max(2.5rem,env(safe-area-inset-bottom,0px))] bg-[#00170f]">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 sm:gap-12 px-4 sm:px-6 md:px-12 border-t border-[#aacfbe]/5 max-w-screen-2xl mx-auto pt-12 sm:pt-16" data-reveal-stagger>
    <div class="space-y-6 sm:space-y-8 sm:col-span-2 lg:col-span-1">
      <div class="text-xl font-headline text-[#aacfbe]"><a href="/" class="hover:text-[#e9c176] transition-colors"><%= site.brand %></a></div>
      <p class="font-body text-[#aacfbe]/60 text-sm leading-relaxed max-w-xs">
        <%= site.titleSuffix %>. <%= site.imagesNote %>
      </p>
      <div class="flex flex-wrap gap-2 sm:gap-4">
        <a class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-lg text-[#aacfbe] hover:text-[#e9c176] hover:bg-[#aacfbe]/5 transition-colors" href="<%= site.mapsUrl %>" target="_blank" rel="noopener noreferrer" aria-label="Google Maps — <%= site.brand %> in Hilden">
          <span class="material-symbols-outlined text-2xl">map</span>
        </a>
        <a class="inline-flex items-center justify-center min-h-11 min-w-11 rounded-lg text-[#aacfbe] hover:text-[#e9c176] hover:bg-[#aacfbe]/5 transition-colors" href="tel:<%= site.phone %>" aria-label="Anrufen: <%= site.phoneDisplay %>">
          <span class="material-symbols-outlined text-2xl">call</span>
        </a>
      </div>
    </div>
    <div class="space-y-1 sm:space-y-2">
      <span class="font-label text-[#e9c176] text-[10px] tracking-[0.1em] uppercase block mb-4 sm:mb-6">Angebot</span>
      <% _angebot.forEach(function (item) { %>
      <a class="font-body text-[10px] tracking-[0.1em] uppercase flex items-center min-h-11 text-[#aacfbe]/60 hover:text-[#e9c176] transition-colors" href="<%= item.path %>"><%= item.label %></a>
      <% }); %>
    </div>
    <div class="space-y-1 sm:space-y-2">
      <span class="font-label text-[#e9c176] text-[10px] tracking-[0.1em] uppercase block mb-4 sm:mb-6">Kontakt &amp; Termin</span>
      <% _kt.forEach(function (item) { %>
      <a class="font-body text-[10px] tracking-[0.1em] uppercase flex items-center min-h-11 text-[#aacfbe]/60 hover:text-[#e9c176] transition-colors" href="<%= item.path %>"><%= item.label %></a>
      <% }); %>
    </div>
    <div class="space-y-1 sm:space-y-2 sm:col-span-2 lg:col-span-1">
      <span class="font-label text-[#e9c176] text-[10px] tracking-[0.1em] uppercase block mb-4 sm:mb-6">Rechtliches</span>
      <a class="font-body text-[10px] tracking-[0.1em] uppercase flex items-center min-h-11 text-[#aacfbe]/60 hover:text-[#e9c176] transition-colors" href="/impressum">Impressum</a>
      <a class="font-body text-[10px] tracking-[0.1em] uppercase flex items-center min-h-11 text-[#aacfbe]/60 hover:text-[#e9c176] transition-colors" href="/datenschutz">Datenschutz</a>
      <p class="font-body text-[10px] tracking-[0.1em] uppercase text-[#aacfbe]/50 leading-relaxed pt-4 max-w-xs">
        <%= site.address.line1 %><br/>
        <%= site.address.line2 %>
      </p>
      <p class="font-body text-[10px] tracking-[0.1em] uppercase text-[#e9c176]">T: <%= site.phoneDisplay %></p>
    </div>
  </div>
  <div class="mt-12 sm:mt-20 px-4 sm:px-6 md:px-12 text-center space-y-4 pb-2">
    <p class="font-body text-[10px] tracking-[0.1em] uppercase text-[#aacfbe]/40 flex flex-wrap items-center justify-center gap-x-2 gap-y-2 sm:gap-x-4">
      <span>© <%= new Date().getFullYear() %> <%= site.brand %></span>
      <span class="text-[#aacfbe]/25 hidden sm:inline" aria-hidden="true">·</span>
      <a class="inline-flex items-center justify-center min-h-10 px-2 rounded-md text-[#aacfbe]/50 hover:text-[#e9c176] transition-colors" href="/impressum">Impressum</a>
      <span class="text-[#aacfbe]/25 hidden sm:inline" aria-hidden="true">·</span>
      <a class="inline-flex items-center justify-center min-h-10 px-2 rounded-md text-[#aacfbe]/50 hover:text-[#e9c176] transition-colors" href="/datenschutz">Datenschutz</a>
      <span class="text-[#aacfbe]/25 hidden sm:inline" aria-hidden="true">·</span>
      <span>Demo-Website</span>
      <% if (typeof stitchTemplatesEnabled !== 'undefined' && stitchTemplatesEnabled) { %>
      <span class="text-[#aacfbe]/25 hidden sm:inline" aria-hidden="true">·</span>
      <a class="inline-flex items-center justify-center min-h-10 px-2 rounded-md text-[#aacfbe]/40 hover:text-[#e9c176]/80 transition-colors" href="/stitch/" rel="nofollow">Stitch-Vorlagen</a>
      <% } %>
    </p>
  </div>
</footer>
