*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0;
  background: url("https://placehold.co/1920x1080/0f172a/1e293b?text=Abstract+Background") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

.picker-wrapper {
  width: 100%;
  max-width: 400px;
}

.glass-panel {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

.glass-panel h2 {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

.glass-panel p {
  color: #94a3b8;
  margin: 0 0 24px 0;
  font-size: 0.95rem;
}

.gradient-map {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  cursor: crosshair;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  margin-bottom: 24px;
  overflow: hidden;
}

.gradient-map::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #000000);
  pointer-events: none;
}

.picker-reticle {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 10;
}

.result-row {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: #3b82f6;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.hex-display {
  flex-grow: 1;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.copy-btn {
  background: #ffffff;
  color: #0f172a;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}

.copy-btn:hover {
  background: #e2e8f0;
  transform: scale(1.05);
}

const map = document.getElementById("color-map");
const reticle = document.getElementById("reticle");
const preview = document.getElementById("preview-box");
const hexText = document.getElementById("hex-display");
const copyBtn = document.getElementById("copy-hex");

let isDragging = false;

function rgbToHex(r, g, b) {
  const toHex = function(c) {
    const hex = c.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  };
  return "#" + toHex(r) + toHex(g) + toHex(b);
}

function updateColor(e) {
  const rect = map.getBoundingClientRect();
  let x = e.clientX - rect.left;
  let y = e.clientY - rect.top;
  
  if (x < 0) x = 0;
  if (x > rect.width) x = rect.width;
  if (y < 0) y = 0;
  if (y > rect.height) y = rect.height;
  
  reticle.style.left = x + "px";
  reticle.style.top = y + "px";
  
  /* Simulate color calculation safely based on X/Y position */
  const hue = (x / rect.width) * 360;
  const lightness = 100 - ((y / rect.height) * 50);
  
  /* Convert HSL roughly to display a beautiful dynamic color */
  const dynamicColor = "hsl(" + hue + ", 100%, " + lightness + "%)";
  preview.style.backgroundColor = dynamicColor;
  
  /* Fallback fake hex for demo purposes to avoid complex color math in a small snippet */
  const fakeR = Math.floor((x / rect.width) * 255);
  const fakeB = Math.floor((y / rect.height) * 255);
  const finalHex = rgbToHex(fakeR, 120, fakeB).toUpperCase();
  
  hexText.innerText = finalHex;
}

map.addEventListener("pointerdown", function(e) {
  isDragging = true;
  map.setPointerCapture(e.pointerId);
  updateColor(e);
});

map.addEventListener("pointermove", function(e) {
  if (isDragging) updateColor(e);
});

map.addEventListener("pointerup", function() {
  isDragging = false;
});

copyBtn.addEventListener("click", function() {
  navigator.clipboard.writeText(hexText.innerText).then(function() {
    copyBtn.innerText = "Done!";
    setTimeout(function() {
      copyBtn.innerText = "Copy";
    }, 2000);
  });
});