// src/app-v2.jsx — Root for the Mighty Orbit v0.2 brand system

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "density": 1.3,
  "headline": "We build gravity for brands that need it.",
  "pillRadius": 9999
}/*EDITMODE-END*/;

function applyTokens(t){
  const root = document.documentElement;
  const accent = ACCENTS.magenta;
  root.style.setProperty("--accent", accent.hex);
  root.style.setProperty("--accent-ink", accent.ink);
  root.style.setProperty("--r-button", `${t.pillRadius}px`);
}

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

  React.useEffect(() => { applyTokens(t); }, [t.pillRadius]);

  return (
    <div>
      {/* Sticky topbar (separate from in-hero nav) */}
      <div className="topbar">
        <div className="topbar-inner">
          <img src="assets/mightyorbit-signature.png" alt="Mighty Orbit"/>
          <div className="meta">Brand System · v0.2 · {new Date().toISOString().slice(0,10)}</div>
        </div>
      </div>

      {/* The hero IS section 00 */}
      <SecHero t={t} setTweak={setTweak}/>

      <SecFoundations/>
      <SecLogo/>
      <SecColor/>
      <SecType/>
      <SecDots t={t}/>
      <SecMotions t={t}/>
      <SecComponents t={t}/>
      <SecLanding t={t}/>

      <footer>
        <div>MIGHTY ORBIT · BRAND SYSTEM · v0.2 WORKING DRAFT</div>
        <div>mightyorbit.co</div>
      </footer>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero preview"/>
        <TweakSlider
          label="Dot density"
          value={t.density}
          min={0.3} max={2.5} step={0.05}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakText
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSelect
          label="Headline presets"
          value={t.headline}
          options={HEADLINES}
          onChange={(v) => setTweak("headline", v)}
        />

        <TweakSection label="Shape"/>
        <TweakSlider
          label="Pill radius"
          value={t.pillRadius}
          min={0} max={9999} step={1}
          unit="px"
          onChange={(v) => setTweak("pillRadius", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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