/* App assembly + Tweaks */

const ACCENT_MAP = {
  "#d4f26b": "#0a0a0a", // Acid lime
  "#e8b860": "#1a1410", // Ochre
  "#7fd1de": "#0a1a1f", // Pacific
  "#ff7a59": "#1a0a07", // Sunset
};

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#d4f26b",
  "heroVariant": "tagline"
}/*EDITMODE-END*/;

function ApplyAccent({ accent }) {
  React.useEffect(() => {
    const ink = ACCENT_MAP[accent] || "#0a0a0a";
    document.documentElement.style.setProperty("--accent", accent);
    document.documentElement.style.setProperty("--accent-ink", ink);
  }, [accent]);
  return null;
}

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

  return (
    <>
      <ApplyAccent accent={t.accent} />
      <Header />
      <main>
        <Hero heroVariant={t.heroVariant} />
        <Services />
        <Work />
        <About />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent colour"
          value={t.accent}
          onChange={(v) => setTweak("accent", v)}
          options={Object.keys(ACCENT_MAP)}
        />
        <TweakSection label="Hero" />
        <TweakRadio
          label="Treatment"
          value={t.heroVariant}
          onChange={(v) => setTweak("heroVariant", v)}
          options={[
            { value: "tagline", label: "Tagline" },
            { value: "duality", label: "AR duality" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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