// ============================================================
// HOMEPAGE — top-level orchestrator
// ============================================================

const { useState, useEffect } = React;

function Homepage() {
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "accent": "#f5c14e",
    "showFoundersBar": true,
    "showHeroLogo": true
  }/*EDITMODE-END*/;

  const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Reading prefs persisted to localStorage
  const [prefs, setPrefs] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("brains.prefs") || "null");
      if (saved) return saved;
    } catch (e) {}
    return {
      theme: "midnight",
      textSize: "M",
      lineSpacing: "Standard",
      dyslexia: false,
    };
  });
  useEffect(() => {
    try {
      localStorage.setItem("brains.prefs", JSON.stringify(prefs));
    } catch (e) {}
  }, [prefs]);
  const [readingOpen, setReadingOpen] = useState(false);

  const baseTheme = window.THEMES[prefs.dyslexia ? "light" : prefs.theme];
  // Apply accent override from tweaks
  const theme = { ...baseTheme, accent: tweaks.accent, rule: tweaks.accent };

  const scale = window.TEXT_SCALES[prefs.textSize];
  const lineMap = { Tight: 1.45, Standard: 1.6, Roomy: 1.8 };

  // global font-size token applied to body
  useEffect(() => {
    document.body.style.fontSize = `${scale.base}px`;
    document.body.style.lineHeight = `${lineMap[prefs.dyslexia ? "Roomy" : prefs.lineSpacing]}`;
    document.body.style.background = theme.page;
    document.body.style.color = theme.ink;
  }, [prefs.textSize, prefs.lineSpacing, theme.page, theme.ink]);

  const { Nav, ReadingPanel, HeroSection, WorkSection, WhySection, FoundingSection, PartnersSection, Footer } = window;

  return (
    <div style={{ background: theme.page, color: theme.ink, minHeight: "100vh" }}>
      <Nav theme={theme} prefs={prefs} setPrefs={setPrefs} openReading={readingOpen} setOpenReading={setReadingOpen} />
      <ReadingPanel
        open={readingOpen}
        onClose={() => setReadingOpen(false)}
        theme={theme}
        prefs={prefs}
        setPrefs={setPrefs}
      />

      <HeroSection theme={theme} prefs={prefs} />
      <WorkSection theme={theme} />
      <WhySection theme={theme} />
      <FoundingSection theme={theme} />
      <PartnersSection theme={theme} />
      <Footer theme={theme} prefs={prefs} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakColor
            label="Accent color"
            value={tweaks.accent}
            options={["#f5c14e", "#e2a82a", "#7aa3ff", "#5fd28a"]}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Info">
          <div style={{ fontSize: 12, color: "#999", lineHeight: 1.5, padding: "6px 2px" }}>
            For theme, motion, text size & accessibility settings, use the{" "}
            <strong style={{ color: theme.accent }}>Viewing Preferences</strong> button in the top nav.
            Those persist per-visitor; these tweaks edit the design source.
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Homepage />);