/* Root — compõe o site, observa reveal e expõe as variações via Tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "D",
  "createVariant": "B",
  "dFill": 0.5,
  "dDensity": 39,
  "dReveal": 150
}/*EDITMODE-END*/;

function useMotion(deps) {
  React.useEffect(() => {
    // novos nós podem ter sido injetados (troca de variante)
    const id = requestAnimationFrame(() => window.Motion && window.Motion.refreshMotion());
    return () => cancelAnimationFrame(id);
  }, deps);
  React.useEffect(() => {
    if (window.Motion) window.Motion.initParallax();
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const isD = t.heroVariant === "D";
  useMotion([t.heroVariant, t.createVariant]);

  const heroLabels = { D: "Confete revela o logo (interativo)", A: "Editorial (foto à direita)", B: "Manifesto (centralizado)", C: "Assimétrico (com sorriso)" };
  const createLabels = { A: "Lista vertical", B: "Linha do tempo (scroll)" };

  return (
    <React.Fragment>
      <window.Nav darkTop={isD} />
      <main>
        {isD
          ? <window.HeroD fill={t.dFill} density={t.dDensity} reveal={t.dReveal} />
          : <window.Hero variant={t.heroVariant} />}
        <window.ParaQuem />
        <window.Diferencial />
        <window.Diferenciais />
        <window.Servicos />
        <window.Neuro />
        <window.Create variant={t.createVariant} />
        <window.Clients />
        <window.Cases />
        <window.CtaFinal />
      </main>
      <window.Footer />

      <TweaksPanel>
        <TweakSection label="Abertura (HERO)" />
        <TweakRadio label="Layout" value={t.heroVariant} options={["D", "A", "B", "C"]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <div style={{ fontSize: 12, color: "#777", margin: "-4px 2px 6px" }}>{heroLabels[t.heroVariant]}</div>

        {isD ? (
          <React.Fragment>
            <TweakSlider label="Altura do confete" value={t.dFill} min={0.3} max={1} step={0.05}
              onChange={(v) => setTweak("dFill", v)} />
            <TweakSlider label="Densidade" value={t.dDensity} min={20} max={110} step={2}
              onChange={(v) => setTweak("dDensity", v)} />
            <TweakSlider label="Raio de revelação" value={t.dReveal} min={80} max={260} step={10} unit="px"
              onChange={(v) => setTweak("dReveal", v)} />
          </React.Fragment>
        ) : null}

        <TweakSection label="Metodologia (CREATE)" />
        <TweakRadio label="Formato" value={t.createVariant} options={["A", "B"]}
          onChange={(v) => setTweak("createVariant", v)} />
        <div style={{ fontSize: 12, color: "#777", margin: "-4px 2px 4px" }}>{createLabels[t.createVariant]}</div>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);