// App — main shell. Wires sections together. No top nav.
// Tweaks exposed for accent color, font family, and feature toggles.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#CD5C5C",
  "fontFamily": "Inter",
  "showGlobe": true,
  "autoRotate": true
}/*EDITMODE-END*/;

// Curated sans stacks — each is the recommended pairing for that family
const FONT_STACKS = {
  "Geist":         '"Geist", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif',
  "Inter":         '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  "IBM Plex Sans": '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  "Manrope":       '"Manrope", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif',
};

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    // build a tint
    const c = t.accent.replace("#", "");
    const r = parseInt(c.substring(0, 2), 16);
    const g = parseInt(c.substring(2, 4), 16);
    const b = parseInt(c.substring(4, 6), 16);
    document.documentElement.style.setProperty("--accent-tint", `rgba(${r},${g},${b},0.08)`);
  }, [t.accent]);

  React.useEffect(() => {
    const stack = FONT_STACKS[t.fontFamily] || FONT_STACKS["Geist"];
    document.documentElement.style.setProperty("--sans", stack);
    // Geist has stylistic alternates worth enabling; the others don't, so
    // strip the feature-settings override for non-Geist families.
    document.body.style.fontFeatureSettings =
      t.fontFamily === "Geist" ? '"ss01", "cv11"' : '"kern", "liga"';
  }, [t.fontFamily]);

  return (
    <React.Fragment>
      <div className="shell">
        <Hero />
        <News />
        <Publications />
        {t.showGlobe && <GlobeSection />}
        <Colophon />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Type" />
        <TweakSelect
          label="Font family"
          value={t.fontFamily}
          options={["Geist", "Inter", "IBM Plex Sans", "Manrope"]}
          onChange={(v) => setTweak("fontFamily", v)}
        />

        <TweakSection label="Palette" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#CD5C5C", "#1a56db", "#0f7a4a", "#111111"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Layout" />
        <TweakToggle
          label="Show globe section"
          value={t.showGlobe}
          onChange={(v) => setTweak("showGlobe", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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