---
// src/components/Tutorials.astro
---
<!-- Tutorials Section -->
<section id="tutorials" class="py-32 bg-stone-950 relative overflow-hidden">
    <!-- Background Glow -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-6xl mx-auto px-6 relative z-10">
        <div class="text-center mb-16">
            <span class="text-xs font-bold tracking-widest text-emerald-500 uppercase block mb-3">Wissen teilen</span>
            <h2 class="text-3xl font-luxury font-bold text-white">Praxis-Tutorials vom Profi</h2>
            <p class="text-stone-400 text-sm mt-4 max-w-2xl mx-auto">Wie machen die das eigentlich? Wir zeigen dir, wie echte GaLaBau-Handwerkskunst funktioniert.</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Tutorial 1: Trockenmauer -->
            <div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                <div>
                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #1</span>
                    <h3 class="text-xl font-bold text-white mt-2 mb-4">Die perfekte Trockenmauer bauen</h3>
                    <p class="text-stone-400 text-sm mb-6">Eine Trockenmauer hält ohne Mörtel – rein durch Schwerkraft und Reibung. Hier ist die Schritt-für-Schritt-Anleitung.</p>
                    
                    <!-- Steps -->
                    <div class="space-y-6">
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Fundament ausheben</h4>
                                <p class="text-stone-500 text-xs mt-1">Mindestens 40 cm tief ausheben und mit frostsicherem Schotter (0/32) auffüllen und stark verdichten.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Die erste Reihe (Gründung)</h4>
                                <p class="text-stone-500 text-xs mt-1">Die größten und flachsten Steine als Basis setzen. Sie müssen leicht nach hinten geneigt sein (Anlauf ca. 10-15%).</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Hinterfüllung & Drainage</h4>
                                <p class="text-stone-500 text-xs mt-1">Nach jeder Steinreihe mit Schotter hinterfüllen. Das verhindert Wasserdruck auf die Mauer.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Bepflanzung</h4>
                                <p class="text-stone-500 text-xs mt-1">In die Fugen spezielles Substrat füllen und trockenheitsliebende Pflanzen wie Steingarten-Stauden setzen.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
                    <span class="text-xs text-stone-500 font-mono">Dauer: ca. 2 Tage</span>
                    <span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Schwer</span>
                </div>
            </div>

            <!-- Tutorial 2: Rasenpflege -->
            <div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
                <div>
                    <span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #2</span>
                    <h3 class="text-xl font-bold text-white mt-2 mb-4">Premium-Rasen im Sommer</h3>
                    <p class="text-stone-400 text-sm mb-6">Ein sattes Grün im Hochsommer ist kein Zufall, sondern das Ergebnis der richtigen Pflege-Routine.</p>
                    
                    <!-- Steps -->
                    <div class="space-y-6">
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">01</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Seltener, aber durchdringend gießen</h4>
                                <p class="text-stone-500 text-xs mt-1">Nicht jeden Tag ein bisschen, sondern 1-2 mal pro Woche intensiv (ca. 15-20 l/m²). Das fördert tiefe Wurzeln.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">02</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Schnitthöhe anpassen</h4>
                                <p class="text-stone-500 text-xs mt-1">Im Sommer den Rasen nicht kürzer als 5 cm schneiden. Längere Halme beschatten den Boden und schützen vor Austrocknung.</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">03</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Organisch düngen</h4>
                                <p class="text-stone-500 text-xs mt-1">Ein Langzeitdünger im Mai/Juni versorgt den Rasen gleichmäßig. Keine mineralischen Dünger in der prallen Sonne verwenden!</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <div class="flex-shrink-0 w-8 h-8 bg-stone-900 border border-stone-800 rounded-full flex items-center justify-center text-emerald-400 font-mono text-xs font-bold">04</div>
                            <div>
                                <h4 class="text-white text-sm font-bold">Schnittgut liegen lassen (Mulchen)</h4>
                                <p class="text-stone-500 text-xs mt-1">Wenn du oft mähst, lass das feine Schnittgut liegen. Es dient als natürlicher Dünger und Sonnenschutz.</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
                    <span class="text-xs text-stone-500 font-mono">Dauer: Kontinuierlich</span>
                    <span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Einfach</span>
                </div>
            </div>
        </div>
    </div>
</section>