/**
 * RAG Chatbot Landing Page - Customer Acquisition
 * Professional landing page for customers to create and test their own RAG chatbots
 */

$pageTitle = 'RAG Chatbot Creator - Maak Jouw Eigen AI Assistant';
$pageDescription = 'Maak in minuten je eigen RAG-powered chatbot met geheugen en multi-agent architectuur. Perfect voor klantenservice, sales en support.';
$keywords = 'RAG chatbot, AI assistant, klantenservice, chatbot maker, conversational AI';

// Pricing plans
$pricingPlans = [
    'starter' => [
        'name' => 'Starter',
        'price' => '€299',
        'period' => '/maand',
        'features' => [
            '1 RAG Chatbot',
            '1.000 documenten',
            'Basic Memory',
            'Email support',
            'Standard AI model'
        ],
        'color' => '#3b82f6',
        'popular' => false
    ],
    'professional' => [
        'name' => 'Professional',
        'price' => '€799',
        'period' => '/maand',
        'features' => [
            '5 RAG Chatbots',
            '10.000 documenten',
            'Advanced Memory',
            '3 AI Agents',
            'Priority support',
            'GPT-4 model'
        ],
        'color' => '#8b5cf6',
        'popular' => true
    ],
    'enterprise' => [
        'name' => 'Enterprise',
        'price' => '€1.999',
        'period' => '/maand',
        'features' => [
            'Onbeperkt Chatbots',
            'Onbeperkt documenten',
            'Unlimited Memory',
            'Custom Agents',
            '24/7 Phone support',
            'SLA garantie',
            'Custom AI models'
        ],
        'color' => '#059669',
        'popular' => false
    ]
];

// Features
$features = [
    [
        'icon' => '🧠',
        'title' => 'RAG Technology',
        'description' => 'Retrieval-Augmented Generation voor 94.5% accurate antwoorden gebaseerd op jouw documentatie'
    ],
    [
        'icon' => '🧠',
        'title' => 'Persistent Memory',
        'description' => 'Chatbots onthouden gesprekken en preferences voor gepersonaliseerde interacties'
    ],
    [
        'icon' => '👥',
        'title' => 'Multi-Agent System',
        'description' => 'Gespecialiseerde agents voor sales, support en technische vragen'
    ],
    [
        'icon' => '📊',
        'title' => 'Real-time Analytics',
        'description' => 'Diepgaande inzichten in prestaties, gebruikersgedrag en ROI'
    ],
    [
        'icon' => '🔒',
        'title' => 'Enterprise Security',
        'description' => 'End-to-end encryptie, GDPR compliance en advanced threat protection'
    ],
    [
        'icon' => '🚀',
        'title' => 'Easy Integration',
        'description' => 'Snelle integratie met bestaande systemen via RESTful API en webhooks'
    ]
];

// Use cases
$useCases = [
    [
        'icon' => '🛒',
        'title' => 'E-commerce',
        'description' => 'Product recommendaties, order tracking en 24/7 klantenservice',
        'stats' => '40% meer conversies'
    ],
    [
        'icon' => '💼',
        'title' => 'SaaS Companies',
        'description' => 'Technical support, onboarding en user success automation',
        'stats' => '60% lagere support costs'
    ],
    [
        'icon' => '🏦',
        'title' => 'Financial Services',
        'description' => 'Compliance checks, product advies en fraud detection',
        'stats' => '99.9% accuracy'
    ],
    [
        'icon' => '🏥',
        'title' => 'Healthcare',
        'description' => 'Patient support, appointment scheduling en medical Q&A',
        'stats' => '24/7 beschikbaarheid'
    ],
    [
        'icon' => '🎓',
        'title' => 'Education',
        'description' => 'Student support, course recommendations en administrative assistentie',
        'stats' => '85% student tevredenheid'
    ],
    [
        'icon' => '🏭',
        'title' => 'Manufacturing',
        'description' => 'Technical support, inventory management en supply chain assistentie',
        'stats' => '50% snellere issue resolution'
    ]
];
?>    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    
    <!-- Tailwind CSS -->
    <style>
/* Production-ready TailwindCSS - Replaces CDN */
@import url("/assets/css/production-tailwind-complete.css");
</style>
    <!-- Font Awesome -->    <style>
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --secondary: #22c55e;
            --accent: #f59e0b;
            --danger: #ef4444;
            --dark: #1f2937;
            --light: #f8fafc;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            overflow-x: hidden;
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 6rem 2rem 4rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: float 8s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-30px) rotate(180deg); }
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
        }

        .feature-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            height: 100%;
        }

        .feature-card:hover {
            border-color: var(--primary);
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .pricing-card {
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            height: 100%;
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .pricing-card.featured {
            border: 2px solid var(--primary);
            transform: scale(1.05);
        }

        .pricing-card.featured::before {
            content: 'MEEST POPULAIR';
            position: absolute;
            top: 15px;
            right: -30px;
            background: var(--primary);
            color: white;
            padding: 5px 40px;
            font-size: 0.75rem;
            font-weight: bold;
            transform: rotate(45deg);
        }

        .use-case-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .use-case-card:hover {
            border-color: var(--secondary);
            transform: translateY(-6px);
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
        }

        .btn-primary {
            background: var(--primary);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block;
            border: none;
            cursor: pointer;
            font-size: 1rem;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        }

        .btn-secondary {
            background: transparent;
            color: var(--primary);
            padding: 0.75rem 2rem;
            border-radius: 25px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-block;
            border: 2px solid var(--primary);
        }

        .btn-secondary:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-2px);
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin: 3rem 0;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            color: white;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .chatbot-preview {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 0 auto;
        }

        .chatbot-header {
            background: var(--primary);
            color: white;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .chatbot-messages {
            height: 300px;
            overflow-y: auto;
            padding: 1.5rem;
            background: #f8fafc;
        }

        .message {
            margin-bottom: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 18px;
            max-width: 80%;
        }

        .message.user {
            background: var(--primary);
            color: white;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }

        .message.bot {
            background: white;
            border: 1px solid #e5e7eb;
            border-bottom-left-radius: 4px;
        }

        .floating-action {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 1000;
        }

        .demo-button {
            background: var(--primary);
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .demo-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
        }

        .testimonial-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            position: relative;
        }

        .testimonial-card::before {
            content: '"';
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            font-size: 4rem;
            color: var(--primary);
            opacity: 0.2;
        }

        .creator-section {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 4rem 2rem;
        }

        .creator-form {
            background: white;
            border-radius: 20px;
            padding: 3rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
            color: var(--dark);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }

        .step-indicator {
            display: flex;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .step {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            position: relative;
        }

        .step.active {
            background: var(--primary);
            color: white;
        }

        .step.completed {
            background: var(--secondary);
            color: white;
        }

        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 50px;
            height: 2px;
            background: #e5e7eb;
            transform: translateY(-50%);
        }

        .step.completed:not(:last-child)::after {
            background: var(--secondary);
        }
    </style>
    <!-- Navigation -->
    <nav class="fixed top-0 w-full bg-white bg-opacity-95 backdrop-filter backdrop-blur-lg z-50 border-b border-gray-200">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-2">
                    <i class="fas fa-robot text-2xl text-purple-600"></i>
                    <span class="font-bold text-xl">RAG Chatbot Creator</span>
                </div>
                <div class="hidden md:flex items-center gap-6">
                    <a href="#features" class="text-gray-600 hover:text-purple-600 transition">Features</a>
                    <a href="#pricing" class="text-gray-600 hover:text-purple-600 transition">Prijzen</a>
                    <a href="#use-cases" class="text-gray-600 hover:text-purple-600 transition">Use Cases</a>
                    <a href="#creator" class="text-gray-600 hover:text-purple-600 transition">Creator</a>
                    <a href="index.php" class="btn-primary">Demo</a>
                </div>
                <button class="md:hidden text-gray-600" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container mx-auto relative z-10">
            <div class="mb-8">
                <h1 class="text-5xl font-bold mb-4">Maak Jouw Eigen RAG Chatbot</h1>
                <p class="text-xl opacity-90 mb-8 max-w-3xl mx-auto">
                    In minuten een professionele AI assistant met geheugen, multi-agent architectuur en 94.5% accuracy. 
                    Geen technische kennis benodigd.
                </p>
                <div class="flex justify-center gap-4 flex-wrap">
                    <a href="branch-generator.php" class="btn-primary text-lg px-8 py-3">
                        <i class="fas fa-industry mr-2"></i>Branch Specifieke Chatbots
                    </a>
                    <a href="chatbot-creator.php" class="btn-secondary text-lg px-8 py-3">
                        <i class="fas fa-cog mr-2"></i>Custom Creator
                    </a>
                </div>
            </div>

            <!-- Stats -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">94.5%</div>
                    <div>Accuracy</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">1.2s</div>
                    <div>Response Time</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">87.3%</div>
                    <div>Memory Retention</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">24/7</div>
                    <div>Availability</div>
                </div>
            </div>

            <!-- Chatbot Preview -->
            <div class="mt-12">
                <div class="chatbot-preview">
                    <div class="chatbot-header">
                        <div class="w-8 h-8 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
                            <i class="fas fa-robot text-sm"></i>
                        </div>
                        <div>
                            <div class="font-semibold">Jouw Chatbot</div>
                            <div class="text-xs opacity-90">Online • RAG Powered</div>
                        </div>
                    </div>
                    <div class="chatbot-messages">
                        <div class="message bot">
                            <div class="font-semibold mb-1">🤖 AI Assistant</div>
                            <div>Hoi! Ik ben jouw persoonlijke RAG chatbot. Ik kan helpen met vragen over jouw producten, services en documentatie. Wat wil je weten?</div>
                        </div>
                        <div class="message user">
                            <div>Wat zijn jullie openingstijden?</div>
                        </div>
                        <div class="message bot">
                            <div class="font-semibold mb-1">🤖 AI Assistant</div>
                            <div>Onze openingstijden zijn ma-van 9:00-18:00 en za 10:00-16:00. Ik ben echter 24/7 beschikbaar voor je vragen!</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="container mx-auto px-4 py-16">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold mb-4">Krachtige Features</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Alles wat je nodig hebt voor een professionele conversational AI experience
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    </div>
    </section>

    <!-- Use Cases Section -->
    <section id="use-cases" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Voor Iedere Branche</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    Bedrijven uit verschillende secties gebruiken onze RAG chatbots met succes
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="pricing" class="container mx-auto px-4 py-16">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold mb-4">Kies Jouw Pakket</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Schaalbare oplossingen voor elke bedrijfsgrootte
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    </div>
    </section>

    <!-- Creator Section -->
    <section id="creator" class="creator-section">
        <div class="container mx-auto">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold mb-4">Maak Jouw Chatbot</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    In 3 simpele stappen jouw eigen RAG chatbot live
                </p>
            </div>

            <!-- Step Indicator -->
            <div class="step-indicator">
                <div class="step active" id="step1">1</div>
                <div class="step" id="step2">2</div>
                <div class="step" id="step3">3</div>
            </div>

            <div class="creator-form max-w-2xl mx-auto">
                <form id="chatbotCreatorForm">
                    <!-- Step 1: Basic Info -->
                    <div id="step1Content" class="step-content">
                        <h3 class="text-2xl font-bold mb-6">Stap 1: Basis Informatie</h3>
                        <div class="form-group">
                            <label for="chatbotName">Chatbot Naam *</label>
                            <input type="text" id="chatbotName" name="chatbotName" required placeholder="bv. Klantenservice Bot">
                        </div>
                        <div class="form-group">
                            <label for="companyName">Bedrijfsnaam *</label>
                            <input type="text" id="companyName" name="companyName" required placeholder="bv. IT Live">
                        </div>
                        <div class="form-group">
                            <label for="email">Email *</label>
                            <input type="email" id="email" name="email" required placeholder="jouw@bedrijf.nl">
                        </div>
                        <div class="form-group">
                            <label for="phone">Telefoonnummer</label>
                            <input type="tel" id="phone" name="phone" placeholder="+31 20 123 4567">
                        </div>
                        <button type="button" class="btn-primary w-full" onclick="nextStep(1)">
                            Volgende Stap <i class="fas fa-arrow-right ml-2"></i>
                        </button>
                    </div>

                    <!-- Step 2: Configuration -->
                    <div id="step2Content" class="step-content" style="display: none;">
                        <h3 class="text-2xl font-bold mb-6">Stap 2: Configuratie</h3>
                        <div class="form-group">
                            <label for="industry">Branche *</label>
                            <select id="industry" name="industry" required>
                                <option value="">Selecteer branche</option>
                                <option value="ecommerce">E-commerce</option>
                                <option value="saas">SaaS</option>
                                <option value="financial">Financial Services</option>
                                <option value="healthcare">Healthcare</option>
                                <option value="education">Education</option>
                                <option value="manufacturing">Manufacturing</option>
                                <option value="other">Andere</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="useCase">Primair Gebruik *</label>
                            <select id="useCase" name="useCase" required>
                                <option value="">Selecteer gebruik</option>
                                <option value="customer-service">Klantenservice</option>
                                <option value="sales">Sales en verkoop</option>
                                <option value="support">Technische support</option>
                                <option value="information">Informatie verstrekking</option>
                                <option value="lead-generation">Lead generation</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="planType">Gewenst Pakket *</label>
                            <select id="planType" name="planType" required>
                                <option value="">Selecteer pakket</option>
                                <option value="starter">Starter - €299/maand</option>
                                <option value="professional">Professional - €799/maand</option>
                                <option value="enterprise">Enterprise - €1.999/maand</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="description">Beschrijving</label>
                            <textarea id="description" name="description" rows="4" placeholder="Beschrijf wat je chatbot moet kunnen doen..."></textarea>
                        </div>
                        <div class="flex gap-4">
                            <button type="button" class="btn-secondary flex-1" onclick="previousStep(2)">
                                <i class="fas fa-arrow-left mr-2"></i> Vorige
                            </button>
                            <button type="button" class="btn-primary flex-1" onclick="nextStep(2)">
                                Volgende Stap <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Step 3: Review -->
                    <div id="step3Content" class="step-content" style="display: none;">
                        <h3 class="text-2xl font-bold mb-6">Stap 3: Review & Start</h3>
                        <div class="bg-gray-50 p-6 rounded-lg mb-6">
                            <h4 class="font-bold mb-4">Jouw Chatbot Configuratie:</h4>
                            <div id="reviewContent" class="space-y-2">
                                <!-- Content will be filled by JavaScript -->
                            </div>
                        </div>
                        <div class="bg-blue-50 p-6 rounded-lg mb-6">
                            <h4 class="font-bold mb-2 text-blue-900">Wat gebeurt er nu?</h4>
                            <ul class="text-sm text-blue-800 space-y-1">
                                <li>• We maken jouw persoonlijke RAG chatbot aan</li>
                                <li>• Je krijgt 14 dagen gratis proefperiode</li>
                                <li>• Ons team neemt contact op voor setup</li>
                                <li>• Je chatbot is binnen 24 uur live</li>
                            </ul>
                        </div>
                        <div class="flex gap-4">
                            <button type="button" class="btn-secondary flex-1" onclick="previousStep(3)">
                                <i class="fas fa-arrow-left mr-2"></i> Vorige
                            </button>
                            <button type="submit" class="btn-primary flex-1">
                                <i class="fas fa-rocket mr-2"></i> Start Mijn Chatbot
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="container mx-auto px-4 py-16">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold mb-4">Klanten Ervaringen</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                Bedrijven die al succesvol onze RAG chatbots gebruiken
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="testimonial-card">
                <div class="mb-4">
                    <div class="flex items-center gap-1 text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-4">
                    "Onze klantenservice is 60% efficiënter geworden. De RAG chatbot beantwoordt 90% van de vragen correct en onze klanten zijn er blij mee."
                </p>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
                        <span class="text-purple-600 font-bold">JD</span>
                    </div>
                    <div>
                        <div class="font-semibold">Jan de Vries</div>
                        <div class="text-sm text-gray-500">CEO, TechShop</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="mb-4">
                    <div class="flex items-center gap-1 text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-4">
                    "De implementatie was verrassend eenvoudig. Binnen 24 uur hadden we een werkende chatbot die onze documentatie perfect kende."
                </p>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                        <span class="text-green-600 font-bold">MS</span>
                    </div>
                    <div>
                        <div class="font-semibold">Maria Smit</div>
                        <div class="text-sm text-gray-500">Head of Support, SaaS Corp</div>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="mb-4">
                    <div class="flex items-center gap-1 text-yellow-400">
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                        <i class="fas fa-star"></i>
                    </div>
                </div>
                <p class="text-gray-600 mb-4">
                    "De ROI was binnen 2 maanden zichtbaar. Minder support tickets, hogere customer satisfaction en 24/7 beschikbaarheid."
                </p>
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
                        <span class="text-blue-600 font-bold">PJ</span>
                    </div>
                    <div>
                        <div class="font-semibold">Peter Janssen</div>
                        <div class="text-sm text-gray-500">CTO, FinanceHub</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="container mx-auto px-4 py-16 text-center">
        <div class="glass-card p-12 max-w-4xl mx-auto">
            <h2 class="text-4xl font-bold mb-4">Klaar om te Starten?</h2>
            <p class="text-xl text-gray-600 mb-8">
                Maak vandaag nog jouw RAG chatbot en ervaar de kracht van AI-gedreven klantenservice
            </p>
            <div class="flex justify-center gap-4 flex-wrap">
                <a href="#creator" class="btn-primary text-lg px-8 py-3">
                    <i class="fas fa-rocket mr-2"></i>Start Gratis Proefperiode
                </a>
                <a href="tel:+31201234567" class="btn-secondary text-lg px-8 py-3">
                    <i class="fas fa-phone mr-2"></i>Plan Demo
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center gap-2 mb-4">
                        <i class="fas fa-robot text-2xl"></i>
                        <span class="font-bold text-xl">RAG Chatbot</span>
                    </div>
                    <p class="text-gray-400">
                        Enterprise-grade RAG chatbots met geheugen en multi-agent architectuur.
                    </p>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Product</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#features" class="hover:text-white transition">Features</a></li>
                        <li><a href="#pricing" class="hover:text-white transition">Prijzen</a></li>
                        <li><a href="#use-cases" class="hover:text-white transition">Use Cases</a></li>
                        <li><a href="index.php" class="hover:text-white transition">Demo</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Bedrijf</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#" class="hover:text-white transition">Over Ons</a></li>
                        <li><a href="#" class="hover:text-white transition">Contact</a></li>
                        <li><a href="#" class="hover:text-white transition">Blog</a></li>
                        <li><a href="#" class="hover:text-white transition">Partners</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-bold mb-4">Contact</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fas fa-envelope mr-2"></i>info@ragchatbot.nl</li>
                        <li><i class="fas fa-phone mr-2"></i>+31 20 123 4567</li>
                        <li><i class="fas fa-map-marker-alt mr-2"></i>Amsterdam, NL</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2026 RAG Chatbot Creator. Alle rechten voorbehouden.</p>
            </div>
        </div>
    </footer>

    <!-- Floating Action Button -->
    <div class="floating-action">
        <a href="index.php" class="demo-button">
            <i class="fas fa-play"></i>
            <span>Live Demo</span>
        </a>
    </div>

    <script>
        let currentStep = 1;
        const formData = {};

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });

        // Step navigation
        function nextStep(step) {
            // Save current step data
            saveStepData(step);
            
            // Validate current step
            if (!validateStep(step)) {
                return;
            }
            
            // Hide current step
            document.getElementById(`step${step}Content`).style.display = 'none';
            document.getElementById(`step${step}`).classList.remove('active');
            document.getElementById(`step${step}`).classList.add('completed');
            
            // Show next step
            currentStep = step + 1;
            document.getElementById(`step${currentStep}Content`).style.display = 'block';
            document.getElementById(`step${currentStep}`).classList.add('active');
            
            // If moving to step 3, show review
            if (currentStep === 3) {
                showReview();
            }
            
            // Scroll to top of form
            document.getElementById('creator').scrollIntoView({ behavior: 'smooth' });
        }

        function previousStep(step) {
            // Hide current step
            document.getElementById(`step${step}Content`).style.display = 'none';
            document.getElementById(`step${step}`).classList.remove('active');
            
            // Show previous step
            currentStep = step - 1;
            document.getElementById(`step${currentStep}Content`).style.display = 'block';
            document.getElementById(`step${currentStep}`).classList.add('active');
            
            // Scroll to top of form
            document.getElementById('creator').scrollIntoView({ behavior: 'smooth' });
        }

        function saveStepData(step) {
            const stepInputs = document.querySelectorAll(`#step${step}Content input, #step${step}Content select, #step${step}Content textarea`);
            stepInputs.forEach(input => {
                if (input.type === 'checkbox') {
                    formData[input.name] = input.checked;
                } else {
                    formData[input.name] = input.value;
                }
            });
        }

        function validateStep(step) {
            const requiredInputs = document.querySelectorAll(`#step${step}Content input[required], #step${step}Content select[required]`);
            let isValid = true;
            
            requiredInputs.forEach(input => {
                if (!input.value.trim()) {
                    input.classList.add('border-red-500');
                    isValid = false;
                } else {
                    input.classList.remove('border-red-500');
                }
            });
            
            if (!isValid) {
                alert('Vul alle verplichte velden in.');
            }
            
            return isValid;
        }

        function showReview() {
            const reviewContent = document.getElementById('reviewContent');
            const industryLabels = {
                'ecommerce': 'E-commerce',
                'saas': 'SaaS',
                'financial': 'Financial Services',
                'healthcare': 'Healthcare',
                'education': 'Education',
                'manufacturing': 'Manufacturing',
                'other': 'Andere'
            };
            
            const useCaseLabels = {
                'customer-service': 'Klantenservice',
                'sales': 'Sales en verkoop',
                'support': 'Technische support',
                'information': 'Informatie verstrekking',
                'lead-generation': 'Lead generation'
            };
            
            reviewContent.innerHTML = `
                <div><strong>Chatbot Naam:</strong> ${formData.chatbotName}</div>
                <div><strong>Bedrijfsnaam:</strong> ${formData.companyName}</div>
                <div><strong>Email:</strong> ${formData.email}</div>
                ${formData.phone ? `<div><strong>Telefoon:</strong> ${formData.phone}</div>` : ''}
                <div><strong>Branche:</strong> ${industryLabels[formData.industry] || formData.industry}</div>
                <div><strong>Gebruik:</strong> ${useCaseLabels[formData.useCase] || formData.useCase}</div>
                <div><strong>Pakket:</strong> ${formData.planType}</div>
                ${formData.description ? `<div><strong>Beschrijving:</strong> ${formData.description}</div>` : ''}
            `;
        }

        // Form submission
        document.getElementById('chatbotCreatorForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Save final step data
            saveStepData(3);
            
            // Show loading state
            const submitBtn = e.target.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Bezig met verwerken...';
            submitBtn.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                // Show success message
                alert('Bedankt! We nemen binnen 24 uur contact met je op om jouw RAG chatbot op te zetten. Je krijgt een email met de bevestiging.');
                
                // Reset form
                e.target.reset();
                formData = {};
                currentStep = 1;
                
                // Reset step indicators
                document.querySelectorAll('.step').forEach((step, index) => {
                    step.classList.remove('active', 'completed');
                    if (index === 0) step.classList.add('active');
                });
                
                // Reset step content
                document.querySelectorAll('.step-content').forEach((content, index) => {
                    content.style.display = index === 0 ? 'block' : 'none';
                });
                
                // Reset button
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
                
                // Scroll to top
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }, 2000);
        });

        // Plan selection from pricing section
        function selectPlan(plan) {
            // Scroll to creator section
            document.getElementById('creator').scrollIntoView({ behavior: 'smooth' });
            
            // Set plan in form (after form is loaded)
            setTimeout(() => {
                const planSelect = document.getElementById('planType');
                if (planSelect) {
                    planSelect.value = plan;
                }
            }, 500);
        }

        // Mobile menu toggle
        function toggleMobileMenu() {
            // Implementation for mobile menu
            alert('Mobile menu implementation needed');
        }

        // Add entrance animations
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.feature-card, .use-case-card, .pricing-card, .testimonial-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                
                setTimeout(() => {
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });

            // Animate stats on scroll
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.animation = 'fadeInUp 0.5s ease forwards';
                    }
                });
            });

            document.querySelectorAll('.stat-card').forEach(card => {
                observer.observe(card);
            });
        });

        // Add fade in animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>