document.addEventListener("DOMContentLoaded", () => {

    /* ✍️ TYPING */
    const titulo = document.getElementById("titulo");
    const text = "Grupo Quiroga Cloud";
    let i = 0;

    function type() {
        if (!titulo) return; // ✅ evita error

        if (i < text.length) {
            titulo.innerHTML += text[i];
            i++;
            setTimeout(type, 40);
        } else {
            titulo.innerHTML += '<span class="cursor"></span>';
        }
    }

    if (titulo) type();

    /* 👁 PASSWORD */
    const eye = document.getElementById("eye");
    const pass = document.getElementById("pass");

    if (eye && pass) {
        eye.addEventListener("click", () => {
            if (pass.type === "password") {
                pass.type = "text";
                eye.classList.replace("fa-eye", "fa-eye-slash");
            } else {
                pass.type = "password";
                eye.classList.replace("fa-eye-slash", "fa-eye");
            }
        });
    }

    /* ⏳ BOTON (EVITA DOBLE SUBMIT) */
    const form = document.getElementById("formLogin");
    const btn = document.getElementById("btnLogin");

    if (form && btn) {
        form.addEventListener("submit", () => {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner"></span> Ingresando...';
        });
    }

    /* ✨ PARTICULAS */
    const canvas = document.getElementById("particles");

    if (canvas) {
        const ctx = canvas.getContext("2d");

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        resizeCanvas();
        window.addEventListener("resize", resizeCanvas);

        let particles = [];

        for (let i = 0; i < 80; i++) {
            particles.push({
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                vx: Math.random() - 0.5,
                vy: Math.random() - 0.5
            });
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            particles.forEach(a => {
                a.x += a.vx;
                a.y += a.vy;

                ctx.fillStyle = "#fff";
                ctx.fillRect(a.x, a.y, 2, 2);

                particles.forEach(b => {
                    let d = Math.hypot(a.x - b.x, a.y - b.y);

                    if (d < 100) {
                        ctx.strokeStyle = "rgba(255,255,255,0.1)";
                        ctx.beginPath();
                        ctx.moveTo(a.x, a.y);
                        ctx.lineTo(b.x, b.y);
                        ctx.stroke();
                    }
                });
            });

            requestAnimationFrame(draw);
        }

        draw();
    }

});