// NSS Software — root + tweaks
const { useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#3B82F6",
  "density": "comfortable",
  "showGrid": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = ["#3B82F6", "#7DD3FC", "#A78BFA", "#F5F7FA"];

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

  // Apply theme + accent globally
  useEffectApp(() => {
    document.documentElement.classList.toggle("theme-light", t.theme === "light");
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.dataset.density = t.density;
    if (t.density === "compact") {
      document.documentElement.style.setProperty("--section-pad", "clamp(72px, 9vw, 140px)");
    } else {
      document.documentElement.style.removeProperty("--section-pad");
    }
  }, [t.theme, t.accent, t.density]);

  // reveal hook (intersection observers on .reveal / .mask-reveal)
  useReveal();

  return (
    <>
      <Progress />
      <Nav />
      <Hero />
      <Ticker />
      <Trust />
      <Services />
      <Portfolio />
      <AI />
      <Process />
      <Testimonials />
      <FinalCTA />
      <Foot />

      <TweaksPanel title="Tweaks · NSS">
        <TweakSection title="Theme">
          <TweakRadio
            label="Surface"
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[{ value: "dark", label: "Dark" }, { value: "light", label: "Light" }]}
          />
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor
            label="Accent hue"
            value={t.accent}
            onChange={(v) => setTweak("accent", v)}
            options={ACCENT_OPTIONS}
          />
        </TweakSection>
        <TweakSection title="Density">
          <TweakRadio
            label="Spacing"
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={[{ value: "comfortable", label: "Comfort" }, { value: "compact", label: "Compact" }]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

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