// app.jsx — MSO root with Tweaks panel

const TWEAK_DEFAULTS = window.__TWEAK_DEFAULTS__ || {
  direction: "editorial",
  hexMotif: "subtle",
  density: "regular",
  heroTone: "dark",
  showSerifAccents: true,
};

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-direction", t.direction);
    r.setAttribute("data-hex-motif", t.hexMotif);
    r.setAttribute("data-density", t.density);
    r.setAttribute("data-serif", t.showSerifAccents ? "on" : "off");
  }, [t.direction, t.hexMotif, t.density, t.showSerifAccents]);

  return (
    <React.Fragment>
      <MsoNav />
      <main>
        <MsoHero tone={t.heroTone} hexMotif={t.hexMotif} />
        <MsoFactsStrip />
        <MsoServices />
        <MsoEngage />
        <MsoMetrics />
        <MsoCompliance />
        <MsoFaq />
        <MsoContact />
        <MsoLeadership />
      </main>
      <MsoFooter />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Visual direction" />
        <TweakRadio
          label="Direction"
          value={t.direction}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "scientific", label: "Scientific" },
            { value: "corporate", label: "Corporate" },
          ]}
          onChange={(v) => setTweak("direction", v)}
        />
        <TweakToggle
          label="Source Serif accents"
          value={t.showSerifAccents}
          onChange={(v) => setTweak("showSerifAccents", v)}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Hero tone"
          value={t.heroTone}
          options={[
            { value: "light", label: "Light" },
            { value: "dark", label: "Deep teal" },
          ]}
          onChange={(v) => setTweak("heroTone", v)}
        />

        <TweakSection label="Hex motif" />
        <TweakRadio
          label="Intensity"
          value={t.hexMotif}
          options={[
            { value: "off", label: "Off" },
            { value: "subtle", label: "Subtle" },
            { value: "strong", label: "Strong" },
          ]}
          onChange={(v) => setTweak("hexMotif", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={[
            { value: "compact", label: "Compact" },
            { value: "regular", label: "Regular" },
            { value: "comfy", label: "Comfy" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<MsoApp />);