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

// Images
const surferImg = new Image();
surferImg.src = "surfer.png"; // Surfer auf Board (PNG)
const coffeeImg = new Image();
coffeeImg.src = "coffee.png"; // Kaffee-Tasse (PNG)

// Player & Coffee
let player = {x: 370, y: 350, width: 60, height: 30};
let coffee = {x: Math.random() * 770, y: 0, width: 40, height: 40, speed: 4, angle: 0};
let score = 0;

// Mouse control
let mouseX = player.x + player.width/2;
canvas.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
});

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

    // Background water
    ctx.fillStyle = "#7ec0ee";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Animated waves
    ctx.fillStyle = "rgba(255,255,255,0.3)";
    for (let i = 0; i < canvas.width; i += 50) {
        ctx.beginPath();
        ctx.arc(i + (Date.now()/50 % 50), 380 + Math.sin(Date.now()/500 + i)*5, 15, 0, Math.PI, true);
        ctx.fill();
    }

    // Surfer tilt based on mouse
    let tilt = (mouseX - (player.x + player.width/2)) / 50; 
    player.x += (mouseX - (player.x + player.width/2)) * 0.1; // smooth follow
    if (player.x < 0) player.x = 0;
    if (player.x > canvas.width - player.width) player.x = canvas.width - player.width;

    if(surferImg.complete) {
        ctx.save();
        ctx.translate(player.x + player.width/2, player.y + player.height/2);
        ctx.rotate(tilt);
        ctx.drawImage(surferImg, -player.width/2, -player.height/2, player.width, player.height);
        ctx.restore();
    } else {
        ctx.fillStyle = "#ff4d6d";
        ctx.fillRect(player.x, player.y, player.width, player.height);
    }

    // Coffee animation
    coffee.y += coffee.speed;
    coffee.angle += 0.1;

    if(coffeeImg.complete) {
        ctx.save();
        ctx.translate(coffee.x + coffee.width/2, coffee.y + coffee.height/2);
        ctx.rotate(coffee.angle);
        ctx.drawImage(coffeeImg, -coffee.width/2, -coffee.height/2, coffee.width, coffee.height);
        ctx.restore();
    } else {
        ctx.fillStyle = "#fff";
        ctx.fillRect(coffee.x, coffee.y, coffee.width, coffee.height);
        ctx.strokeStyle = "#ff4d6d";
        ctx.strokeRect(coffee.x, coffee.y, coffee.width, coffee.height);
    }

    // Collision
    if(coffee.y + coffee.height >= player.y &&
       coffee.x + coffee.width >= player.x &&
       coffee.x <= player.x + player.width) {
        score++;
        coffee.y = 0;
        coffee.x = Math.random() * (canvas.width - coffee.width);
    }

    // Reset if missed
    if(coffee.y > canvas.height) {
        coffee.y = 0;
        coffee.x = Math.random() * (canvas.width - coffee.width);
    }

    // Score
    ctx.fillStyle = "#ff4d6d";
    ctx.font = "22px Arial";
    ctx.fillText("Score: " + score, 10, 30);

    requestAnimationFrame(draw);
}

draw();