<% 
  const me = typeof mapEmbed !== 'undefined' && mapEmbed ? mapEmbed : { iframeSrc: '', provider: 'none' };
  const mapVariant = (typeof variant === 'undefined' || !variant) ? 'tall' : variant;
  const wrapMin = mapVariant === 'compact' ? 'min-h-[220px] sm:min-h-[260px]' : 'min-h-[260px] sm:min-h-[300px] md:min-h-[340px]';
  const panelMin = mapVariant === 'compact' ? 'min-h-[280px] md:min-h-[320px]' : 'min-h-[320px] md:min-h-[400px]';
  const mapTitle = 'Karte: ' + site.brand + ', ' + site.address.line1 + ', ' + site.address.line2;
%>
<figure class="site-map-panel glass-panel rounded-xl overflow-hidden motion-lift flex flex-col h-full border border-outline-variant/25 shadow-2xl ring-1 ring-inset ring-[#aacfbe]/8 <%= panelMin %>" data-reveal>
<% if (me.iframeSrc) { %>
  <div class="site-map-panel__viewport relative flex-1 <%= wrapMin %> w-full bg-surface-container-low">
    <iframe
      class="site-map-panel__iframe absolute inset-0 h-full w-full border-0"
      src="<%= me.iframeSrc %>"
      title="<%= mapTitle %>"
      loading="lazy"
      referrerpolicy="no-referrer-when-downgrade"
      allowfullscreen
    ></iframe>
  </div>
  <figcaption class="site-map-panel__caption flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 px-4 py-3 md:px-5 md:py-4 border-t border-outline-variant/20 bg-surface/90 backdrop-blur-sm">
    <div class="min-w-0">
      <p class="font-headline text-base md:text-lg text-on-surface truncate"><%= site.address.line1 %></p>
      <p class="font-label text-[10px] tracking-widest uppercase text-outline"><%= site.address.line2 %> · <%= site.address.country %></p>
      <% if (me.provider === 'osm') { %>
      <p class="mt-2 text-[10px] text-on-surface-variant/80 leading-relaxed max-w-md">Kartengrundlage: OpenStreetMap. Für Google-Routenführung und Street View den Link rechts nutzen.</p>
      <% } %>
    </div>
    <div class="flex flex-wrap items-center gap-2 shrink-0">
      <a href="<%= site.mapsUrl %>" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center gap-2 min-h-11 px-4 rounded-lg bg-primary/15 text-primary font-label text-[10px] tracking-[0.15em] uppercase font-bold hover:bg-primary/25 transition-colors border border-primary/25">
        <span class="material-symbols-outlined text-lg" aria-hidden="true">open_in_new</span>
        Google Maps
      </a>
    </div>
  </figcaption>
<% } else { %>
  <a href="<%= site.mapsUrl %>" target="_blank" rel="noopener noreferrer" class="site-map-panel__fallback relative flex-1 flex flex-col justify-end min-h-[240px] md:min-h-[320px] group">
    <img class="absolute inset-0 w-full h-full object-cover opacity-50 group-hover:opacity-70 transition-opacity duration-700" src="<%= site.hero.image.src %>" alt="" loading="lazy" decoding="async">
    <div class="absolute inset-0 bg-gradient-to-t from-surface via-surface/70 to-transparent"></div>
    <div class="relative z-10 p-5 md:p-6 flex flex-col gap-3">
      <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary text-on-primary shadow-lg self-start">
        <span class="material-symbols-outlined text-2xl" aria-hidden="true">location_on</span>
      </div>
      <p class="font-headline text-lg text-on-surface"><%= site.address.line1 %></p>
      <p class="font-label text-[10px] tracking-widest uppercase text-outline"><%= site.address.line2 %></p>
      <span class="font-label text-[10px] text-primary tracking-widest uppercase">Karte in Google Maps öffnen →</span>
    </div>
  </a>
<% } %>
</figure>
