// App shell — mounts the prototype
const { useState: uSA, useEffect: uEA, useRef: uRA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  palette: "dmg",
  heroVariant: "portrait",
  paperTex: 0.9,
  crt: 0.35,
  typo: "pixel",
}; /*EDITMODE-END*/

function App() {
  // Section: 'intro' | 'main' ; activeSection for scroll anchor
  const [booted, setBooted] = uSA(() => {
    try {
      return localStorage.getItem("ljv_booted") === "1";
    } catch (e) {
      return false;
    }
  });
  const [active, setActive] = uSA("hero");
  const [route, setRoute] = uSA(() => {
    try {
      const saved = localStorage.getItem("ljv_route");
      if (saved) return JSON.parse(saved);
    } catch (e) {}
    return { name: "home" };
  });
  const [tweaks, setTweaks] = uSA(TWEAK_DEFAULTS);

  uEA(() => {
    try {
      localStorage.setItem("ljv_route", JSON.stringify(route));
    } catch (e) {}
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [route]);

  // Apply palette + css vars
  uEA(() => {
    applyPalette(tweaks.palette);
    document.documentElement.style.setProperty("--paper-tex", tweaks.paperTex);
    document.documentElement.style.setProperty("--crt", tweaks.crt);
  }, [tweaks.palette, tweaks.paperTex, tweaks.crt]);

  const start = () => {
    try {
      localStorage.setItem("ljv_booted", "1");
    } catch (e) {}
    setBooted(true);
  };

  const nav = (key) => {
    // Route-level nav
    if (key === "blog") {
      setRoute({ name: "blog" });
      setActive("blog");
      return;
    }
    if (key === "home") {
      setRoute({ name: "home" });
      setActive("hero");
      return;
    }
    // Section scroll on home
    if (route.name !== "home") {
      setRoute({ name: "home" });
      setActive(key);
      setTimeout(() => scrollToSection(key), 60);
      return;
    }
    setActive(key);
    scrollToSection(key);
  };
  const scrollToSection = (key) => {
    const el = document.getElementById(key);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 20;
      window.scrollTo({ top: y, behavior: "smooth" });
    }
  };
  const openPost = (id) => setRoute({ name: "post", id });
  const openBlog = () => setRoute({ name: "blog" });
  const goHome = () => setRoute({ name: "home" });

  uEA(() => {
    // Clear reasoning placeholder once mounted
    const r = document.getElementById("reasoning");
    if (r) r.style.display = "none";
  }, []);

  // Typography: always pixel
  uEA(() => {
    const body = document.body;
    body.classList.remove("typo-serif", "typo-mono", "typo-balanced");
    body.classList.add("typo-pixel");
  }, []);

  if (!booted) {
    // Skip intro entirely — people already know who Lewis is
    setBooted(true);
    try {
      localStorage.setItem("ljv_booted", "1");
    } catch (e) {}
  }

  const isFeedback = window.location.pathname === "/feedback";

  if (isFeedback) {
    return (
      <>
        <Masthead onNav={nav} active={active} />
        <FeedbackScreen />
        <Footer />
      </>
    );
  }

  return (
    <>
      <Masthead onNav={nav} active={active} />
      <ContactScreen />
      <UpToScreen onNav={nav} />
      <Footer />
      <Tweaks state={tweaks} setState={setTweaks} />
    </>
  );
}

// Inject additional CSS (keyframes, typo overrides)
const styleEl = document.createElement("style");
styleEl.textContent = `
  @keyframes blink { 50% { opacity: 0; } }
  body.typo-pixel * { font-family: 'Press Start 2P', monospace !important; letter-spacing: 0.02em !important; }
  body.typo-pixel { font-size: 14px !important; line-height: 1.6 !important; }
  body.typo-pixel h1 { font-size: 22px !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
  body.typo-pixel h2 { font-size: 18px !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
  body.typo-pixel h3 { font-size: 14px !important; line-height: 1.4 !important; }
  body.typo-pixel p, body.typo-pixel li, body.typo-pixel span, body.typo-pixel div, body.typo-pixel label { font-size: 12px !important; line-height: 1.7 !important; }
  body.typo-pixel button { font-size: 10px !important; line-height: 1.4 !important; }
  body.typo-pixel input, body.typo-pixel textarea, body.typo-pixel select { font-size: 12px !important; line-height: 1.6 !important; }
  body.typo-pixel i, body.typo-pixel em { font-style: normal !important; }
  body.typo-serif h1, body.typo-serif h2, body.typo-serif h3, body.typo-serif p, body.typo-serif li { font-family: 'Old Standard TT', serif !important; }
  body.typo-mono h1, body.typo-mono h2, body.typo-mono h3, body.typo-mono p, body.typo-mono li { font-family: 'JetBrains Mono', monospace !important; }
  input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
`;
document.head.appendChild(styleEl);

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