// App root
function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__);
  const [editMode, setEditMode] = useState(false);

  // Apply accent tokens
  useEffect(() => {
    document.documentElement.style.setProperty("--amber", tweaks.accent_1);
    document.documentElement.style.setProperty("--indigo", tweaks.accent_2);
  }, [tweaks.accent_1, tweaks.accent_2]);

  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setEditMode(true);
      if (e.data?.type === "__deactivate_edit_mode") setEditMode(false);
    };
    window.addEventListener("message", handler);
    // announce availability after listener is live
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  return (
    <>
      <Nav tweaks={tweaks} />
      <main>
        <Hero tweaks={tweaks} />
        <Showcase tweaks={tweaks} />
        <Ledger tweaks={tweaks} />
        <Kernel tweaks={tweaks} />
        <Footer tweaks={tweaks} />
      </main>
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} active={editMode} />

      <style>{`
        .hero-visual-desktop { display: block !important; }
        @media (max-width: 900px) {
          .hero-visual-desktop { display: none !important; }
          .showcase-grid, .deepdive-header, .capability-grid, .quote-grid, .footer-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </>
  );
}

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