From 03249f1b2c404189bc3a1510a48fc55df5e92b8c Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 03:30:20 +0200
Subject: [PATCH] Add interactive Plantlix scanner and visual flowchart to
 Biodiversity section

---
 src/components/Biodiversity.astro | 54 +++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/src/components/Biodiversity.astro b/src/components/Biodiversity.astro
index 42bfcdf..3a67f08 100644
--- a/src/components/Biodiversity.astro
+++ b/src/components/Biodiversity.astro
@@ -42,5 +42,59 @@
                 <div class="text-xs font-semibold text-amber-500 uppercase tracking-wider">Fokus: Datengestützte Pflanzensoziologie</div>
             </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>
+        </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>