/* global React, ReactDOM, HomePage */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tone": "sobrio",
  "heroComposition": "editorial",
  "servicesLayout": "tabs"
}/*EDITMODE-END*/;

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

  // Apply tone palette globally
  React.useEffect(() => {
    const root = document.documentElement;
    if (t.tone === "quente") {
      root.style.setProperty("--c-offwhite", "#efece2");
      root.style.setProperty("--c-offwhite-warm", "#e9e1d3");
    } else if (t.tone === "geometrico") {
      root.style.setProperty("--c-offwhite", "#f4f3ec");
      root.style.setProperty("--c-offwhite-warm", "#e6dbd0");
    } else {
      root.style.setProperty("--c-offwhite", "#f4f3ec");
      root.style.setProperty("--c-offwhite-warm", "#efece2");
    }
  }, [t.tone]);

  return (
    <>
      <HomePage />
      <TweaksPanel>
        <TweakSection label="Tom da paleta" />
        <TweakRadio
          label="Tom"
          value={t.tone}
          options={[
            { value: "sobrio", label: "Sóbrio" },
            { value: "quente", label: "Quente" },
            { value: "geometrico", label: "Geométrico" },
          ]}
          onChange={(v) => setTweak("tone", v)}
        />
        <TweakSection label="Layout" />
        <TweakSelect
          label="Hero"
          value={t.heroComposition}
          options={[
            { value: "editorial", label: "Editorial (passport stamps + form)" },
            { value: "minimal", label: "Minimal (só foto)" },
          ]}
          onChange={(v) => setTweak("heroComposition", v)}
        />
        <TweakSelect
          label="Serviços"
          value={t.servicesLayout}
          options={[
            { value: "tabs", label: "Tabs (atual)" },
            { value: "grid", label: "Grid 3 cards" },
          ]}
          onChange={(v) => setTweak("servicesLayout", v)}
        />
      </TweaksPanel>
    </>
  );
}

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