// Root app

const { useEffect: useEffectApp, useState: useStateApp } = React;

function Nav({ dark, onToggle }) {
  const items = [
    ["research", "Research"],
    ["projects", "Projects"],
    ["cohere", "Cohere"],
    ["throughline", "Thread"],
    ["tech", "Stack"],
    ["contact", "Contact"]
  ];
  const [active, setActive] = useStateApp("research");
  useEffectApp(() => {
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
      },
      { rootMargin: "-40% 0px -55% 0px" }
    );
    items.forEach(([id]) => {
      const el = document.getElementById(id);
      if (el) io.observe(el);
    });
    return () => io.disconnect();
  }, []);
  return (
    <nav className="nav">
      <a href="#top" className="nav-brand mono">F.S.</a>
      <ul className="nav-list">
        {items.map(([id, label]) => (
          <li key={id}>
            <a href={`#${id}`} className={active === id ? "active" : ""}>{label}</a>
          </li>
        ))}
      </ul>
      <button className="mode-toggle mono small" onClick={onToggle} aria-label="Toggle theme">
        {dark ? "◐ light" : "◑ dark"}
      </button>
    </nav>
  );
}

function App() {
  const [tweaks, setTweak] = window.useTweaks({
    accent: "forest",
    density: "comfortable",
    fontPair: "serif-sans",
    dark: false
  });

  useEffectApp(() => {
    const root = document.documentElement;
    root.dataset.accent = tweaks.accent;
    root.dataset.density = tweaks.density;
    root.dataset.fontpair = tweaks.fontPair;
    root.dataset.theme = tweaks.dark ? "dark" : "light";
  }, [tweaks]);

  return (
    <>
      <Nav dark={tweaks.dark} onToggle={() => setTweak("dark", !tweaks.dark)} />

      <main id="top" className="main">
        <window.Hero />
        <window.StatBar />
        <window.ResearchProjects />

        <window.Section id="cohere" label="§ 03 / Collaboration" title="Cohere Labs · Expedition Tiny Aya" kicker="Team captain. 4 SAEs on multilingual LLMs covering 61 languages.">
          <window.CohereCollab />
        </window.Section>

        <window.Section id="throughline" label="§ 04 / Research thread" title="One argument across five papers.">
          <window.Throughline />
          <div className="viz-wrap">
            <div className="viz-head">
              <span className="mono subtle small">FIGURE · Interactive</span>
              <h3>SAE-LoRA, visualized</h3>
              <p className="muted">Toggle between a frozen SAE and SAE-LoRA (ours) to see how retrieval-discriminative features dominate after adaptation.</p>
            </div>
            <window.SaeLoRAViz />
          </div>
        </window.Section>

        <window.Section id="education" label="§ 05 / Education" title="Credentials.">
          <window.Education />
        </window.Section>

        <window.Section id="tech" label="§ 06 / Stack" title="Tools I reach for.">
          <window.TechStack />
        </window.Section>

        <window.Section id="contact" label="§ 07 / Contact" title="Say hello.">
          <window.Contact />
        </window.Section>

        <section className="activity-section">
          <div className="activity-head mono subtle small">RECENT ACTIVITY</div>
          <window.RecentActivity />
        </section>

        <footer className="footer">
          <div className="mono subtle small">
            © 2026 Farseen Shaikh · Built as a portfolio draft · Last updated Apr 2026
          </div>
        </footer>
      </main>

      <PortfolioTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

function PortfolioTweaks({ tweaks, setTweak }) {
  const { TweaksPanel, TweakSection, TweakRadio, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Theme">
        <TweakToggle label="Dark mode" value={tweaks.dark} onChange={v => setTweak("dark", v)} />
        <TweakRadio
          label="Accent"
          value={tweaks.accent}
          onChange={v => setTweak("accent", v)}
          options={[
            { value: "forest", label: "Forest" },
            { value: "amber", label: "Amber" },
            { value: "indigo", label: "Indigo" },
            { value: "mono", label: "Mono" }
          ]}
        />
      </TweakSection>
      <TweakSection title="Typography">
        <TweakRadio
          label="Font pair"
          value={tweaks.fontPair}
          onChange={v => setTweak("fontPair", v)}
          options={[
            { value: "serif-sans", label: "Fraunces + Inter" },
            { value: "all-sans", label: "Inter only" },
            { value: "mono", label: "JetBrains Mono" }
          ]}
        />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakRadio
          label="Density"
          value={tweaks.density}
          onChange={v => setTweak("density", v)}
          options={[
            { value: "comfortable", label: "Comfortable" },
            { value: "compact", label: "Compact" }
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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