/* App shell - nav, theme toggle, and page composition */

const FONT_PAIRING = {
  display: '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
  body: '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif',
  mono: '"SF Mono", "Cascadia Mono", Consolas, Menlo, monospace',
  serif: 'Georgia, "Times New Roman", ui-serif, serif',
};

function App() {
  const [theme, setTheme] = useState(() => {
    try {
      return localStorage.getItem("portfolio-theme") || "light";
    } catch {
      return "light";
    }
  });

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try {
      localStorage.setItem("portfolio-theme", theme);
    } catch {
      // localStorage may be unavailable in locked-down previews.
    }
  }, [theme]);

  useEffect(() => {
    document.documentElement.style.setProperty("--display", FONT_PAIRING.display);
    document.documentElement.style.setProperty("--body", FONT_PAIRING.body);
    document.documentElement.style.setProperty("--sans", FONT_PAIRING.body);
    document.documentElement.style.setProperty("--mono", FONT_PAIRING.mono);
    document.documentElement.style.setProperty("--serif", FONT_PAIRING.serif);
    document.documentElement.style.setProperty("--density", 1);
  }, []);

  useEffect(() => {
    const scrollToHash = () => {
      const id = window.location.hash.slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (!el) return;
      const currentTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      const top = el.getBoundingClientRect().top + currentTop - 70;
      document.documentElement.scrollTop = top;
      document.body.scrollTop = top;
      if (typeof window.scrollTo === "function") {
        window.scrollTo({ top, behavior: "auto" });
      }
    };

    let tries = 0;
    const interval = window.setInterval(() => {
      tries += 1;
      scrollToHash();
      const id = window.location.hash.slice(1);
      const el = id ? document.getElementById(id) : null;
      if (tries >= 80 || (el && Math.abs(el.getBoundingClientRect().top - 70) < 2 && tries > 16)) {
        window.clearInterval(interval);
      }
    }, 100);
    window.addEventListener("hashchange", scrollToHash);
    return () => {
      window.clearInterval(interval);
      window.removeEventListener("hashchange", scrollToHash);
    };
  }, []);

  const toggleTheme = () => setTheme((current) => (current === "dark" ? "light" : "dark"));

  return (
    <React.Fragment>
      <Nav theme={theme} toggleTheme={toggleTheme} />
      <main>
        <Hero heroLayout="split" />
        <Story />
        <Quantesic />
        <Experience />
        <Skills />
        <Writing />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

function Nav({ theme, toggleTheme }) {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const goTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 60;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#top" className="nav-logo" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <span className="qmark">Q</span>
          <span className="wordmark">Quintin<span className="tesic"> Christopher</span></span>
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#about" onClick={goTo("about")}>About</a>
          <a className="nav-link" href="#quantesic" onClick={goTo("quantesic")}>Work</a>
          <a className="nav-link" href="#experience" onClick={goTo("experience")}>Experience</a>
          <a className="nav-link" href="#writing" onClick={goTo("writing")}>Notes</a>
          <a className="nav-link" href="#contact" onClick={goTo("contact")}>Contact</a>
        </div>
        <div className="nav-actions">
          <button
            className="theme-btn"
            onClick={toggleTheme}
            aria-label="Toggle theme"
            title={theme === "dark" ? "Switch to light" : "Switch to dark"}
          >
            {theme === "dark" ? <Icons.sun /> : <Icons.moon />}
          </button>
          <a href="assets/Quintin-Christopher-Resume.pdf" download className="btn btn-primary nav-resume">
            <Icons.download /> Resume
          </a>
        </div>
      </div>
    </nav>
  );
}

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