session_start();
require_once 'config/database.php';
require_once 'includes/functions.php';

// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
    header('Location: login.php');
    exit();
}

// Get user statistics
$user_id = $_SESSION['user_id'];
$stats = getBusinessPlanStats($user_id);
$recent_plans = getRecentBusinessPlans($user_id, 5);
$collaborators = getCollaborators($user_id);
$templates = getBusinessPlanTemplates();
?>    <style>/* Using production TailwindCSS - custom styles only */\n    
/* Production-ready TailwindCSS - Replaces CDN */
@import url("https://itlive.nl/assets/css/production-tailwind-complete.css");
</style>    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <style>/* Using production TailwindCSS - custom styles only */\n    
        .glass-morphism {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .hover-scale {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .stat-card {
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            border-color: rgba(255,255,255,0.3);
        }
        
        .nav-item {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #fbbf24, #f59e0b);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }
        
        .nav-item:hover::after,
        .nav-item.active::after {
            width: 100%;
        }
        
        .quick-action-btn {
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            transition: all 0.3s ease;
        }
        
        .quick-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.1) 100%);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .fade-in-up {
            animation: fadeInUp 0.6s ease-out;
        }
        
        /* Enhanced Dashboard Styles */
        .enhanced-dashboard {
            padding: 2rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card-enhanced {
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 16px;
            padding: 1.5rem;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .stat-card-enhanced:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border-color: rgba(13, 148, 136, 0.4);
        }
        
        .stat-card-enhanced::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #0d9488, #06b6d4, #6366f1);
        }
        
        .stat-icon-enhanced {
            width: 60px;
            height: 60px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #0d9488, #06b6d4);
            color: white;
        }
        
        .stat-value-enhanced {
            font-size: 2.5rem;
            font-weight: 700;
            color: #f1f5f9;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stat-label-enhanced {
            color: #94a3b8;
            font-size: 0.9rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .quick-actions-enhanced {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 2rem;
        }
        
        .action-btn-enhanced {
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.2), rgba(6, 182, 212, 0.2));
            border: 1px solid rgba(13, 148, 136, 0.3);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        
        .action-btn-enhanced:hover {
            background: linear-gradient(135deg, rgba(13, 148, 136, 0.4), rgba(6, 182, 212, 0.4));
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(13, 148, 136, 0.3);
        }
        
        .recent-plans-enhanced {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 1.5rem;
        }
        
        .plan-card-enhanced {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 0.3s ease;
        }
        
        .plan-card-enhanced:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(4px);
        }
        
        .plan-status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .status-draft {
            background: rgba(245, 158, 11, 0.2);
            color: #fbbf24;
            border: 1px solid rgba(245, 158, 11, 0.3);
        }
        
        .status-active {
            background: rgba(16, 185, 129, 0.2);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.3);
        }
        
        .status-completed {
            background: rgba(99, 102, 241, 0.2);
            color: #6366f1;
            border: 1px solid rgba(99, 102, 241, 0.3);
        }
        
        /* Enhanced Animations */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }
        
        .animate-slide-up {
            animation: slideInUp 0.6s ease-out;
        }
        
        .animate-pulse {
            animation: pulse 2s infinite;
        }
        
        /* Progress Bar */
        .progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            overflow: hidden;
            margin-top: 0.5rem;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #0d9488, #06b6d4);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        /* AI Assistant Enhanced */
        .ai-assistant-enhanced {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            z-index: 100;
        }
        
        .ai-toggle-enhanced {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
        }
        
        .ai-toggle-enhanced:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 35px rgba(245, 158, 11, 0.6);
        }
        
        .ai-panel-enhanced {
            position: fixed;
            bottom: 6rem;
            right: 2rem;
            width: 420px;
            max-width: calc(100vw - 4rem);
            background: rgba(30, 41, 59, 0.98);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
            display: none;
            overflow: hidden;
        }
        
        .ai-panel-enhanced.open {
            display: block;
            animation: slideInUp 0.3s ease-out;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 1rem;
            }
            
            .quick-actions-enhanced {
                grid-template-columns: 1fr;
            }
            
            .ai-panel-enhanced {
                width: calc(100vw - 2rem);
                right: 1rem;
                left: 1rem;
            }
        }
        
        /* Floating AI widget */
        .floating-ai-toggle {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 100;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .floating-ai-toggle:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 24px rgba(245, 158, 11, 0.6);
        }
        .floating-ai-panel {
            position: fixed;
            bottom: 90px;
            right: 24px;
            z-index: 99;
            width: 380px;
            max-width: calc(100vw - 48px);
            max-height: 480px;
            background: rgba(30, 41, 59, 0.98);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.15);
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            display: none;
            flex-direction: column;
            overflow: hidden;
        }
        .floating-ai-panel.open {
            display: flex;
        }
        .flow-step {
            transition: all 0.3s ease;
        }
        .flow-step:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }
    </style>
<body class="gradient-bg min-h-screen text-white">
    <!-- Header -->
    <header class="glass-morphism sticky top-0 z-50 px-6 py-4">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-chart-line text-2xl text-yellow-400"></i>
                    <h1 class="text-2xl font-bold">Business Plan Maker</h1>
                </div>
            </div>
            
            <!-- Navigation -->
            <nav class="hidden md:flex items-center space-x-8">
                <a href="dashboard.php" class="nav-item active text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-dashboard mr-2"></i>Dashboard
                </a>
                <a href="flowcharts.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-project-diagram mr-2"></i>Flowcharts
                </a>
                <a href="charts.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-chart-bar mr-2"></i>Grafieken
                </a>
                <a href="tables.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-table mr-2"></i>Tabellen
                </a>
                <a href="plans.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-file-alt mr-2"></i>Plannen
                </a>
                <a href="analytics.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-analytics mr-2"></i>Analytics
                </a>
                <a href="templates.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-layer-group mr-2"></i>Sjablonen
                </a>
                <a href="collaboration.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-users mr-2"></i>Samenwerking
                </a>
                <a href="export.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-download mr-2"></i>Exporteren
                </a>
                <a href="settings.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-cog mr-2"></i>Instellingen
                </a>
                <a href="logout.php" class="nav-item text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-sign-out-alt mr-2"></i>Uitloggen
                </a>
            </nav>
            
            <!-- Mobile Menu Button -->
            <button class="md:hidden text-white" onclick="toggleMobileMenu()">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </div>
    </header>

    <!-- Main Content -->
    <main class="max-w-7xl mx-auto px-6 py-8">
        <!-- Welcome Section -->
        <div class="mb-8 fade-in-up">
            <h2 class="text-3xl font-bold mb-2">Welkom terug, Gebruiker!</h2>
            <p class="text-gray-200">Uw alles-in-één platform voor business planning en visualisatie</p>
        </div>

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="stat-card rounded-xl p-6 fade-in-up">
                <div class="flex items-center justify-between mb-4">
                    <div class="bg-blue-500 bg-opacity-20 rounded-lg p-3">
                        <i class="fas fa-file-alt text-blue-400 text-xl"></i>
                    </div>
                    <span class="text-3xl font-bold"></span>
                </div>
                <h3 class="text-lg font-semibold">Actieve Plannen</h3>
                <p class="text-gray-300 text-sm">Momenteel in bewerking</p>
            </div>

            <div class="stat-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.1s">
                <div class="flex items-center justify-between mb-4">
                    <div class="bg-green-500 bg-opacity-20 rounded-lg p-3">
                        <i class="fas fa-project-diagram text-green-400 text-xl"></i>
                    </div>
                    <span class="text-3xl font-bold"></span>
                </div>
                <h3 class="text-lg font-semibold">Totale Flowcharts</h3>
                <p class="text-gray-300 text-sm">Gegenereerde diagrammen</p>
            </div>

            <div class="stat-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.2s">
                <div class="flex items-center justify-between mb-4">
                    <div class="bg-purple-500 bg-opacity-20 rounded-lg p-3">
                        <i class="fas fa-chart-bar text-purple-400 text-xl"></i>
                    </div>
                    <span class="text-3xl font-bold"></span>
                </div>
                <h3 class="text-lg font-semibold">Gegenereerde Grafieken</h3>
                <p class="text-gray-300 text-sm">Data visualisaties</p>
            </div>

            <div class="stat-card rounded-xl p-6 fade-in-up" style="animation-delay: 0.3s">
                <div class="flex items-center justify-between mb-4">
                    <div class="bg-yellow-500 bg-opacity-20 rounded-lg p-3">
                        <i class="fas fa-users text-yellow-400 text-xl"></i>
                    </div>
                    <span class="text-3xl font-bold"></span>
                </div>
                <h3 class="text-lg font-semibold">Samenwerkers</h3>
                <p class="text-gray-300 text-sm">Actieve teamleden</p>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="mb-8">
            <h3 class="text-2xl font-bold mb-6">Snelle Acties</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <button onclick="createNewFlowchart()" class="quick-action-btn rounded-xl p-4 text-left hover-scale">
                    <div class="flex items-center space-x-3">
                        <div class="bg-blue-500 bg-opacity-20 rounded-lg p-2">
                            <i class="fas fa-plus text-blue-400"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold">Nieuwe Flowchart</h4>
                            <p class="text-sm text-gray-300">Creëer een nieuw diagram</p>
                        </div>
                    </div>
                </button>

                <button onclick="createNewChart()" class="quick-action-btn rounded-xl p-4 text-left hover-scale">
                    <div class="flex items-center space-x-3">
                        <div class="bg-green-500 bg-opacity-20 rounded-lg p-2">
                            <i class="fas fa-chart-line text-green-400"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold">Grafiek Maken</h4>
                            <p class="text-sm text-gray-300">Visualiseer uw data</p>
                        </div>
                    </div>
                </button>

                <button onclick="createNewTable()" class="quick-action-btn rounded-xl p-4 text-left hover-scale">
                    <div class="flex items-center space-x-3">
                        <div class="bg-purple-500 bg-opacity-20 rounded-lg p-2">
                            <i class="fas fa-table text-purple-400"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold">Tabel Bouwen</h4>
                            <p class="text-sm text-gray-300">Organiseer informatie</p>
                        </div>
                    </div>
                </button>

                <button onclick="createNewPlan()" class="quick-action-btn rounded-xl p-4 text-left hover-scale">
                    <div class="flex items-center space-x-3">
                        <div class="bg-yellow-500 bg-opacity-20 rounded-lg p-2">
                            <i class="fas fa-file-alt text-yellow-400"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold">Business Plan</h4>
                            <p class="text-sm text-gray-300">Start nieuw plan</p>
                        </div>
                    </div>
                </button>
            </div>
        </div>

        <!-- Business Plan Flow – start tot eind overzicht -->
        <div class="mb-8">
            <h3 class="text-2xl font-bold mb-6">Jouw business plan flow</h3>
            <div class="glass-morphism rounded-xl p-6 overflow-x-auto">
                <div class="flex flex-wrap items-center justify-center gap-2 md:gap-4 min-w-0">
                    <a href="plans.php?action=new" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-green-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-play text-green-400"></i></span>
                        <span class="font-semibold">Start plan</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <a href="plans.php" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-blue-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-file-alt text-blue-400"></i></span>
                        <span class="font-semibold">Plannen</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <a href="flowcharts.php" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-cyan-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-project-diagram text-cyan-400"></i></span>
                        <span class="font-semibold">Flowcharts</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <a href="charts.php" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-purple-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-chart-bar text-purple-400"></i></span>
                        <span class="font-semibold">Grafieken</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <a href="tables.php" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-amber-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-table text-amber-400"></i></span>
                        <span class="font-semibold">Tabellen</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <a href="export.php" class="flow-step flex items-center gap-2 bg-white bg-opacity-10 rounded-xl px-4 py-3 border border-white border-opacity-20 hover:bg-opacity-20">
                        <span class="bg-yellow-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-download text-yellow-400"></i></span>
                        <span class="font-semibold">Exporteren</span>
                    </a>
                    <span class="text-gray-400 hidden md:inline">→</span>
                    <span class="flow-step flex items-center gap-2 bg-green-500 bg-opacity-20 rounded-xl px-4 py-3 border border-green-400 border-opacity-40">
                        <span class="bg-green-500 bg-opacity-30 rounded-lg p-2"><i class="fas fa-check text-green-400"></i></span>
                        <span class="font-semibold">Klaar</span>
                    </span>
                </div>
                <p class="text-center text-gray-400 text-sm mt-4">Klik op een stap om direct naar die sectie te gaan. De AI-assistent kan op elke stap helpen.</p>
            </div>
        </div>

        <!-- Recent Activity & AI Assistant -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- Recent Plans -->
            <div class="glass-morphism rounded-xl p-6 fade-in-up">
                <h3 class="text-xl font-bold mb-4">Recente Plannen</h3>
                <div class="space-y-3">
                                    </div>
                <div class="mt-4">
                    <a href="plans.php" class="text-yellow-400 hover:text-yellow-300 transition-colors">
                        Bekijk alle plannen <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>

            <!-- AI Assistant -->
            <div class="glass-morphism rounded-xl p-6 fade-in-up">
                <h3 class="text-xl font-bold mb-4">AI Business Assistant</h3>
                <div class="bg-white bg-opacity-5 rounded-lg p-4 mb-4 h-64 overflow-y-auto" id="chatMessages">
                    <div class="text-gray-300 text-center">
                        <i class="fas fa-robot text-4xl mb-2 text-yellow-400"></i>
                        <p>Stel me een vraag over uw business plan!</p>
                    </div>
                </div>
                <div class="flex space-x-2">
                    <input type="text" id="aiInput" placeholder="Typ uw vraag..." 
                           class="flex-1 bg-white bg-opacity-10 rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-yellow-400">
                    <button onclick="sendAIMessage()" class="bg-yellow-500 hover:bg-yellow-600 rounded-lg px-4 py-2 transition-colors">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- Mobile Menu -->
    <div id="mobileMenu" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
        <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg w-64 h-full p-6">
            <div class="flex items-center justify-between mb-8">
                <h2 class="text-xl font-bold">Menu</h2>
                <button onclick="toggleMobileMenu()" class="text-white">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <nav class="space-y-4">
                <a href="dashboard.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-dashboard mr-2"></i>Dashboard
                </a>
                <a href="flowcharts.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-project-diagram mr-2"></i>Flowcharts
                </a>
                <a href="charts.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-chart-bar mr-2"></i>Grafieken
                </a>
                <a href="tables.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-table mr-2"></i>Tabellen
                </a>
                <a href="plans.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-file-alt mr-2"></i>Plannen
                </a>
                <a href="analytics.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-analytics mr-2"></i>Analytics
                </a>
                <a href="templates.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-layer-group mr-2"></i>Sjablonen
                </a>
                <a href="collaboration.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-users mr-2"></i>Samenwerking
                </a>
                <a href="export.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-download mr-2"></i>Exporteren
                </a>
                <a href="settings.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-cog mr-2"></i>Instellingen
                </a>
                <a href="logout.php" class="block text-white hover:text-yellow-300 transition-colors">
                    <i class="fas fa-sign-out-alt mr-2"></i>Uitloggen
                </a>
            </nav>
        </div>
    </div>

    <!-- Floating AI Assistant -->
    <button type="button" class="floating-ai-toggle" id="floatingAiToggle" title="AI Assistent openen" aria-label="AI Assistent">
        <i class="fas fa-robot"></i>
    </button>
    <div class="floating-ai-panel" id="floatingAiPanel">
        <div class="flex items-center justify-between px-4 py-3 border-b border-white border-opacity-10 bg-white bg-opacity-5">
            <h4 class="font-bold text-white"><i class="fas fa-robot text-yellow-400 mr-2"></i>AI Assistent</h4>
            <button type="button" class="text-gray-400 hover:text-white p-1" onclick="toggleFloatingAi()" aria-label="Sluiten">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="flex-1 overflow-y-auto p-4 min-h-[200px]" id="floatingChatMessages">
            <div class="text-gray-400 text-sm text-center py-4">
                <i class="fas fa-comments text-2xl mb-2 block text-yellow-400"></i>
                Vraag iets over plannen, flowcharts, grafieken of tabellen. Ik help je op weg.
            </div>
        </div>
        <div class="p-3 border-t border-white border-opacity-10 bg-white bg-opacity-5">
            <div class="flex gap-2">
                <input type="text" id="floatingAiInput" placeholder="Typ uw vraag..." 
                       class="flex-1 bg-slate-700 rounded-lg px-3 py-2 text-white placeholder-gray-400 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-400">
                <button type="button" onclick="sendFloatingAIMessage()" class="bg-yellow-500 hover:bg-yellow-600 rounded-lg px-3 py-2 text-white transition-colors">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Initialize Mermaid
        mermaid.initialize({ startOnLoad: true });

        // Mobile menu toggle
        function toggleMobileMenu() {
            const menu = document.getElementById('mobileMenu');
            menu.classList.toggle('hidden');
        }

        // Quick action functions
        function createNewFlowchart() {
            window.location.href = 'flowcharts.php?action=new';
        }

        function createNewChart() {
            window.location.href = 'charts.php?action=new';
        }

        function createNewTable() {
            window.location.href = 'tables.php?action=new';
        }

        function createNewPlan() {
            window.location.href = 'plans.php?action=new';
        }

        function openPlan(planId) {
            window.location.href = 'plans.php?id=' + planId;
        }

        // AI Chat functionality
        let chatHistory = [];

        function sendAIMessage() {
            const input = document.getElementById('aiInput');
            const message = input.value.trim();
            
            if (!message) return;
            
            const chatMessages = document.getElementById('chatMessages');
            
            // Add user message
            addChatMessage(message, 'user');
            input.value = '';
            
            // Show typing indicator
            showTypingIndicator();
            
            // Send to AI
            fetch('api/ai-assistant.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: message,
                    context: 'business_plan',
                    user_id:                 })
            })
            .then(response => response.json())
            .then(data => {
                removeTypingIndicator();
                if (data.success) {
                    addChatMessage(data.response, 'ai');
                } else {
                    addChatMessage('Er is een fout opgetreden. Probeer het opnieuw.', 'ai');
                }
            })
            .catch(error => {
                removeTypingIndicator();
                addChatMessage('Er is een fout opgetreden. Probeer het opnieuw.', 'ai');
            });
        }

        function addChatMessage(message, sender) {
            const chatMessages = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `mb-3 ${sender === 'user' ? 'text-right' : 'text-left'}`;
            
            const bubbleClass = sender === 'user' 
                ? 'bg-blue-500 bg-opacity-20 ml-auto' 
                : 'bg-yellow-500 bg-opacity-20';
            
            messageDiv.innerHTML = `
                <div class="${bubbleClass} rounded-lg p-3 max-w-xs inline-block">
                    <p class="text-sm">${message}</p>
                </div>
            `;
            
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function showTypingIndicator() {
            const chatMessages = document.getElementById('chatMessages');
            const typingDiv = document.createElement('div');
            typingDiv.id = 'typingIndicator';
            typingDiv.className = 'mb-3 text-left';
            typingDiv.innerHTML = `
                <div class="bg-yellow-500 bg-opacity-20 rounded-lg p-3 max-w-xs inline-block">
                    <div class="flex space-x-1">
                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce"></div>
                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                        <div class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                    </div>
                </div>
            `;
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function removeTypingIndicator() {
            const indicator = document.getElementById('typingIndicator');
            if (indicator) {
                indicator.remove();
            }
        }

        // Enter key to send message
        document.getElementById('aiInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendAIMessage();
            }
        });

        // Floating AI panel
        function toggleFloatingAi() {
            const panel = document.getElementById('floatingAiPanel');
            panel.classList.toggle('open');
        }
        document.getElementById('floatingAiToggle').addEventListener('click', toggleFloatingAi);

        function sendFloatingAIMessage() {
            const input = document.getElementById('floatingAiInput');
            const message = input.value.trim();
            if (!message) return;
            const container = document.getElementById('floatingChatMessages');
            const placeholder = container.querySelector('.text-center');
            if (placeholder) placeholder.remove();
            const userBubble = document.createElement('div');
            userBubble.className = 'mb-3 text-right';
            userBubble.innerHTML = '<div class="bg-blue-500 bg-opacity-30 rounded-lg p-2 max-w-[85%] ml-auto inline-block text-sm">' + escapeHtml(message) + '</div>';
            container.appendChild(userBubble);
            input.value = '';
            container.scrollTop = container.scrollHeight;
            const typing = document.createElement('div');
            typing.id = 'floatingTyping';
            typing.className = 'mb-3 text-left text-sm text-gray-400';
            typing.innerHTML = '<span class="inline-flex gap-1"><span class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce"></span><span class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce" style="animation-delay:0.1s"></span><span class="w-2 h-2 bg-yellow-400 rounded-full animate-bounce" style="animation-delay:0.2s"></span></span>';
            container.appendChild(typing);
            container.scrollTop = container.scrollHeight;
            fetch('api/ai-assistant.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ message: message, context: 'business_plan', user_id: 0 })
            })
            .then(r => r.json())
            .then(data => {
                document.getElementById('floatingTyping')?.remove();
                const aiBubble = document.createElement('div');
                aiBubble.className = 'mb-3 text-left';
                const text = data.success ? data.response : 'Er is een fout opgetreden. Probeer het opnieuw.';
                aiBubble.innerHTML = '<div class="bg-yellow-500 bg-opacity-20 rounded-lg p-2 max-w-[85%] inline-block text-sm whitespace-pre-wrap">' + escapeHtml(text).replace(/\n/g, '<br>') + '</div>';
                container.appendChild(aiBubble);
                container.scrollTop = container.scrollHeight;
            })
            .catch(() => {
                document.getElementById('floatingTyping')?.remove();
                const err = document.createElement('div');
                err.className = 'mb-3 text-left';
                err.innerHTML = '<div class="bg-red-500 bg-opacity-20 rounded-lg p-2 text-sm">Fout bij verbinden. Probeer opnieuw.</div>';
                container.appendChild(err);
                container.scrollTop = container.scrollHeight;
            });
        }
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        document.getElementById('floatingAiInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') sendFloatingAIMessage();
        });

        // Load initial data
        document.addEventListener('DOMContentLoaded', function() {
            // Animate stats on load
            const statCards = document.querySelectorAll('.stat-card span');
            statCards.forEach(card => {
                const finalValue = parseInt(card.textContent);
                let currentValue = 0;
                const increment = finalValue / 50;
                
                const counter = setInterval(() => {
                    currentValue += increment;
                    if (currentValue >= finalValue) {
                        currentValue = finalValue;
                        clearInterval(counter);
                    }
                    card.textContent = Math.floor(currentValue);
                }, 30);
            });
        });
    </script>
    </main>
    
    <!-- Footer -->
    <footer class="footer itlive-footer-day">
        <div class="footer-container">
            <div class="footer-grid">
                <div class="footer-section">
                    <a href="https://www.itlive.nl/" class="footer-logo" aria-label="IT Live – naar home">
                        <img src="https://www.itlive.nl/assets/images/logo-itlive-kubus.svg" alt="" width="40" height="40">
                        <span class="footer-brand-txt">IT Live</span>
                    </a>
                    <h3 class="footer-section-title">Digitaal bureau</h3>
                    <p>Complete IT-oplossingen voor het MKB. Webdevelopment, AI-tools, en digitale transformatie.</p>
                    <div class="social-links">
                        <a href="https://github.com" target="_blank" title="GitHub"><i class="fab fa-github"></i></a>
                        <a href="mailto:info@itlive.nl" title="Email"><i class="fas fa-envelope"></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>
                    </div>
                </div>
                
                <div class="footer-section">
                    <h3>🛠️ Tools</h3>
                    <ul class="footer-links">
                        <li><a href="https://www.itlive.nl/ai-tools.php">AI Tools</a></li>
                        <li><a href="https://www.itlive.nl/website-kit-builder/">Website Kit Builder</a></li>
                        <li><a href="https://www.itlive.nl/ai-visuals/">AI Visuals</a></li>
                        <li><a href="https://www.itlive.nl/alle-tools/">Alle Tools</a></li>
                        <li><a href="https://www.itlive.nl/business-plan-maker/">Business Plan</a></li>
                        <li><a href="https://www.itlive.nl/gratis-website-scan/">Website Scan</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>🚀 Diensten</h3>
                    <ul class="footer-links">
                        <li><a href="https://www.itlive.nl/">Home</a></li>
                        <li><a href="https://www.itlive.nl/diensten/">Diensten</a></li>
                        <li><a href="https://www.itlive.nl/over-ons">Over ons</a></li>
                        <li><a href="https://www.itlive.nl/contact">Contact</a></li>
                        <li><a href="https://www.itlive.nl/gratis-tools/">Gratis tools</a></li>
                        <li><a href="https://www.itlive.nl/alle-tools/">Alle tools</a></li>
                    </ul>
                </div>
                
                <div class="footer-section">
                    <h3>💬 Aan de slag</h3>
                    <ul class="footer-links">
                        <li><a href="https://www.itlive.nl/contact/">Contact</a></li>
                        <li><a href="https://www.itlive.nl/hosting-op-maat/">Hosting op maat</a></li>
                        <li><a href="https://www.itlive.nl/klant/">Klantportaal</a></li>
                        <li><a href="https://www.itlive.nl/lead-generator/">Website op maat</a></li>
                        <li><a href="https://www.itlive.nl/sitemap.php">Sitemap</a></li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="footer-bottom-content">
                    <p>&copy; 2026 IT Live. Alle rechten voorbehouden.</p>
                    <nav class="footer-legal-links" aria-label="Juridisch en overzicht">
                        <a href="https://www.itlive.nl/privacy">Privacy</a>
                        <span class="footer-sep" aria-hidden="true">·</span>
                        <a href="https://www.itlive.nl/algemene-voorwaarden">Voorwaarden</a>
                        <span class="footer-sep" aria-hidden="true">·</span>
                        <a href="https://www.itlive.nl/cookiebeleid">Cookies</a>
                        <span class="footer-sep" aria-hidden="true">·</span>
                        <a href="https://www.itlive.nl/sitemap">Sitemap</a>
                        <span class="footer-sep" aria-hidden="true">·</span>
                        <a href="https://klant.itlive.nl/huisstijl/" title="Logo, kleuren en media in het klantportaal">Brand &amp; huisstijl (klant)</a>
                    </nav>
                </div>
            </div>
        </div>
    </footer>

    <style>
    .footer {
        background: linear-gradient(180deg, #020917 0%, #0C1B38 50%, #071020 100%);
        color: #e8f0f8;
        padding: 3.5rem 0 2rem;
        border-top: 1px solid rgba(0,200,255,0.15);
        margin-top: auto;
        width: 100%;
        box-sizing: border-box;
    }
    
    .footer-container {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0 clamp(1.5rem, 5vw, 3rem);
        box-sizing: border-box;
    }
    
    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 2.5rem;
        margin-bottom: 2.5rem;
    }
    
    @media (min-width: 993px) {
        .footer-grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem 3rem;
        }
    }
    
    .footer-logo {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-decoration: none;
        color: #e8f0f8;
        margin-bottom: 0.5rem;
    }
    .footer-logo img { flex-shrink: 0; }
    .footer-brand-txt { font-weight: 700; font-size: 1.25rem; }
    .footer-logo:hover { color: #F2C14F; }
    .footer-section-title,
    .footer-section h3 {
        color: #F2C14F;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.02em;
    }
    .footer-section-title { margin-top: 0.25rem; }
    
    .footer-section p {
        color: #b8d4e8;
        font-size: 0.9rem;
        line-height: 1.5;
    }
    
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .footer-links li {
        margin-bottom: 0.6rem;
    }
    
    .footer-links a {
        color: #8da4c4;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    .footer-links a:hover {
        color: #F2C14F;
    }
    
    .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }
    
    .social-links a {
        color: #8da4c4;
        transition: color 0.2s ease, transform 0.2s ease;
        font-size: 1.2rem;
    }
    
    .social-links a:hover {
        color: #F2C14F;
        transform: translateY(-2px);
    }
    
    .footer-bottom {
        border-top: 1px solid rgba(0,200,255,0.1);
        padding-top: 2rem;
    }
    
    .footer-bottom-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .footer-bottom-content p {
        color: #6B92B8;
        font-size: 0.875rem;
    }
    
    .footer-legal-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1rem;
    }
    .footer-sep {
        opacity: 0.5;
        pointer-events: none;
    }
    
    .footer-legal-links a {
        color: #6B92B8;
        text-decoration: none;
        font-size: 0.875rem;
        transition: color 0.2s ease;
    }
    
    .footer-legal-links a:hover {
        color: #F2C14F;
    }
    
    @media (max-width: 992px) {
        .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }
    }
    
    @media (max-width: 768px) {
        .footer {
            padding: 2.5rem 0 1.5rem;
        }
        
        .footer-container {
            padding: 0 1.25rem;
        }
        
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 1.75rem;
            margin-bottom: 2rem;
        }
        
        .footer-section h3,
        .footer-section-title { font-size: 1rem; margin-bottom: 0.75rem; }
        .footer-links a,
        .footer-section p { font-size: 0.875rem; }
        .footer-links a { display: inline-block; padding: 0.25rem 0; min-height: 44px; line-height: 1.4; }
        
        .footer-bottom {
            padding-top: 1.5rem;
        }
        
        .footer-bottom-content {
            flex-direction: column;
            text-align: center;
            gap: 1rem;
        }
        
        .footer-legal-links {
            flex-direction: column;
            gap: 0.5rem;
            text-align: center;
        }
        
        .footer-legal-links a {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }
    
    @media (max-width: 480px) {
        .footer { padding: 2rem 0 1.25rem; }
        .footer-container { padding: 0 1rem; }
        .footer-logo img { width: 36px; height: 36px; }
        .footer-brand-txt { font-size: 1.1rem; }
    }

    /* Dag-thema (bij body.itlive-public-day van enhanced-header) */
    body.itlive-public-day .footer.itlive-footer-day,
    body.itlive-public-day .footer {
        background: #f8fafc !important;
        color: #0f172a !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    }
    body.itlive-public-day .footer .footer-logo { color: #0f172a !important; }
    body.itlive-public-day .footer .footer-logo:hover { color: #b45309 !important; }
    body.itlive-public-day .footer .footer-section-title,
    body.itlive-public-day .footer .footer-section h3 { color: #0e7490 !important; }
    body.itlive-public-day .footer .footer-section p { color: #475569 !important; }
    body.itlive-public-day .footer .footer-links a { color: #475569 !important; }
    body.itlive-public-day .footer .footer-links a:hover { color: #b45309 !important; }
    body.itlive-public-day .footer .social-links a { color: #64748b !important; }
    body.itlive-public-day .footer .social-links a:hover { color: #0e7490 !important; }
    body.itlive-public-day .footer .footer-bottom { border-top-color: rgba(15, 23, 42, 0.08) !important; }
    body.itlive-public-day .footer .footer-bottom-content p { color: #64748b !important; }
    body.itlive-public-day .footer .footer-legal-links a { color: #64748b !important; }
    body.itlive-public-day .footer .footer-legal-links a:hover { color: #b45309 !important; }
    </style>

        <div id="itliveAgentRail" class="itlive-agent-rail" role="navigation" aria-label="IT Live assistent">
        <button type="button" class="itlive-agent-rail-btn" id="itliveAgentRailBtn" title="IT Live AI-assistent" aria-label="Open IT Live assistent">
            <span class="itlive-agent-rail-pulse" aria-hidden="true"></span>
            <i class="fas fa-robot" aria-hidden="true"></i>
        </button>
    </div>
    <style>
        .itlive-agent-rail {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2147481850;
            pointer-events: none;
        }
        .itlive-agent-rail-btn {
            pointer-events: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            min-height: 96px;
            padding: 10px 0;
            border: none;
            border-radius: 12px 0 0 12px;
            cursor: pointer;
            background: linear-gradient(180deg, rgba(12, 32, 72, 0.96), rgba(6, 14, 40, 0.98));
            color: #7dd3fc;
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(56, 189, 248, 0.25);
            border-right: none;
            transition: background 0.2s, color 0.2s, width 0.2s;
        }
        .itlive-agent-rail-btn:hover {
            background: linear-gradient(180deg, rgba(14, 165, 233, 0.25), rgba(8, 47, 73, 0.95));
            color: #fff;
            width: 48px;
        }
        .itlive-agent-rail-btn i { font-size: 1.15rem; }
        .itlive-agent-rail-pulse {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 10px #22c55e;
            animation: itliveRailPulse 2.2s ease-in-out infinite;
        }
        @keyframes itliveRailPulse {
            0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.65; transform: translateX(-50%) scale(1.15); }
        }
        @media (max-width: 480px) {
            .itlive-agent-rail { display: none; }
        }
    </style>
    <script>
    (function () {
        var btn = document.getElementById('itliveAgentRailBtn');
        if (!btn) return;
        btn.addEventListener('click', function () {
            if (typeof window.itliveOpenAssistant === 'function') {
                try {
                    window.itliveOpenAssistant();
                    return;
                } catch (e0) {}
            }
            var fab = document.getElementById('aiAvatarFloat');
            var mini = document.getElementById('aifMiniBtn');
            if (fab && mini) {
                try { fab.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (e) {}
                setTimeout(function () {
                    try { mini.focus(); } catch (e2) {}
                }, 400);
                return;
            }
            var chat = document.getElementById('chatWindow') || document.getElementById('userInput');
            if (chat) {
                try { chat.scrollIntoView({ behavior: 'smooth', block: 'center' }); } catch (e4) {}
                return;
            }
            window.location.href = 'https://www.itlive.nl/#contact';
        });
    })();
    </script>

    <!-- Live AI – chatwidget (slimme vraag-dialoog) rechtsonder -->
    <script src="https://portal.itlive.nl/admin_portal/universal-ai-chat-widget.php?tenant=itlive" async></script>
</body>
</html>
</body>
</html>