// tweaks-home.jsx — Home page tweak controls
// Controls the drop shadow on the hero image rectangle.

const HOME_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "shadowStyle": "strong",
  "shadowColor": "#0F0F10"
}/*EDITMODE-END*/;

const SHADOW_PRESETS = {
  none:   { label: "None",   value: "none" },
  soft:   { label: "Soft",   value: "0 12px 28px {c}26, 0 4px 10px {c}1f" },
  medium: { label: "Medium", value: "0 22px 48px {c}38, 0 8px 18px {c}24" },
  strong: { label: "Strong", value: "0 32px 64px {c}54, 0 14px 28px {c}3a" },
  hard:   { label: "Hard",   value: "16px 16px 0 {c}" },
};

function rgba(hex, alphaHex) {
  // hex like "#0F0F10", alphaHex like "26"
  return hex + alphaHex;
}

function buildShadow(style, color) {
  const preset = SHADOW_PRESETS[style] || SHADOW_PRESETS.soft;
  if (preset.value === "none") return "none";
  return preset.value.replaceAll("{c}", color);
}

function HomeTweaks() {
  const [t, setTweak] = useTweaks(HOME_TWEAK_DEFAULTS);

  // Apply the shadow to the hero image whenever values change
  React.useEffect(() => {
    const img = document.querySelector('.hero-media img');
    if (!img) return;
    img.style.boxShadow = buildShadow(t.shadowStyle, t.shadowColor);
    // Make the shadow visible outside the rounded crop
    const media = document.querySelector('.hero-media');
    if (media) {
      media.style.overflow = t.shadowStyle === 'none' ? 'hidden' : 'visible';
    }
  }, [t.shadowStyle, t.shadowColor]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero image shadow" />
      <TweakSelect
        label="Style"
        value={t.shadowStyle}
        options={[
          { value: "none",   label: "None" },
          { value: "soft",   label: "Soft" },
          { value: "medium", label: "Medium" },
          { value: "strong", label: "Strong" },
          { value: "hard",   label: "Hard offset" },
        ]}
        onChange={(v) => setTweak("shadowStyle", v)}
      />
      <TweakColor
        label="Color"
        value={t.shadowColor}
        options={["#0F0F10", "#C8102E", "#1f3a5f", "#5a3b0f"]}
        onChange={(v) => setTweak("shadowColor", v)}
      />
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement("div");
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<HomeTweaks />);