Photo City Finder For Movies

function processImage(originalImg, cityName = "NEW YORK CITY", hudColor = "#00E5FF", letterboxHeightPct = 12) {
    // Create a canvas to process the image
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // 1. Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // 2. Apply a cinematic "spy satellite/drone" color grade (dark, slightly bluish)
    ctx.fillStyle = "rgba(0, 20, 40, 0.35)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 3. Add cinematic letterboxing (black bars top and bottom)
    const barHeight = (Number(letterboxHeightPct) / 100) * canvas.height;
    ctx.fillStyle = "black";
    // Top bar
    ctx.fillRect(0, 0, canvas.width, barHeight);
    // Bottom bar
    ctx.fillRect(0, canvas.height - barHeight, canvas.width, barHeight);

    // 4. Draw Movie HUD (Heads Up Display)
    const padding = Math.max(10, canvas.width * 0.04);
    ctx.strokeStyle = hudColor;
    ctx.lineWidth = Math.max(2, canvas.width * 0.003);

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const minDim = Math.min(canvas.width, canvas.height);

    // Draw Crosshairs
    const r = minDim * 0.15;
    
    // Inner Solid Circle
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.stroke();

    // Center Cross Lines
    ctx.beginPath();
    ctx.moveTo(cx, cy - r + (minDim * 0.02));
    ctx.lineTo(cx, cy + r - (minDim * 0.02));
    ctx.moveTo(cx - r + (minDim * 0.02), cy);
    ctx.lineTo(cx + r - (minDim * 0.02), cy);
    ctx.stroke();

    // Outer Dashed Ring
    ctx.setLineDash([minDim * 0.02, minDim * 0.02]);
    ctx.beginPath();
    ctx.arc(cx, cy, r * 1.2, 0, 2 * Math.PI);
    ctx.stroke();
    // Reset Line Dash
    ctx.setLineDash([]);

    // Draw Corner Brackets (Focus Area)
    const bLen = minDim * 0.1;
    const startX = padding;
    const endX = canvas.width - padding;
    const startY = barHeight + padding;
    const endY = canvas.height - barHeight - padding;

    function drawCorner(x, y, dx, dy) {
        ctx.beginPath();
        ctx.moveTo(x + dx * bLen, y);
        ctx.lineTo(x, y);
        ctx.lineTo(x, y + dy * bLen);
        ctx.stroke();
    }

    // Top-Left, Top-Right, Bottom-Left, Bottom-Right
    drawCorner(startX, startY, 1, 1);
    drawCorner(endX, startY, -1, 1);
    drawCorner(startX, endY, 1, -1);
    drawCorner(endX, endY, -1, -1);

    // 5. Add Cinematic Tech Fonts & Texts
    const fontSize = Math.max(12, canvas.width * 0.02);
    ctx.font = `bold ${fontSize}px "Courier New", Courier, monospace`;
    ctx.fillStyle = hudColor;
    ctx.textBaseline = "middle";

    // Top Left System Data
    ctx.textAlign = "left";
    ctx.fillText("SYS: CITY_FINDER_PROTOCOL v9.4", startX + 10, startY + fontSize);
    ctx.fillText("STATUS: SCANNING...", startX + 10, startY + fontSize * 2.5);

    // Top Right Coordinates
    ctx.textAlign = "right";
    // Generate random-looking coords for cinematic effect
    const randomLat = (Math.random() * 90).toFixed(4);
    const randomLon = (Math.random() * 180).toFixed(4);
    ctx.fillText(`LAT: ${randomLat}° N`, endX - 10, startY + fontSize);
    ctx.fillText(`LNG: ${randomLon}° W`, endX - 10, startY + fontSize * 2.5);

    // Specific City Target Alert (Bottom Center)
    ctx.textAlign = "center";
    const targetText = `>>> MATCH FOUND: ${cityName.toUpperCase()} <<<`;
    const targetFontSize = fontSize * 1.5;
    ctx.font = `bold ${targetFontSize}px "Courier New", Courier, monospace`;

    // Draw text background box
    const textMetrics = ctx.measureText(targetText);
    const textWidth = textMetrics.width;
    const boxPad = targetFontSize * 0.5;
    const boxY = endY - targetFontSize * 2;
    
    ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
    ctx.fillRect(
        cx - (textWidth / 2) - boxPad, 
        boxY - boxPad, 
        textWidth + (boxPad * 2), 
        targetFontSize + (boxPad * 1.5)
    );

    // Draw text over background
    ctx.fillStyle = hudColor;
    ctx.fillText(targetText, cx, boxY + targetFontSize / 2.5);

    return canvas;
}