/**
 * Website Wizard - Enhanced Version met Geweldige Header & Footer
 * 
 * ENHANCED WITH UNIFIED CONCEPT INTEGRATION
 */

// Include unified concept system
require_once __DIR__ . "/api/unified-website-concept-api.php";
require_once __DIR__ . "/customer_portal/api/sitechat-lib/concept-mapper.php";

// Performance headers
header('Cache-Control: public, max-age=3600');
header('Expires: ' . gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));

// Page metadata
$pageTitle = 'Website Wizard - IT Live';
$pageDescription = 'Maak professionele websites in enkele stappen met AI-powered tools';
$keywords = 'website wizard, website builder, AI tools, professionele websites';
?>    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!-- Preconnect voor performance -->    <!-- Fonts met async loading -->    <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"></noscript>
    
    <!-- Icons -->    <!-- Fast CSS -->
    <link rel="stylesheet" href="/styles/global-fast.css">
    
    <!-- Critical CSS inline -->
    <style>
        .header{background:#1a1a1a;color:white;padding:1rem 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px rgba(0,0,0,0.1);}
        .nav-container{max-width:1200px;margin:0 auto;padding:0 1rem;display:flex;justify-content:space-between;align-items:center;}
        .logo{font-size:1.5rem;font-weight:700;color:#667eea;text-decoration:none;}
        .nav-menu{display:flex;gap:2rem;align-items:center;}
        .nav-link{color:#e5e7eb;text-decoration:none;transition:color 0.3s ease;}
        .nav-link:hover{color:#667eea;}
        .nav-link.active{color:#667eea;}
        .nav-dropdown{position:relative;}
        .dropdown-menu{position:absolute;top:100%;left:0;background:#2d3748;border-radius:8px;padding:0.5rem 0;min-width:200px;display:none;}
        .dropdown-menu.show{display:block;}
        .dropdown-item{display:block;color:#e5e7eb;padding:0.5rem 1rem;text-decoration:none;transition:background 0.3s ease;}
        .dropdown-item:hover{background:#4b5563;}
        .search-box{display:flex;align-items:center;background:#2d3748;border-radius:8px;padding:0.5rem 1rem;}
        .search-box input{background:transparent;border:none;color:white;outline:none;width:200px;}
        .search-box input::placeholder{color:#9ca3af;}
        .btn-primary{background:#667eea;color:white;padding:0.5rem 1rem;border-radius:8px;text-decoration:none;transition:background 0.3s ease;}
        .btn-primary:hover{background:#5a67d8;}
        .hero-gradient{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:4rem 2rem;border-radius:20px;margin:2rem 0;text-align:center;}
        .hero h1{font-size:3rem;font-weight:800;margin-bottom:1rem;}
        .hero p{font-size:1.25rem;margin-bottom:2rem;opacity:0.95;}
        .wizard-container{max-width:800px;margin:0 auto;}
        .step-indicator{display:flex;justify-content:space-between;margin-bottom:3rem;position:relative;}
        .step-indicator::before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:#374151;z-index:0;}
        .step{position:relative;z-index:1;background:#1a1a1a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-weight:600;}
        .step.active{background:#667eea;color:white;}
        .step.completed{background:#10b981;color:white;}
        .step-content{background:#2d3748;border-radius:12px;padding:2rem;margin-bottom:2rem;}
        .form-group{margin-bottom:1.5rem;}
        .form-group label{display:block;margin-bottom:0.5rem;color:#e5e7eb;font-weight:500;}
        .form-group input,.form-group select,.form-group textarea{width:100%;padding:0.75rem;border:1px solid #4b5563;border-radius:8px;background:#1f2937;color:white;outline:none;}
        .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#667eea;}
        .btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.3s ease;text-decoration:none;}
        .btn-primary{background:#667eea;color:white;}
        .btn-primary:hover{background:#5a67d8;transform:translateY(-1px);}
        .btn-secondary{background:#6b7280;color:white;}
        .btn-secondary:hover{background:#4b5563;}
        .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin:3rem 0;}
        .feature-card{background:#2d3748;border-radius:12px;padding:2rem;text-align:center;transition:transform 0.3s ease;}
        .feature-card:hover{transform:translateY(-5px);}
        .feature-icon{font-size:3rem;color:#667eea;margin-bottom:1rem;}
        .footer{background:#1a1a1a;color:#e5e7eb;padding:3rem 0;}
        .footer-container{max-width:1200px;margin:0 auto;padding:0 1rem;}
        .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem;}
        .footer-section h3{color:#667eea;margin-bottom:1rem;font-size:1.1rem;font-weight:600;}
        .footer-links{list-style:none;padding:0;}
        .footer-links li{margin-bottom:0.5rem;}
        .footer-links a{color:#9ca3af;text-decoration:none;transition:color 0.3s ease;}
        .footer-links a:hover{color:#667eea;}
        .social-links{display:flex;gap:1rem;margin-top:1rem;}
        .social-links a{color:#9ca3af;font-size:1.2rem;transition:color 0.3s ease;}
        .social-links a:hover{color:#667eea;}
        .footer-bottom{border-top:1px solid #374151;padding:2rem 0;text-align:center;}
        .footer-bottom p{margin-bottom:0.5rem;color:#9ca3af;}
        .footer-bottom-links{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;}
        .footer-bottom-links a{color:#9ca3af;text-decoration:none;transition:color 0.3s ease;}
        .footer-bottom-links a:hover{color:#667eea;}
        .newsletter{background:#374151;border-radius:8px;padding:1.5rem;margin-bottom:2rem;}
        .newsletter h3{color:#667eea;margin-bottom:1rem;}
        .newsletter-form{display:flex;gap:0.5rem;}
        .newsletter-form input{flex:1;padding:0.75rem;border:none;border-radius:4px;background:#4b5563;color:white;}
        .newsletter-form button{padding:0.75rem 1.5rem;border:none;border-radius:4px;background:#667eea;color:white;cursor:pointer;transition:background 0.3s ease;}
        .newsletter-form button:hover{background:#5a67d8;}
        .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:2rem;}
        .stat{text-align:center;}
        .stat-number{font-size:2rem;font-weight:700;color:#667eea;}
        .stat-label{color:#9ca3af;font-size:0.875rem;}
        @media (max-width:768px){.nav-menu{display:none;}.hero h1{font-size:2rem;}.step-indicator{flex-direction:column;gap:1rem;}}
    </style>
    <!-- Enhanced Header -->
    <header class="header">
        <div class="nav-container">
            <div class="logo">
                <a href="/" style="color:#667eea;text-decoration:none;">
                    <strong>IT</strong> Live
                </a>
            </div>
            
            <nav class="nav-menu">
                <a href="/" class="nav-link">🏠 Home</a>
                
                <div class="nav-dropdown">
                    <a href="#" class="nav-link">🛠️ Diensten</a>
                    <div class="dropdown-menu">
                        <a href="/diensten" class="dropdown-item">Alle Diensten</a>
                        <a href="/web-development" class="dropdown-item">Web Development</a>
                        <a href="/saas-platforms" class="dropdown-item">SaaS Platforms</a>
                        <a href="/social-seo" class="dropdown-item">Social & SEO</a>
                        <a href="/agency" class="dropdown-item">Agency</a>
                        <a href="/data-analytics" class="dropdown-item">Data Analytics</a>
                        <a href="/security" class="dropdown-item">Security</a>
                        <a href="/performance" class="dropdown-item">Performance</a>
                    </div>
                </div>
                
                <div class="nav-dropdown">
                    <a href="#" class="nav-link">🛠️ Alle Tools</a>
                    <div class="dropdown-menu">
                        <a href="/ai-tools" class="dropdown-item">🤖 AI Tools</a>
                        <a href="/lead-generator" class="dropdown-item">🚀 Lead Generator</a>
                        <a href="/website-builder" class="dropdown-item">🌐 Website Builder</a>
                        <a href="/ai-visuals" class="dropdown-item">🎨 AI Visuals</a>
                        <a href="/logo-maker" class="dropdown-item">🖼️ Logo Maker</a>
                        <a href="/business-plan" class="dropdown-item">📊 Business Plan</a>
                        <a href="/website-scan" class="dropdown-item">🔍 Website Scan</a>
                    </div>
                </div>
                
                <div class="nav-dropdown">
                    <a href="#" class="nav-link">💬 Support</a>
                    <div class="dropdown-menu">
                        <a href="/contact" class="dropdown-item">📞 Contact</a>
                        <a href="/help-center" class="dropdown-item">Help Center</a>
                        <a href="/documentation" class="dropdown-item">Documentatie</a>
                        <a href="/status" class="dropdown-item">Status Pagina</a>
                        <a href="/community" class="dropdown-item">Community</a>
                    </div>
                </div>
                
                <div class="search-box">
                    <input type="text" placeholder="🔍 Zoeken..." id="searchInput">
                </div>
                
                <a href="/contact" class="btn-primary">Start Nu</a>
                
                <div style="display:flex;gap:1rem;align-items:center;">
                    <a href="https://github.com" target="_blank" class="nav-link" title="GitHub">
                        <i class="fab fa-github"></i>
                    </a>
                    <a href="mailto:info@itlive.nl" class="nav-link" title="Email">
                        <i class="fas fa-envelope"></i>
                    </a>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-gradient">
        <div class="container">
            <h1>🚀 Website Wizard</h1>
            <p>Maak professionele websites in enkele stappen met AI-powered tools</p>
            <div class="stats">
                <div class="stat">
                    <div class="stat-number">500+</div>
                    <div class="stat-label">Templates</div>
                </div>
                <div class="stat">
                    <div class="stat-number">AI</div>
                    <div class="stat-label">Powered</div>
                </div>
                <div class="stat">
                    <div class="stat-number">5 min</div>
                    <div class="stat-label">Setup</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <div class="container">
        <div class="wizard-container">
            <!-- Step Indicator -->
            <div class="step-indicator">
                <div class="step active">1</div>
                <div class="step">2</div>
                <div class="step">3</div>
                <div class="step">4</div>
            </div>

            <!-- Step 1: Template Selection -->
            <div class="step-content">
                <h2>🎨 Kies je Template</h2>
                <p>Selecteer een professionele template als basis voor je website</p>
                
                <div class="form-group">
                    <label>Template Categorie</label>
                    <select id="templateCategory">
                        <option value="">Selecteer categorie...</option>
                        <option value="business">Business</option>
                        <option value="creative">Creative</option>
                        <option value="tech">Technology</option>
                        <option value="ecommerce">E-commerce</option>
                        <option value="portfolio">Portfolio</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Template Stijl</label>
                    <select id="templateStyle">
                        <option value="">Selecteer stijl...</option>
                        <option value="modern">Modern</option>
                        <option value="classic">Classic</option>
                        <option value="minimal">Minimal</option>
                        <option value="bold">Bold</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>Website Type</label>
                    <select id="websiteType">
                        <option value="">Selecteer type...</option>
                        <option value="business">Business Website</option>
                        <option value="portfolio">Portfolio</option>
                        <option value="blog">Blog</option>
                        <option value="ecommerce">E-commerce</option>
                        <option value="landing">Landing Page</option>
                    </select>
                </div>
                
                <div style="display:flex;gap:1rem;justify-content:space-between;">
                    <button class="btn btn-secondary" onclick="previousStep()">
                        <i class="fas fa-arrow-left"></i> Vorige
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Volgende <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- Step 2: Basic Information -->
            <div class="step-content" style="display:none;">
                <h2>📝 Basis Informatie</h2>
                <p>Vul de basisinformatie voor je website</p>
                
                <div class="form-group">
                    <label>Bedrijfsnaam</label>
                    <input type="text" id="companyName" placeholder="Jouw Bedrijfsnaam">
                </div>
                
                <div class="form-group">
                    <label>Slogan</label>
                    <input type="text" id="slogan" placeholder="Jouw slogan of tagline">
                </div>
                
                <div class="form-group">
                    <label>Beschrijving</label>
                    <textarea id="description" rows="4" placeholder="Beschrijf je bedrijf..."></textarea>
                </div>
                
                <div class="form-group">
                    <label>Industrie</label>
                    <select id="industry">
                        <option value="">Selecteer industrie...</option>
                        <option value="technology">Technology</option>
                        <option value="healthcare">Healthcare</option>
                        <option value="finance">Finance</option>
                        <option value="education">Education</option>
                        <option value="retail">Retail</option>
                        <option value="hospitality">Hospitality</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                
                <div style="display:flex;gap:1rem;justify-content:space-between;">
                    <button class="btn btn-secondary" onclick="previousStep()">
                        <i class="fas fa-arrow-left"></i> Vorige
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Volgende <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- Step 3: Features & Pages -->
            <div class="step-content" style="display:none;">
                <h2>⚡ Features & Pagina's</h2>
                <p>Kies de features en pagina's voor je website</p>
                
                <div class="form-group">
                    <label>Essentiële Pagina's</label>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;">
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox" checked> Home
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox" checked> Over Ons
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox" checked> Diensten
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox" checked> Contact
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Portfolio
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Blog
                        </label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Advanced Features</label>
                    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;">
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Contact Form
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Newsletter
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Social Media Integration
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> SEO Optimization
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Analytics
                        </label>
                        <label style="display:flex;align-items:center;gap:0.5rem;">
                            <input type="checkbox"> Live Chat
                        </label>
                    </div>
                </div>
                
                <div style="display:flex;gap:1rem;justify-content:space-between;">
                    <button class="btn btn-secondary" onclick="previousStep()">
                        <i class="fas fa-arrow-left"></i> Vorige
                    </button>
                    <button class="btn btn-primary" onclick="nextStep()">
                        Volgende <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>

            <!-- Step 4: Finalize -->
            <div class="step-content" style="display:none;">
                <h2>🎉 Finalizeer je Website</h2>
                <p>Controleer je keuzes en genereer je website</p>
                
                <div style="background:#374151;border-radius:8px;padding:1.5rem;margin-bottom:2rem;">
                    <h3>📋 Samenvatting</h3>
                    <div id="summary">
                        <!-- Summary will be populated here -->
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Website Naam</label>
                    <input type="text" id="websiteName" placeholder="mijn-website">
                </div>
                
                <div class="form-group">
                    <label>Domein (optioneel)</label>
                    <input type="text" id="domain" placeholder="www.jouwwebsite.nl">
                </div>
                
                <div style="display:flex;gap:1rem;justify-content:space-between;">
                    <button class="btn btn-secondary" onclick="previousStep()">
                        <i class="fas fa-arrow-left"></i> Vorige
                    </button>
                    <button class="btn btn-primary" onclick="generateWebsite()">
                        <i class="fas fa-rocket"></i> Genereer Website
                    </button>
                </div>
            </div>
        </div>

        <!-- Features Section -->
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">🎨</div>
                <h3>500+ Templates</h3>
                <p>Professionele templates voor elke industrie</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">🤖</div>
                <h3>AI Powered</h3>
                <p>AI-assistentie voor content en design</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">⚡</div>
                <h3>Lightning Fast</h3>
                <p>Supersnelle websites met optimale performance</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">📱</div>
                <h3>Mobile First</h3>
                <p>Perfect responsive op alle devices</p>
            </div>
        </div>
    </div>

    <!-- Enhanced Footer -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-grid">
                <!-- Tools Section -->
                <div class="footer-section">
                    <h3>🛠️ Tools</h3>
                    <ul class="footer-links">
                        <li><a href="/ai-tools">🤖 AI Tools</a></li>
                        <li><a href="/lead-generator">🚀 Lead Generator</a></li>
                        <li><a href="/website-builder">🌐 Website Builder</a></li>
                        <li><a href="/ai-visuals">🎨 AI Visuals</a></li>
                        <li><a href="/logo-maker">🖼️ Logo Maker</a></li>
                        <li><a href="/business-plan">📊 Business Plan</a></li>
                        <li><a href="/website-scan">🔍 Website Scan</a></li>
                    </ul>
                </div>
                
                <!-- Services Section -->
                <div class="footer-section">
                    <h3>🚀 Diensten</h3>
                    <ul class="footer-links">
                        <li><a href="/web-development">Web Development</a></li>
                        <li><a href="/saas-platforms">SaaS Platforms</a></li>
                        <li><a href="/social-seo">Social & SEO</a></li>
                        <li><a href="/agency">Agency</a></li>
                        <li><a href="/data-analytics">Data Analytics</a></li>
                        <li><a href="/security">Security</a></li>
                        <li><a href="/performance">Performance</a></li>
                    </ul>
                </div>
                
                <!-- Support Section -->
                <div class="footer-section">
                    <h3>💬 Support</h3>
                    <ul class="footer-links">
                        <li><a href="/contact">📞 Contact</a></li>
                        <li><a href="/help-center">Help Center</a></li>
                        <li><a href="/documentation">Documentatie</a></li>
                        <li><a href="/status">Status Pagina</a></li>
                        <li><a href="/community">Community</a></li>
                    </ul>
                    <div class="social-links">
                        <a href="https://github.com" target="_blank" title="GitHub">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="https://linkedin.com" target="_blank" title="LinkedIn">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="https://twitter.com" target="_blank" title="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://facebook.com" target="_blank" title="Facebook">
                            <i class="fab fa-facebook"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Newsletter Section -->
                <div class="footer-section">
                    <div class="newsletter">
                        <h3>📧 Blijf op de hoogte</h3>
                        <p style="color:#9ca3af;margin-bottom:1rem;">Ontvang de laatste updates, AI features en exclusieve aanbiedingen.</p>
                        <form class="newsletter-form" onsubmit="subscribeNewsletter(event)">
                            <input type="email" placeholder="jouw@email.nl" required>
                            <button type="submit">Abonneren</button>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- Stats Section -->
            <div class="stats">
                <div class="stat">
                    <div class="stat-number">500+</div>
                    <div class="stat-label">Klanten</div>
                </div>
                <div class="stat">
                    <div class="stat-number">1000+</div>
                    <div class="stat-label">Projecten</div>
                </div>
                <div class="stat">
                    <div class="stat-number">24/7</div>
                    <div class="stat-label">Support</div>
                </div>
            </div>
            
            <!-- Features Section -->
            <div class="footer-grid">
                <div class="footer-section">
                    <h3>🚀 Features</h3>
                    <ul class="footer-links">
                        <li>Lightning Fast AI-geoptimaliseerde tools</li>
                        <li>Enterprise Security Bank-niveau beveiliging</li>
                        <li>24/7 Support Altijd beschikbaar</li>
                        <li>Data Analytics Diepgaande inzichten</li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>📞 Contact</h3>
                    <ul class="footer-links">
                        <li>📞 085 060 4017</li>
                        <li>📧 info@itlive.nl</li>
                        <li>📱 WhatsApp</li>
                        <li>📍 Amsterdam, Nederland</li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>🚀 Klaar om te Groeien?</h3>
                    <p style="color:#9ca3af;margin-bottom:1rem;">Start vandaag nog met onze tools en transformeer jouw digitale aanwezigheid.</p>
                    <a href="/contact" class="btn-primary" style="display:inline-block;text-align:center;padding:0.75rem 1.5rem;background:#667eea;color:white;text-decoration:none;border-radius:8px;transition:background 0.3s ease;">Start gesprek met ons</a>
                </div>
            </div>
        </div>
        
        <!-- Bottom Footer -->
        <div class="footer-bottom">
            <p>© 2026 IT Live. Alle rechten voorbehouden.</p>
            <div class="footer-bottom-links">
                <a href="/privacy">Privacy Policy</a>
                <a href="/terms">Terms of Service</a>
                <a href="/cookies">Cookie Policy</a>
                <a href="/sitemap">Sitemap</a>
                <a href="/disclaimer">Disclaimer</a>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        let currentStep = 1;
        const totalSteps = 4;
        
        // Dropdown functionality
        document.querySelectorAll('.nav-dropdown').forEach(dropdown => {
            const link = dropdown.querySelector('.nav-link');
            const menu = dropdown.querySelector('.dropdown-menu');
            
            link.addEventListener('click', (e) => {
                e.preventDefault();
                menu.classList.toggle('show');
            });
            
            document.addEventListener('click', (e) => {
                if (!dropdown.contains(e.target)) {
                    menu.classList.remove('show');
                }
            });
        });
        
        // Search functionality
        document.getElementById('searchInput')?.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const query = e.target.value.trim();
                if (query) {
                    window.location.href = `/search?q=${encodeURIComponent(query)}`;
                }
            }
        });
        
        // Wizard functionality
        function updateStepIndicator() {
            document.querySelectorAll('.step').forEach((step, index) => {
                step.classList.remove('active', 'completed');
                if (index + 1 < currentStep) {
                    step.classList.add('completed');
                } else if (index + 1 === currentStep) {
                    step.classList.add('active');
                }
            });
            
            document.querySelectorAll('.step-content').forEach((content, index) => {
                content.style.display = index + 1 === currentStep ? 'block' : 'none';
            });
        }
        
        function nextStep() {
            if (currentStep < totalSteps) {
                currentStep++;
                updateStepIndicator();
                updateSummary();
            }
        }
        
        function previousStep() {
            if (currentStep > 1) {
                currentStep--;
                updateStepIndicator();
                updateSummary();
            }
        }
        
        function updateSummary() {
            const summary = document.getElementById('summary');
            if (!summary) return;
            
            const companyName = document.getElementById('companyName')?.value || 'Niet ingevuld';
            const templateCategory = document.getElementById('templateCategory')?.value || 'Niet geselecteerd';
            const websiteType = document.getElementById('websiteType')?.value || 'Niet geselecteerd';
            
            summary.innerHTML = `
                <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;">
                    <div>
                        <strong>Bedrijfsnaam:</strong><br>
                        ${companyName}
                    </div>
                    <div>
                        <strong>Template:</strong><br>
                        ${templateCategory}
                    </div>
                    <div>
                        <strong>Type:</strong><br>
                        ${websiteType}
                    </div>
                    <div>
                        <strong>Stap:</strong><br>
                        ${currentStep} / ${totalSteps}
                    </div>
                </div>
            `;
        }
        
        function generateWebsite() {
            const websiteName = document.getElementById('websiteName')?.value;
            if (!websiteName) {
                alert('Voer een website naam in');
                return;
            }
            
            alert(`Website "${websiteName}" wordt gegenereerd!`);
            // In real implementation, this would generate the actual website
        }
        
        function subscribeNewsletter(event) {
            event.preventDefault();
            const email = event.target.querySelector('input[type="email"]').value;
            
            const button = event.target.querySelector('button');
            const originalText = button.textContent;
            button.textContent = '✓ Geabonneerd!';
            button.style.background = '#10b981';
            
            setTimeout(() => {
                button.textContent = originalText;
                button.style.background = '#667eea';
                event.target.reset();
            }, 2000);
            
            console.log('Newsletter subscription:', email);
        }
        
        // Initialize
        updateStepIndicator();
        updateSummary();
    </script>
</body>
</html>