// App — mounts all sections, wires tweaks

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

  // apply tweaks to root
  React.useEffect(()=>{
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    const accentRgb = hexToRgb(t.accent);
    root.style.setProperty("--accent-soft", `rgba(${accentRgb},.14)`);
    root.style.setProperty("--accent-glow", `rgba(${accentRgb},.35)`);
    root.setAttribute("data-density", t.density);
    document.getElementById("grid-bg").style.display = t.gridBg ? "" : "none";
    // swap mono body to sans if off
    if (!t.mono) {
      root.style.setProperty("--font-mono", "'Inter',ui-sans-serif,system-ui,sans-serif");
    } else {
      root.style.setProperty("--font-mono", "'JetBrains Mono',ui-monospace,monospace");
    }
  }, [t]);

  return (
    <>
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakRadio
          label="Preset"
          value={t.accent}
          options={[
            { value: "#D97706", label: "Amber" },
            { value: "#3B82F6", label: "Blue"  },
            { value: "#84CC16", label: "Lime"  },
          ]}
          onChange={v => setTweak("accent", v)}
        />
        <TweakColor label="Custom" value={t.accent} onChange={v=>setTweak("accent", v)} />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["dense","regular","airy"]}
          onChange={v=>setTweak("density", v)}
        />
        <TweakRadio
          label="Hero"
          value={t.heroVariant}
          options={[
            { value: "terminal", label: "Terminal" },
            { value: "minimal",  label: "Minimal" },
          ]}
          onChange={v=>setTweak("heroVariant", v)}
        />

        <TweakSection label="Treatment" />
        <TweakToggle label="Grid background" value={t.gridBg} onChange={v=>setTweak("gridBg", v)} />
        <TweakToggle label="Monospace details" value={t.mono} onChange={v=>setTweak("mono", v)} />
      </TweaksPanel>
    </>
  );
}

function hexToRgb(hex){
  const h = hex.replace("#","");
  const n = parseInt(h.length===3 ? h.split("").map(c=>c+c).join("") : h, 16);
  return `${(n>>16)&255},${(n>>8)&255},${n&255}`;
}

// Mount everything
const mounts = {
  "hero-mount": () => <Hero variant={window.TWEAK_DEFAULTS.heroVariant} />,
  "about-mount": () => <About />,
  "projects-mount": () => <Projects />,
  "research-mount": () => <Research />,
  "stack-mount": () => <Stack />,
  "education-mount": () => <Education />,
  "journey-mount": () => <Journey />,
  "contact-mount": () => <Contact />,
  "tweaks-mount": () => <App />,
};

// Hero needs to react to tweak changes; we'll re-mount via a wrapper
function HeroMount(){
  const [t] = useTweaks(window.TWEAK_DEFAULTS);
  return <Hero variant={t.heroVariant} />;
}

Object.entries(mounts).forEach(([id, C]) => {
  const el = document.getElementById(id);
  if (el) {
    const Component = id === "hero-mount" ? HeroMount : C;
    ReactDOM.createRoot(el).render(<Component />);
  }
});