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

export async function getStaticPaths() {
  const apartments = await getCollection('apartments');
  return apartments.map((apt) => ({
    params: { slug: apt.slug },
    props: { apartment: apt },
  }));
}

const { apartment } = Astro.props;
const { Content } = await apartment.render();
const { title, subtitle, category, guests, sizeSqm, balcony, workspace, kitchen, highlights } = apartment.data;
---

<Layout title={`${title} | Casa da Enzo Goslar`} description={subtitle}>
  <div class="py-12 bg-[#FAF6F0]">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">
      
      <!-- Back Link -->
      <a href="/#apartments" class="inline-flex items-center gap-2 text-sm font-semibold text-[#C85A32] hover:underline">
        ← Zurück zur Apartment-Übersicht
      </a>

      <!-- Title & Header -->
      <div class="space-y-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-[#C85A32] text-white">
          {category}
        </span>
        <h1 class="font-serif text-4xl sm:text-5xl font-bold text-stone-900">{title}</h1>
        <p class="text-stone-600 text-lg leading-relaxed">{subtitle}</p>
      </div>

      <!-- Quick Specs Bar -->
      <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-6 rounded-2xl bg-white border border-stone-200 shadow-sm text-center">
        <div>
          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Kapazität</span>
          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">👥 {guests} Gäste</span>
        </div>
        <div>
          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Größe</span>
          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">📐 {sizeSqm} m²</span>
        </div>
        <div>
          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Balkon / Terrasse</span>
          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{balcony ? '🌿 Ja' : 'Nein'}</span>
        </div>
        <div>
          <span class="block text-xs uppercase tracking-wider text-stone-500 font-semibold">Workspace</span>
          <span class="font-serif text-xl font-bold text-stone-900 mt-1 block">{workspace ? '💻 Inklusive' : 'WLAN'}</span>
        </div>
      </div>

      <!-- Image Banner Placeholder -->
      <div class="aspect-[21/9] rounded-3xl bg-stone-300 flex items-center justify-center text-stone-500 font-serif text-lg font-medium shadow-inner">
        {title} — High-Res Fotografie
      </div>

      <!-- Highlights & Details -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 pt-4">
        <div class="md:col-span-2 space-y-6 bg-white p-8 rounded-3xl border border-stone-200 shadow-sm">
          <h2 class="font-serif text-2xl font-bold text-stone-900">Beschreibung & Ausstattung</h2>
          <div class="prose prose-stone max-w-none text-stone-700 leading-relaxed">
            <Content />
          </div>

          <div class="pt-6 border-t border-stone-200">
            <h3 class="font-serif text-lg font-bold text-stone-900 mb-3">Küche & Verpflegung</h3>
            <p class="text-stone-600 text-sm">{kitchen}</p>
          </div>
        </div>

        <!-- Sidebar / Highlights -->
        <div class="space-y-6">
          <div class="bg-stone-900 text-white p-6 rounded-3xl space-y-4 shadow-lg">
            <h3 class="font-serif text-xl font-bold text-amber-400">Ausstattungs-Highlights</h3>
            <ul class="space-y-3 text-sm text-stone-300">
              {highlights.map((h) => (
                <li class="flex items-start gap-3">
                  <span class="text-amber-400 font-bold">✓</span>
                  <span>{h}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <!-- Eviivo Booking Widget -->
      <EviivoWidget />

    </div>
  </div>
</Layout>