brabetz-homepage/src/components/SubpageContact.astro

---
// src/components/SubpageContact.astro
---
<!-- Subpage: Kontakt -->
<div x-show="currentPage === 'page-contact'" x-cloak x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="min-h-screen pt-28 pb-24 px-6 lg:px-8">
    <div class="max-w-6xl mx-auto space-y-12">
        <button @click="currentPage = 'main'" class="text-stone-400 hover:text-white transition-colors font-semibold text-xs uppercase tracking-wider flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-stone-700">
            <i class="fa-solid fa-arrow-left"></i> Zurück zur Übersicht
        </button>

        <div class="border-b border-stone-800 pb-6">
            <span class="text-xs text-amber-500 font-mono uppercase tracking-widest block mb-2">Bauleitung & Vergabe</span>
            <h1 class="text-4xl sm:text-5xl font-luxury font-bold text-white">Projekt zünden.</h1>
            <p class="text-stone-400 mt-4 max-w-2xl font-light">Unsere Kapazitäten für anspruchsvolle Außenanlagen im aktuellen Quartal sind streng limitiert. Wer zuerst kommt, baut zuerst.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
            <div class="lg:col-span-7 glass p-8 rounded-2xl" x-data="{ step: 1, submitted: false, projectType: '', area: '', slope: false }">
                <!-- Progress Indicator -->
                <div class="flex items-center justify-between mb-8" x-show="!submitted">
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 1 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">1</span>
                        <span class="text-xs font-mono text-stone-400">Projekt</span>
                    </div>
                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 2 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">2</span>
                        <span class="text-xs font-mono text-stone-400">Details</span>
                    </div>
                    <div class="flex-grow h-px bg-stone-800 mx-4"></div>
                    <div class="flex items-center gap-2">
                        <span class="w-6 h-6 flex items-center justify-center rounded-full text-xs font-mono" :class="step >= 3 ? 'bg-emerald-600 text-white' : 'bg-stone-800 text-stone-500'">3</span>
                        <span class="text-xs font-mono text-stone-400">Kontakt</span>
                    </div>
                </div>

                <form @submit.prevent="submitted = true; setTimeout(() => { submitted = false; step = 1; }, 5000)" class="space-y-6" x-show="!submitted">
                    <!-- Step 1: Project Type -->
                    <div x-show="step === 1" class="space-y-4">
                        <label class="block text-[10px] font-mono text-stone-500 uppercase mb-4 tracking-widest">Was möchtest du bauen? *</label>
                        <div class="grid grid-cols-1 gap-4">
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'mauer' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="mauer" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Trockenmauerwerk / Hangsicherung</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Traditioneller Steinbau für Ewigkeit und Biodiversität.</p>
                            </label>
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'schwamm' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="schwamm" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Schwammstadt-System / Entwässerung</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Intelligentes Regenwassermanagement und Rigolen.</p>
                            </label>
                            <label class="glass p-4 rounded-lg border cursor-pointer hover:border-emerald-500/50 transition-colors" :class="projectType === 'garten' ? 'border-emerald-500 bg-emerald-950/10' : 'border-stone-800'">
                                <input type="radio" name="type" value="garten" x-model="projectType" class="hidden">
                                <p class="text-white text-sm font-bold">Premium Privatgarten</p>
                                <p class="text-stone-400 text-xs mt-1 font-light">Komplette Neugestaltung mit Fokus auf Natur. Inklusive kostenloser Standort-Analyse durch <span class="text-emerald-400 font-semibold">Plantlix.de</span>!</p>
                            </label>
                        </div>
                        <button type="button" @click="step = 2" :disabled="!projectType" class="w-full mt-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">
                            Weiter zu den Details
                        </button>
                    </div>

                    <!-- Step 2: Details -->
                    <div x-show="step === 2" class="space-y-6">
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Ungefähre Fläche (m²)</label>
                            <input type="number" x-model="area" placeholder="z.B. 100" class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Gibt es eine Hanglage?</label>
                            <div class="flex gap-4">
                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
                                    <input type="radio" name="slope" :value="true" x-model="slope" class="hidden">
                                    Ja, Hanglage
                                </label>
                                <label class="flex-grow glass p-3 rounded-lg border cursor-pointer text-center text-sm" :class="!slope ? 'border-emerald-500 bg-emerald-950/10 text-white' : 'border-stone-800 text-stone-400'">
                                    <input type="radio" name="slope" :value="false" x-model="slope" class="hidden">
                                    Nein, flach
                                </label>
                            </div>
                        </div>
                        <div class="flex gap-4 mt-6">
                            <button type="button" @click="step = 1" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                                Zurück
                            </button>
                            <button type="button" @click="step = 3" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                                Weiter zum Kontakt
                            </button>
                        </div>
                    </div>

                    <!-- Step 3: Contact -->
                    <div x-show="step === 3" class="space-y-6">
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">Dein Name *</label>
                            <input type="text" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
                        <div>
                            <label class="block text-[10px] font-mono text-stone-500 uppercase mb-2 tracking-widest">E-Mail Adresse *</label>
                            <input type="email" required class="w-full bg-stone-900/50 border border-stone-800 rounded-lg px-4 py-3 text-sm text-white focus:outline-none focus:border-amber-500 transition-colors">
                        </div>
                        <div class="flex gap-4 mt-6">
                            <button type="button" @click="step = 2" class="flex-grow py-3 bg-stone-800 hover:bg-stone-700 text-white font-semibold rounded-lg text-xs uppercase tracking-widest transition-all">
                                Zurück
                            </button>
                            <button type="submit" class="flex-grow py-3 bg-emerald-600 hover:bg-emerald-700 text-white font-bold rounded-lg text-xs uppercase tracking-widest transition-all shadow-lg border border-emerald-700 hover:border-emerald-600">
                                Konfiguration senden
                            </button>
                        </div>
                    </div>
                </form>
                
                <div x-show="submitted" x-cloak class="p-6 bg-emerald-950/50 border border-emerald-800 rounded-lg text-emerald-400 text-sm text-center font-medium font-mono" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100">
                    ✔ Konfiguration erfolgreich an die Bauleitung übermittelt. Wir prüfen deine Angaben.
                </div>
            </div>

            <div class="lg:col-span-5 space-y-6">
                <div class="glass p-8 rounded-2xl flex flex-col items-center text-center">
                    <div class="badge bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-3 py-1 rounded text-[10px] uppercase font-mono mb-6 tracking-widest">Digitale Visitenkarte</div>
                    
                    <div class="p-4 bg-white rounded-xl border border-stone-800">
                        <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&color=064e3b&data=https://galabau.brabros.de" alt="QR Code Gebrüder Brabetz" class="w-40 h-40">
                    </div>
                    
                    <p class="text-xs text-stone-500 font-mono mt-6 leading-relaxed">
                        <strong>Direkt-Scan fürs Smartphone:</strong> Kamera draufhalten, Link öffnen und Kontakt speichern.
                    </p>
                </div>

                <div class="glass p-8 rounded-2xl font-mono text-xs text-stone-400 space-y-4">
                    <div class="text-amber-500 font-bold uppercase border-b border-stone-800 pb-2 tracking-widest">Die Zentrale</div>
                    <p><i class="fa-solid fa-phone text-amber-500 mr-2"></i> 06124 / 4654</p>
                    <p><i class="fa-solid fa-envelope text-amber-500 mr-2"></i> info@gebrueder-brabetz.de</p>
                    <p><i class="fa-solid fa-user-group text-emerald-500 mr-2"></i> Caspar, Jakob & Felix Brabetz</p>
                </div>
            </div>
        </div>
    </div>
</div>