casa-daenzo-web/src/pages/apartments/index.astro

---
import Layout from '../../layouts/Layout.astro';
import ApartmentCard from '../../components/ApartmentCard.astro';
import EviivoWidget from '../../components/EviivoWidget.astro';
import { getCollection } from 'astro:content';

const apartments = await getCollection('apartments');
const sortedApartments = apartments.sort((a, b) => a.data.featuredOrder - b.data.featuredOrder);
---

<Layout
  title="Boutique Apartments & Suiten in Goslar | Casa da Enzo"
  description="Alle 7 Ferienwohnungen & Suiten der Casa da Enzo in Goslar: Von der Luxus-Komfortsuite mit Balkon bis zum romantischen Altstadt-Studio. Jetzt direkt 15% günstiger buchen."
>
  <!-- Header / Hero Section -->
  <section class="bg-stone-900 text-white py-16 sm:py-20 border-b border-stone-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center max-w-3xl mx-auto space-y-4">
        <span class="px-4 py-1.5 rounded-full bg-amber-500/20 text-amber-400 text-xs font-semibold uppercase tracking-wider border border-amber-500/30">
          Übersicht aller Wohneinheiten
        </span>
        <h1 class="font-serif text-4xl sm:text-5xl font-bold tracking-tight text-stone-100">
          Unsere 7 Boutique-Apartments in Goslar
        </h1>
        <p class="text-stone-300 text-base sm:text-lg leading-relaxed">
          Historisches Fachwerk aus dem 16. Jahrhundert, nachhaltiger Wohnkomfort mit Lehmputz, modernste Küchen und smarte Nuki-Keyless-Anreise.
        </p>

        <!-- Ratings & Guest Directory Badges -->
        <div class="pt-6 flex flex-wrap items-center justify-center gap-4 text-xs font-medium text-stone-200">
          <!-- Airbnb Superhost -->
          <div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
            <span class="text-rose-400 text-base">★</span>
            <span class="font-bold">4.98</span>
            <span class="text-stone-400">|</span>
            <span class="text-amber-300 font-semibold">Airbnb Superhost</span>
          </div>

          <!-- Booking.com Top Rating -->
          <div class="flex items-center gap-2 px-4 py-2 rounded-xl bg-stone-800/80 border border-stone-700 shadow-sm">
            <span class="px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-xs">9.4</span>
            <span class="font-semibold text-stone-200">Booking.com Hervorragend</span>
          </div>

          <!-- Eviivo Digital Guest Directory Link -->
          <a
            href="https://guest.eviivo.com/casa-daenzo"
            target="_blank"
            rel="noopener noreferrer"
            class="flex items-center gap-2 px-4 py-2 rounded-xl bg-emerald-900/60 border border-emerald-600/50 text-emerald-300 hover:bg-emerald-900/90 transition-all"
          >
            <span class="text-base">📱</span>
            <span class="font-semibold">Eviivo Digital Guest Directory</span>
            <span class="text-xs text-emerald-400">↗</span>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Filter & Catalog Grid -->
  <section class="py-16 bg-[#FAF6F0]">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      
      <!-- Category Filter Tabs -->
      <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mb-12">
        <button
          class="filter-btn active px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-[#C85A32] text-white"
          data-category="all"
        >
          Alle Apartments (7)
        </button>
        <button
          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
          data-category="suite"
        >
          Komfort-Suiten (4)
        </button>
        <button
          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
          data-category="romantik"
        >
          Romantik-Apartments (2)
        </button>
        <button
          class="filter-btn px-6 py-2.5 rounded-full text-sm font-semibold transition-all shadow-sm bg-white text-stone-700 hover:bg-stone-100 border border-stone-200"
          data-category="studio"
        >
          Boutique Studio (1)
        </button>
      </div>

      <!-- Apartments Grid -->
      <div id="apartments-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {sortedApartments.map((apt) => (
          <div class="apartment-item" data-type={apt.data.type}>
            <ApartmentCard
              title={apt.data.title}
              subtitle={apt.data.subtitle}
              category={apt.data.category}
              guests={apt.data.guests}
              sizeSqm={apt.data.sizeSqm}
              balcony={apt.data.balcony}
              workspace={apt.data.workspace}
              kitchen={apt.data.kitchen}
              highlights={apt.data.highlights}
              image={apt.data.image}
              slug={apt.slug}
            />
          </div>
        ))}
      </div>

      <!-- Guest Directory Callout Banner -->
      <div class="mt-16 p-8 rounded-3xl bg-amber-50 border border-amber-200/80 shadow-sm flex flex-col md:flex-row items-center justify-between gap-6">
        <div class="space-y-2 text-center md:text-left">
          <span class="px-3 py-1 rounded-full bg-amber-200 text-[#C85A32] text-xs font-bold uppercase tracking-wider">
            Eviivo Gästemappe
          </span>
          <h3 class="font-serif text-2xl font-bold text-stone-900">
            Digitaler Gästeführer & Hausordnung
          </h3>
          <p class="text-stone-600 text-sm max-w-2xl">
            Über den Eviivo Guest Directory Link findest du jederzeit alle Details zu deinem Aufenthalt, WLAN-Zugangsdaten, Empfehlungen für Restaurants und Harzer Ausflugsziele.
          </p>
        </div>
        <a
          href="https://guest.eviivo.com/casa-daenzo"
          target="_blank"
          rel="noopener noreferrer"
          class="shrink-0 px-6 py-3.5 rounded-2xl bg-[#C85A32] text-white font-bold text-sm hover:bg-[#b04d2a] shadow-md transition-all flex items-center gap-2"
        >
          <span>📱 Gästemappe öffnen</span>
          <span>↗</span>
        </a>
      </div>

    </div>
  </section>

  <!-- Eviivo Direct Booking Widget Integration -->
  <section id="booking" class="py-12 bg-stone-100 border-t border-stone-200 px-4">
    <EviivoWidget />
  </section>
</Layout>

<script>
  // Client-side Category Filter Logic
  document.addEventListener('DOMContentLoaded', () => {
    const filterBtns = document.querySelectorAll<HTMLButtonElement>('.filter-btn');
    const items = document.querySelectorAll<HTMLElement>('.apartment-item');

    filterBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const category = btn.getAttribute('data-category');

        // Update button styles
        filterBtns.forEach((b) => {
          b.classList.remove('bg-[#C85A32]', 'text-white', 'active');
          b.classList.add('bg-white', 'text-stone-700', 'border', 'border-stone-200');
        });
        btn.classList.remove('bg-white', 'text-stone-700', 'border', 'border-stone-200');
        btn.classList.add('bg-[#C85A32]', 'text-white', 'active');

        // Show/Hide items
        items.forEach((item) => {
          const itemType = item.getAttribute('data-type');
          if (category === 'all' || itemType === category) {
            item.style.display = 'block';
          } else {
            item.style.display = 'none';
          }
        });
      });
    });
  });
</script>