/* ════════════════════════════════════════════════════════════════════
   <NOVO DECK> · DECK · painel de Tweaks
   Controles de movimento da casca (intensidade / velocidade / ambiente).
   Genérico — serve a qualquer deck. Renomeie só se precisar de tweaks
   exclusivos deste deck.
   ════════════════════════════════════════════════════════════════════ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "intensidade": "Vídeo",
  "velocidade": 1,
  "ambiente": true
}/*EDITMODE-END*/;

// intensidade → multiplicador de distância/escala/blur (lido por deck-motion.css)
const DECK_AMT = { "Sutil": 0.7, "Cinema": 1.1, "Vídeo": 1.6 };

function DeckTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const amt = DECK_AMT[t.intensidade] != null ? DECK_AMT[t.intensidade] : 1.6;
    root.style.setProperty('--anim-amt', String(amt));
    // slider maior = mais rápido → spd menor (multiplica as durações)
    root.style.setProperty('--anim-spd', String(1 / (t.velocidade || 1)));
    const deck = document.querySelector('deck-stage');
    if (deck) deck.classList.toggle('cine-amb', !!t.ambiente);
  }, [t.intensidade, t.velocidade, t.ambiente]);

  const replay = () => { if (window.deckFx) window.deckFx.replay(); };

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Movimento" />
      <TweakRadio
        label="Intensidade"
        value={t.intensidade}
        options={["Sutil", "Cinema", "Vídeo"]}
        onChange={(v) => setTweak('intensidade', v)}
      />
      <TweakSlider
        label="Velocidade"
        value={t.velocidade}
        min={0.6} max={1.6} step={0.05} unit="x"
        onChange={(v) => setTweak('velocidade', v)}
      />
      <TweakToggle
        label="Movimento ambiente"
        value={t.ambiente}
        onChange={(v) => setTweak('ambiente', v)}
      />
      <TweakSection label="Pré-visualizar" />
      <TweakButton label="Repetir animação" onClick={replay} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('deck-tweaks-root')).render(<DeckTweaksApp />);