// Top-level App — wires data + tweaks
function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply aesthetic + accent at root
  React.useEffect(() => {
    document.body.dataset.aesthetic = t.aesthetic;
    document.body.dataset.accent = t.accent;
    document.documentElement.style.setProperty("--font-serif", `"${t.serif}"`);
    document.documentElement.style.setProperty("--font-sans",  `"${t.sans}"`);
    document.documentElement.style.setProperty("--font-mono",  `"${t.mono}"`);
    // custom color overrides (only if user set a hex)
    const setVar = (name, val) => {
      if (val) document.documentElement.style.setProperty(name, val);
      else     document.documentElement.style.removeProperty(name);
    };
    setVar("--accent", t.accentHex);
    setVar("--accent-2", t.accentHex);
    setVar("--bg", t.bgHex);
    setVar("--ink", t.inkHex);
  }, [t.aesthetic, t.accent, t.serif, t.sans, t.mono, t.accentHex, t.bgHex, t.inkHex]);

  const C = COPY[t.lang];

  const SERIFS = ["Instrument Serif", "Fraunces", "Playfair Display", "DM Serif Display"];
  const SANS   = ["Inter", "IBM Plex Sans", "Space Grotesk", "DM Sans", "Geist"];
  const MONOS  = ["JetBrains Mono", "IBM Plex Mono", "Geist Mono"];

  return (
    <>
      <Nav t={C.nav} lang={t.lang} onLang={(v) => setTweak("lang", v)}/>
      <Hero t={C.hero}/>
      <Wave t={C.wave}/>
      <How t={C.how}/>
      <Modules t={C.modules}/>
      <Trace t={C.trace}/>
      <Numbers t={C.numbers}/>
      <Calculator t={C.calc}/>
      <FAQ t={C.faq}/>
      <Footer t={C.foot} lang={t.lang}/>
      <Waitlist lang={t.lang}/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio label="Lang" value={t.lang}
            options={[{ value: "tr", label: "TR" }, { value: "en", label: "EN" }]}
            onChange={(v) => setTweak("lang", v)}/>
        </TweakSection>

        <TweakSection label="Aesthetic">
          <TweakRadio label="Style" value={t.aesthetic}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "mono", label: "Dark" },
              { value: "brutalist", label: "Brut." },
            ]}
            onChange={(v) => setTweak("aesthetic", v)}/>
          <TweakRadio label="Accent" value={t.accent}
            options={[
              { value: "oxblood", label: "Oxbl." },
              { value: "amber", label: "Amber" },
              { value: "navy", label: "Navy" },
              { value: "green", label: "Green" },
            ]}
            onChange={(v) => setTweak("accent", v)}/>
        </TweakSection>

        <TweakSection label="Typography">
          <TweakSelect label="Serif (display)" value={t.serif}
            options={SERIFS} onChange={(v) => setTweak("serif", v)}/>
          <TweakSelect label="Sans (body)" value={t.sans}
            options={SANS} onChange={(v) => setTweak("sans", v)}/>
          <TweakSelect label="Mono (labels)" value={t.mono}
            options={MONOS} onChange={(v) => setTweak("mono", v)}/>
        </TweakSection>

        <TweakSection label="Custom colors (override)">
          <TweakColor label="Accent" value={t.accentHex || "#6b2424"}
            onChange={(v) => setTweak("accentHex", v)}/>
          <TweakColor label="Background" value={t.bgHex || "#f6f4ee"}
            onChange={(v) => setTweak("bgHex", v)}/>
          <TweakColor label="Ink (text)" value={t.inkHex || "#1a1a17"}
            onChange={(v) => setTweak("inkHex", v)}/>
          <TweakButton label="Reset custom colors" secondary onClick={() => {
            setTweak("accentHex", "");
            setTweak("bgHex", "");
            setTweak("inkHex", "");
          }}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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