// Painel de Tweaks — controles de design da primeira dobra (homepage)
const HERO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "filtroBronze": true,
  "veuEscuro": 1,
  "pbIntensidade": 100,
  "contraste": 1.06,
  "brilho": 1.04,
  "pontoEstilo": "Pontos",
  "pontoTamanho": 0.8,
  "pontoEspaco": 4,
  "pontoIntensidade": 0.55,
  "pontoDegrade": "Uniforme"
}/*EDITMODE-END*/;

const HT_COLOR = "rgb(245 241 228)";

function buildHalftone(estilo, d, g) {
  switch (estilo) {
    case "Quadrados":
      return {
        pattern: "conic-gradient(from 0deg at " + d * 2 + "px " + d * 2 + "px, transparent 0 270deg, " + HT_COLOR + " 270deg)",
        size: g + "px " + g + "px"
      };
    case "Linhas":
      return {
        pattern: "repeating-linear-gradient(to bottom, " + HT_COLOR + " 0 " + d + "px, transparent " + d + "px " + g + "px)",
        size: "auto"
      };
    case "Diagonal":
      return {
        pattern: "repeating-linear-gradient(45deg, " + HT_COLOR + " 0 " + d + "px, transparent " + d + "px " + g + "px)",
        size: "auto"
      };
    case "Grade":
      return {
        pattern: "linear-gradient(" + HT_COLOR + " " + d + "px, transparent " + d + "px), linear-gradient(90deg, " + HT_COLOR + " " + d + "px, transparent " + d + "px)",
        size: g + "px " + g + "px"
      };
    default: // Pontos
      return {
        pattern: "radial-gradient(circle, " + HT_COLOR + " " + d + "px, transparent " + (d + 0.4) + "px)",
        size: g + "px " + g + "px"
      };
  }
}

const HT_MASKS = {
  "Uniforme": "none",
  "Fade para baixo": "linear-gradient(to bottom, black 15%, transparent 96%)",
  "Fade para cima": "linear-gradient(to top, black 15%, transparent 96%)",
  "Centro limpo": "radial-gradient(ellipse 70% 70% at center, transparent 25%, black 80%)",
  "Vinheta": "radial-gradient(ellipse 75% 75% at center, black 35%, transparent 88%)"
};

function HeroTweaksApp() {
  const [t, setTweak] = useTweaks(HERO_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const hero = document.querySelector(".page-hero--video");
    if (!hero) return;
    hero.classList.toggle("hero--natural", !t.filtroBronze);
    hero.style.setProperty("--hero-scrim", t.veuEscuro);
    hero.style.setProperty("--vf-gray", t.pbIntensidade / 100);
    hero.style.setProperty("--vf-contrast", t.contraste);
    hero.style.setProperty("--vf-bright", t.brilho);
    const ht = buildHalftone(t.pontoEstilo, t.pontoTamanho, t.pontoEspaco);
    hero.style.setProperty("--ht-pattern", ht.pattern);
    hero.style.setProperty("--ht-size", ht.size);
    hero.style.setProperty("--ht-opacity", t.pontoIntensidade);
    hero.style.setProperty("--ht-mask", HT_MASKS[t.pontoDegrade] || "none");
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Filtro bronze" />
      <TweakToggle
        label="Filtro ligado"
        value={t.filtroBronze}
        onChange={(v) => setTweak("filtroBronze", v)}
      />
      <TweakSlider
        label="Preto & branco"
        value={t.pbIntensidade}
        min={0} max={100} step={5} unit="%"
        onChange={(v) => setTweak("pbIntensidade", v)}
      />
      <TweakSlider
        label="Contraste"
        value={t.contraste}
        min={0.7} max={1.8} step={0.02}
        onChange={(v) => setTweak("contraste", v)}
      />
      <TweakSlider
        label="Brilho"
        value={t.brilho}
        min={0.6} max={1.6} step={0.02}
        onChange={(v) => setTweak("brilho", v)}
      />

      <TweakSection label="Pontilhado" />
      <TweakSelect
        label="Estilo"
        value={t.pontoEstilo}
        options={["Pontos", "Quadrados", "Linhas", "Diagonal", "Grade"]}
        onChange={(v) => setTweak("pontoEstilo", v)}
      />
      <TweakSlider
        label="Tamanho do ponto"
        value={t.pontoTamanho}
        min={0.2} max={3} step={0.1} unit="px"
        onChange={(v) => setTweak("pontoTamanho", v)}
      />
      <TweakSlider
        label="Espaçamento"
        value={t.pontoEspaco}
        min={2} max={16} step={0.5} unit="px"
        onChange={(v) => setTweak("pontoEspaco", v)}
      />
      <TweakSlider
        label="Intensidade"
        value={t.pontoIntensidade}
        min={0} max={1} step={0.05}
        onChange={(v) => setTweak("pontoIntensidade", v)}
      />
      <TweakSelect
        label="Degradê"
        value={t.pontoDegrade}
        options={["Uniforme", "Fade para baixo", "Fade para cima", "Centro limpo", "Vinheta"]}
        onChange={(v) => setTweak("pontoDegrade", v)}
      />

      <TweakSection label="Cena" />
      <TweakSlider
        label="Véu escuro"
        value={t.veuEscuro}
        min={0} max={1.4} step={0.05}
        onChange={(v) => setTweak("veuEscuro", v)}
      />
    </TweaksPanel>
  );
}

(function () {
  const mount = document.createElement("div");
  mount.id = "hero-tweaks-root";
  document.body.appendChild(mount);
  ReactDOM.createRoot(mount).render(<HeroTweaksApp />);
})();