brabetz-homepage/src/components/Biodiversity.astro

---
// src/components/Biodiversity.astro
import { getEntry } from 'astro:content';
const entry = await getEntry('biodiversity', 'biotope');
const { data } = entry || { data: { items: [] } };
---
<section id="biodiversity" class="py-32 bg-stone-900/30">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="mb-20 text-center">
            <span class="text-xs font-bold tracking-widest text-amber-500 uppercase block mb-3">Die Symbiose</span>
            <h2 class="text-3xl sm:text-5xl font-luxury font-bold text-white mb-4">Ein friedlicher Dialog zwischen Stein und Pflanze</h2>
            <p class="text-stone-500 max-w-2xl mx-auto font-light">Wie wir traditionelle Baukunst und digitale Intelligenz nutzen, um Oasen der Ruhe in aller Liebe zu erschaffen.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
            {data.items.map((item) => (
                <div class={`glass p-8 rounded-2xl border ${item.title === 'Die Plantlix-Connection' ? 'border-emerald-500/30 bg-emerald-950/10 hover:border-emerald-500/50' : 'border-stone-800/50 hover:border-emerald-500/30'} transition-all group relative overflow-hidden flex flex-col justify-between`}>
                    <div>
                        {item.title === 'Die Plantlix-Connection' && <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full"></div>}
                        <div class={`${item.title === 'Die Plantlix-Connection' ? 'text-emerald-400' : 'text-amber-400'} text-3xl mb-6`}><i class={item.icon}></i></div>
                        <h3 class="text-xl font-luxury font-bold text-white mb-4">{item.title}</h3>
                        <p class={`${item.title === 'Die Plantlix-Connection' ? 'text-stone-300' : 'text-stone-400'} text-sm font-light leading-relaxed mb-4`} set:html={item.description}></p>
                        <div class={`text-xs font-semibold ${item.title === 'Die Plantlix-Connection' ? 'text-amber-500' : 'text-emerald-400'} uppercase tracking-wider`}>{item.technique}</div>
                    </div>
                    
                    <button @click={item.title === 'Die Trockenmauer als Biotop' ? "currentPage = 'page-mauer'" : item.title === 'Das Schwammstadt-Prinzip' ? "currentPage = 'page-gewerbe'" : "currentPage = 'page-plantlix'"} class="mt-6 w-full text-center px-4 py-2.5 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                        Geschichte lesen
                    </button>
                </div>
            ))}
        </div>

        <!-- Interactive Scanner -->
        <div class="mt-20 glass p-8 rounded-2xl border border-stone-800/50" x-data="{ scanning: false, scanned: false, progress: 0, startScan() { this.scanning = true; let timer = setInterval(() => { this.progress += 5; if (this.progress >= 100) { clearInterval(timer); this.scanning = false; this.scanned = true; } }, 50); } }">
            <div class="flex flex-col md:flex-row items-center justify-between gap-8">
                <div>
                    <h3 class="text-xl font-luxury font-bold text-white mb-2">Plantlix Standort-Scanner</h3>
                    <p class="text-stone-400 text-sm font-light">Simuliere eine Standort-Analyse für dein Projekt.</p>
                </div>
                <button @click="startScan()" :disabled="scanning || scanned" class="px-6 py-3 bg-emerald-600 hover:bg-emerald-700 disabled:bg-stone-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                    <span x-show="!scanning && !scanned">Scan starten</span>
                    <span x-show="scanning">Scanne...</span>
                    <span x-show="scanned">Scan abgeschlossen</span>
                </button>
            </div>

            <!-- Progress Bar -->
            <div x-show="scanning" class="mt-6 w-full bg-stone-800 rounded-full h-2">
                <div class="bg-emerald-500 h-2 rounded-full" :style="`width: ${progress}%`"></div>
            </div>

            <!-- Results -->
            <div x-show="scanned" class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Boden-pH</span>
                    <p class="text-xl font-bold text-white">6.8 (Neutral)</p>
                </div>
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Feuchtigkeit</span>
                    <p class="text-xl font-bold text-white">42% (Mäßig)</p>
                </div>
                <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                    <span class="text-xs text-stone-500 uppercase">Empfehlung</span>
                    <p class="text-sm font-bold text-emerald-400">Artenreiche Magerwiese</p>
                </div>
            </div>

            <!-- Call to Action Button -->
            <div x-show="scanned" class="mt-8 text-center" x-transition:enter="transition ease-out duration-500 delay-200" x-transition:enter-start="opacity-0 translate-y-2" x-transition:enter-end="opacity-100 translate-y-0">
                <a href="https://plantlix.de" target="_blank" class="inline-flex items-center gap-2 px-6 py-3 bg-stone-800 hover:bg-emerald-800 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all border border-stone-700 hover:border-emerald-600">
                    Echte Analyse auf Plantlix.de starten <i class="fa-solid fa-arrow-up-right-from-square"></i>
                </a>
            </div>
        </div>

        <!-- Flowchart -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-5 gap-4 items-center text-center">
            <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 1</span>
                <p class="text-sm font-bold text-white">Standort & Probe</p>
            </div>
            <div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
            <div class="bg-stone-900/50 p-4 rounded-lg border border-emerald-500/30">
                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 2</span>
                <p class="text-sm font-bold text-emerald-400">Plantlix API</p>
            </div>
            <div class="text-stone-700 hidden md:block"><i class="fa-solid fa-arrow-right text-xl"></i></div>
            <div class="bg-stone-900/50 p-4 rounded-lg border border-stone-800">
                <span class="text-xs text-stone-500 uppercase block mb-1">Schritt 3</span>
                <p class="text-sm font-bold text-white">Perfekter Pflanzplan</p>
            </div>
        </div>
    </div>
</section>