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

const centroX = canvas.width / 2;
const centroY = canvas.height / 2;

const radioOrbita = 200;
let angulo = 0;

function dibujarSol() {
    // Degradado radial para el Sol
    let gradiente = ctx.createRadialGradient(
        centroX, centroY, 10,
        centroX, centroY, 50
    );

    gradiente.addColorStop(0, "#ffff00");
    gradiente.addColorStop(0.5, "#ff9900");
    gradiente.addColorStop(1, "#ff3300");

    ctx.beginPath();
    ctx.arc(centroX, centroY, 50, 0, Math.PI * 2);
    ctx.fillStyle = gradiente;
    ctx.fill();
}

function dibujarTierra(x, y) {
    // Océanos
    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = "#1e90ff";
    ctx.fill();

    // Continentes (formas simples)
    ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.arc(x - 5, y - 5, 6, 0, Math.PI * 2);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(x + 6, y + 3, 5, 0, Math.PI * 2);
    ctx.fill();

    // Brillo (efecto luz)
    let brillo = ctx.createRadialGradient(x - 5, y - 5, 2, x, y, 20);
    brillo.addColorStop(0, "rgba(255,255,255,0.6)");
    brillo.addColorStop(1, "rgba(255,255,255,0)");

    ctx.beginPath();
    ctx.arc(x, y, 20, 0, Math.PI * 2);
    ctx.fillStyle = brillo;
    ctx.fill();
}

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

    // Dibujar órbita
    ctx.beginPath();
    ctx.arc(centroX, centroY, radioOrbita, 0, Math.PI * 2);
    ctx.strokeStyle = "white";
    ctx.stroke();

    // Dibujar Sol
    dibujarSol();

    // Movimiento de la Tierra
    let tierraX = centroX + radioOrbita * Math.cos(angulo);
    let tierraY = centroY + radioOrbita * Math.sin(angulo);

    // Dibujar Tierra
    dibujarTierra(tierraX, tierraY);

    // Texto
    ctx.fillStyle = "white";
    ctx.font = "16px Arial";
    ctx.fillText("Sol", centroX - 15, centroY + 70);
    ctx.fillText("Tierra", tierraX - 20, tierraY + 35);

    angulo += 0.01;

    requestAnimationFrame(animar);
}

animar();