let selectedPalette = [];
let animationsEnabled = true;
let allColorFamilies = [];
let colorSearchQuery = '';
let colorSortMode = 'default';

const PRESET_PALETTES = [
  {
    id: 'soft-baby-shower',
    name: 'Pastels',
    tag: 'Pastels',
    description: 'Gentle mix of pink, blue, lilac, and white.',
    colors: ['White', 'Light Pink', 'Sky Blue', 'Lilac', 'Pastel Green', 'Pastel Yellow']
  },
  {
    id: 'beach-party',
    name: 'Muted Naturals',
    tag: 'Neutral',
    description: 'Soft neutral mix with a chrome champagne accent.',
    colors: ['Cameo', 'Sand', 'White', 'Chrome Champagne']
  },
  {
    id: 'elegant-neutral',
    name: 'Elegant Neutral',
    tag: 'Event',
    description: 'Wedding-friendly neutrals with soft warmth.',
    colors: ['White', 'Retro White', 'Sand', 'Cameo', 'Fog']
  },
  {
    id: 'chrome-lux',
    name: 'Midnight Steel',
    tag: 'Bold',
    description: 'Deep dark base with pearl blues and chrome grey accents.',
    colors: ['Black', 'Pearl Midnight Blue', 'Pearl Sapphire', 'Chrome Space Grey']
  },
  {
    id: 'jewel-night',
    name: 'Modern Minimal',
    tag: 'Trend',
    description: 'Clean neutrals with a muted blue accent for a current look.',
    colors: ['White', 'Sand', 'Grey', 'Fog', 'Sea Glass']
  },
  {
    id: 'pearl-dream',
    name: 'Tropical Rainbow',
    tag: 'Bright',
    description: 'Bold tropical brights for playful rainbow installs.',
    colors: ['Fuchsia', 'Goldenrod', 'Caribbean Blue', 'Lime Green', 'Yellow', 'Lavender']
  }
];

// --- LOCAL STORAGE LOADING ---
// Load palette from Local Storage on startup
const savedPaletteJSON = localStorage.getItem('userPalette');
if (savedPaletteJSON) {
  try {
    selectedPalette = JSON.parse(savedPaletteJSON);
  } catch (e) {
    console.error("Error parsing saved palette from Local Storage", e);
    selectedPalette = []; // Reset if data is corrupt
  }
}

// Main function to fetch color data and build the page
fetch('colors.json')
  .then(response => response.json())
  .then(data => {
    allColorFamilies = data;
    renderColorFamilies();
    initializeLibraryControls();

    // Initialize the palette, checking for shared links or local versions
    initializePaletteOnLoad(data);
  })
  .catch(error => console.error('Error loading colors:', error));

function renderColorFamilies() {
  const colorFamiliesContainer = document.getElementById('color-families');
  colorFamiliesContainer.innerHTML = '';

  const query = colorSearchQuery.trim().toLowerCase();
  let visibleFamilyCount = 0;

  allColorFamilies.forEach(family => {
    const familyMatchesQuery = family.family.toLowerCase().includes(query);
    let colors = [...family.colors];

    if (colorSortMode === 'az') {
      colors.sort((a, b) => a.name.localeCompare(b.name));
    } else if (colorSortMode === 'lightness') {
      colors.sort((a, b) => getPerceivedBrightness(a.hex ?? '#000000') - getPerceivedBrightness(b.hex ?? '#000000'));
    }

    if (query) {
      colors = colors.filter(color => {
        const nameMatch = color.name.toLowerCase().includes(query);
        const hexMatch = (color.hex || '').toLowerCase().includes(query);
        return familyMatchesQuery || nameMatch || hexMatch;
      });
    }

    if (query && colors.length === 0) {
      return;
    }

    visibleFamilyCount += 1;

    const familyDiv = document.createElement('div');
    familyDiv.classList.add('color-family', 'has-text-dark');
    familyDiv.innerHTML = `<h3>${family.family}</h3>`;

    const swatchContainer = document.createElement('div');
    swatchContainer.classList.add('swatch-container');

    colors.forEach(color => {
      swatchContainer.appendChild(createColorSwatch(color));
    });

    familyDiv.appendChild(swatchContainer);
    colorFamiliesContainer.appendChild(familyDiv);
  });

  colorFamiliesContainer.classList.toggle('has-filtered-results-none', visibleFamilyCount === 0);
  updateSwatchHighlights();
}

function createColorSwatch(color) {
  const swatchWrapper = document.createElement('div');
  swatchWrapper.classList.add('swatch-wrapper');

  const swatch = document.createElement('div');
  swatch.classList.add('color-swatch');
  swatch.dataset.color = color.hex;
  swatch.style.color = color.hex;
  swatch.setAttribute('role', 'button');
  swatch.setAttribute('tabindex', '0');
  swatch.setAttribute('aria-label', `Toggle ${color.name}`);

  const backgroundDiv = document.createElement('div');
  backgroundDiv.classList.add('color-background');

  if (color.image) {
    backgroundDiv.classList.add('finish-image');
    backgroundDiv.style.backgroundImage = `url(${color.image})`;
  } else {
    backgroundDiv.style.backgroundColor = color.hex;
  }

        if (color.metallic) {
          backgroundDiv.classList.add('metallic');
          if (color.chromeType && !color.image) {
            backgroundDiv.classList.add(`chrome-${color.chromeType}`);
          }
        }

  const shineImg = document.createElement('img');
  shineImg.classList.add('color-shine');
  shineImg.src = "shine.svg";
  shineImg.alt = "";

  if (isLightColor(color.hex)) {
    backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
    shineImg.classList.add('has-halo');
  }

  swatch.appendChild(backgroundDiv);
  swatch.appendChild(shineImg);

  const colorName = document.createElement('span');
  colorName.classList.add('color-name');
  colorName.textContent = color.name;

  swatch.addEventListener('click', () => {
    const isSelected = selectedPalette.some(c => c.hex === color.hex);
    if (isSelected) {
      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
    } else {
      selectedPalette.push(color);
    }

    backgroundDiv.classList.add('pop');
    backgroundDiv.addEventListener('animationend', () => {
      backgroundDiv.classList.remove('pop');
    }, { once: true });

    renderSelectedPalette();
    updateSwatchHighlights();
  });

  swatch.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault();
      swatch.click();
    }
  });

  swatchWrapper.appendChild(swatch);
  swatchWrapper.appendChild(colorName);
  return swatchWrapper;
}

function initializeLibraryControls() {
  const searchInput = document.getElementById('color-search');
  const sortSelect = document.getElementById('color-sort');

  if (searchInput) {
    searchInput.addEventListener('input', (event) => {
      colorSearchQuery = event.target.value || '';
      renderColorFamilies();
    });
  }

  if (sortSelect) {
    sortSelect.addEventListener('change', (event) => {
      colorSortMode = event.target.value || 'default';
      renderColorFamilies();
    });
  }
}

function findColorByNameOrHex(token) {
  const normalized = String(token || '').trim().toLowerCase();
  if (!normalized) return null;
  const allColors = allColorFamilies.flatMap(family => family.colors);

  return allColors.find(color =>
    color.name.toLowerCase() === normalized ||
    (color.hex || '').toLowerCase() === normalized
  ) || null;
}

function resolvePresetPalette(preset) {
  return preset.colors
    .map(findColorByNameOrHex)
    .filter(Boolean);
}

function renderPresetPaletteModal() {
  const presetList = document.getElementById('preset-palette-list');
  if (!presetList) return;

  presetList.innerHTML = '';

  PRESET_PALETTES.forEach(preset => {
    const resolvedColors = resolvePresetPalette(preset);

    const card = document.createElement('div');
    card.className = 'preset-card';

    const titleRow = document.createElement('div');
    titleRow.className = 'preset-card-title-row';
    titleRow.innerHTML = `
      <h4 class="preset-card-title">${preset.name}</h4>
      <span class="preset-card-tag">${preset.tag}</span>
    `;

    const desc = document.createElement('p');
    desc.className = 'preset-card-desc';
    desc.textContent = preset.description;

    const preview = document.createElement('div');
    preview.className = 'preset-preview';
    resolvedColors.forEach(color => {
      const dot = document.createElement('span');
      dot.className = 'preset-dot';
      dot.title = color.name;

      if (color.image) {
        dot.classList.add('is-image');
        dot.style.backgroundImage = `url(${color.image})`;
      } else {
        dot.style.backgroundColor = color.hex;
      }

      if (isLightColor(color.hex)) {
        dot.style.borderColor = 'rgba(21,56,76,0.24)';
      }

      preview.appendChild(dot);
    });

    const applyButton = document.createElement('button');
    applyButton.type = 'button';
    applyButton.textContent = 'Use Palette';
    applyButton.addEventListener('click', () => {
      if (resolvedColors.length === 0) return;
      selectedPalette = resolvedColors.map(color => ({ ...color }));
      renderSelectedPalette();
      updateSwatchHighlights();
      closePresetModal();
    });

    card.appendChild(titleRow);
    card.appendChild(desc);
    card.appendChild(preview);
    card.appendChild(applyButton);
    presetList.appendChild(card);
  });
}

/**
 * Saves the current 'selectedPalette' array to the browser's Local Storage.
 */
function savePaletteToLocalStorage() {
  localStorage.setItem('userPalette', JSON.stringify(selectedPalette));
}

/**
 * Renders the selected colors as floating balloons in the top palette.
 */
function renderSelectedPalette() {
  const paletteColorsContainer = document.getElementById('palette-colors');
  paletteColorsContainer.innerHTML = '';

  if (selectedPalette.length === 0) {
    paletteColorsContainer.classList.add('is-empty');
    paletteColorsContainer.innerHTML = `
      <div class="palette-empty-state">
        <i class="fa-solid fa-circle-dot"></i>
        <strong>No balloons selected yet</strong>
        <span>Tap colors below to build a palette, then shuffle, zoom, or share it.</span>
      </div>
    `;
    updatePaletteUIState();
    savePaletteToLocalStorage();
    return;
  }

  paletteColorsContainer.classList.remove('is-empty');

  selectedPalette.forEach(color => {
    const swatchWrapper = document.createElement('div');
    swatchWrapper.classList.add('swatch-wrapper');

    const floatGroup = document.createElement('div');
    floatGroup.classList.add('balloon-float-group');
    let floatDuration = '4s';
    let floatDelay = '0s';

    if (animationsEnabled) {
      floatDuration = `${(Math.random() * 3 + 3).toFixed(2)}s`;
      floatDelay = `${(Math.random() * 2).toFixed(2)}s`;
      floatGroup.style.animationDuration = floatDuration;
      floatGroup.style.animationDelay = floatDelay;
    } else {
      floatGroup.style.animation = 'none';
    }

    const swatch = document.createElement('div');
    swatch.classList.add('color-swatch');
    swatch.dataset.color = color.hex;
    swatch.setAttribute('role', 'button');
    swatch.setAttribute('tabindex', '0');
    swatch.setAttribute('aria-label', `Remove ${color.name} from palette`);

    const backgroundDiv = document.createElement('div');
    backgroundDiv.classList.add('color-background', 'chosen');

    if (color.image) {
      backgroundDiv.style.backgroundImage = `url(${color.image})`;
    } else {
      backgroundDiv.style.backgroundColor = color.hex;
    }

    if (color.metallic) {
      backgroundDiv.classList.add('metallic');
      if (color.chromeType && !color.image) {
        backgroundDiv.classList.add(`chrome-${color.chromeType}`);
      }
    }

    const shineImg = document.createElement('img');
    shineImg.classList.add('color-shine');
    shineImg.src = "shine.svg";
    shineImg.alt = "";

    if (isLightColor(color.hex)) {
      backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
      shineImg.classList.add('has-halo');
    }

    swatch.appendChild(backgroundDiv);
    swatch.appendChild(shineImg);

    const svgNS = "http://www.w3.org/2000/svg";
    const stringSVG = document.createElementNS(svgNS, "svg");
    stringSVG.setAttribute("class", "balloon-string-svg");
    stringSVG.setAttribute("viewBox", "0 0 20 60");
    const path = document.createElementNS(svgNS, "path");
    const basePathD = "M10 0 C6 8, 14 14, 9 22 C5 29, 14 35, 10 43 C7 49, 12 54, 10 60";
    const rightLeadD = "M10 0 C8 7, 16 13, 12 21 C8 28, 16 34, 13 42 C10 48, 13 54, 11 60";
    const rightSnapD = "M10 0 C9 8, 17 15, 13 23 C9 30, 17 36, 14 44 C11 50, 14 55, 12 60";
    const centerRecoverD = "M10 0 C7 8, 15 14, 10 22 C6 29, 13 35, 9 43 C7 49, 12 54, 10 60";
    const leftLeadD = "M10 0 C4 8, 12 14, 7 22 C3 29, 12 35, 8 43 C5 49, 11 54, 9 60";
    const leftSnapD = "M10 0 C3 9, 11 15, 6 23 C2 30, 11 36, 7 44 C4 50, 10 55, 8 60";
    const centerSettleD = "M10 0 C6 8, 14 14, 9 22 C5 29, 13 35, 9 43 C7 49, 12 54, 10 60";

    path.setAttribute("d", basePathD);
    path.setAttribute("class", "wiggle-path");
    path.setAttribute("stroke", "#444");
    path.setAttribute("stroke-width", "2");
    path.setAttribute("fill", "none");

    if (animationsEnabled) {
      const bendAnimate = document.createElementNS(svgNS, "animate");
      bendAnimate.setAttribute("attributeName", "d");
      bendAnimate.setAttribute("dur", floatDuration);
      bendAnimate.setAttribute("begin", floatDelay);
      bendAnimate.setAttribute("repeatCount", "indefinite");
      bendAnimate.setAttribute(
        "values",
        `${basePathD};${rightLeadD};${rightSnapD};${centerRecoverD};${leftLeadD};${leftSnapD};${centerSettleD};${basePathD}`
      );
      bendAnimate.setAttribute("keyTimes", "0;0.14;0.24;0.42;0.62;0.74;0.9;1");
      bendAnimate.setAttribute("calcMode", "spline");
      bendAnimate.setAttribute(
        "keySplines",
        "0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1;0.25 0.1 0.25 1;0.42 0 0.58 1;0.42 0 0.58 1"
      );
      path.appendChild(bendAnimate);
    }

    stringSVG.appendChild(path);

    floatGroup.appendChild(swatch);
    floatGroup.appendChild(stringSVG);
    swatchWrapper.appendChild(floatGroup);

    const colorName = document.createElement('span');
    colorName.classList.add('color-name', 'highlighted-name');
    colorName.textContent = color.name;
    swatchWrapper.appendChild(colorName);

    swatch.addEventListener('click', () => {
      selectedPalette = selectedPalette.filter(c => c.hex !== color.hex);
      renderSelectedPalette();
      updateSwatchHighlights();
    });

    swatch.addEventListener('keydown', (event) => {
      if (event.key === 'Enter' || event.key === ' ') {
        event.preventDefault();
        swatch.click();
      }
    });

    paletteColorsContainer.appendChild(swatchWrapper);
  });

  updatePaletteUIState();
  savePaletteToLocalStorage();
}

/**
 * Updates the visual highlight on the main color swatches to show which are selected.
 */
function updateSwatchHighlights() {
  const allSwatches = document.querySelectorAll('#color-families .color-swatch');
  allSwatches.forEach(swatch => {
    const color = swatch.dataset.color;
    const background = swatch.querySelector('.color-background');
    const nameEl = swatch.parentElement.querySelector('.color-name');
    const isSelected = selectedPalette.some(c => c.hex === color);

    if (isSelected) {
      background.classList.add('chosen');
      nameEl.classList.add('highlighted-name');
    } else {
      background.classList.remove('chosen');
      nameEl.classList.remove('highlighted-name');
    }
  });
}

function updatePaletteUIState() {
  const countBadge = document.getElementById('palette-count');
  const clearButton = document.getElementById('clear-palette');
  const shareButtonEl = document.getElementById('share-palette');
  const shuffleButton = document.getElementById('shuffle-palette');
  const zoomButtonEl = document.getElementById('zoom-palette');

  const count = selectedPalette.length;
  if (countBadge) {
    countBadge.textContent = `${count} selected`;
  }

  const hasSelection = count > 0;
  [clearButton, shareButtonEl, shuffleButton, zoomButtonEl].forEach(button => {
    if (!button) return;
    button.disabled = !hasSelection;
  });
}

/**
 * Determines if a hex color is light or dark to decide on border visibility.
 * @param {string} hex - The hex color code (e.g., "#FFFFFF").
 * @returns {boolean} - True if the color is light, false otherwise.
 */
function isLightColor(hex) {
  if (!hex) return false;
  return getPerceivedBrightness(hex) > 220;
}

function getPerceivedBrightness(hex) {
  if (!hex) return 0;
  const normalized = hex.replace('#', '');
  const pairs = normalized.match(/.{1,2}/g);
  if (!pairs || pairs.length < 3) return 0;
  const rgb = pairs.map(x => parseInt(x, 16));
  return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
}

/**
 * Shuffles an array in place.
 * @param {Array} array - The array to shuffle.
 * @returns {Array} - The shuffled array.
 */
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

/**
 * Initializes the palette on page load, prioritizing a new shared URL
 * over existing local storage, without overwriting it.
 * @param {Array} allColorData - The entire array of color families from colors.json.
 */
function initializePaletteOnLoad(allColorData) {
  const params = new URLSearchParams(window.location.search);
  const colorsFromURL = params.get('colors');

  // Check if a 'colors' parameter exists in the URL
  if (colorsFromURL) {
    console.log("Loading palette from share link for this session...");
    const flatColorList = allColorData.flatMap(family => family.colors);
    const hexCodesFromURL = colorsFromURL.split(',');
    const paletteFromURL = hexCodesFromURL.map(hex => {
      return flatColorList.find(color => color.hex === `#${hex}`);
    }).filter(Boolean);

    if (paletteFromURL.length > 0) {
      selectedPalette = paletteFromURL; // Load for viewing
    }
    
    // Clean the address bar but DO NOT save to local storage yet
    history.replaceState(null, '', window.location.pathname);
  }
  // If no URL parameter, the existing palette from local storage is used by default.
  else {
    console.log("Loading palette from Local Storage.");
  }

  // Render whatever palette was decided upon (from URL or local storage).
  // The render function itself will only save when the palette is changed.
  renderSelectedPalette(); 
  updateSwatchHighlights();
}


// --- Event Listeners ---

const shareButton = document.getElementById('share-palette');
const modalBackdrop = document.querySelector('.palette-modal-backdrop');
const closeModalButton = document.getElementById('close-modal');
const modalColorList = document.getElementById('modal-color-list');
const presetButton = document.getElementById('preset-palettes');
const presetModalBackdrop = document.querySelector('.preset-modal-backdrop');
const closePresetModalButton = document.getElementById('close-preset-modal');

function syncModalInteractionLock() {
  const shareOpen = modalBackdrop && getComputedStyle(modalBackdrop).display !== 'none';
  const presetOpen = presetModalBackdrop && getComputedStyle(presetModalBackdrop).display !== 'none';
  const zoomOpen = zoomOverlay && zoomOverlay.classList.contains('is-active');
  document.body.classList.toggle('modal-open', Boolean(shareOpen || presetOpen || zoomOpen));
}

async function confirmClearPalette() {
  if (typeof Swal !== 'undefined' && Swal.fire) {
    const result = await Swal.fire({
      title: 'Clear palette?',
      text: 'This removes all selected balloons from your palette.',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Clear Palette',
      cancelButtonText: 'Cancel',
      reverseButtons: true,
      confirmButtonColor: '#0ea7a0',
      background: '#fffdf7',
      color: '#15384c'
    });
    return result.isConfirmed;
  }

  return confirm('Are you sure you want to clear your entire palette?');
}

// --- Event Listeners ---

document.getElementById('clear-palette').addEventListener('click', async () => {
  const shouldClear = await confirmClearPalette();
  if (!shouldClear) return;

  selectedPalette = [];
  renderSelectedPalette();
  updateSwatchHighlights();
});

document.getElementById('toggle-animation').addEventListener('click', (e) => {
  animationsEnabled = e.target.checked;
  renderSelectedPalette();
});

document.getElementById('shuffle-palette').addEventListener('click', () => {
  selectedPalette = shuffleArray(selectedPalette);
  renderSelectedPalette();
});

// --- Modal Functionality ---

function openPresetModal() {
  renderPresetPaletteModal();
  presetModalBackdrop.style.display = 'flex';
  presetModalBackdrop.setAttribute('aria-hidden', 'false');
  syncModalInteractionLock();
}

function closePresetModal() {
  presetModalBackdrop.style.display = 'none';
  presetModalBackdrop.setAttribute('aria-hidden', 'true');
  syncModalInteractionLock();
}

shareButton.addEventListener('click', () => {
  if (selectedPalette.length === 0) {
    alert("Your palette is empty! Add some colors to create a shareable link.");
    return;
  }

  const baseURL = window.location.href.split('?')[0];
  const colorParams = selectedPalette.map(color => color.hex.substring(1)).join(',');
  const shareableLink = `${baseURL}?colors=${colorParams}`;

  modalColorList.innerHTML = `
    <p>Copy this link to share your palette:</p>
    <input type="text" id="share-link-input" value="${shareableLink}" readonly>
    <button id="copy-link-button">Copy Link</button>
  `;

  document.getElementById('copy-link-button').addEventListener('click', () => {
    const linkInput = document.getElementById('share-link-input');
    navigator.clipboard.writeText(linkInput.value).then(() => {
      const copyButton = document.getElementById('copy-link-button');
      copyButton.textContent = 'Copied! ✅';
      setTimeout(() => {
        copyButton.textContent = 'Copy Link';
      }, 2000);
    }).catch(err => {
      console.error('Failed to copy link: ', err);
      alert('Failed to copy link.');
    });
  });

  modalBackdrop.style.display = 'flex';
  syncModalInteractionLock();
});

closeModalButton.addEventListener('click', () => {
  modalBackdrop.style.display = 'none';
  syncModalInteractionLock();
});

modalBackdrop.addEventListener('click', (event) => {
  if (event.target === modalBackdrop) {
    modalBackdrop.style.display = 'none';
    syncModalInteractionLock();
  }
});

if (presetButton && presetModalBackdrop && closePresetModalButton) {
  presetButton.addEventListener('click', openPresetModal);
  closePresetModalButton.addEventListener('click', closePresetModal);
  presetModalBackdrop.addEventListener('click', (event) => {
    if (event.target === presetModalBackdrop) {
      closePresetModal();
    }
  });
}

// --- Zoom Palette Functionality ---

const zoomButton = document.getElementById('zoom-palette');
const zoomOverlay = document.getElementById('zoom-overlay');
const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
const zoomCloseButton = document.getElementById('zoom-close');

function renderZoomPaletteComparison() {
  zoomedPaletteContent.innerHTML = '';

  const grid = document.createElement('div');
  grid.classList.add('zoom-palette-grid');

  selectedPalette.forEach(color => {
    const card = document.createElement('div');
    card.classList.add('zoom-color-card');

    const balloonWrap = document.createElement('div');
    balloonWrap.classList.add('zoom-balloon-wrap');

    const swatch = document.createElement('div');
    swatch.classList.add('color-swatch', 'zoom-color-balloon');
    swatch.dataset.color = color.hex;

    const backgroundDiv = document.createElement('div');
    backgroundDiv.classList.add('color-background', 'chosen');

    if (color.image) {
      backgroundDiv.style.backgroundImage = `url(${color.image})`;
    } else {
      backgroundDiv.style.backgroundColor = color.hex;
    }

    if (color.metallic) {
      backgroundDiv.classList.add('metallic');
      if (color.chromeType && !color.image) {
        backgroundDiv.classList.add(`chrome-${color.chromeType}`);
      }
    }

    const shineImg = document.createElement('img');
    shineImg.classList.add('color-shine');
    shineImg.src = "shine.svg";
    shineImg.alt = "";

    if (isLightColor(color.hex)) {
      backgroundDiv.style.border = '1px solid rgba(0, 0, 0, 0.2)';
      shineImg.classList.add('has-halo');
    }

    swatch.appendChild(backgroundDiv);
    swatch.appendChild(shineImg);
    balloonWrap.appendChild(swatch);

    const name = document.createElement('div');
    name.classList.add('zoom-color-name');
    name.textContent = color.name;

    card.appendChild(balloonWrap);
    card.appendChild(name);
    grid.appendChild(card);
  });

  zoomedPaletteContent.appendChild(grid);
}

// --- Event Listener to OPEN the zoom view ---
zoomButton.addEventListener('click', () => {
  // Don't do anything if the palette is empty
  if (selectedPalette.length === 0) {
    alert("Palette is empty. Add some colors to zoom in!");
    return;
  }
 
  // Build a utility-focused static comparison layout (no strings/motion)
  renderZoomPaletteComparison();
 
  // Show the overlay by adding the .is-active class
  zoomOverlay.classList.add('is-active');
  syncModalInteractionLock();
});

// --- Function to CLOSE the zoom view ---
function closeZoomView() {
  zoomOverlay.classList.remove('is-active');
  syncModalInteractionLock();
}

// --- Two ways to CLOSE the view for easy access ---

// 1. Click on the dark background (the overlay itself)
zoomOverlay.addEventListener('click', (event) => {
  // Only close if the click is on the overlay, not the content inside
  if (event.target === zoomOverlay) {
    closeZoomView();
  }
});

// 2. Click the close button
zoomCloseButton.addEventListener('click', (event) => {
  event.preventDefault();
  closeZoomView();
});

// 3. Press the 'Escape' key
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && presetModalBackdrop?.style.display === 'flex') {
    closePresetModal();
    return;
  }
  if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
    closeZoomView();
  }
});

// --- Mobile navbar burger (Bulma) ---
const navbarBurger = document.querySelector('.navbar-burger');
const navbarMenu = document.getElementById('navbarBasicExample');

if (navbarBurger && navbarMenu) {
  navbarBurger.addEventListener('click', () => {
    navbarBurger.classList.toggle('is-active');
    navbarMenu.classList.toggle('is-active');
    const isExpanded = navbarBurger.classList.contains('is-active');
    navbarBurger.setAttribute('aria-expanded', String(isExpanded));
  });
}