Resort Image Gallery Viewer

function processImage(originalImg, titleText = "Курорт (Resort Gallery)", bgColor = "#f4f9f9") {
    // Inject Google Font for a resort/gallery aesthetic
    if (!document.getElementById('resort-gallery-font')) {
        const link = document.createElement('link');
        link.id = 'resort-gallery-font';
        link.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&family=Montserrat:wght@400;500&display=swap';
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }

    // Main Container
    const container = document.createElement('div');
    container.style.fontFamily = "'Montserrat', sans-serif";
    container.style.backgroundColor = bgColor;
    container.style.padding = "30px";
    container.style.borderRadius = "16px";
    container.style.boxShadow = "0 10px 30px rgba(0,0,0,0.15)";
    container.style.display = "flex";
    container.style.flexDirection = "column";
    container.style.alignItems = "center";
    container.style.maxWidth = "850px";
    container.style.margin = "0 auto";
    container.style.boxSizing = "border-box";

    // Header Title
    const header = document.createElement('h2');
    header.textContent = titleText;
    header.style.fontFamily = "'Playfair Display', serif";
    header.style.color = "#2c3e50";
    header.style.marginBottom = "25px";
    header.style.fontSize = "28px";
    header.style.letterSpacing = "1px";
    header.style.textAlign = "center";
    header.style.borderBottom = "2px solid #5bc0be";
    header.style.paddingBottom = "10px";
    container.appendChild(header);

    // Main Image Display Area
    const mainDisplay = document.createElement('div');
    mainDisplay.style.width = "100%";
    mainDisplay.style.height = "auto";
    mainDisplay.style.display = "flex";
    mainDisplay.style.justifyContent = "center";
    mainDisplay.style.alignItems = "center";
    mainDisplay.style.overflow = "hidden";
    mainDisplay.style.borderRadius = "8px";
    mainDisplay.style.boxShadow = "0 4px 15px rgba(0,0,0,0.1)";
    mainDisplay.style.backgroundColor = "#ffffff";
    mainDisplay.style.padding = "15px";
    mainDisplay.style.boxSizing = "border-box";

    // Create the Main Image
    const mainImg = new Image();
    mainImg.src = originalImg.src;
    mainImg.style.maxWidth = "100%";
    mainImg.style.maxHeight = "500px";
    mainImg.style.objectFit = "contain";
    mainImg.style.transition = "filter 0.4s ease-in-out";
    
    mainDisplay.appendChild(mainImg);
    container.appendChild(mainDisplay);

    // Thumbnail Filters simulating different resort "vibes"
    const filters = [
        { name: "Original", filter: "none" },
        { name: "Sunny Beach", filter: "contrast(1.1) saturate(1.5) brightness(1.1) sepia(0.1)" },
        { name: "Sunset Calm", filter: "sepia(0.4) hue-rotate(-20deg) saturate(1.4) brightness(0.95)" },
        { name: "Ocean Breeze", filter: "hue-rotate(15deg) saturate(1.2) contrast(1.05)" },
        { name: "Vintage Postcard", filter: "sepia(0.7) contrast(0.9) brightness(0.9) opacity(0.9)" }
    ];

    // Thumbnails Container
    const thumbContainer = document.createElement('div');
    thumbContainer.style.display = "flex";
    thumbContainer.style.gap = "20px";
    thumbContainer.style.marginTop = "30px";
    thumbContainer.style.overflowX = "auto";
    thumbContainer.style.width = "100%";
    thumbContainer.style.padding = "10px 5px";
    thumbContainer.style.justifyContent = "center";
    thumbContainer.style.boxSizing = "border-box";

    // Sub-title for gallery
    const subTitle = document.createElement('p');
    subTitle.textContent = "Select a Resort Vibe:";
    subTitle.style.alignSelf = "flex-start";
    subTitle.style.marginBottom = "-15px";
    subTitle.style.marginTop = "25px";
    subTitle.style.fontWeight = "500";
    subTitle.style.color = "#7f8c8d";
    subTitle.style.fontSize = "14px";
    container.appendChild(subTitle);

    // Generate thumbnails dynamically
    filters.forEach((f, idx) => {
        const thumbWrapper = document.createElement('div');
        thumbWrapper.style.display = "flex";
        thumbWrapper.style.flexDirection = "column";
        thumbWrapper.style.alignItems = "center";
        thumbWrapper.style.cursor = "pointer";
        thumbWrapper.style.transition = "transform 0.2s ease";

        const thumb = new Image();
        thumb.src = originalImg.src;
        thumb.style.width = "90px";
        thumb.style.height = "70px";
        thumb.style.objectFit = "cover";
        thumb.style.borderRadius = "8px";
        thumb.style.border = idx === 0 ? "3px solid #5bc0be" : "3px solid transparent";
        thumb.style.boxShadow = "0 3px 6px rgba(0,0,0,0.15)";
        thumb.style.filter = f.filter;
        thumb.style.transition = "border-color 0.3s ease, box-shadow 0.3s ease";

        thumbWrapper.onmouseover = () => { 
            thumbWrapper.style.transform = "translateY(-5px)"; 
            thumb.style.boxShadow = "0 6px 12px rgba(0,0,0,0.2)";
        };
        thumbWrapper.onmouseout = () => { 
            thumbWrapper.style.transform = "translateY(0)"; 
            thumb.style.boxShadow = "0 3px 6px rgba(0,0,0,0.15)";
        };

        const label = document.createElement('span');
        label.textContent = f.name;
        label.style.fontSize = "12px";
        label.style.marginTop = "8px";
        label.style.color = "#34495e";
        label.style.fontWeight = idx === 0 ? "600" : "400";
        label.style.textAlign = "center";

        // Click Event for Thumbnails
        thumbWrapper.onclick = () => {
            mainImg.style.filter = f.filter;
            
            // Reset state for all thumbnails
            Array.from(thumbContainer.children).forEach(child => {
                const imgNode = child.querySelector('img');
                const textNode = child.querySelector('span');
                if (imgNode) imgNode.style.border = "3px solid transparent";
                if (textNode) textNode.style.fontWeight = "400";
            });
            
            // Set active state
            thumb.style.border = "3px solid #5bc0be";
            label.style.fontWeight = "600";
        };

        thumbWrapper.appendChild(thumb);
        thumbWrapper.appendChild(label);
        thumbContainer.appendChild(thumbWrapper);
    });

    container.appendChild(thumbContainer);

    return container;
}