Lights Out Sky Scream Roller Coaster Movie Poster Image

async function processImage(
    originalImg, 
    title = "Lights Out", 
    subtitle = "Sky Scream Roller Coaster Movie Poster", 
    website = "www.lightsoutskyscreammovie.com", 
    year = "(2019)"
) {
    // Load needed Google Fonts dynamically
    const link1 = document.createElement('link');
    link1.href = `https://fonts.googleapis.com/css2?family=Creepster&display=swap`;
    link1.rel = 'stylesheet';
    document.head.appendChild(link1);

    const link2 = document.createElement('link');
    link2.href = `https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&display=swap`;
    link2.rel = 'stylesheet';
    document.head.appendChild(link2);

    // Wait briefly for stylesheets to fetch and fonts to be ready
    try {
        await document.fonts.load('160px "Creepster"');
        await document.fonts.load('600 45px "Oswald"');
    } catch (e) {
        console.warn("Fonts failed to load smoothly, falling back to system fonts.");
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Set standard movie poster dimensions (2:3 aspect ratio)
    const posterW = 800;
    const posterH = 1200;
    canvas.width = posterW;
    canvas.height = posterH;

    // Calculate crop to cover the entire canvas
    const imgRatio = originalImg.width / originalImg.height;
    const posterRatio = posterW / posterH;

    let drawW = posterW;
    let drawH = posterH;
    let offsetX = 0;
    let offsetY = 0;

    if (imgRatio > posterRatio) {
        drawH = posterH;
        drawW = originalImg.width * (posterH / originalImg.height);
        offsetX = (posterW - drawW) / 2;
    } else {
        drawW = posterW;
        drawH = originalImg.height * (posterW / originalImg.width);
        offsetY = (posterH - drawH) / 2;
    }

    // Draw original image with a dark/moody color grade
    ctx.filter = 'contrast(1.3) saturate(0.7) brightness(0.75)';
    ctx.drawImage(originalImg, offsetX, offsetY, drawW, drawH);
    ctx.filter = 'none';

    // Add a dark vignette effect for the "Lights Out" theme
    const vignette = ctx.createRadialGradient(posterW / 2, posterH / 3, 100, posterW / 2, posterH / 2, posterH / 1.1);
    vignette.addColorStop(0, 'rgba(0, 0, 0, 0)');
    vignette.addColorStop(0.65, 'rgba(0, 0, 0, 0.6)');
    vignette.addColorStop(1, 'rgba(0, 0, 0, 0.95)');
    ctx.fillStyle = vignette;
    ctx.fillRect(0, 0, posterW, posterH);

    // Top darkened gradient for the title
    const topGradient = ctx.createLinearGradient(0, 0, 0, 350);
    topGradient.addColorStop(0, 'rgba(0, 0, 0, 0.95)');
    topGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
    ctx.fillStyle = topGradient;
    ctx.fillRect(0, 0, posterW, 350);

    // Bottom darkened gradient for the subtitle/credits
    const bottomGradient = ctx.createLinearGradient(0, posterH - 450, 0, posterH);
    bottomGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
    bottomGradient.addColorStop(1, 'rgba(0, 0, 0, 1)');
    ctx.fillStyle = bottomGradient;
    ctx.fillRect(0, posterH - 450, posterW, 450);

    // Draw Title (Top)
    ctx.textAlign = 'center';
    ctx.font = '160px "Creepster", Impact, sans-serif';
    ctx.fillStyle = '#ff2a2a'; // Bloody red
    
    // Title Drop shadow
    ctx.shadowColor = 'rgba(0, 0, 0, 0.9)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 8;
    ctx.fillText(title, posterW / 2, 210);
    
    // Draw Subtitles and Specs (Bottom)
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    
    ctx.font = '600 42px "Oswald", sans-serif';
    ctx.fillStyle = '#ffffff';
    ctx.fillText(subtitle, posterW / 2, posterH - 220);

    ctx.font = '400 35px "Oswald", sans-serif';
    ctx.fillStyle = '#cccccc';
    ctx.fillText(year, posterW / 2, posterH - 160);

    ctx.font = '300 24px "Oswald", sans-serif';
    ctx.fillStyle = '#999999';
    
    // Check if website string already says "Website:"
    const webText = website.toLowerCase().startsWith('website:') ? website : `Website: ${website}`;
    ctx.fillText(webText, posterW / 2, posterH - 90);

    return canvas;
}