---
// src/components/OnboardingWizard.astro
---

<section id="onboarding-wizard" class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-200 dark:border-white/5 transition-colors duration-300">
  <!-- Soft Background Glow -->
  <div class="absolute inset-0 opacity-[0.015] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[60%] bg-sky-500/5 dark:bg-sky-500/[0.02] blur-[120px] rounded-full pointer-events-none"></div>

  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-12">
      <span class="text-xs uppercase tracking-widest text-sky-600 dark:text-sky-400 font-bold">Website Konfigurator</span>
      <h2 class="text-3xl sm:text-4xl font-extrabold text-slate-900 dark:text-white mt-2 uppercase tracking-tight">Onboarding-Wizard</h2>
      <p class="text-slate-600 dark:text-zinc-400 text-xs sm:text-sm mt-3">
        Konfigurieren Sie Ihr Wunschprojekt in unter 2 Minuten. Kostenlos und unverbindlich.
      </p>
    </div>

    <!-- Wizard Box (Liquid Glass Style) -->
    <div class="relative rounded-3xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-950/40 backdrop-blur-2xl p-6 sm:p-10 shadow-xl overflow-hidden min-h-[600px] flex flex-col justify-between">
      <!-- Tactile details -->
      <span class="absolute top-3 left-3 w-2 h-2 border-t border-l border-slate-300 dark:border-white/20"></span>
      <span class="absolute top-3 right-3 w-2 h-2 border-t border-r border-slate-300 dark:border-white/20"></span>
      <span class="absolute bottom-3 left-3 w-2 h-2 border-b border-l border-slate-300 dark:border-white/20"></span>
      <span class="absolute bottom-3 right-3 w-2 h-2 border-b border-r border-slate-300 dark:border-white/20"></span>

      <!-- Step Indicator Bar -->
      <div class="flex justify-between items-center mb-8 pb-4 border-b border-slate-200/50 dark:border-white/5">
        <span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-widest" id="step-counter">SCHRITT 1 / 5</span>
        <div class="flex gap-2" id="step-dots">
          <span class="w-2 h-2 rounded-full bg-sky-500 transition-colors" data-step="1"></span>
          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="2"></span>
          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="3"></span>
          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="4"></span>
          <span class="w-2 h-2 rounded-full bg-slate-300 dark:bg-zinc-700 transition-colors" data-step="5"></span>
        </div>
      </div>

      <!-- Main Columns: Form Left, Live Preview Right -->
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch flex-grow">
        
        <!-- Left Column: Form Inputs (7 cols) -->
        <form id="wizard-form" class="lg:col-span-7 flex flex-col justify-between min-h-[400px]" novalidate>
          
          <!-- STEP 1: Branchen-Auswahl -->
          <div class="wizard-step space-y-4" data-step="1">
            <div>
              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 1: Branche wählen</h3>
              <p class="text-slate-500 dark:text-zinc-400 text-xs">Suchen Sie Ihre Branche oder tragen Sie Ihre eigene ein.</p>
            </div>

            <!-- Search Field -->
            <div class="relative">
              <input type="text" id="industry-search" placeholder="Branche suchen (z.B. Schreinerei, Arzt...)" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-3 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500 transition-all" />
            </div>

            <!-- Industries List (Scrollable) -->
            <div class="max-h-48 overflow-y-auto border border-slate-200/60 dark:border-white/5 rounded-xl p-3 grid grid-cols-1 sm:grid-cols-2 gap-2 bg-slate-100/30 dark:bg-white/5" id="industry-list">
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Schreinerei & Innenausbau" checked class="text-sky-600 focus:ring-sky-500" />
                <span>Schreinerei & Innenausbau</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Dachdeckerei" class="text-sky-600 focus:ring-sky-500" />
                <span>Dachdeckerei</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Solartechnik & PV" class="text-sky-600 focus:ring-sky-500" />
                <span>Solartechnik & PV</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Rechtsanwälte & Notare" class="text-sky-600 focus:ring-sky-500" />
                <span>Rechtsanwälte & Notare</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Bio-Hofladen" class="text-sky-600 focus:ring-sky-500" />
                <span>Bio-Hofladen</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Sanitär, Heizung & Klima" class="text-sky-600 focus:ring-sky-500" />
                <span>Sanitär, Heizung & Klima</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="KFZ-Meisterbetrieb" class="text-sky-600 focus:ring-sky-500" />
                <span>KFZ-Meisterbetrieb</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Steuerberater" class="text-sky-600 focus:ring-sky-500" />
                <span>Steuerberater</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Garten- & Landschaftsbau" class="text-sky-600 focus:ring-sky-500" />
                <span>Garten- & Landschaftsbau</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Physiotherapie Praxis" class="text-sky-600 focus:ring-sky-500" />
                <span>Physiotherapie Praxis</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Maler- & Lackiererbetrieb" class="text-sky-600 focus:ring-sky-500" />
                <span>Maler- & Lackiererbetrieb</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Zahnarztpraxis" class="text-sky-600 focus:ring-sky-500" />
                <span>Zahnarztpraxis</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Architekturbüro" class="text-sky-600 focus:ring-sky-500" />
                <span>Architekturbüro</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Software-Entwicklung" class="text-sky-600 focus:ring-sky-500" />
                <span>Software-Entwicklung</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Bäckerei & Konditorei" class="text-sky-600 focus:ring-sky-500" />
                <span>Bäckerei & Konditorei</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Friseursalon" class="text-sky-600 focus:ring-sky-500" />
                <span>Friseursalon</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Kosmetikstudio" class="text-sky-600 focus:ring-sky-500" />
                <span>Kosmetikstudio</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Restaurant & Gastronomie" class="text-sky-600 focus:ring-sky-500" />
                <span>Restaurant & Gastronomie</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Elektro-Technik" class="text-sky-600 focus:ring-sky-500" />
                <span>Elektro-Technik</span>
              </label>
              <label class="cursor-pointer flex items-center gap-2 p-2 bg-white dark:bg-zinc-900 border border-transparent rounded-lg hover:border-sky-500/30 transition-all text-xs text-slate-800 dark:text-zinc-300">
                <input type="radio" name="industry" value="Gebäudereinigung" class="text-sky-600 focus:ring-sky-500" />
                <span>Gebäudereinigung</span>
              </label>
            </div>

            <!-- Custom / Individual Field -->
            <div class="pt-2">
              <label for="industry-custom" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Eigene / Andere Branche</label>
              <input type="text" id="industry-custom" placeholder="Ihre Branche eintragen..." class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded-xl p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
            </div>
          </div>

          <!-- STEP 2: Farbauswahl -->
          <div class="wizard-step space-y-6 hidden" data-step="2">
            <div>
              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 2: Farben</h3>
              <p class="text-slate-500 dark:text-zinc-400 text-xs">Wählen Sie empfohlene branchenspezifische oder klassische Farbkombinationen.</p>
            </div>

            <div class="space-y-6">
              <!-- Industry Recommendation Section -->
              <div class="p-4 rounded-2xl border border-sky-500/20 bg-sky-500/5" id="industry-rec-box">
                <span class="text-[9px] font-mono text-sky-600 dark:text-sky-400 uppercase tracking-widest font-bold">Empfehlung für Ihre Branche</span>
                <div class="flex items-center justify-between mt-2">
                  <span class="text-xs font-bold text-slate-800 dark:text-zinc-200" id="rec-label">Branchen-Kombination</span>
                  <button type="button" class="px-4 py-2 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 font-bold text-[10px] uppercase tracking-wider rounded-lg transition-all" id="apply-rec-btn">
                    Anwenden
                  </button>
                </div>
              </div>

              <!-- Standard Harmonious Combos -->
              <div>
                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Standard-Farbkombinationen</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#3b82f6" data-secondary="#ffffff">
                    <span class="w-3 h-3 rounded-full bg-[#3b82f6]"></span>
                    <span>Klassisch Blau</span>
                  </button>
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#10b981" data-secondary="#e2e8f0">
                    <span class="w-3 h-3 rounded-full bg-[#10b981]"></span>
                    <span>Smaragd & Silber</span>
                  </button>
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#6366f1" data-secondary="#c7d2fe">
                    <span class="w-3 h-3 rounded-full bg-[#6366f1]"></span>
                    <span>Purple & Lilac</span>
                  </button>
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#4b5563" data-secondary="#f59e0b">
                    <span class="w-3 h-3 rounded-full bg-[#4b5563]"></span>
                    <span>Coal & Amber</span>
                  </button>
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#f43f5e" data-secondary="#fbbf24">
                    <span class="w-3 h-3 rounded-full bg-[#f43f5e]"></span>
                    <span>Muted Rose</span>
                  </button>
                  <button type="button" class="color-preset-btn p-2 rounded-xl border border-slate-200 dark:border-white/10 text-[10px] font-bold bg-slate-100 dark:bg-zinc-900 text-slate-800 dark:text-zinc-100 flex items-center gap-1.5 hover:border-sky-500" data-primary="#06b6d4" data-secondary="#ffffff">
                    <span class="w-3 h-3 rounded-full bg-[#06b6d4]"></span>
                    <span>Ocean Cyan</span>
                  </button>
                </div>
              </div>

              <!-- Manual Color Pickers -->
              <div class="grid grid-cols-2 gap-4 pt-2 border-t border-slate-200/50 dark:border-white/5">
                <div class="space-y-2">
                  <label for="primary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Primärfarbe (Fokus)</label>
                  <div class="flex items-center gap-3">
                    <input type="color" id="primary-color" value="#38bdf8" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
                    <span class="text-xs font-mono font-bold" id="primary-color-hex">#38BDF8</span>
                  </div>
                </div>
                <div class="space-y-2">
                  <label for="secondary-color" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase">Sekundärfarbe</label>
                  <div class="flex items-center gap-3">
                    <input type="color" id="secondary-color" value="#ffffff" class="w-10 h-10 rounded cursor-pointer border border-slate-200 dark:border-white/10 bg-transparent" />
                    <span class="text-xs font-mono font-bold" id="secondary-color-hex">#FFFFFF</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- STEP 3: Layout & Design-Richtung -->
          <div class="wizard-step space-y-6 hidden" data-step="3">
            <div>
              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-1 uppercase tracking-tight">Schritt 3: Layout & Stil</h3>
              <p class="text-slate-500 dark:text-zinc-400 text-xs">Konfigurieren Sie Layout-Struktur und Designrichtung der Website.</p>
            </div>

            <div class="space-y-4">
              <!-- Layout type -->
              <div>
                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Layout-Art</label>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="layout" value="bento" checked class="sr-only" />
                    <span>Bento-Grid</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="layout" value="split" class="sr-only" />
                    <span>Split-Screen</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="layout" value="boxed" class="sr-only" />
                    <span>Boxed Layout</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="layout" value="asymmetric" class="sr-only" />
                    <span>Asymmetrisch</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="layout" value="single" class="sr-only" />
                    <span>Single-Page</span>
                  </label>
                </div>
              </div>

              <!-- Design Style -->
              <div>
                <label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-2">Design-Richtung</label>
                <div class="grid grid-cols-2 gap-2" id="design-style-group">
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="corporate-dark" checked class="sr-only" />
                    <span>Corporate Dark (Edler Darkmode)</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="nordic-light" class="sr-only" />
                    <span>Nordic Light (Skandinavisch Hell)</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="industrial-gold" class="sr-only" />
                    <span>Industrial Gold (Mittel-Anthrazit)</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="brutalism" class="sr-only" />
                    <span>Brutalismus (Kräftige Ränder)</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="neomorphism" class="sr-only" />
                    <span>Neomorphismus (Weiche Tiefen)</span>
                  </label>
                  <label class="cursor-pointer border border-slate-200 dark:border-white/5 bg-slate-100/50 dark:bg-white/5 p-3 rounded-lg flex items-center justify-between hover:border-sky-500 transition-all text-xs">
                    <input type="radio" name="style" value="saas-minimalism" class="sr-only" />
                    <span>SaaS-Minimalismus (Clean)</span>
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- STEP 4: Kontaktdaten -->
          <div class="wizard-step space-y-6 hidden" data-step="4">
            <div>
              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 4: Kontaktdaten</h3>
              <p class="text-slate-500 dark:text-zinc-400 text-xs">Teilen Sie uns mit, wie wir Ihr Konzept zustellen können.</p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="wizard-name" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Name *</label>
                <input type="text" id="wizard-name" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Name" />
                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte füllen Sie das Feld aus.</p>
              </div>
              <div>
                <label for="wizard-company" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">Firma / Organisation</label>
                <input type="text" id="wizard-company" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="Ihr Unternehmen" />
              </div>
              <div class="sm:col-span-2">
                <label for="wizard-email" class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1">E-Mail-Adresse *</label>
                <input type="email" id="wizard-email" required class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" placeholder="ihre.adresse@firma.de" />
                <p class="wizard-error text-[10px] text-red-500 mt-1 hidden">Bitte eine gültige E-Mail-Adresse angeben.</p>
              </div>

              <!-- GDPR Consent -->
              <div class="sm:col-span-2 space-y-3 pt-2">
                <p class="text-[10px] text-emerald-600 dark:text-emerald-400 font-medium">
                  🛡️ Kein Spam. Kein Telefonterror. Nur Ihr fertiges Design-Konzept innerhalb von 24 Stunden.
                </p>
                <label class="flex items-start gap-2 cursor-pointer">
                  <input type="checkbox" id="wizard-privacy" required class="mt-0.5 w-4 h-4 rounded text-sky-600 focus:ring-sky-500" />
                  <span class="text-[10px] text-slate-500 dark:text-zinc-400 leading-normal">
                    Ich stimme der verschlüsselten Datenverarbeitung laut <a href="/privacy" class="text-sky-600 dark:text-sky-400 hover:underline">Datenschutzerklärung</a> zu. *
                  </span>
                </label>
                <p class="wizard-error text-[10px] text-red-500 hidden">Zustimmung erforderlich.</p>
              </div>
            </div>
          </div>

          <!-- STEP 5: Zusammenfassung & Absenden -->
          <div class="wizard-step space-y-6 hidden" data-step="5">
            <div>
              <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2 uppercase tracking-tight">Schritt 5: Zusammenfassung</h3>
              <p class="text-slate-500 dark:text-zinc-400 text-xs">Prüfen Sie Ihre Angaben, bevor wir Ihr Projekt generieren.</p>
            </div>

            <div class="bg-slate-100/50 dark:bg-white/5 border border-slate-200 dark:border-white/5 rounded-xl p-4 space-y-3">
              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
                <span class="text-slate-500">Branche:</span>
                <span class="font-bold text-slate-900 dark:text-white" id="summary-industry">-</span>
              </div>
              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
                <span class="text-slate-500">Farben (Primär / Sekundär):</span>
                <span class="font-bold text-slate-900 dark:text-white" id="summary-colors">-</span>
              </div>
              <div class="flex justify-between text-xs border-b border-slate-200 dark:border-white/5 pb-2">
                <span class="text-slate-500">Layout & Stil:</span>
                <span class="font-bold text-slate-900 dark:text-white text-right" id="summary-layout">-</span>
              </div>
              <div class="flex justify-between text-xs pt-1">
                <span class="text-slate-500">Name / E-Mail:</span>
                <span class="font-bold text-slate-900 dark:text-white" id="summary-contact">-</span>
              </div>
            </div>

            <p class="text-[10px] text-slate-500 dark:text-zinc-500 leading-normal text-center">
              Nach Absenden wird Ihr Anforderungsprofil als strukturierte JSON-Payload an unsere Pipeline übermittelt.
            </p>
          </div>

          <!-- Navigation Buttons -->
          <div class="flex justify-between gap-4 pt-8 border-t border-slate-200/50 dark:border-white/5 mt-8">
            <button type="button" id="prev-step" class="px-5 py-2.5 bg-slate-200 dark:bg-slate-900 text-slate-800 dark:text-white text-xs font-bold uppercase tracking-wider rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-all">
              Zurück
            </button>
            <button type="button" id="next-step" class="px-5 py-2.5 bg-sky-600 hover:bg-sky-700 dark:bg-sky-500 dark:hover:bg-white text-white dark:text-zinc-950 text-xs font-bold uppercase tracking-wider rounded-lg transition-all">
              Weiter
            </button>
          </div>

        </form>

        <!-- Right Column: Live Bento Preview (5 cols) -->
        <div class="lg:col-span-5 flex items-center justify-center">
          <div id="wizard-live-preview" class="w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl bg-[#0B0F19]">
            <!-- Inner Aurora Glow Element -->
            <div id="preview-glow" class="absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4 bg-sky-500/20"></div>
            <div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:8px_8px]"></div>

            <!-- Top Row (Mini Header Mock) -->
            <div class="relative z-10 flex justify-between items-center pb-2 border-b border-white/10" id="preview-header">
              <div class="flex gap-1.5 items-center">
                <span class="w-2 h-2 rounded-full bg-[#38BDF8]" id="preview-logo-dot"></span>
                <span class="text-[9px] font-bold tracking-tight uppercase" id="preview-logo-text">Website Mockup</span>
              </div>
              <span class="text-[7px] font-mono opacity-50" id="preview-online-status">PREVIEW</span>
            </div>

            <!-- Middle Content (Dynamic layouts render here) -->
            <div class="relative z-10 flex-grow py-4 flex flex-col justify-center min-h-[140px]" id="preview-content-area">
              
              <!-- Bento Layout Preview Container -->
              <div id="layout-bento-mock" class="grid grid-cols-3 gap-2 w-full">
                <div class="col-span-2 p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="bento-box-1">
                  <span class="text-[10px] font-bold leading-tight" id="preview-h1">Meisterbetrieb</span>
                  <span class="text-[6px] opacity-60 mt-1" id="preview-desc">Professioneller Service vor Ort.</span>
                </div>
                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-center items-center" id="bento-box-2">
                  <span class="text-[8px] font-mono uppercase tracking-widest text-[#38BDF8]" id="preview-tier-badge">AKTIV</span>
                  <span class="text-[5px] opacity-40 uppercase">STATUS</span>
                </div>
              </div>

              <!-- Split Layout Preview Container (Hidden by default) -->
              <div id="layout-split-mock" class="grid grid-cols-2 gap-2 w-full hidden">
                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex flex-col justify-between" id="split-box-1">
                  <span class="text-[10px] font-bold leading-tight" id="preview-h1-split">Regionaler Partner</span>
                  <span class="text-[6px] opacity-60 mt-1" id="preview-desc-split">Echtes Handwerk, beste Qualität.</span>
                </div>
                <div class="p-3 rounded-lg border border-white/10 bg-white/5 flex items-center justify-center">
                  <span class="w-6 h-6 rounded-full border border-white/20 flex items-center justify-center text-[7px]" id="split-icon">✓</span>
                </div>
              </div>

              <!-- Boxed Layout Preview Container (Hidden) -->
              <div id="layout-boxed-mock" class="w-full border border-white/10 p-3 rounded-lg bg-white/5 flex flex-col gap-1 hidden" id="boxed-container">
                <div class="h-2 w-12 bg-white/10 rounded" id="boxed-accent-bar"></div>
                <span class="text-[9px] font-bold" id="preview-h1-boxed">Kompakter Titel</span>
                <p class="text-[6px] opacity-60" id="preview-desc-boxed">Zentrierter Text mit reduziertem Rahmen.</p>
              </div>

            </div>

            <!-- Bottom Row (Footer Mock) -->
            <div class="relative z-10 flex justify-between items-center pt-2 border-t border-white/10" id="preview-footer">
              <span class="text-[6px] opacity-40 font-mono" id="preview-bottom-left">ZERO THIRD-PARTY</span>
              <span class="text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded bg-[#38BDF8] text-zinc-950" id="preview-cta-badge">KONZEPT</span>
            </div>
          </div>
        </div>

      </div>

    </div>
  </div>
</section>

<style>
  /* Custom checked states for radio buttons */
  label:has(input[type="radio"]:checked) {
    @apply border-sky-500 ring-2 ring-sky-500/20 bg-sky-500/5;
  }
</style>

<script>
  (function() {
    let currentStep = 1;
    const totalSteps = 5;

    const steps = document.querySelectorAll('.wizard-step');
    const dots = document.querySelectorAll('#step-dots span');
    const counter = document.getElementById('step-counter');
    const prevBtn = document.getElementById('prev-step') as HTMLButtonElement;
    const nextBtn = document.getElementById('next-step') as HTMLButtonElement;
    const form = document.getElementById('wizard-form') as HTMLFormElement;

    // Search and filter logic
    const industrySearch = document.getElementById('industry-search') as HTMLInputElement;
    const industryList = document.getElementById('industry-list');
    const industryLabels = industryList?.querySelectorAll('label');
    const industryCustomInput = document.getElementById('industry-custom') as HTMLInputElement;

    // Recommendation logic elements
    const recLabel = document.getElementById('rec-label');
    const applyRecBtn = document.getElementById('apply-rec-btn');

    // Color Inputs
    const primaryColorInput = document.getElementById('primary-color') as HTMLInputElement;
    const secondaryColorInput = document.getElementById('secondary-color') as HTMLInputElement;
    const primaryHex = document.getElementById('primary-color-hex');
    const secondaryHex = document.getElementById('secondary-color-hex');
    const colorPresetBtns = document.querySelectorAll('.color-preset-btn');

    // Layout & Style Inputs
    const layoutInputs = form.querySelectorAll('input[name="layout"]');
    const styleInputs = form.querySelectorAll('input[name="style"]');

    // Live Preview elements
    const previewBox = document.getElementById('wizard-live-preview');
    const previewGlow = document.getElementById('preview-glow');
    const logoDot = document.getElementById('preview-logo-dot');
    const logoText = document.getElementById('preview-logo-text');
    const badge = document.getElementById('preview-cta-badge');
    const tierBadge = document.getElementById('preview-tier-badge');
    const header = document.getElementById('preview-header');
    const footer = document.getElementById('preview-footer');
    const onlineStatus = document.getElementById('preview-online-status');
    const b1 = document.getElementById('bento-box-1');
    const b2 = document.getElementById('bento-box-2');
    const s1 = document.getElementById('split-box-1');
    const s2 = document.getElementById('split-icon');
    const bx = document.getElementById('boxed-container');
    const bxAccent = document.getElementById('boxed-accent-bar');

    // Preview Text Nodes for Industry updates
    const previewH1 = document.getElementById('preview-h1');
    const previewDesc = document.getElementById('preview-desc');
    const previewH1Split = document.getElementById('preview-h1-split');
    const previewDescSplit = document.getElementById('preview-desc-split');
    const previewH1Boxed = document.getElementById('preview-h1-boxed');
    const previewDescBoxed = document.getElementById('preview-desc-boxed');

    // Preview Layout mock blocks
    const bentoMock = document.getElementById('layout-bento-mock');
    const splitMock = document.getElementById('layout-split-mock');
    const boxedMock = document.getElementById('layout-boxed-mock');

    // Step 4 inputs
    const nameInput = document.getElementById('wizard-name') as HTMLInputElement;
    const emailInput = document.getElementById('wizard-email') as HTMLInputElement;
    const privacyInput = document.getElementById('wizard-privacy') as HTMLInputElement;

    // Summary fields
    const summaryIndustry = document.getElementById('summary-industry');
    const summaryColors = document.getElementById('summary-colors');
    const summaryLayout = document.getElementById('summary-layout');
    const summaryContact = document.getElementById('summary-contact');

    // Color combination mapping per industry
    const industryColorConfigs: Record<string, { primary: string, secondary: string, name: string, label: string }> = {
      'Schreinerei & Innenausbau': { primary: '#9C7A4E', secondary: '#DE6B32', name: 'Möbel-Schreinerei', label: 'Eichenholz & Kupfer' },
      'Dachdeckerei': { primary: '#f59e0b', secondary: '#475569', name: 'Dachdecker Meister', label: 'Ziegel-Amber & Schiefer' },
      'Solartechnik & PV': { primary: '#ff5500', secondary: '#3f3f46', name: 'Solar PV Tech', label: 'Sonnen-Orange & Carbon' },
      'Rechtsanwälte & Notare': { primary: '#047857', secondary: '#f1f5f9', name: 'Kanzlei Expertise', label: 'Tief-Smaragd & Silber' },
      'Bio-Hofladen': { primary: '#15803d', secondary: '#c2410c', name: 'Bio-Hofladen Natur', label: 'Bio-Grün & Terracotta' },
      'Sanitär, Heizung & Klima': { primary: '#1d4ed8', secondary: '#06b6d4', name: 'SHK Meisterbetrieb', label: 'Heizungs-Blau & Aqua-Cyan' },
      'KFZ-Meisterbetrieb': { primary: '#dc2626', secondary: '#94a3b8', name: 'KFZ Schnellservice', label: 'Racing-Rot & Asphalt' },
      'Steuerberater': { primary: '#d97706', secondary: '#1e3a8a', name: 'Steuerberater Premium', label: 'Kanzlei-Gold & Royal-Blau' },
      'Garten- & Landschaftsbau': { primary: '#16a34a', secondary: '#e7e5e4', name: 'Gartengestaltung', label: 'Blatt-Grün & Sandstein' },
      'Physiotherapie Praxis': { primary: '#0d9488', secondary: '#ccfbf1', name: 'Physio Praxis', label: 'Gesundheits-Teal & Mint' },
      'Maler- & Lackiererbetrieb': { primary: '#4f46e5', secondary: '#db2777', name: 'Malerbetrieb', label: 'Kreativ-Indigo & Magenta' },
      'Zahnarztpraxis': { primary: '#38bdf8', secondary: '#f8fafc', name: 'Zahnarztpraxis', label: 'Eis-Blau & Praxis-Weiß' },
      'Architekturbüro': { primary: '#71717a', secondary: '#09090b', name: 'Architektur Struktur', label: 'Konzept-Grau & Matt-Schwarz' },
      'Software-Entwicklung': { primary: '#8b5cf6', secondary: '#00ffff', name: 'Byte Code', label: 'Electric-Purple & Cyber-Cyan' },
      'Bäckerei & Konditorei': { primary: '#d97706', secondary: '#451a03', name: 'Bäckerei Ofenfrisch', label: 'Weizen-Gold & Schokolade' },
      'Friseursalon': { primary: '#db2777', secondary: '#f3f4f6', name: 'Haardesign Salon', label: 'Rose Gold & Seiden-Weiß' },
      'Kosmetikstudio': { primary: '#a855f7', secondary: '#fafaf9', name: 'Kosmetik Oase', label: 'Lavendel & Perlglanz' },
      'Restaurant & Gastronomie': { primary: '#991b1b', secondary: '#d97706', name: 'Gourmet Restaurant', label: 'Wein-Rot & Ocker-Gold' },
      'Elektro-Technik': { primary: '#eab308', secondary: '#1f2937', name: 'Elektrotechnik', label: 'Strom-Gelb & Anthrazit' },
      'Gebäudereinigung': { primary: '#06b6d4', secondary: '#ffffff', name: 'Gebäudereinigung', label: 'Glanz-Cyan & Reinweiß' }
    };

    // Filter list by search query
    if (industrySearch) {
      industrySearch.addEventListener('input', () => {
        const query = industrySearch.value.toLowerCase().trim();
        industryLabels?.forEach(label => {
          const text = label.textContent?.toLowerCase() || '';
          if (text.includes(query)) {
            label.style.display = 'flex';
          } else {
            label.style.display = 'none';
          }
        });
      });
    }

    // Color preset button actions
    colorPresetBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const primary = btn.getAttribute('data-primary') || '#38bdf8';
        const secondary = btn.getAttribute('data-secondary') || '#ffffff';
        applyColorCombo(primary, secondary);
      });
    });

    function applyColorCombo(primary: string, secondary: string) {
      if (primaryColorInput && secondaryColorInput) {
        primaryColorInput.value = primary;
        secondaryColorInput.value = secondary;
        primaryColorInput.dispatchEvent(new Event('input'));
        secondaryColorInput.dispatchEvent(new Event('input'));
      }
    }

    if (primaryColorInput && secondaryColorInput) {
      primaryColorInput.addEventListener('input', () => {
        if (primaryHex) primaryHex.textContent = primaryColorInput.value.toUpperCase();
        updatePreviewStyles();
      });
      secondaryColorInput.addEventListener('input', () => {
        if (secondaryHex) secondaryHex.textContent = secondaryColorInput.value.toUpperCase();
        updatePreviewStyles();
      });
    }

    // Reacting to layout changes
    layoutInputs.forEach(input => input.addEventListener('change', updatePreviewLayout));
    styleInputs.forEach(input => input.addEventListener('change', updatePreviewStyles));

    // Dynamic Preview Layout
    function updatePreviewLayout() {
      const activeLayout = (form.querySelector('input[name="layout"]:checked') as HTMLInputElement)?.value || 'bento';
      
      bentoMock?.classList.add('hidden');
      splitMock?.classList.add('hidden');
      boxedMock?.classList.add('hidden');

      if (activeLayout === 'bento') bentoMock?.classList.remove('hidden');
      if (activeLayout === 'split') splitMock?.classList.remove('hidden');
      if (activeLayout === 'boxed' || activeLayout === 'asymmetric' || activeLayout === 'single') boxedMock?.classList.remove('hidden');
    }

    // Update colors based on chosen industry
    function updateIndustryColorRecommendation() {
      const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
      const industryName = selectedEl?.value || 'Schreinerei & Innenausbau';
      const config = industryColorConfigs[industryName];

      if (config && recLabel && applyRecBtn) {
        recLabel.textContent = `${config.label} (für ${industryName})`;
        
        // Remove old click listeners by cloning
        const newBtn = applyRecBtn.cloneNode(true) as HTMLButtonElement;
        applyRecBtn.parentNode?.replaceChild(newBtn, applyRecBtn);
        
        newBtn.addEventListener('click', () => {
          applyColorCombo(config.primary, config.secondary);
        });
      }

      // Update text mockup content in preview
      const previewText = config ? config.name : 'Premium Web';
      const previewDescText = `Maßgeschneidertes Design für ${industryName}.`;
      
      if (previewH1) previewH1.textContent = previewText;
      if (previewDesc) previewDesc.textContent = previewDescText;
      if (previewH1Split) previewH1Split.textContent = previewText;
      if (previewDescSplit) previewDescSplit.textContent = previewDescText;
      if (previewH1Boxed) previewH1Boxed.textContent = previewText;
      if (previewDescBoxed) previewDescBoxed.textContent = previewDescText;
    }

    // Event listener for industry change
    form.querySelectorAll('input[name="industry"]').forEach(input => {
      input.addEventListener('change', () => {
        updateIndustryColorRecommendation();
        // Automatically pre-apply the recommended combo for the industry
        const selectedEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
        const config = industryColorConfigs[selectedEl?.value];
        if (config) {
          applyColorCombo(config.primary, config.secondary);
        }
      });
    });

    // Custom industry input also resets preset if user types
    if (industryCustomInput) {
      industryCustomInput.addEventListener('input', () => {
        if (industryCustomInput.value.trim() && recLabel) {
          recLabel.textContent = 'Individuelles Thema';
        }
      });
    }

    // Dynamic Preview Styles (Colors & Themes)
    function updatePreviewStyles() {
      if (!previewBox || !previewGlow || !logoDot || !logoText || !badge || !tierBadge) return;

      const primary = primaryColorInput.value;
      const secondary = secondaryColorInput.value;
      const activeStyle = (form.querySelector('input[name="style"]:checked') as HTMLInputElement)?.value || 'corporate-dark';

      // Reset style classes
      previewBox.className = "w-full h-full min-h-[300px] rounded-3xl border p-6 flex flex-col justify-between overflow-hidden relative transition-all duration-500 shadow-xl";
      logoText.className = "text-[9px] font-bold tracking-tight uppercase";
      badge.className = "text-[7px] font-bold uppercase tracking-wider px-2 py-0.5 rounded";

      // Color rules for elements
      logoDot.style.backgroundColor = primary;
      if (bxAccent) bxAccent.style.backgroundColor = primary;
      if (s2) {
        s2.style.borderColor = primary;
        s2.style.color = primary;
      }
      tierBadge.style.color = primary;

      // Style specific themes
      if (activeStyle === 'corporate-dark') {
        previewBox.classList.add('bg-[#0B0F19]', 'text-white', 'border-white/10');
        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
        previewGlow.style.backgroundColor = `${primary}22`;
        logoText.classList.add('text-white');
        badge.style.backgroundColor = primary;
        badge.style.color = '#0B0F19';
      } 
      else if (activeStyle === 'nordic-light') {
        previewBox.classList.add('bg-[#F3F4F6]', 'text-slate-900', 'border-slate-200');
        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
        previewGlow.style.backgroundColor = `${primary}11`;
        logoText.classList.add('text-slate-800');
        badge.style.backgroundColor = primary;
        badge.style.color = '#ffffff';
      }
      else if (activeStyle === 'industrial-gold') {
        previewBox.classList.add('bg-[#1C1D21]', 'text-zinc-100', 'border-zinc-700/50');
        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
        previewGlow.style.backgroundColor = `${primary}18`;
        logoText.classList.add('text-zinc-100');
        badge.style.backgroundColor = primary;
        badge.style.color = '#1C1D21';
      }
      else if (activeStyle === 'brutalism') {
        previewBox.classList.add('bg-white', 'text-black', 'border-4', 'border-black');
        previewGlow.className = "hidden";
        logoText.classList.add('text-black');
        badge.style.backgroundColor = '#000000';
        badge.style.color = '#ffffff';
        badge.classList.add('border', 'border-black');
      }
      else if (activeStyle === 'neomorphism') {
        previewBox.classList.add('bg-[#E0E0E0]', 'text-slate-800', 'border-transparent', 'shadow-[inset_10px_10px_20px_#bebebe,inset_-10px_-10px_20px_#ffffff]');
        previewGlow.className = "hidden";
        logoText.classList.add('text-slate-700');
        badge.style.backgroundColor = primary;
        badge.style.color = '#white';
      }
      else { // saas-minimalism
        previewBox.classList.add('bg-white', 'text-slate-900', 'border-slate-100', 'shadow-sm');
        previewGlow.className = `absolute w-24 h-24 rounded-full blur-2xl pointer-events-none transition-all duration-500 top-1/4 left-1/4`;
        previewGlow.style.backgroundColor = `${primary}08`;
        logoText.classList.add('text-slate-800');
        badge.style.backgroundColor = primary;
        badge.style.color = '#ffffff';
      }
    }

    // Trigger initial styles
    updateIndustryColorRecommendation();
    updatePreviewLayout();
    updatePreviewStyles();

    // Steps state machine
    function updateStep() {
      steps.forEach((step, idx) => {
        if (idx + 1 === currentStep) {
          step.classList.remove('hidden');
        } else {
          step.classList.add('hidden');
        }
      });

      dots.forEach((dot, idx) => {
        if (idx + 1 <= currentStep) {
          dot.classList.add('bg-sky-500');
          dot.classList.remove('bg-slate-300', 'dark:bg-zinc-700');
        } else {
          dot.classList.remove('bg-sky-500');
          dot.classList.add('bg-slate-300', 'dark:bg-zinc-700');
        }
      });

      if (counter) {
        counter.textContent = `SCHRITT ${currentStep} / ${totalSteps}`;
      }

      if (prevBtn && nextBtn) {
        prevBtn.disabled = currentStep === 1;
        if (currentStep === totalSteps) {
          nextBtn.textContent = 'Projekt generieren';
        } else {
          nextBtn.textContent = 'Weiter';
        }
      }

      if (currentStep === 5) {
        buildSummary();
      }
    }

    function validateStep(): boolean {
      if (currentStep === 4) {
        let valid = true;
        
        if (!nameInput.value.trim()) {
          nameInput.nextElementSibling?.classList.remove('hidden');
          valid = false;
        } else {
          nameInput.nextElementSibling?.classList.add('hidden');
        }

        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(emailInput.value)) {
          emailInput.nextElementSibling?.classList.remove('hidden');
          valid = false;
        } else {
          emailInput.nextElementSibling?.classList.add('hidden');
        }

        const privacyError = document.getElementById('wizard-privacy')?.closest('label')?.nextElementSibling;
        if (!privacyInput.checked) {
          privacyError?.classList.remove('hidden');
          valid = false;
        } else {
          privacyError?.classList.add('hidden');
        }

        return valid;
      }
      return true;
    }

    function buildSummary() {
      const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
      const customIndustry = industryCustomInput.value.trim();
      const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : '-');

      const primary = primaryColorInput.value;
      const secondary = secondaryColorInput.value;

      const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
      const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;

      if (summaryIndustry) summaryIndustry.textContent = industryName;
      if (summaryColors) summaryColors.textContent = `Primär: ${primary.toUpperCase()}, Sekundär: ${secondary.toUpperCase()}`;
      if (summaryLayout) summaryLayout.textContent = `${selectedLayoutEl?.value.toUpperCase()} / ${selectedStyleEl?.value.toUpperCase()}`;
      if (summaryContact) summaryContact.textContent = `${nameInput.value} (${emailInput.value})`;
    }

    function handleNext() {
      if (!validateStep()) return;

      if (currentStep < totalSteps) {
        currentStep++;
        updateStep();
      } else {
        submitWizard();
      }
    }

    function submitWizard() {
      const selectedIndustryEl = form.querySelector('input[name="industry"]:checked') as HTMLInputElement;
      const customIndustry = industryCustomInput.value.trim();
      const industryName = customIndustry ? customIndustry : (selectedIndustryEl ? selectedIndustryEl.value : 'unbekannt');

      const selectedLayoutEl = form.querySelector('input[name="layout"]:checked') as HTMLInputElement;
      const selectedStyleEl = form.querySelector('input[name="style"]:checked') as HTMLInputElement;
      const companyVal = (document.getElementById('wizard-company') as HTMLInputElement).value;

      const payload = {
        client_metadata: {
          agency_id: "nd-it-solutions",
          timestamp: new Date().toISOString(),
          domain: companyVal ? `${companyVal.toLowerCase().replace(/[^a-z0-9]/g, '')}.de` : "unbekannt.de"
        },
        branding: {
          industry: industryName,
          company_name: companyVal || "Mein Unternehmen",
          branding_style: selectedStyleEl?.value || "corporate-dark",
          primary_color: primaryColorInput.value,
          secondary_color: secondaryColorInput.value
        },
        structure: {
          layout_type: selectedLayoutEl?.value || "bento",
          sections: ["hero", "portfolio", "contact"]
        },
        contact: {
          name: nameInput.value,
          email: emailInput.value,
          company: companyVal
        }
      };

      console.log('Wizard Payload Output:', JSON.stringify(payload, null, 2));
      alert('Erfolgreich generiert! JSON Payload wurde in die Konsole geloggt.');
    }

    if (nextBtn && prevBtn) {
      nextBtn.addEventListener('click', handleNext);
      prevBtn.addEventListener('click', () => {
        if (currentStep > 1) {
          currentStep--;
          updateStep();
        }
      });
    }
  })();
</script>