/* tweaks-app.jsx — panel de Tweaks para la landing de JL Landscaping */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#d4af37", "#ecdca0"],
  "palmScale": 1,
  "floatAmp": 16,
  "showMeta": true,
  "spores": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.documentElement;
    const [gold, goldSoft] = t.accent;
    root.style.setProperty("--gold", gold);
    root.style.setProperty("--gold-soft", goldSoft);
    root.style.setProperty("--line", `${gold}29`);
    root.style.setProperty("--palm-scale", String(t.palmScale));
    root.style.setProperty("--float-amp", `${t.floatAmp}px`);
    const meta = document.querySelector(".hero-trust");
    if (meta) meta.style.display = t.showMeta ? "" : "none";
    const sp = document.getElementById("spores");
    if (sp) sp.style.display = t.spores ? "" : "none";
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Marca" />
      <TweakColor
        label="Color de acento"
        value={t.accent}
        options={[
          ["#d4af37", "#ecdca0"],
          ["#5fd08a", "#bff3d2"],
          ["#f4a259", "#ffd9b3"],
          ["#e6e0cf", "#ffffff"],
        ]}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Hero · palmas" />
      <TweakSlider label="Tamaño de palmas" value={t.palmScale} min={0.7} max={1.35} step={0.05} unit="×"
        onChange={(v) => setTweak("palmScale", v)} />
      <TweakSlider label="Flotación" value={t.floatAmp} min={0} max={34} step={2} unit="px"
        onChange={(v) => setTweak("floatAmp", v)} />
      <TweakToggle label="Partículas de luz" value={t.spores}
        onChange={(v) => setTweak("spores", v)} />
      <TweakToggle label="Línea de marca" value={t.showMeta}
        onChange={(v) => setTweak("showMeta", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksApp />);