/* Panel Tweaks — Nocna Akademia Pana Kleksa v2 */

const TWEAK_DEFAULTS_V2 = /*EDITMODE-BEGIN*/{
  "h1Variant": "Podwórko przed zmierzchem",
  "ctaColor": ["#2B4BD7", "#E5239A"],
  "overlay": 78,
  "ticketsLeft": 12
}/*EDITMODE-END*/;

const H1_VARIANTS_V2 = {
  "Podwórko przed zmierzchem":
    "Odłóż telefon. Wróć na podwórko.",
  "Akademia dla dorosłych":
    "Akademia Pana Kleksa istnieje naprawdę. I tej nocy należy do dorosłych.",
  "Bilet powrotny":
    "Bilet powrotny do dzieciństwa. Tym razem wyłącznie dla dorosłych."
};

function applyTweaksV2(t) {
  const root = document.documentElement;
  const cta = Array.isArray(t.ctaColor) ? t.ctaColor : [t.ctaColor, t.ctaColor];
  root.style.setProperty("--cta-a", cta[0]);
  root.style.setProperty("--cta-b", cta[1] || cta[0]);
  root.style.setProperty("--overlay-strength", String(t.overlay / 100));

  const h1 = document.getElementById("hero-h1");
  if (h1 && H1_VARIANTS_V2[t.h1Variant] && h1.textContent !== H1_VARIANTS_V2[t.h1Variant]) {
    h1.textContent = H1_VARIANTS_V2[t.h1Variant];
  }
  if (window.setTicketsLeft) { window.setTicketsLeft(t.ticketsLeft); }
}

function TweaksAppV2() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_V2);

  React.useEffect(() => { applyTweaksV2(t); }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Nagłówek H1"
        value={t.h1Variant}
        options={Object.keys(H1_VARIANTS_V2)}
        onChange={(v) => setTweak("h1Variant", v)}
      />
      <TweakSlider
        label="Przyciemnienie zdjęcia"
        value={t.overlay}
        min={50}
        max={95}
        unit="%"
        onChange={(v) => setTweak("overlay", v)}
      />
      <TweakSection label="Wygląd" />
      <TweakColor
        label="Kolor przycisków CTA"
        value={t.ctaColor}
        options={[["#2B4BD7", "#E5239A"], ["#2B4BD7", "#2B4BD7"], ["#E5239A", "#7A1FA8"], ["#1B2A6B", "#2B4BD7"]]}
        onChange={(v) => setTweak("ctaColor", v)}
      />
      <TweakSection label="Sprzedaż" />
      <TweakSlider
        label="Bilety Early Bird"
        value={t.ticketsLeft}
        min={1}
        max={30}
        onChange={(v) => setTweak("ticketsLeft", v)}
      />
    </TweaksPanel>
  );
}

const tweaksMountV2 = document.createElement("div");
tweaksMountV2.id = "tweaks-root";
document.body.appendChild(tweaksMountV2);
ReactDOM.createRoot(tweaksMountV2).render(<TweaksAppV2 />);