/* embeddedTR — App root: tweak wiring + assembly */
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E11D48",
  "dark": false,
  "heroLayout": "split",
  "density": "regular"
}/*EDITMODE-END*/;

const ACCENTS = ["#E11D48", "#F97316", "#10B981", "#3B82F6", "#8B5CF6"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [join, setJoin] = useStateA(false);
  const theme = t.dark ? "dark" : "light";

  useEffectA(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", theme);
    r.setAttribute("data-density", t.density);
    r.style.setProperty("--accent", t.accent);
  }, [theme, t.density, t.accent]);

  return (
    <div id="top">
      <Nav theme={theme} toggleTheme={() => setTweak("dark", !t.dark)} onJoin={() => setJoin(true)} />
      <main>
        <Hero layout={t.heroLayout} onJoin={() => setJoin(true)} />
        <Pillars />
        <Projects />
        <Articles />
        <QA onJoin={() => setJoin(true)} />
        <Libraries />
        <YouTube />
        <Roadmap />
        <CTA onJoin={() => setJoin(true)} />
      </main>
      <Footer />
      <JoinModal open={join} onClose={() => setJoin(false)} />

      <TweaksPanel>
        <TweakSection label="Tema" />
        <TweakToggle label="Koyu mod" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakColor label="Vurgu rengi" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Düzen" />
        <TweakRadio label="Hero düzeni" value={t.heroLayout}
          options={["split", "centered"]} onChange={(v) => setTweak("heroLayout", v)} />
        <TweakRadio label="Yoğunluk" value={t.density}
          options={["compact", "regular", "comfy"]} onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

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