Image SEO Address Finder Tool

async function processImage(originalImg, defaultAltText = "Local Business Image") {
    // Create the main container for the tool's output
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif';
    container.style.maxWidth = '650px';
    container.style.padding = '20px';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#ffffff';
    container.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Title
    const title = document.createElement('h2');
    title.textContent = 'Image SEO Address Finder';
    title.style.marginTop = '0';
    title.style.color = '#333';
    container.appendChild(title);

    // Image preview
    const imgPreview = document.createElement('img');
    imgPreview.src = originalImg.src;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '300px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.borderRadius = '8px';
    imgPreview.style.backgroundColor = '#f5f5f5';
    imgPreview.style.display = 'block';
    imgPreview.style.marginBottom = '20px';
    container.appendChild(imgPreview);

    // Status / Result Display Area
    const resultBox = document.createElement('div');
    resultBox.style.padding = '15px';
    resultBox.style.borderRadius = '8px';
    resultBox.style.backgroundColor = '#f8f9fa';
    resultBox.style.border = '1px solid #e9ecef';
    resultBox.innerHTML = '<span style="color:#666;">Analyzing image for EXIF GPS metadata...</span>';
    container.appendChild(resultBox);

    try {
        // Dynamically import 'exifr' library to extract GPS EXIF data
        const exifrUrl = 'https://cdn.jsdelivr.net/npm/exifr@7.1.3/dist/full.esm.js';
        const exifrModule = await import(exifrUrl);
        const exifr = exifrModule.default;

        let gpsData = null;
        try {
            // Read GPS latitude and longitude from the image
            gpsData = await exifr.gps(originalImg.src);
        } catch (exifErr) {
            console.warn("Could not parse EXIF data", exifErr);
        }

        if (!gpsData || gpsData.latitude === undefined || gpsData.longitude === undefined) {
            resultBox.style.backgroundColor = '#fff3cd';
            resultBox.style.borderColor = '#ffe69c';
            resultBox.innerHTML = `
                <h4 style="margin: 0 0 10px 0; color: #856404;">No GPS Data Found</h4>
                <p style="margin: 0; color: #856404; font-size: 14px;">
                    This image does not contain geotag (EXIF location) data. For Local SEO optimization, 
                    ensure your images are geotagged before uploading them to your website or Google My Business.
                </p>
            `;
            return container;
        }

        const lat = gpsData.latitude;
        const lon = gpsData.longitude;

        resultBox.innerHTML = `
            <span style="color:#0056b3;">GPS coordinates found! Reverse geocoding physical address...</span>
            <br/><small style="color:#666;">Lat: ${lat.toFixed(5)}, Lon: ${lon.toFixed(5)}</small>
        `;

        // Reverse geocode the coordinates to find the physical address via OpenStreetMap Nominatim API
        const nominatimUrl = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`;
        const response = await fetch(nominatimUrl, {
            headers: { 'Accept-Language': 'en-US,en;q=0.9' }
        });
        
        if (!response.ok) throw new Error("Address lookup failed");
        
        const geoJson = await response.json();
        const address = geoJson.display_name || "Unknown Address";

        // Display the SEO Address findings
        resultBox.style.backgroundColor = '#d4edda';
        resultBox.style.borderColor = '#c3e6cb';
        resultBox.style.color = '#155724';
        
        resultBox.innerHTML = `
            <h3 style="margin: 0 0 12px 0; font-size: 18px;">📍 SEO Address Found</h3>
            <div style="font-size: 14px; margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px;">
                <strong>Latitude:</strong> <span>${lat}</span>
                <strong>Longitude:</strong> <span>${lon}</span>
                <strong>Address:</strong> <span>${address}</span>
            </div>
            
            <hr style="border: 0; border-top: 1px solid #c3e6cb; margin: 15px 0;">
            
            <h4 style="margin: 0 0 10px 0; font-size: 15px; color: #0b2e13;">Recommended SEO Image Tag</h4>
            <p style="font-size: 13px; margin: 0 0 8px 0;">Use this structure to enhance your Local SEO rankings:</p>
            <textarea readonly style="width: 100%; box-sizing: border-box; height: 75px; padding: 10px; font-family: monospace; font-size: 12px; background: #fff; border: 1px solid #c3e6cb; border-radius: 4px; color: #333; resize: none;"><img src="your-image.jpg" alt="${defaultAltText} - ${address}" data-lat="${lat}" data-lon="${lon}" /></textarea>
        `;

    } catch (error) {
        resultBox.style.backgroundColor = '#f8d7da';
        resultBox.style.borderColor = '#f5c6cb';
        resultBox.innerHTML = `
            <h4 style="margin: 0 0 10px 0; color: #721c24;">Error Processing Image</h4>
            <p style="margin: 0; color: #721c24; font-size: 14px;">${error.message}</p>
        `;
    }

    return container;
}