<?php
session_start();
header('Content-Type: text/html; charset=UTF-8');

// Configurações do Banco
$dbFile = 'axionlinq.db';

try {
    $pdo = new PDO("sqlite:$dbFile");
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Criar tabelas se não existirem
    $pdo->exec("
        CREATE TABLE IF NOT EXISTS users (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            name VARCHAR(255) NOT NULL,
            email VARCHAR(255) UNIQUE NOT NULL,
            password VARCHAR(255) NOT NULL,
            phone VARCHAR(20),
            avatar VARCHAR(255),
            balance DECIMAL(10,2) DEFAULT 0.00,
            nikapay_token VARCHAR(255),
            nikapay_secret VARCHAR(255),
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
        );
        
        CREATE TABLE IF NOT EXISTS funnels (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            name VARCHAR(255) NOT NULL,
            slug VARCHAR(255) NOT NULL,
            logo_url VARCHAR(255),
            primary_color VARCHAR(7) DEFAULT '#8B5CF6',
            secondary_color VARCHAR(7) DEFAULT '#0EA5E9',
            active INTEGER DEFAULT 1,
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (user_id) REFERENCES users(id)
        );
        
        CREATE TABLE IF NOT EXISTS funnel_steps (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            funnel_id INTEGER NOT NULL,
            type VARCHAR(50) NOT NULL,
            question_text TEXT NOT NULL,
            options TEXT,
            validation VARCHAR(255),
            next_step INTEGER,
            order_index INTEGER NOT NULL,
            required INTEGER DEFAULT 1,
            FOREIGN KEY (funnel_id) REFERENCES funnels(id)
        );
        
        CREATE TABLE IF NOT EXISTS clients (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            name VARCHAR(255) NOT NULL,
            email VARCHAR(255),
            phone VARCHAR(20),
            document VARCHAR(20),
            visits INTEGER DEFAULT 0,
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (user_id) REFERENCES users(id)
        );
        
        CREATE TABLE IF NOT EXISTS appointments (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            client_id INTEGER NOT NULL,
            funnel_id INTEGER,
            service VARCHAR(255) NOT NULL,
            appointment_date DATE NOT NULL,
            appointment_time TIME NOT NULL,
            amount DECIMAL(10,2) NOT NULL,
            status VARCHAR(20) DEFAULT 'pending',
            payment_id VARCHAR(255),
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (user_id) REFERENCES users(id),
            FOREIGN KEY (client_id) REFERENCES clients(id),
            FOREIGN KEY (funnel_id) REFERENCES funnels(id)
        );
        
        CREATE TABLE IF NOT EXISTS payments (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            appointment_id INTEGER,
            amount DECIMAL(10,2) NOT NULL,
            type VARCHAR(20) NOT NULL,
            status VARCHAR(20) DEFAULT 'pending',
            external_id VARCHAR(255),
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (user_id) REFERENCES users(id),
            FOREIGN KEY (appointment_id) REFERENCES appointments(id)
        );
        
        CREATE TABLE IF NOT EXISTS withdrawals (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_id INTEGER NOT NULL,
            amount DECIMAL(10,2) NOT NULL,
            pix_key VARCHAR(255) NOT NULL,
            pix_key_type VARCHAR(20) NOT NULL,
            status VARCHAR(20) DEFAULT 'pending',
            external_id VARCHAR(255),
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (user_id) REFERENCES users(id)
        );
        
        CREATE TABLE IF NOT EXISTS funnel_responses (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            funnel_id INTEGER NOT NULL,
            client_id INTEGER,
            step_id INTEGER NOT NULL,
            response TEXT,
            session_id VARCHAR(255),
            created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
            FOREIGN KEY (funnel_id) REFERENCES funnels(id),
            FOREIGN KEY (client_id) REFERENCES clients(id),
            FOREIGN KEY (step_id) REFERENCES funnel_steps(id)
        );
    ");
    
    // Inserir usuário demo se não existir
    $stmt = $pdo->prepare("SELECT COUNT(*) FROM users WHERE email = ?");
    $stmt->execute(['demo@axionlinq.com']);
    if ($stmt->fetchColumn() == 0) {
        $stmt = $pdo->prepare("INSERT INTO users (name, email, password, phone, nikapay_token, nikapay_secret, balance) VALUES (?, ?, ?, ?, ?, ?, ?)");
        $stmt->execute([
            'Prestador Demo',
            'demo@axionlinq.com',
            password_hash('123456', PASSWORD_DEFAULT),
            '(11) 99999-9999',
            'ci__a567a44d-dca1-4b96-99e7-cb2c025722a2',
            'cs__84371af8-8021-4490-861c-b54f6c0f01b2',
            1250.75
        ]);
    }
    
} catch (PDOException $e) {
    die("Erro no banco: " . $e->getMessage());
}

// Funções auxiliares
function isLoggedIn() {
    return isset($_SESSION['user_id']);
}

function requireLogin() {
    if (!isLoggedIn()) {
        header('Location: ?action=login');
        exit;
    }
}

function getCurrentUser($pdo) {
    if (!isLoggedIn()) return null;
    
    $stmt = $pdo->prepare("SELECT * FROM users WHERE id = ?");
    $stmt->execute([$_SESSION['user_id']]);
    return $stmt->fetch(PDO::FETCH_ASSOC);
}

function sanitize($input) {
    return htmlspecialchars(trim($input), ENT_QUOTES, 'UTF-8');
}

function formatCurrency($value) {
    return 'R$ ' . number_format($value, 2, ',', '.');
}

// Processamento de ações
$action = $_GET['action'] ?? 'dashboard';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $postAction = $_POST['action'] ?? '';
    
    switch ($postAction) {
        case 'login':
            $email = sanitize($_POST['email']);
            $password = $_POST['password'];
            
            $stmt = $pdo->prepare("SELECT * FROM users WHERE email = ?");
            $stmt->execute([$email]);
            $user = $stmt->fetch(PDO::FETCH_ASSOC);
            
            if ($user && password_verify($password, $user['password'])) {
                session_regenerate_id(true);
                $_SESSION['user_id'] = $user['id'];
                $_SESSION['user_name'] = $user['name'];
                header('Location: ?action=dashboard');
                exit;
            } else {
                $error = 'Email ou senha inválidos';
            }
            break;
            
        case 'register':
            $name = sanitize($_POST['name']);
            $email = sanitize($_POST['email']);
            $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
            $phone = sanitize($_POST['phone']);
            
            try {
                $stmt = $pdo->prepare("INSERT INTO users (name, email, password, phone, nikapay_token, nikapay_secret) VALUES (?, ?, ?, ?, ?, ?)");
                $stmt->execute([$name, $email, $password, $phone, 'ci__a567a44d-dca1-4b96-99e7-cb2c025722a2', 'cs__84371af8-8021-4490-861c-b54f6c0f01b2']);
                
                session_regenerate_id(true);
                $_SESSION['user_id'] = $pdo->lastInsertId();
                $_SESSION['user_name'] = $name;
                header('Location: ?action=dashboard');
                exit;
            } catch (PDOException $e) {
                $error = 'Email já cadastrado';
            }
            break;
            
        case 'logout':
            session_destroy();
            header('Location: ?action=login');
            exit;
            
        case 'create_funnel':
            requireLogin();
            $name = sanitize($_POST['name']);
            $slug = sanitize(strtolower(str_replace(' ', '-', $_POST['slug'])));
            
            $stmt = $pdo->prepare("INSERT INTO funnels (user_id, name, slug) VALUES (?, ?, ?)");
            $stmt->execute([$_SESSION['user_id'], $name, $slug]);
            
            echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
            exit;
            
        case 'save_appointment':
            requireLogin();
            $clientName = sanitize($_POST['client_name']);
            $clientPhone = sanitize($_POST['client_phone']);
            $clientEmail = sanitize($_POST['client_email']);
            $service = sanitize($_POST['service']);
            $date = $_POST['date'];
            $time = $_POST['time'];
            $amount = floatval($_POST['amount']);
            
            // Inserir cliente se não existir
            $stmt = $pdo->prepare("SELECT id FROM clients WHERE phone = ? AND user_id = ?");
            $stmt->execute([$clientPhone, $_SESSION['user_id']]);
            $client = $stmt->fetch(PDO::FETCH_ASSOC);
            
            if (!$client) {
                $stmt = $pdo->prepare("INSERT INTO clients (user_id, name, phone, email, visits) VALUES (?, ?, ?, ?, 1)");
                $stmt->execute([$_SESSION['user_id'], $clientName, $clientPhone, $clientEmail]);
                $clientId = $pdo->lastInsertId();
            } else {
                $clientId = $client['id'];
                $stmt = $pdo->prepare("UPDATE clients SET visits = visits + 1 WHERE id = ?");
                $stmt->execute([$clientId]);
            }
            
            // Inserir agendamento
            $stmt = $pdo->prepare("INSERT INTO appointments (user_id, client_id, service, appointment_date, appointment_time, amount, status) VALUES (?, ?, ?, ?, ?, ?, 'confirmed')");
            $stmt->execute([$_SESSION['user_id'], $clientId, $service, $date, $time, $amount]);
            
            // Atualizar saldo
            $stmt = $pdo->prepare("UPDATE users SET balance = balance + ? WHERE id = ?");
            $stmt->execute([$amount, $_SESSION['user_id']]);
            
            echo json_encode(['success' => true]);
            exit;
            
        case 'request_withdrawal':
            requireLogin();
            $amount = floatval($_POST['amount']);
            $pixKey = sanitize($_POST['pix_key']);
            $pixKeyType = sanitize($_POST['pix_key_type']);
            
            $user = getCurrentUser($pdo);
            if ($user['balance'] >= $amount) {
                $stmt = $pdo->prepare("INSERT INTO withdrawals (user_id, amount, pix_key, pix_key_type) VALUES (?, ?, ?, ?)");
                $stmt->execute([$_SESSION['user_id'], $amount, $pixKey, $pixKeyType]);
                
                $stmt = $pdo->prepare("UPDATE users SET balance = balance - ? WHERE id = ?");
                $stmt->execute([$amount, $_SESSION['user_id']]);
                
                echo json_encode(['success' => true]);
            } else {
                echo json_encode(['success' => false, 'message' => 'Saldo insuficiente']);
            }
            exit;
    }
}

// AJAX endpoints
if (isset($_GET['ajax'])) {
    header('Content-Type: application/json');
    
    switch ($_GET['ajax']) {
        case 'dashboard_data':
            requireLogin();
            
            // Estatísticas gerais
            $stmt = $pdo->prepare("SELECT COUNT(*) FROM clients WHERE user_id = ?");
            $stmt->execute([$_SESSION['user_id']]);
            $totalClients = $stmt->fetchColumn();
            
            $stmt = $pdo->prepare("SELECT COUNT(*) FROM appointments WHERE user_id = ? AND status = 'confirmed'");
            $stmt->execute([$_SESSION['user_id']]);
            $totalAppointments = $stmt->fetchColumn();
            
            $stmt = $pdo->prepare("SELECT SUM(amount) FROM appointments WHERE user_id = ? AND status = 'confirmed' AND DATE(created_at) = DATE('now')");
            $stmt->execute([$_SESSION['user_id']]);
            $todayRevenue = $stmt->fetchColumn() ?: 0;
            
            $stmt = $pdo->prepare("SELECT balance FROM users WHERE id = ?");
            $stmt->execute([$_SESSION['user_id']]);
            $balance = $stmt->fetchColumn();
            
            // Dados para gráficos (últimos 7 dias)
            $revenueData = [];
            for ($i = 6; $i >= 0; $i--) {
                $date = date('Y-m-d', strtotime("-$i days"));
                $stmt = $pdo->prepare("SELECT SUM(amount) FROM appointments WHERE user_id = ? AND status = 'confirmed' AND DATE(created_at) = ?");
                $stmt->execute([$_SESSION['user_id'], $date]);
                $revenueData[] = floatval($stmt->fetchColumn() ?: 0);
            }
            
            echo json_encode([
                'totalClients' => $totalClients,
                'totalAppointments' => $totalAppointments,
                'todayRevenue' => $todayRevenue,
                'balance' => $balance,
                'revenueData' => $revenueData
            ]);
            exit;
            
        case 'clients_list':
            requireLogin();
            $stmt = $pdo->prepare("SELECT * FROM clients WHERE user_id = ? ORDER BY created_at DESC");
            $stmt->execute([$_SESSION['user_id']]);
            echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
            exit;
            
        case 'appointments_list':
            requireLogin();
            $stmt = $pdo->prepare("
                SELECT a.*, c.name as client_name, c.phone as client_phone 
                FROM appointments a 
                JOIN clients c ON a.client_id = c.id 
                WHERE a.user_id = ? 
                ORDER BY a.appointment_date DESC, a.appointment_time DESC
            ");
            $stmt->execute([$_SESSION['user_id']]);
            echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
            exit;
            
        case 'funnels_list':
            requireLogin();
            $stmt = $pdo->prepare("SELECT * FROM funnels WHERE user_id = ? ORDER BY created_at DESC");
            $stmt->execute([$_SESSION['user_id']]);
            echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC));
            exit;
    }
}

// Exibir funnel público
if (isset($_GET['f'])) {
    $parts = explode('/', $_GET['f']);
    $funnelId = intval($parts[0]);
    $slug = $parts[1] ?? '';
    
    $stmt = $pdo->prepare("SELECT * FROM funnels WHERE id = ? AND slug = ? AND active = 1");
    $stmt->execute([$funnelId, $slug]);
    $funnel = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$funnel) {
        die("Funil não encontrado");
    }
    
    // Buscar steps do funil
    $stmt = $pdo->prepare("SELECT * FROM funnel_steps WHERE funnel_id = ? ORDER BY order_index");
    $stmt->execute([$funnelId]);
    $steps = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    ?>
    <!DOCTYPE html>
    <html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php echo sanitize($funnel['name']); ?></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body {
                background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 100%);
                color: #F1F5F9;
                font-family: 'Inter', sans-serif;
                min-height: 100vh;
            }
            
            .chat-container {
                max-width: 500px;
                margin: 0 auto;
                padding: 20px;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }
            
            .chat-header {
                text-align: center;
                padding: 20px 0;
                border-bottom: 1px solid #333;
                margin-bottom: 20px;
            }
            
            .chat-messages {
                flex: 1;
                overflow-y: auto;
                padding: 20px 0;
            }
            
            .message {
                margin-bottom: 15px;
                animation: slideIn 0.3s ease-in-out;
            }
            
            .message.bot {
                text-align: left;
            }
            
            .message.user {
                text-align: right;
            }
            
            .message-bubble {
                display: inline-block;
                max-width: 80%;
                padding: 12px 16px;
                border-radius: 20px;
                word-wrap: break-word;
            }
            
            .message.bot .message-bubble {
                background: <?php echo $funnel['primary_color']; ?>;
                color: white;
                border-bottom-left-radius: 5px;
            }
            
            .message.user .message-bubble {
                background: #2a2a2a;
                color: #F1F5F9;
                border-bottom-right-radius: 5px;
            }
            
            .typing {
                padding: 8px 16px;
                background: #333;
                border-radius: 20px;
                display: inline-block;
                margin-bottom: 10px;
            }
            
            .typing-dots {
                display: flex;
                gap: 4px;
            }
            
            .typing-dots span {
                width: 8px;
                height: 8px;
                background: #666;
                border-radius: 50%;
                animation: typing 1.4s infinite;
            }
            
            .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
            .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
            
            .chat-input {
                padding: 20px 0;
                border-top: 1px solid #333;
            }
            
            .option-buttons {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-top: 15px;
            }
            
            .option-btn {
                background: <?php echo $funnel['secondary_color']; ?>;
                border: none;
                color: white;
                padding: 12px 20px;
                border-radius: 25px;
                cursor: pointer;
                transition: all 0.3s ease;
            }
            
            .option-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
            }
            
            .form-control {
                background: #2a2a2a;
                border: 1px solid #444;
                color: #F1F5F9;
                border-radius: 20px;
            }
            
            .form-control:focus {
                background: #2a2a2a;
                border-color: <?php echo $funnel['primary_color']; ?>;
                color: #F1F5F9;
                box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
            }
            
            .btn-send {
                background: <?php echo $funnel['primary_color']; ?>;
                border: none;
                border-radius: 20px;
                padding: 10px 20px;
                color: white;
            }
            
            @keyframes slideIn {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            @keyframes typing {
                0%, 60%, 100% { transform: translateY(0); }
                30% { transform: translateY(-10px); }
            }
        </style>
    </head>
    <body>
        <div class="chat-container">
            <div class="chat-header">
                <?php if ($funnel['logo_url']): ?>
                    <img src="<?php echo sanitize($funnel['logo_url']); ?>" alt="Logo" style="max-height: 60px; margin-bottom: 10px;">
                <?php endif; ?>
                <h4><?php echo sanitize($funnel['name']); ?></h4>
            </div>
            
            <div class="chat-messages" id="chatMessages">
                <!-- Mensagens serão adicionadas aqui via JavaScript -->
            </div>
            
            <div class="chat-input" id="chatInput" style="display: none;">
                <div class="input-group">
                    <input type="text" class="form-control" id="messageInput" placeholder="Digite sua resposta...">
                    <button class="btn btn-send" onclick="sendMessage()">Enviar</button>
                </div>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
            const funnelSteps = <?php echo json_encode($steps); ?>;
            let currentStep = 0;
            let userResponses = {};
            
            function addMessage(text, isBot = true, isTyping = false) {
                const messagesContainer = document.getElementById('chatMessages');
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${isBot ? 'bot' : 'user'}`;
                
                if (isTyping) {
                    messageDiv.innerHTML = `
                        <div class="typing">
                            <div class="typing-dots">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>
                    `;
                } else {
                    messageDiv.innerHTML = `<div class="message-bubble">${text}</div>`;
                }
                
                messagesContainer.appendChild(messageDiv);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                return messageDiv;
            }
            
            function showTyping() {
                return addMessage('', true, true);
            }
            
            function removeTyping(typingElement) {
                if (typingElement && typingElement.parentNode) {
                    typingElement.parentNode.removeChild(typingElement);
                }
            }
            
            function processStep(stepIndex) {
                if (stepIndex >= funnelSteps.length) {
                    finalizeFunnel();
                    return;
                }
                
                const step = funnelSteps[stepIndex];
                const typingIndicator = showTyping();
                
                setTimeout(() => {
                    removeTyping(typingIndicator);
                    addMessage(step.question_text);
                    showStepInput(step);
                }, 1500);
            }
            
            function showStepInput(step) {
                const inputContainer = document.getElementById('chatInput');
                
                if (step.type === 'multiple_choice') {
                    const options = JSON.parse(step.options || '{}');
                    const optionsHtml = Object.entries(options).map(([key, value]) => 
                        `<button class="option-btn" onclick="selectOption('${key}', '${value}')">${value}</button>`
                    ).join('');
                    
                    inputContainer.innerHTML = `<div class="option-buttons">${optionsHtml}</div>`;
                    inputContainer.style.display = 'block';
                } else {
                    inputContainer.innerHTML = `
                        <div class="input-group">
                            <input type="text" class="form-control" id="messageInput" placeholder="Digite sua resposta..." 
                                   ${step.type === 'email' ? 'type="email"' : ''}
                                   ${step.type === 'phone' ? 'type="tel"' : ''}
                                   ${step.type === 'date' ? 'type="date"' : ''}>
                            <button class="btn btn-send" onclick="sendMessage()">Enviar</button>
                        </div>
                    `;
                    inputContainer.style.display = 'block';
                    
                    setTimeout(() => {
                        document.getElementById('messageInput').focus();
                    }, 100);
                }
            }
            
            function selectOption(key, value) {
                addMessage(value, false);
                userResponses[currentStep] = { key, value };
                currentStep++;
                
                document.getElementById('chatInput').style.display = 'none';
                
                setTimeout(() => {
                    processStep(currentStep);
                }, 500);
            }
            
            function sendMessage() {
                const input = document.getElementById('messageInput');
                const message = input.value.trim();
                
                if (!message) return;
                
                addMessage(message, false);
                userResponses[currentStep] = message;
                currentStep++;
                
                input.value = '';
                document.getElementById('chatInput').style.display = 'none';
                
                setTimeout(() => {
                    processStep(currentStep);
                }, 500);
            }
            
            function finalizeFunnel() {
                const typingIndicator = showTyping();
                
                setTimeout(() => {
                    removeTyping(typingIndicator);
                    addMessage('🎉 Obrigado! Seus dados foram registrados com sucesso. Em breve entraremos em contato!');
                    
                    // Aqui você pode enviar os dados para o servidor
                    console.log('Respostas coletadas:', userResponses);
                }, 1500);
            }
            
            // Inicializar o chat
            document.addEventListener('DOMContentLoaded', function() {
                setTimeout(() => {
                    processStep(0);
                }, 1000);
            });
            
            // Enviar com Enter
            document.addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && document.getElementById('messageInput')) {
                    sendMessage();
                }
            });
        </script>
    </body>
    </html>
    <?php
    exit;
}

if (!isLoggedIn() && $action !== 'register') {
    $action = 'login';
}

?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AxionLinQ - Sistema SaaS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --bg-primary: #0D0D0D;
            --bg-secondary: #1a1a1a;
            --bg-card: #2a2a2a;
            --neon-purple: #8B5CF6;
            --neon-blue: #0EA5E9;
            --neon-pink: #F43F5E;
            --text-primary: #F1F5F9;
            --text-secondary: #94A3B8;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
            color: var(--text-primary);
            overflow-x: hidden;
        }
        
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 280px;
            background: var(--bg-secondary);
            border-right: 1px solid #333;
            padding: 20px 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .sidebar-logo {
            padding: 0 20px 30px;
            text-align: center;
            border-bottom: 1px solid #333;
            margin-bottom: 30px;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
        }
        
        .sidebar-menu li {
            margin-bottom: 8px;
        }
        
        .sidebar-menu a {
            display: flex;
            align-items: center;
            padding: 15px 20px;
            color: var(--text-secondary);
            text-decoration: none;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        
        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            color: var(--text-primary);
            background: rgba(139, 92, 246, 0.1);
            border-left-color: var(--neon-purple);
        }
        
        .sidebar-menu i {
            margin-right: 12px;
            font-size: 18px;
        }
        
        .main-content {
            margin-left: 280px;
            min-height: 100vh;
            padding: 0;
        }
        
        .topbar {
            background: var(--bg-card);
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 30px;
            border-bottom: 1px solid #333;
            position: sticky;
            top: 0;
            z-index: 999;
        }
        
        .topbar-search {
            flex: 1;
            max-width: 400px;
            margin: 0 20px;
        }
        
        .topbar-search input {
            background: var(--bg-secondary);
            border: 1px solid #444;
            border-radius: 25px;
            padding: 8px 20px;
            color: var(--text-primary);
            width: 100%;
        }
        
        .topbar-user {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .content-area {
            padding: 30px;
        }
        
        .page-header {
            margin-bottom: 30px;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 8px;
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .page-subtitle {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid #333;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue));
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2);
        }
        
        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 15px;
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
        
        .chart-container {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid #333;
            margin-bottom: 30px;
        }
        
        .data-table {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid #333;
        }
        
        .table-dark {
            --bs-table-bg: transparent;
            --bs-table-border-color: #444;
        }
        
        .btn-neon {
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            border: none;
            border-radius: 25px;
            padding: 10px 25px;
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .btn-neon:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.4);
            color: white;
        }
        
        .btn-outline-neon {
            border: 2px solid var(--neon-purple);
            color: var(--neon-purple);
            background: transparent;
            border-radius: 25px;
            padding: 8px 20px;
            transition: all 0.3s ease;
        }
        
        .btn-outline-neon:hover {
            background: var(--neon-purple);
            color: white;
            transform: translateY(-2px);
        }
        
        .form-control-dark {
            background: var(--bg-secondary);
            border: 1px solid #444;
            color: var(--text-primary);
            border-radius: 10px;
        }
        
        .form-control-dark:focus {
            background: var(--bg-secondary);
            border-color: var(--neon-purple);
            color: var(--text-primary);
            box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
        }
        
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
        }
        
        .login-card {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 40px;
            width: 100%;
            max-width: 400px;
            border: 1px solid #333;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-title {
            font-size: 1.8rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 30px;
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .alert-neon {
            background: rgba(244, 63, 94, 0.1);
            border: 1px solid var(--neon-pink);
            color: var(--neon-pink);
            border-radius: 10px;
        }
        
        .modal-dark .modal-content {
            background: var(--bg-card);
            border: 1px solid #333;
            color: var(--text-primary);
        }
        
        .modal-dark .modal-header {
            border-bottom: 1px solid #444;
        }
        
        .modal-dark .modal-footer {
            border-top: 1px solid #444;
        }
        
        .funnel-card {
            background: var(--bg-card);
            border-radius: 15px;
            padding: 20px;
            border: 1px solid #333;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .funnel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue));
        }
        
        .funnel-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
        }
        
        .funnel-status {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .funnel-status.active {
            background: rgba(34, 197, 94, 0.2);
            color: #22c55e;
        }
        
        .funnel-status.inactive {
            background: rgba(156, 163, 175, 0.2);
            color: #9ca3af;
        }
        
        .funnel-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        
        .funnel-metric {
            text-align: center;
        }
        
        .funnel-metric-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--neon-blue);
        }
        
        .funnel-metric-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .responsive-sidebar {
            transform: translateX(-100%);
        }
        
        .responsive-sidebar.show {
            transform: translateX(0);
        }
        
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            
            .sidebar.show {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .content-area {
                padding: 20px;
            }
        }
        
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(139, 92, 246, 0.3);
            border-radius: 50%;
            border-top-color: var(--neon-purple);
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .glow {
            box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .badge-neon {
            background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue));
            color: white;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }
        
        .chat-preview {
            background: var(--bg-secondary);
            border-radius: 15px;
            padding: 20px;
            margin-top: 15px;
            border: 1px solid #444;
        }
        
        .chat-message {
            background: var(--neon-purple);
            border-radius: 15px;
            padding: 10px 15px;
            margin-bottom: 10px;
            max-width: 80%;
            color: white;
            font-size: 0.9rem;
        }
        
        .chat-input-preview {
            background: var(--bg-card);
            border: 1px solid #555;
            border-radius: 20px;
            padding: 8px 15px;
            color: var(--text-secondary);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <?php if ($action === 'login' || $action === 'register'): ?>
        <div class="login-container">
            <div class="login-card">
                <div class="login-logo">
                    <img src="AxionLinQ.png" alt="AxionLinQ" loading="lazy" style="max-width:200px; height:auto;">
                </div>
                
                <?php if ($action === 'login'): ?>
                    <h2 class="login-title">Bem-vindo de volta</h2>
                    
                    <?php if (isset($error)): ?>
                        <div class="alert alert-neon mb-3"><?php echo $error; ?></div>
                    <?php endif; ?>
                    
                    <form method="POST">
                        <input type="hidden" name="action" value="login">
                        
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control form-control-dark" required 
                                   value="demo@axionlinq.com" placeholder="seu@email.com">
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label">Senha</label>
                            <input type="password" name="password" class="form-control form-control-dark" required 
                                   value="123456" placeholder="••••••••">
                        </div>
                        
                        <button type="submit" class="btn btn-neon w-100 mb-3">Entrar</button>
                        
                        <p class="text-center text-secondary">
                            Não tem conta? <a href="?action=register" class="text-decoration-none" style="color: var(--neon-purple);">Cadastre-se</a>
                        </p>
                        
                        <div class="text-center mt-3">
                            <small class="text-secondary">
                                Demo: demo@axionlinq.com / 123456
                            </small>
                        </div>
                    </form>
                    
                <?php else: ?>
                    <h2 class="login-title">Criar conta</h2>
                    
                    <?php if (isset($error)): ?>
                        <div class="alert alert-neon mb-3"><?php echo $error; ?></div>
                    <?php endif; ?>
                    
                    <form method="POST">
                        <input type="hidden" name="action" value="register">
                        
                        <div class="mb-3">
                            <label class="form-label">Nome completo</label>
                            <input type="text" name="name" class="form-control form-control-dark" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Email</label>
                            <input type="email" name="email" class="form-control form-control-dark" required>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">Telefone</label>
                            <input type="tel" name="phone" class="form-control form-control-dark" required>
                        </div>
                        
                        <div class="mb-4">
                            <label class="form-label">Senha</label>
                            <input type="password" name="password" class="form-control form-control-dark" required>
                        </div>
                        
                        <button type="submit" class="btn btn-neon w-100 mb-3">Criar conta</button>
                        
                        <p class="text-center text-secondary">
                            Já tem conta? <a href="?action=login" class="text-decoration-none" style="color: var(--neon-purple);">Faça login</a>
                        </p>
                    </form>
                <?php endif; ?>
            </div>
        </div>
        
    <?php else: ?>
        <!-- Sidebar -->
        <nav class="sidebar" id="sidebar">
            <div class="sidebar-logo">
                <img src="AxionLinQ.png" alt="AxionLinQ" loading="lazy" style="max-width:180px; height:auto;">
            </div>
            
            <ul class="sidebar-menu">
                <li><a href="?action=dashboard" class="<?php echo $action === 'dashboard' ? 'active' : ''; ?>">
                    <i class="bi bi-speedometer2"></i> Dashboard
                </a></li>
                <li><a href="?action=funnels" class="<?php echo $action === 'funnels' ? 'active' : ''; ?>">
                    <i class="bi bi-funnel"></i> Funis
                </a></li>
                <li><a href="?action=clients" class="<?php echo $action === 'clients' ? 'active' : ''; ?>">
                    <i class="bi bi-people"></i> Clientes
                </a></li>
                <li><a href="?action=appointments" class="<?php echo $action === 'appointments' ? 'active' : ''; ?>">
                    <i class="bi bi-calendar-check"></i> Agendamentos
                </a></li>
                <li><a href="?action=marketing" class="<?php echo $action === 'marketing' ? 'active' : ''; ?>">
                    <i class="bi bi-megaphone"></i> Marketing
                </a></li>
                <li><a href="?action=wallet" class="<?php echo $action === 'wallet' ? 'active' : ''; ?>">
                    <i class="bi bi-wallet2"></i> Carteira
                </a></li>
                <li><a href="?action=settings" class="<?php echo $action === 'settings' ? 'active' : ''; ?>">
                    <i class="bi bi-gear"></i> Configurações
                </a></li>
            </ul>
        </nav>
        
        <!-- Main Content -->
        <main class="main-content">
            <!-- Topbar -->
            <header class="topbar">
                <button class="btn btn-outline-neon d-md-none" id="sidebarToggle">
                    <i class="bi bi-list"></i>
                </button>
                
                <div class="topbar-search">
                    <input type="text" placeholder="Pesquisar..." class="form-control form-control-dark">
                </div>
                
                <div class="topbar-user">
                    <span><?php echo sanitize($_SESSION['user_name']); ?></span>
                    <div class="user-avatar">
                        <?php echo strtoupper(substr($_SESSION['user_name'], 0, 1)); ?>
                    </div>
                    <form method="POST" style="display: inline;">
                        <input type="hidden" name="action" value="logout">
                        <button type="submit" class="btn btn-outline-neon btn-sm">
                            <i class="bi bi-box-arrow-right"></i>
                        </button>
                    </form>
                </div>
            </header>
            
            <!-- Content Area -->
            <div class="content-area">
                <?php
                $user = getCurrentUser($pdo);
                
                switch ($action) {
                    case 'dashboard':
                        ?>
                        <div class="page-header">
                            <h1 class="page-title">Dashboard</h1>
                            <p class="page-subtitle">Visão geral do seu negócio</p>
                        </div>
                        
                        <div class="stats-grid" id="statsGrid">
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="bi bi-wallet2" style="color: white; font-size: 24px;"></i>
                                </div>
                                <div class="stat-value" id="balanceValue">
                                    <div class="loading"></div>
                                </div>
                                <div class="stat-label">Saldo da Carteira</div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="bi bi-people" style="color: white; font-size: 24px;"></i>
                                </div>
                                <div class="stat-value" id="clientsValue">
                                    <div class="loading"></div>
                                </div>
                                <div class="stat-label">Total de Clientes</div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="bi bi-calendar-check" style="color: white; font-size: 24px;"></i>
                                </div>
                                <div class="stat-value" id="appointmentsValue">
                                    <div class="loading"></div>
                                </div>
                                <div class="stat-label">Agendamentos</div>
                            </div>
                            
                            <div class="stat-card">
                                <div class="stat-icon">
                                    <i class="bi bi-graph-up" style="color: white; font-size: 24px;"></i>
                                </div>
                                <div class="stat-value" id="revenueValue">
                                    <div class="loading"></div>
                                </div>
                                <div class="stat-label">Receita Hoje</div>
                            </div>
                        </div>
                        
                        <div class="chart-container">
                            <h3 class="mb-4">Receita dos Últimos 7 Dias</h3>
                            <canvas id="revenueChart" height="100"></canvas>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">Próximos Agendamentos</h4>
                                    <div id="upcomingAppointments">
                                        <div class="loading"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">Clientes Recentes</h4>
                                    <div id="recentClients">
                                        <div class="loading"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'funnels':
                        ?>
                        <div class="page-header d-flex justify-content-between align-items-center">
                            <div>
                                <h1 class="page-title">Funis de Atendimento</h1>
                                <p class="page-subtitle">Gerencie seus funis interativos</p>
                            </div>
                            <button class="btn btn-neon" data-bs-toggle="modal" data-bs-target="#createFunnelModal">
                                <i class="bi bi-plus-circle"></i> Novo Funil
                            </button>
                        </div>
                        
                        <div class="row" id="funnelsGrid">
                            <div class="col-12 text-center">
                                <div class="loading"></div>
                            </div>
                        </div>
                        
                        <!-- Modal Criar Funil -->
                        <div class="modal fade modal-dark" id="createFunnelModal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Criar Novo Funil</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="createFunnelForm">
                                            <div class="mb-3">
                                                <label class="form-label">Nome do Funil</label>
                                                <input type="text" name="name" class="form-control form-control-dark" 
                                                       placeholder="Ex: Agendamento Corte Masculino" required>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="form-label">URL Amigável</label>
                                                <input type="text" name="slug" class="form-control form-control-dark" 
                                                       placeholder="Ex: corte-masculino" required>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="col-6">
                                                    <label class="form-label">Cor Primária</label>
                                                    <input type="color" name="primary_color" class="form-control form-control-dark" value="#8B5CF6">
                                                </div>
                                                <div class="col-6">
                                                    <label class="form-label">Cor Secundária</label>
                                                    <input type="color" name="secondary_color" class="form-control form-control-dark" value="#0EA5E9">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-neon" data-bs-dismiss="modal">Cancelar</button>
                                        <button type="button" class="btn btn-neon" onclick="createFunnel()">Criar Funil</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'clients':
                        ?>
                        <div class="page-header">
                            <h1 class="page-title">Clientes</h1>
                            <p class="page-subtitle">Gerencie sua base de clientes</p>
                        </div>
                        
                        <div class="data-table">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h4>Lista de Clientes</h4>
                                <button class="btn btn-neon">
                                    <i class="bi bi-download"></i> Exportar PDF
                                </button>
                            </div>
                            
                            <div class="table-responsive">
                                <table class="table table-dark table-hover">
                                    <thead>
                                        <tr>
                                            <th>Nome</th>
                                            <th>Telefone</th>
                                            <th>Email</th>
                                            <th>Visitas</th>
                                            <th>Cadastro</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="clientsTable">
                                        <tr>
                                            <td colspan="6" class="text-center">
                                                <div class="loading"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'appointments':
                        ?>
                        <div class="page-header d-flex justify-content-between align-items-center">
                            <div>
                                <h1 class="page-title">Agendamentos</h1>
                                <p class="page-subtitle">Gerencie seus horários</p>
                            </div>
                            <button class="btn btn-neon" data-bs-toggle="modal" data-bs-target="#newAppointmentModal">
                                <i class="bi bi-plus-circle"></i> Novo Agendamento
                            </button>
                        </div>
                        
                        <div class="data-table">
                            <div class="table-responsive">
                                <table class="table table-dark table-hover">
                                    <thead>
                                        <tr>
                                            <th>Cliente</th>
                                            <th>Serviço</th>
                                            <th>Data</th>
                                            <th>Horário</th>
                                            <th>Valor</th>
                                            <th>Status</th>
                                            <th>Ações</th>
                                        </tr>
                                    </thead>
                                    <tbody id="appointmentsTable">
                                        <tr>
                                            <td colspan="7" class="text-center">
                                                <div class="loading"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Modal Novo Agendamento -->
                        <div class="modal fade modal-dark" id="newAppointmentModal" tabindex="-1">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Novo Agendamento</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        <form id="newAppointmentForm">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Nome do Cliente</label>
                                                        <input type="text" name="client_name" class="form-control form-control-dark" required>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label class="form-label">Telefone</label>
                                                        <input type="tel" name="client_phone" class="form-control form-control-dark" required>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label class="form-label">Email</label>
                                                        <input type="email" name="client_email" class="form-control form-control-dark">
                                                    </div>
                                                </div>
                                                
                                                <div class="col-md-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Serviço</label>
                                                        <select name="service" class="form-control form-control-dark" required>
                                                            <option value="">Selecione o serviço</option>
                                                            <option value="Corte Masculino">Corte Masculino</option>
                                                            <option value="Corte Feminino">Corte Feminino</option>
                                                            <option value="Barba">Barba</option>
                                                            <option value="Sobrancelha">Sobrancelha</option>
                                                            <option value="Manicure">Manicure</option>
                                                            <option value="Pedicure">Pedicure</option>
                                                        </select>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label class="form-label">Data</label>
                                                        <input type="date" name="date" class="form-control form-control-dark" required>
                                                    </div>
                                                    
                                                    <div class="mb-3">
                                                        <label class="form-label">Horário</label>
                                                        <input type="time" name="time" class="form-control form-control-dark" required>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mb-3">
                                                <label class="form-label">Valor</label>
                                                <input type="number" name="amount" class="form-control form-control-dark" step="0.01" placeholder="0.00" required>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-neon" data-bs-dismiss="modal">Cancelar</button>
                                        <button type="button" class="btn btn-neon" onclick="saveAppointment()">Salvar Agendamento</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'marketing':
                        ?>
                        <div class="page-header">
                            <h1 class="page-title">Marketing</h1>
                            <p class="page-subtitle">Campanhas e automações</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">WhatsApp Web</h4>
                                    <p class="text-secondary mb-3">Envie mensagens automáticas para seus clientes</p>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Mensagem de Confirmação</label>
                                        <textarea class="form-control form-control-dark" rows="3" 
                                                  placeholder="Olá {nome}! Seu agendamento está confirmado para {data} às {hora}.">Olá {nome}! Seu agendamento está confirmado para {data} às {hora}.</textarea>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Mensagem de Agradecimento</label>
                                        <textarea class="form-control form-control-dark" rows="3" 
                                                  placeholder="Obrigado por confiar em nosso trabalho! Avalie nosso serviço...">Obrigado por confiar em nosso trabalho! Avalie nosso serviço...</textarea>
                                    </div>
                                    
                                    <button class="btn btn-neon">
                                        <i class="bi bi-whatsapp"></i> Configurar WhatsApp
                                    </button>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">Campanhas</h4>
                                    <p class="text-secondary mb-3">Crie campanhas promocionais</p>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Título da Campanha</label>
                                        <input type="text" class="form-control form-control-dark" placeholder="Ex: Promoção de Verão">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Mensagem</label>
                                        <textarea class="form-control form-control-dark" rows="4" 
                                                  placeholder="Digite a mensagem da campanha..."></textarea>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Imagem</label>
                                        <input type="file" class="form-control form-control-dark" accept="image/*">
                                    </div>
                                    
                                    <button class="btn btn-neon">
                                        <i class="bi bi-send"></i> Enviar Campanha
                                    </button>
                                </div>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'wallet':
                        ?>
                        <div class="page-header">
                            <h1 class="page-title">Carteira</h1>
                            <p class="page-subtitle">Gerencie seus pagamentos e saques</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="stat-card glow">
                                    <div class="stat-icon">
                                        <i class="bi bi-wallet2" style="color: white; font-size: 24px;"></i>
                                    </div>
                                    <div class="stat-value"><?php echo formatCurrency($user['balance']); ?></div>
                                    <div class="stat-label">Saldo Disponível</div>
                                </div>
                            </div>
                            
                            <div class="col-md-8">
                                <div class="data-table">
                                    <h4 class="mb-3">Solicitar Saque</h4>
                                    
                                    <form id="withdrawalForm">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Valor do Saque</label>
                                                    <input type="number" name="amount" class="form-control form-control-dark" 
                                                           step="0.01" max="<?php echo $user['balance']; ?>" placeholder="0.00" required>
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <label class="form-label">Tipo de Chave Pix</label>
                                                    <select name="pix_key_type" class="form-control form-control-dark" required>
                                                        <option value="">Selecione o tipo</option>
                                                        <option value="cpf">CPF</option>
                                                        <option value="email">Email</option>
                                                        <option value="phone">Telefone</option>
                                                        <option value="random">Chave Aleatória</option>
                                                    </select>
                                                </div>
                                            </div>
                                            
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label">Chave Pix</label>
                                                    <input type="text" name="pix_key" class="form-control form-control-dark" 
                                                           placeholder="Digite sua chave Pix" required>
                                                </div>
                                                
                                                <div class="mb-3">
                                                    <button type="button" class="btn btn-neon" onclick="requestWithdrawal()">
                                                        <i class="bi bi-cash-coin"></i> Solicitar Saque
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="data-table mt-4">
                            <h4 class="mb-3">Histórico de Transações</h4>
                            
                            <div class="table-responsive">
                                <table class="table table-dark table-hover">
                                    <thead>
                                        <tr>
                                            <th>Data</th>
                                            <th>Tipo</th>
                                            <th>Descrição</th>
                                            <th>Valor</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>10/09/2025</td>
                                            <td><span class="badge badge-neon">Entrada</span></td>
                                            <td>Pagamento - Corte Masculino</td>
                                            <td class="text-success">+ R$ 50,00</td>
                                            <td><span class="badge bg-success">Confirmado</span></td>
                                        </tr>
                                        <tr>
                                            <td>09/09/2025</td>
                                            <td><span class="badge bg-warning">Saque</span></td>
                                            <td>Saque via Pix</td>
                                            <td class="text-danger">- R$ 200,00</td>
                                            <td><span class="badge bg-success">Processado</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    case 'settings':
                        ?>
                        <div class="page-header">
                            <h1 class="page-title">Configurações</h1>
                            <p class="page-subtitle">Personalize seu perfil e sistema</p>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">Perfil</h4>
                                    
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">Nome Completo</label>
                                            <input type="text" class="form-control form-control-dark" value="<?php echo sanitize($user['name']); ?>">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Email</label>
                                            <input type="email" class="form-control form-control-dark" value="<?php echo sanitize($user['email']); ?>">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Telefone</label>
                                            <input type="tel" class="form-control form-control-dark" value="<?php echo sanitize($user['phone']); ?>">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Avatar</label>
                                            <input type="file" class="form-control form-control-dark" accept="image/*">
                                        </div>
                                        
                                        <button type="submit" class="btn btn-neon">
                                            <i class="bi bi-check-circle"></i> Salvar Perfil
                                        </button>
                                    </form>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="data-table">
                                    <h4 class="mb-3">Integração NikaPay</h4>
                                    
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">Token</label>
                                            <input type="text" class="form-control form-control-dark" 
                                                   value="<?php echo sanitize($user['nikapay_token']); ?>" readonly>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Secret</label>
                                            <input type="password" class="form-control form-control-dark" 
                                                   value="<?php echo sanitize($user['nikapay_secret']); ?>" readonly>
                                        </div>
                                        
                                        <div class="alert alert-info">
                                            <i class="bi bi-info-circle"></i>
                                            Tokens configurados para ambiente de testes
                                        </div>
                                    </form>
                                </div>
                                
                                <div class="data-table mt-4">
                                    <h4 class="mb-3">Segurança</h4>
                                    
                                    <form>
                                        <div class="mb-3">
                                            <label class="form-label">Senha Atual</label>
                                            <input type="password" class="form-control form-control-dark">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Nova Senha</label>
                                            <input type="password" class="form-control form-control-dark">
                                        </div>
                                        
                                        <div class="mb-3">
                                            <label class="form-label">Confirmar Nova Senha</label>
                                            <input type="password" class="form-control form-control-dark">
                                        </div>
                                        
                                        <button type="submit" class="btn btn-neon">
                                            <i class="bi bi-shield-check"></i> Alterar Senha
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <?php
                        break;
                        
                    default:
                        echo '<h1>Página não encontrada</h1>';
                        break;
                }
                ?>
            </div>
        </main>
    <?php endif; ?>
    
    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    
    <script>
        // Toggle sidebar on mobile
        document.getElementById('sidebarToggle')?.addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('show');
        });
        
        // Funções globais
        function formatCurrency(value) {
            return 'R$ ' + parseFloat(value).toLocaleString('pt-BR', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }
        
        function formatDate(dateString) {
            return new Date(dateString).toLocaleDateString('pt-BR');
        }
        
        function formatDateTime(dateString) {
            return new Date(dateString).toLocaleString('pt-BR');
        }
        
        function showLoading(elementId) {
            document.getElementById(elementId).innerHTML = '<div class="loading"></div>';
        }
        
        function showSuccess(message) {
            // Implementar toast/notificação de sucesso
            alert('Sucesso: ' + message);
        }
        
        function showError(message) {
            // Implementar toast/notificação de erro
            alert('Erro: ' + message);
        }
        
        // Dashboard específico
        <?php if ($action === 'dashboard'): ?>
        let revenueChart;
        
        function loadDashboardData() {
            fetch('?ajax=dashboard_data')
                .then(response => response.json())
                .then(data => {
                    // Atualizar cards
                    document.getElementById('balanceValue').textContent = formatCurrency(data.balance);
                    document.getElementById('clientsValue').textContent = data.totalClients;
                    document.getElementById('appointmentsValue').textContent = data.totalAppointments;
                    document.getElementById('revenueValue').textContent = formatCurrency(data.todayRevenue);
                    
                    // Atualizar gráfico
                    updateRevenueChart(data.revenueData);
                })
                .catch(error => {
                    console.error('Erro ao carregar dados:', error);
                });
        }
        
        function updateRevenueChart(data) {
            const ctx = document.getElementById('revenueChart').getContext('2d');
            
            if (revenueChart) {
                revenueChart.destroy();
            }
            
            const labels = [];
            for (let i = 6; i >= 0; i--) {
                const date = new Date();
                date.setDate(date.getDate() - i);
                labels.push(date.toLocaleDateString('pt-BR', { weekday: 'short' }));
            }
            
            revenueChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Receita',
                        data: data,
                        borderColor: '#8B5CF6',
                        backgroundColor: 'rgba(139, 92, 246, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#8B5CF6',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#333'
                            },
                            ticks: {
                                color: '#F1F5F9',
                                callback: function(value) {
                                    return formatCurrency(value);
                                }
                            }
                        },
                        x: {
                            grid: {
                                color: '#333'
                            },
                            ticks: {
                                color: '#F1F5F9'
                            }
                        }
                    }
                }
            });
        }
        
        // Carregar dados do dashboard
        loadDashboardData();
        
        // Atualizar a cada 30 segundos
        setInterval(loadDashboardData, 30000);
        <?php endif; ?>
        
        // Funis específico
        <?php if ($action === 'funnels'): ?>
        function loadFunnels() {
            fetch('?ajax=funnels_list')
                .then(response => response.json())
                .then(funnels => {
                    const grid = document.getElementById('funnelsGrid');
                    
                    if (funnels.length === 0) {
                        grid.innerHTML = `
                            <div class="col-12 text-center">
                                <div class="py-5">
                                    <i class="bi bi-funnel" style="font-size: 4rem; color: var(--text-secondary);"></i>
                                    <h4 class="mt-3 text-secondary">Nenhum funil criado</h4>
                                    <p class="text-secondary">Crie seu primeiro funil para começar a captar clientes</p>
                                    <button class="btn btn-neon" data-bs-toggle="modal" data-bs-target="#createFunnelModal">
                                        <i class="bi bi-plus-circle"></i> Criar Primeiro Funil
                                    </button>
                                </div>
                            </div>
                        `;
                        return;
                    }
                    
                    grid.innerHTML = funnels.map(funnel => `
                        <div class="col-md-6 col-lg-4 mb-4">
                            <div class="funnel-card">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <h5 class="mb-0">${funnel.name}</h5>
                                    <span class="funnel-status ${funnel.active ? 'active' : 'inactive'}">
                                        ${funnel.active ? 'Ativo' : 'Inativo'}
                                    </span>
                                </div>
                                
                                <p class="text-secondary mb-3">
                                    <i class="bi bi-link-45deg"></i> /f/${funnel.id}/${funnel.slug}
                                </p>
                                
                                <div class="funnel-metrics">
                                    <div class="funnel-metric">
                                        <div class="funnel-metric-value">0</div>
                                        <div class="funnel-metric-label">Acessos</div>
                                    </div>
                                    <div class="funnel-metric">
                                        <div class="funnel-metric-value">0%</div>
                                        <div class="funnel-metric-label">Conversão</div>
                                    </div>
                                    <div class="funnel-metric">
                                        <div class="funnel-metric-value">R$ 0</div>
                                        <div class="funnel-metric-label">Receita</div>
                                    </div>
                                </div>
                                
                                <div class="mt-3 d-flex gap-2">
                                    <button class="btn btn-outline-neon btn-sm" onclick="editFunnel(${funnel.id})">
                                        <i class="bi bi-pencil"></i> Editar
                                    </button>
                                    <button class="btn btn-outline-neon btn-sm" onclick="previewFunnel(${funnel.id}, '${funnel.slug}')">
                                        <i class="bi bi-eye"></i> Visualizar
                                    </button>
                                    <button class="btn btn-outline-neon btn-sm" onclick="copyFunnelLink(${funnel.id}, '${funnel.slug}')">
                                        <i class="bi bi-copy"></i> Copiar Link
                                    </button>
                                </div>
                            </div>
                        </div>
                    `).join('');
                })
                .catch(error => {
                    console.error('Erro ao carregar funis:', error);
                });
        }
        
        function createFunnel() {
            const form = document.getElementById('createFunnelForm');
            const formData = new FormData(form);
            formData.append('action', 'create_funnel');
            
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('createFunnelModal')).hide();
                    form.reset();
                    loadFunnels();
                    showSuccess('Funil criado com sucesso!');
                } else {
                    showError('Erro ao salvar agendamento');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showError('Erro ao salvar agendamento');
            });
        }
        
        function editAppointment(id) {
            // Implementar edição de agendamento
            alert('Edição de agendamento em desenvolvimento');
        }
        
        // Carregar agendamentos
        loadAppointments();
        <?php endif; ?>
        
        // Carteira específico
        <?php if ($action === 'wallet'): ?>
        function requestWithdrawal() {
            const form = document.getElementById('withdrawalForm');
            const formData = new FormData(form);
            formData.append('action', 'request_withdrawal');
            
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    form.reset();
                    showSuccess('Saque solicitado com sucesso!');
                    // Recarregar página para atualizar saldo
                    setTimeout(() => {
                        location.reload();
                    }, 1500);
                } else {
                    showError(data.message || 'Erro ao solicitar saque');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showError('Erro ao solicitar saque');
            });
        }
        <?php endif; ?>
        
        // Auto-completar slug no modal de criar funil
        document.querySelector('input[name="name"]')?.addEventListener('input', function() {
            const slugInput = document.querySelector('input[name="slug"]');
            if (slugInput && !slugInput.dataset.userModified) {
                const slug = this.value
                    .toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-')
                    .replace(/^-|-$/g, '');
                slugInput.value = slug;
            }
        });
        
        document.querySelector('input[name="slug"]')?.addEventListener('input', function() {
            this.dataset.userModified = 'true';
        });
        
        // Definir data mínima como hoje
        document.querySelectorAll('input[type="date"]').forEach(input => {
            const today = new Date().toISOString().split('T')[0];
            input.min = today;
        });
        
        // Máscaras de input
        document.querySelectorAll('input[type="tel"]').forEach(input => {
            input.addEventListener('input', function() {
                let value = this.value.replace(/\D/g, '');
                if (value.length <= 11) {
                    value = value.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
                    if (value.length < 14) {
                        value = value.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
                    }
                }
                this.value = value;
            });
        });
        
        // Animações e efeitos
        document.addEventListener('DOMContentLoaded', function() {
            // Adicionar classe fade-in aos cards
            document.querySelectorAll('.stat-card, .data-table, .funnel-card').forEach((element, index) => {
                setTimeout(() => {
                    element.classList.add('fade-in');
                }, index * 100);
            });
            
            // Efeito hover nos cards
            document.querySelectorAll('.stat-card').forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.classList.add('pulse');
                });
                
                card.addEventListener('mouseleave', function() {
                    this.classList.remove('pulse');
                });
            });
        });
        
        // Service Worker para funcionalidade offline (opcional)
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('/sw.js').then(function(registration) {
                    console.log('ServiceWorker registrado com sucesso');
                }, function(err) {
                    console.log('ServiceWorker falhou ao registrar');
                });
            });
        }
        
        // Notificações push (placeholder)
        function requestNotificationPermission() {
            if ('Notification' in window && 'serviceWorker' in navigator) {
                Notification.requestPermission().then(function(permission) {
                    if (permission === 'granted') {
                        console.log('Permissão de notificação concedida');
                    }
                });
            }
        }
        
        // Solicitar permissão após 5 segundos (não intrusivo)
        setTimeout(requestNotificationPermission, 5000);
        
        // Função para simular pagamento Pix (para demonstração)
        function simulatePixPayment(amount, description) {
            return {
                qrCode: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==',
                pixKey: '00020126330014BR.GOV.BCB.PIX0111123456789525204000053039865802BR5925Prestador AxionLinQ6009SAO PAULO62070503***6304ABCD',
                status: 'pending',
                externalId: 'px_' + Date.now()
            };
        }
        
        // Função para verificar status do pagamento (simulação)
        function checkPaymentStatus(externalId) {
            // Simular confirmação após 30 segundos
            setTimeout(() => {
                console.log('Pagamento confirmado:', externalId);
                // Aqui você atualizaria a interface para mostrar que o pagamento foi confirmado
            }, 30000);
        }
        
        // Integração com WhatsApp Web (placeholder)
        function sendWhatsAppMessage(phone, message) {
            const encodedMessage = encodeURIComponent(message);
            const cleanPhone = phone.replace(/\D/g, '');
            const url = `https://web.whatsapp.com/send?phone=55${cleanPhone}&text=${encodedMessage}`;
            window.open(url, '_blank');
        }
        
        // Função para exportar dados em PDF (placeholder)
        function exportToPDF(data, filename) {
            // Aqui você implementaria a geração real de PDF
            console.log('Exportando para PDF:', filename, data);
            alert('Funcionalidade de exportação PDF em desenvolvimento');
        }
        
        // Validação de formulários em tempo real
        document.querySelectorAll('form input[required]').forEach(input => {
            input.addEventListener('blur', function() {
                if (!this.value.trim()) {
                    this.classList.add('is-invalid');
                } else {
                    this.classList.remove('is-invalid');
                    this.classList.add('is-valid');
                }
            });
        });
        
        // Função para formatar números de telefone
        function formatPhone(phone) {
            const cleaned = phone.replace(/\D/g, '');
            if (cleaned.length === 11) {
                return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
            } else if (cleaned.length === 10) {
                return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
            }
            return phone;
        }
        
        // Função para validar email
        function isValidEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
        
        // Função para validar CPF
        function isValidCPF(cpf) {
            cpf = cpf.replace(/\D/g, '');
            if (cpf.length !== 11 || /^(\d)\1{10}$/.test(cpf)) return false;
            
            let sum = 0;
            for (let i = 0; i < 9; i++) {
                sum += parseInt(cpf.charAt(i)) * (10 - i);
            }
            let remainder = (sum * 10) % 11;
            if (remainder === 10 || remainder === 11) remainder = 0;
            if (remainder !== parseInt(cpf.charAt(9))) return false;
            
            sum = 0;
            for (let i = 0; i < 10; i++) {
                sum += parseInt(cpf.charAt(i)) * (11 - i);
            }
            remainder = (sum * 10) % 11;
            if (remainder === 10 || remainder === 11) remainder = 0;
            return remainder === parseInt(cpf.charAt(10));
        }
        
        // Auto-save para formulários longos
        function autoSaveForm(formId) {
            const form = document.getElementById(formId);
            if (!form) return;
            
            const inputs = form.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.addEventListener('change', function() {
                    const data = new FormData(form);
                    localStorage.setItem(`autosave_${formId}`, JSON.stringify(Object.fromEntries(data)));
                });
            });
            
            // Restaurar dados salvos
            const savedData = localStorage.getItem(`autosave_${formId}`);
            if (savedData) {
                const data = JSON.parse(savedData);
                Object.keys(data).forEach(key => {
                    const input = form.querySelector(`[name="${key}"]`);
                    if (input) input.value = data[key];
                });
            }
        }
        
        // Implementar auto-save nos formulários principais
        autoSaveForm('createFunnelForm');
        autoSaveForm('newAppointmentForm');
        autoSaveForm('withdrawalForm');
        
        // Easter egg - Konami Code
        let konamiCode = [];
        const konamiSequence = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
        
        document.addEventListener('keydown', function(e) {
            konamiCode.push(e.keyCode);
            if (konamiCode.length > konamiSequence.length) {
                konamiCode.shift();
            }
            
            if (konamiCode.length === konamiSequence.length && 
                konamiCode.every((code, index) => code === konamiSequence[index])) {
                
                // Ativar modo desenvolvedor
                document.body.style.background = 'linear-gradient(45deg, #ff0080, #00ff80, #8000ff, #ff8000)';
                document.body.style.backgroundSize = '400% 400%';
                document.body.style.animation = 'rainbow 2s ease infinite';
                
                // Adicionar CSS da animação
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes rainbow {
                        0% { background-position: 0% 50%; }
                        50% { background-position: 100% 50%; }
                        100% { background-position: 0% 50%; }
                    }
                `;
                document.head.appendChild(style);
                
                setTimeout(() => {
                    location.reload();
                }, 5000);
                
                console.log('🎉 Easter egg ativado! Modo desenvolvedor ON');
            }
        });
        
        // Performance monitoring
        window.addEventListener('load', function() {
            const perfData = performance.timing;
            const pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
            console.log(`Tempo de carregamento da página: ${pageLoadTime}ms`);
            
            // Enviar métricas para analytics (placeholder)
            if (pageLoadTime > 3000) {
                console.warn('Página carregando lentamente');
            }
        });
        
        // Detecção de conexão
        window.addEventListener('online', function() {
            console.log('Conexão restaurada');
            document.querySelectorAll('.offline-indicator').forEach(el => el.remove());
        });
        
        window.addEventListener('offline', function() {
            console.log('Conexão perdida');
            const indicator = document.createElement('div');
            indicator.className = 'offline-indicator';
            indicator.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: #f43f5e;
                color: white;
                text-align: center;
                padding: 10px;
                z-index: 9999;
            `;
            indicator.textContent = 'Sem conexão com a internet';
            document.body.appendChild(indicator);
        });
        
        console.log('🚀 AxionLinQ Sistema carregado com sucesso!');
        console.log('💜 Desenvolvido com tecnologias modernas');
        console.log('🎯 Sistema SaaS completo para prestadores de serviços');
    </script>
    
    <!-- Callbacks/Webhooks (simulação) -->
    <?php
    // Webhook de callback para pagamentos (NikaPay)
    if (isset($_GET['callback']) && $_GET['callback'] === 'deposit') {
        header('Content-Type: application/json');
        
        $json = file_get_contents('php://input');
        $data = json_decode($json, true);
        
        if ($data && isset($data['status']) && $data['status'] === 'paid') {
            // Atualizar status do pagamento no banco
            $stmt = $pdo->prepare("UPDATE payments SET status = 'paid' WHERE external_id = ?");
            $stmt->execute([$data['external_id']]);
            
            // Atualizar saldo do usuário
            $stmt = $pdo->prepare("
                UPDATE users SET balance = balance + ? 
                WHERE id = (SELECT user_id FROM payments WHERE external_id = ?)
            ");
            $stmt->execute([$data['amount'], $data['external_id']]);
            
            // Confirmar agendamento se existir
            $stmt = $pdo->prepare("
                UPDATE appointments SET status = 'confirmed' 
                WHERE payment_id = ?
            ");
            $stmt->execute([$data['external_id']]);
            
            echo json_encode(['status' => 'success']);
        } else {
            echo json_encode(['status' => 'error']);
        }
        exit;
    }
    
    // Webhook de callback para saques (NikaPay)
    if (isset($_GET['callback']) && $_GET['callback'] === 'withdrawal') {
        header('Content-Type: application/json');
        
        $json = file_get_contents('php://input');
        $data = json_decode($json, true);
        
        if ($data && isset($data['status'])) {
            $stmt = $pdo->prepare("UPDATE withdrawals SET status = ? WHERE external_id = ?");
            $stmt->execute([$data['status'], $data['external_id']]);
            
            echo json_encode(['status' => 'success']);
        } else {
            echo json_encode(['status' => 'error']);
        }
        exit;
    }
    ?>
    
    <!-- PWA Manifest -->
    <script>
        // Adicionar manifest dinamicamente
        const manifest = {
            "name": "AxionLinQ",
            "short_name": "AxionLinQ",
            "description": "Sistema SaaS para prestadores de serviços",
            "start_url": "/",
            "display": "standalone",
            "background_color": "#0D0D0D",
            "theme_color": "#8B5CF6",
            "icons": [
                {
                    "src": "AxionLinQ.png",
                    "sizes": "192x192",
                    "type": "image/png"
                }
            ]
        };
        
        const manifestBlob = new Blob([JSON.stringify(manifest)], {type: 'application/json'});
        const manifestURL = URL.createObjectURL(manifestBlob);
        
        const link = document.createElement('link');
        link.rel = 'manifest';
        link.href = manifestURL;
        document.head.appendChild(link);
    </script>
    
    <!-- Meta tags PWA -->
    <meta name="theme-color" content="#8B5CF6">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="AxionLinQ">
    
    <!-- Preload de recursos críticos -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" as="style">
    
    <!-- DNS Prefetch para CDNs -->
    <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
    <link rel="dns-prefetch" href="//fonts.googleapis.com">
    <link rel="dns-prefetch" href="//app.nikapay.com.br">
    
</body>
</html>Erro ao criar funil');
                }
            })
            .catch(error => {
                console.error('Erro:', error);
                showError('Erro ao criar funil');
            });
        }
        
        function editFunnel(id) {
            // Implementar editor de funil
            alert('Editor de funil em desenvolvimento');
        }
        
        function previewFunnel(id, slug) {
            window.open(`?f=${id}/${slug}`, '_blank');
        }
        
        function copyFunnelLink(id, slug) {
            const link = `${window.location.origin}${window.location.pathname}?f=${id}/${slug}`;
            navigator.clipboard.writeText(link).then(() => {
                showSuccess('Link copiado para a área de transferência!');
            });
        }
        
        // Carregar funis
        loadFunnels();
        <?php endif; ?>
        
        // Clientes específico
        <?php if ($action === 'clients'): ?>
        function loadClients() {
            fetch('?ajax=clients_list')
                .then(response => response.json())
                .then(clients => {
                    const tbody = document.getElementById('clientsTable');
                    
                    if (clients.length === 0) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="6" class="text-center py-4">
                                    <i class="bi bi-people" style="font-size: 3rem; color: var(--text-secondary);"></i>
                                    <p class="mt-2 text-secondary">Nenhum cliente cadastrado</p>
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    
                    tbody.innerHTML = clients.map(client => `
                        <tr>
                            <td>${client.name}</td>
                            <td>${client.phone || '-'}</td>
                            <td>${client.email || '-'}</td>
                            <td><span class="badge badge-neon">${client.visits}</span></td>
                            <td>${formatDate(client.created_at)}</td>
                            <td>
                                <button class="btn btn-outline-neon btn-sm" onclick="viewClient(${client.id})">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </td>
                        </tr>
                    `).join('');
                })
                .catch(error => {
                    console.error('Erro ao carregar clientes:', error);
                });
        }
        
        function viewClient(id) {
            // Implementar visualização detalhada do cliente
            alert('Visualização de cliente em desenvolvimento');
        }
        
        // Carregar clientes
        loadClients();
        <?php endif; ?>
        
        // Agendamentos específico
        <?php if ($action === 'appointments'): ?>
        function loadAppointments() {
            fetch('?ajax=appointments_list')
                .then(response => response.json())
                .then(appointments => {
                    const tbody = document.getElementById('appointmentsTable');
                    
                    if (appointments.length === 0) {
                        tbody.innerHTML = `
                            <tr>
                                <td colspan="7" class="text-center py-4">
                                    <i class="bi bi-calendar-check" style="font-size: 3rem; color: var(--text-secondary);"></i>
                                    <p class="mt-2 text-secondary">Nenhum agendamento encontrado</p>
                                </td>
                            </tr>
                        `;
                        return;
                    }
                    
                    tbody.innerHTML = appointments.map(appointment => {
                        let statusBadge = '';
                        switch(appointment.status) {
                            case 'confirmed':
                                statusBadge = '<span class="badge bg-success">Confirmado</span>';
                                break;
                            case 'pending':
                                statusBadge = '<span class="badge bg-warning">Pendente</span>';
                                break;
                            case 'cancelled':
                                statusBadge = '<span class="badge bg-danger">Cancelado</span>';
                                break;
                            default:
                                statusBadge = '<span class="badge bg-secondary">Desconhecido</span>';
                        }
                        
                        return `
                            <tr>
                                <td>
                                    <div>
                                        <strong>${appointment.client_name}</strong>
                                        <br><small class="text-secondary">${appointment.client_phone}</small>
                                    </div>
                                </td>
                                <td>${appointment.service}</td>
                                <td>${formatDate(appointment.appointment_date)}</td>
                                <td>${appointment.appointment_time}</td>
                                <td>${formatCurrency(appointment.amount)}</td>
                                <td>${statusBadge}</td>
                                <td>
                                    <button class="btn btn-outline-neon btn-sm" onclick="editAppointment(${appointment.id})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    }).join('');
                })
                .catch(error => {
                    console.error('Erro ao carregar agendamentos:', error);
                });
        }
        
        function saveAppointment() {
            const form = document.getElementById('newAppointmentForm');
            const formData = new FormData(form);
            formData.append('action', 'save_appointment');
            
            fetch('', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('newAppointmentModal')).hide();
                    form.reset();
                    loadAppointments();
                    showSuccess('Agendamento salvo com sucesso!');
                } else {
                    showError('