<?php
header('Content-Type: text/html; charset=UTF-8');
mb_internal_encoding('UTF-8');
session_start();

// Si ya está logueado como demo, redirigir al dashboard demo
if (isset($_SESSION['demo_user']) && $_SESSION['demo_user'] === true) {
    header("Location: dashboard_demo.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo - TecnoTrack</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-dark: #050a10;
            --cyan-glow: #00f2ff;
            --glass-bg: rgba(10, 25, 47, 0.7);
            --glass-border: rgba(0, 242, 255, 0.2);
            --text-main: #e6f1ff;
        }

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

        body {
            font-family: 'Outfit', sans-serif;
            background: var(--bg-dark);
            background-image: radial-gradient(circle at 50% 50%, rgba(0, 242, 255, 0.05) 0%, transparent 60%);
            color: var(--text-main);
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
        }

        .demo-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .demo-card {
            background: var(--glass-bg);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid var(--glass-border);
            width: 100%;
            max-width: 450px;
            text-align: center;
            backdrop-filter: blur(10px);
            box-shadow: 0 0 50px rgba(0, 242, 255, 0.1);
            animation: float 6s ease-in-out infinite;
        }

        .demo-badge {
            background: rgba(0, 242, 255, 0.2);
            border: 1px solid var(--cyan-glow);
            color: var(--cyan-glow);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: inline-block;
            margin-bottom: 20px;
        }

        h1 {
            color: var(--cyan-glow);
            font-weight: 800;
            letter-spacing: 2px;
            margin-bottom: 10px;
            text-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
        }

        p.subtitle {
            color: #8892b0;
            font-size: 0.9rem;
            margin-bottom: 30px;
        }

        .demo-credentials {
            background: rgba(0, 242, 255, 0.05);
            border: 1px dashed var(--glass-border);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 25px;
            text-align: left;
        }

        .demo-credentials p {
            color: var(--cyan-glow);
            font-size: 0.85rem;
            margin: 5px 0;
            font-weight: 600;
        }

        .demo-credentials span {
            color: #8892b0;
            font-weight: 400;
        }

        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.8rem;
            color: var(--cyan-glow);
            font-weight: 600;
        }

        input {
            width: 100%;
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--glass-border);
            border-radius: 8px;
            color: #fff;
            font-family: inherit;
            transition: all 0.3s;
        }

        input:focus {
            outline: none;
            border-color: var(--cyan-glow);
            box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
        }

        button {
            width: 100%;
            padding: 15px;
            background: rgba(0, 242, 255, 0.1);
            border: 1px solid var(--cyan-glow);
            color: var(--cyan-glow);
            font-weight: 800;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 10px;
        }

        button:hover {
            background: var(--cyan-glow);
            color: var(--bg-dark);
            box-shadow: 0 0 30px rgba(0, 242, 255, 0.4);
        }

        .error-msg {
            color: #ff4d4d;
            font-size: 0.85rem;
            margin-top: 15px;
            min-height: 20px;
            display: none;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }

        #particlesCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background: radial-gradient(circle at 50% 50%, #0a192f 0%, #050a10 100%);
        }
    </style>
</head>
<body>
    <?php include 'header.php'; ?>
    
    <canvas id="particlesCanvas"></canvas>

    <div class="demo-container">
        <div class="demo-card">
            <div class="demo-badge">MODO DEMOSTRACIÓN</div>
            <h1 style="font-size: 1.8rem; line-height: 1.2;">TECNOTRACK DEMO</h1>
            <p class="subtitle" style="color: var(--cyan-glow); opacity: 0.8; font-weight: 600;">
                Vista Previa del Sistema - Sin Datos Reales
            </p>

            <div class="demo-credentials">
                <p>Usuario: <span>Demo</span></p>
                <p>Contraseña: <span>1234</span></p>
            </div>

            <form id="demoForm" onsubmit="handleDemoLogin(event)">
                <div class="input-group">
                    <label>USUARIO</label>
                    <input type="text" id="username" autocomplete="off" value="Demo" required>
                </div>
                <div class="input-group">
                    <label>CLAVE DE ACCESO</label>
                    <input type="password" id="password" value="1234" required>
                </div>

                <button type="submit">INGRESAR A DEMO</button>
                <div id="errorMsg" class="error-msg">Credenciales incorrectas</div>
            </form>
        </div>
    </div>
    
    <?php include 'footer.php'; ?>

    <script>
        async function handleDemoLogin(e) {
            e.preventDefault();
            const user = document.getElementById('username').value.trim();
            const pass = document.getElementById('password').value;

            const errorEl = document.getElementById('errorMsg');
            const btn = e.target.querySelector('button');

            btn.disabled = true;
            btn.textContent = "Verificando...";
            errorEl.style.display = 'none';

            // Validar credenciales de demo
            if (user === 'Demo' && pass === '1234') {
                // Establecer sesión demo
                try {
                    const response = await fetch('api/demo_login.php', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ user: user, pass: pass })
                    });
                    const result = await response.json();
                    if (result.success) {
                        window.location.href = 'dashboard_demo.php';
                    } else {
                        errorEl.textContent = result.message || "Error al iniciar sesión demo";
                        errorEl.style.display = 'block';
                        btn.textContent = "INGRESAR A DEMO";
                        btn.disabled = false;
                    }
                } catch (error) {
                    console.error(error);
                    errorEl.textContent = "Error de conexión";
                    errorEl.style.display = 'block';
                    btn.textContent = "INGRESAR A DEMO";
                    btn.disabled = false;
                }
            } else {
                errorEl.textContent = "Credenciales incorrectas. Use: Demo / 1234";
                errorEl.style.display = 'block';
                btn.textContent = "INGRESAR A DEMO";
                btn.disabled = false;
            }
        }

        // PARTICLE SYSTEM
        const canvas = document.getElementById('particlesCanvas');
        const ctx = canvas.getContext('2d');
        let particles = [];
        const particleCount = 80;
        const connectionDistance = 150;
        const mouse = { x: null, y: null, radius: 150 };

        window.addEventListener('mousemove', (e) => {
            mouse.x = e.x;
            mouse.y = e.y;
        });

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 2 + 1;
                this.speedX = Math.random() * 1 - 0.5;
                this.speedY = Math.random() * 1 - 0.5;
                this.baseX = this.x;
                this.baseY = this.y;
                this.density = (Math.random() * 30) + 1;
            }

            draw() {
                ctx.fillStyle = 'rgba(0, 242, 255, 0.5)';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
                ctx.shadowBlur = 10;
                ctx.shadowColor = 'rgba(0, 242, 255, 0.5)';
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;
                if (this.x > canvas.width || this.x < 0) this.speedX = -this.speedX;
                if (this.y > canvas.height || this.y < 0) this.speedY = -this.speedY;

                let dx = mouse.x - this.x;
                let dy = mouse.y - this.y;
                let distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < mouse.radius) {
                    const forceDirectionX = dx / distance;
                    const forceDirectionY = dy / distance;
                    const force = (mouse.radius - distance) / mouse.radius;
                    const directionX = forceDirectionX * force * this.density;
                    const directionY = forceDirectionY * force * this.density;
                    this.x -= directionX;
                    this.y -= directionY;
                }
            }
        }

        function init() {
            if (!canvas) return;
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            particles = [];
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
        }

        function connect() {
            for (let a = 0; a < particles.length; a++) {
                for (let b = a; b < particles.length; b++) {
                    let dx = particles[a].x - particles[b].x;
                    let dy = particles[a].y - particles[b].y;
                    let distance = Math.sqrt(dx * dx + dy * dy);
                    if (distance < connectionDistance) {
                        let opacity = 1 - (distance / connectionDistance);
                        ctx.strokeStyle = `rgba(0, 242, 255, ${opacity * 0.2})`;
                        ctx.lineWidth = 1;
                        ctx.beginPath();
                        ctx.moveTo(particles[a].x, particles[a].y);
                        ctx.lineTo(particles[b].x, particles[b].y);
                        ctx.stroke();
                    }
                }
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.shadowBlur = 0;
            for (let i = 0; i < particles.length; i++) {
                particles[i].draw();
                particles[i].update();
            }
            connect();
            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', () => {
            init();
        });

        init();
        animate();
    </script>
</body>
</html>

