const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Centro (Sol)
const centroX = canvas.width / 2;
const centroY = canvas.height / 2;

// Órbita
const radioOrbita = 140;

// Movimiento planeta
let angulo = 0;

// Pelota rebotando
let pelota = {
    x: 100,
    y: 50,
    dx: 3,
    dy: 2,
    radio: 12
};

// Estrellas fijas
let estrellas = [];
for (let i = 0; i < 100; i++) {
    estrellas.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height
    });
}

function dibujar() {
    // Fondo espacio
    ctx.fillStyle = "#000814";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // ⭐ Estrellas
    ctx.fillStyle = "white";
    estrellas.forEach(e => {
        ctx.fillRect(e.x, e.y, 2, 2);
    });

    // 🟡 Órbita
    ctx.beginPath();
    ctx.arc(centroX, centroY, radioOrbita, 0, Math.PI * 2);
    ctx.strokeStyle = "rgba(255,255,255,0.3)";
    ctx.setLineDash([5, 5]);
    ctx.stroke();
    ctx.setLineDash([]);

    // ☀️ Sol
    let gradienteSol = ctx.createRadialGradient(
        centroX, centroY, 10,
        centroX, centroY, 50
    );
    gradienteSol.addColorStop(0, "#fff700");
    gradienteSol.addColorStop(1, "#ff8c00");

    ctx.beginPath();
    ctx.arc(centroX, centroY, 40, 0, Math.PI * 2);
    ctx.fillStyle = gradienteSol;
    ctx.fill();

    // 🌍 Tierra (órbita)
    let x = centroX + radioOrbita * Math.cos(angulo);
    let y = centroY + radioOrbita * Math.sin(angulo);

    ctx.beginPath();
    ctx.arc(x, y, 15, 0, Math.PI * 2);
    ctx.fillStyle = "#1e90ff";
    ctx.fill();

    // Continente simple
    ctx.beginPath();
    ctx.arc(x - 5, y - 3, 5, 0, Math.PI * 2);
    ctx.fillStyle = "green";
    ctx.fill();

    angulo += 0.01;

    // 🟠 PELOTA REBOTANDO
    ctx.beginPath();
    ctx.arc(pelota.x, pelota.y, pelota.radio, 0, Math.PI * 2);
    ctx.fillStyle = "orange";
    ctx.fill();

    // Movimiento
    pelota.x += pelota.dx;
    pelota.y += pelota.dy;

    // Rebote en paredes
    if (pelota.x + pelota.radio > canvas.width || pelota.x - pelota.radio < 0) {
        pelota.dx *= -1;
    }
    if (pelota.y + pelota.radio > canvas.height || pelota.y - pelota.radio < 0) {
        pelota.dy *= -1;
    }

    // Texto
    ctx.fillStyle = "white";
    ctx.font = "14px Arial";
    ctx.fillText("Traslación de la Tierra", 10, 20);
    ctx.fillText("Movimiento de rebote", 10, 40);

    requestAnimationFrame(dibujar);
}

dibujar();