// Amazon Advies — Tweaks panel app
// Mounts the panel and applies choices to the page via CSS variables + data attrs.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "teal",
  "cta": "coral",
  "hero": "visual",
  "motion": true
}/*EDITMODE-END*/;

const ACCENTS = {
  teal:   { accent: "#12B5A0", deep: "#0E9485", label: "Mint" },
  sky:    { accent: "#3D7BF0", deep: "#2A5FC9", label: "Blauw" },
  lilac:  { accent: "#8B6CEF", deep: "#6E4FD6", label: "Lila" },
  coralA: { accent: "#FF7A66", deep: "#E2553F", label: "Koraal" }
};
const CTAS = {
  coral:  { cta: "#FB5436", deep: "#E23D20", label: "Koraal" },
  orange: { cta: "#FF9D17", deep: "#E07E00", label: "Oranje" },
  red:    { cta: "#E5392A", deep: "#C32717", label: "Rood" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS.teal;
    const c = CTAS[t.cta] || CTAS.coral;
    root.style.setProperty("--accent", a.accent);
    root.style.setProperty("--accent-deep", a.deep);
    root.style.setProperty("--cta", c.cta);
    root.style.setProperty("--cta-deep", c.deep);
    root.setAttribute("data-hero", t.hero);
    root.setAttribute("data-motion", t.motion ? "on" : "off");
  }, [t.accent, t.cta, t.hero, t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Kleur" />
      <TweakColor
        label="Accentkleur"
        value={(ACCENTS[t.accent] || ACCENTS.teal).accent}
        options={Object.keys(ACCENTS).map((k) => ACCENTS[k].accent)}
        onChange={(v) => {
          const key = Object.keys(ACCENTS).find((k) => ACCENTS[k].accent === v) || "teal";
          setTweak("accent", key);
        }}
      />
      <TweakColor
        label="CTA-kleur"
        value={(CTAS[t.cta] || CTAS.coral).cta}
        options={Object.keys(CTAS).map((k) => CTAS[k].cta)}
        onChange={(v) => {
          const key = Object.keys(CTAS).find((k) => CTAS[k].cta === v) || "coral";
          setTweak("cta", key);
        }}
      />
      <TweakSection label="Layout & beweging" />
      <TweakRadio
        label="Hero-stijl"
        value={t.hero}
        options={["visual", "strak"]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakToggle
        label="Beweging / animaties"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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