Music Challenge Image Generator

function processImage(originalImg, title = "МУЗЫКАЛЬНЫЙ ВЫЗОВ", language = "ru", themeColor = "#1DB954") {
    // Determine language arrays for the challenge prompts
    const promptsRu = [
        "Песня с цветом в названии",
        "Песня с числом в названии",
        "Песня, напоминающая о лете",
        "Песня из вашего детства",
        "Песня, которую нужно слушать громко",
        "Песня, под которую хочется танцевать",
        "Песня для поездки на машине",
        "Песня, которая делает вас счастливым",
        "Песня, которая заставляет грустить",
        "Песня, которую знаете наизусть"
    ];
    
    const promptsEn = [
        "A song with a color in the title",
        "A song with a number in the title",
        "A song that reminds you of summer",
        "A song from your childhood",
        "A song that needs to be played loud",
        "A song that makes you want to dance",
        "A song to drive to",
        "A song that makes you happy",
        "A song that makes you sad",
        "A song you know all the words to"
    ];

    const prompts = language.toLowerCase() === 'en' ? promptsEn : promptsRu;
    
    // Create canvas (Instagram Story resolution)
    const canvas = document.createElement('canvas');
    const width = 1080;
    const height = 1920;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Helper to draw rounded rectangles
    function drawRoundRect(ctx, x, y, w, h, radius) {
        ctx.beginPath();
        ctx.moveTo(x + radius, y);
        ctx.lineTo(x + w - radius, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + radius);
        ctx.lineTo(x + w, y + h - radius);
        ctx.quadraticCurveTo(x + w, y + h, x + w - radius, y + h);
        ctx.lineTo(x + radius, y + h);
        ctx.quadraticCurveTo(x, y + h, x, y + h - radius);
        ctx.lineTo(x, y + radius);
        ctx.quadraticCurveTo(x, y, x + radius, y);
        ctx.closePath();
    }

    // 1. Draw Background (Blurred Original Image)
    const scale = Math.max(width / originalImg.width, height / originalImg.height);
    const bgWidth = originalImg.width * scale;
    const bgHeight = originalImg.height * scale;
    const bgX = (width - bgWidth) / 2;
    const bgY = (height - bgHeight) / 2;

    ctx.filter = 'blur(20px)';
    ctx.drawImage(originalImg, bgX, bgY, bgWidth, bgHeight);
    ctx.filter = 'none';

    // 2. Draw Dark & Theme Overlay to make text readable
    // Solid dark layer
    ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
    ctx.fillRect(0, 0, width, height);

    // Subtle theme color tint gradient
    const grad = ctx.createLinearGradient(0, 0, 0, height);
    grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = themeColor;
    ctx.globalAlpha = 0.15; // light tint
    ctx.fillRect(0, 0, width, height);
    ctx.globalAlpha = 1.0; // reset alpha

    // 3. Draw Original Image as a stylized Album Cover at the top
    const coverSize = 320;
    const coverX = (width - coverSize) / 2;
    const coverY = 160;
    const coverRadius = 24;

    ctx.save();
    // Shadow for album cover
    ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
    ctx.shadowBlur = 35;
    ctx.shadowOffsetY = 15;
    ctx.fillStyle = '#000';
    drawRoundRect(ctx, coverX, coverY, coverSize, coverSize, coverRadius);
    ctx.fill();

    // Clip for the rounded corners over the image
    ctx.shadowColor = 'transparent';
    ctx.clip();
    
    // Fit original image into the square properly cover-style
    const imgScale = Math.max(coverSize / originalImg.width, coverSize / originalImg.height);
    const iw = originalImg.width * imgScale;
    const ih = originalImg.height * imgScale;
    const ix = coverX + (coverSize - iw) / 2;
    const iy = coverY + (coverSize - ih) / 2;
    ctx.drawImage(originalImg, ix, iy, iw, ih);
    ctx.restore();

    // 4. Draw Title
    ctx.fillStyle = 'white';
    ctx.font = 'bold 70px "Montserrat", "Helvetica Neue", Arial, sans-serif';
    ctx.textAlign = 'center';
    // Small shadow for text to pop
    ctx.shadowColor = 'rgba(0,0,0,0.5)';
    ctx.shadowBlur = 10;
    ctx.fillText(title.toUpperCase(), width / 2, coverY + coverSize + 110);
    ctx.shadowBlur = 0; // reset shadow

    // 5. Draw Prompts List
    const listStartY = coverY + coverSize + 220;
    const listGap = 105;
    const startX = 100;

    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';

    for (let i = 0; i < prompts.length; i++) {
        const y = listStartY + (i * listGap);

        const dayPrefix = language.toLowerCase() === 'en' ? `DAY ${i+1}` : `ДЕНЬ ${i+1}`;
        const dayLabel = `${dayPrefix} :`;

        // Draw Day Number
        ctx.fillStyle = themeColor;
        ctx.font = 'bold 30px "Montserrat", "Helvetica Neue", Arial, sans-serif';
        ctx.fillText(dayLabel, startX, y);

        // Measure width to offset prompt text
        const dayWidth = ctx.measureText(dayLabel).width;

        // Draw Prompt
        ctx.fillStyle = 'white';
        ctx.font = '30px "Montserrat", "Helvetica Neue", Arial, sans-serif';
        ctx.fillText(" " + prompts[i], startX + dayWidth, y);

        // Draw Line for user fill-in
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)';
        ctx.lineWidth = 3;
        ctx.beginPath();
        ctx.moveTo(startX, y + 40);
        ctx.lineTo(width - startX, y + 40);
        ctx.stroke();
    }

    // 6. Footer tag
    ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
    ctx.font = '22px "Montserrat", "Helvetica Neue", Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText("10 DAYS MUSIC CHALLENGE", width / 2, height - 60);

    return canvas;
}