/* global React, ReactDOM */
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "headlineStyle": "mixed",
  "palette": "warm",
  "darkHero": false
}/*EDITMODE-END*/;

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

  // apply accent
  useEffectApp(() => {
    const accents = {
      gold:    { signal: "oklch(68% 0.085 75)",  deep: "oklch(56% 0.090 65)",  soft: "oklch(94% 0.030 75)" },
      blush:   { signal: "oklch(72% 0.060 25)",  deep: "oklch(60% 0.080 22)",  soft: "oklch(94% 0.025 25)" },
      sage:    { signal: "oklch(64% 0.060 145)", deep: "oklch(52% 0.070 145)", soft: "oklch(94% 0.025 145)" },
      ink:     { signal: "oklch(28% 0.025 330)", deep: "oklch(20% 0.025 330)", soft: "oklch(90% 0.012 80)" },
    };
    const a = accents[tweaks.accent] || accents.gold;
    document.documentElement.style.setProperty("--signal", a.signal);
    document.documentElement.style.setProperty("--signal-deep", a.deep);
    document.documentElement.style.setProperty("--signal-soft", a.soft);
  }, [tweaks.accent]);

  useEffectApp(() => {
    document.body.classList.toggle("dark-hero", !!tweaks.darkHero);
    document.body.dataset.palette = tweaks.palette || "warm";
  }, [tweaks.darkHero, tweaks.palette]);

  // intersection reveal
  useEffectApp(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { threshold: 0.08 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Trust />
      <Categories />
      <Process />
      <Coverage />
      <Editorial />
      <QuoteForm />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakRadio
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "gold",  label: "Gold" },
              { value: "blush", label: "Blush" },
              { value: "sage",  label: "Sage" },
              { value: "ink",   label: "Ink" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Palette mood">
          <TweakRadio
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              { value: "warm",   label: "Warm bone" },
              { value: "blush",  label: "Blush" },
              { value: "sage",   label: "Sage" },
              { value: "plaster",label: "Plaster" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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