// app.jsx — main app with hamburger nav + page routing.

const { useState: useState_app, useEffect: useEffect_app } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "filmisch",
  "accent": "#c2402a"
}/*EDITMODE-END*/;

const THEMES = [
  { id: "filmisch", label: "Filmisch" },
  { id: "krant",    label: "Krant" },
  { id: "klassiek", label: "Klassiek" },
  { id: "minimal",  label: "Minimal" },
];

const ACCENTS = ["#c2402a", "#7d1f1f", "#1a3a5c", "#1f4d3a", "#b48a3a", "#ededed"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeView, setActiveView] = useState_app("home");
  const [menuOpen, setMenuOpen]     = useState_app(false);
  const [selectedBookId, setSelectedBookId] = useState_app(null);

  // Apply theme + accent at document level
  useEffect_app(() => {
    document.documentElement.setAttribute("data-theme", t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
    const dark = (t.accent === "#ededed");
    document.documentElement.style.setProperty("--accent-ink", dark ? "#0b0b0d" : "#fdfbf6");
  }, [t.theme, t.accent]);

  // Hide boot loader
  useEffect_app(() => {
    const b = document.getElementById("boot");
    if (b) { b.classList.add("hidden"); setTimeout(()=>b.remove(), 500); }
  }, []);

  // Scroll to top when view changes
  useEffect_app(() => {
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }, [activeView, selectedBookId]);

  const navigate = (id) => {
    setSelectedBookId(null);
    setActiveView(id);
  };

  const openBook = (book) => {
    setSelectedBookId(book.id);
    setActiveView("book");
  };

  const selectedBook = selectedBookId ? BOOKS.find(b => b.id === selectedBookId) : null;

  return (
    <>
      <HamburgerNav open={menuOpen} setOpen={setMenuOpen}
                    activeView={activeView} onNavigate={navigate} />

      <main className={`view view-${activeView}`}>
        {activeView === "home" && (
          <Hero onOpenBook={openBook} />
        )}
        {activeView === "book" && selectedBook && (
          <SingleBookPage book={selectedBook}
                          onBackHome={()=>navigate("home")}
                          onSeeAll={()=>navigate("boeken")} />
        )}
        {activeView === "boeken" && (
          <Books />
        )}
        {activeView === "biografie"  && <BiografiePage />}
        {activeView === "interviews" && <InterviewsPage />}
        {activeView === "vragen"     && <VragenPage />}
        {activeView === "agenda"     && <AgendaPage />}
        {activeView === "contact"    && <ContactPage />}
      </main>

      <Footer activeView={activeView} onNavigate={navigate} />

      <TweaksPanel>
        <TweakSection label="Sfeer" />
        <TweakRadio label="Variant" value={t.theme}
          options={THEMES.map(x=>x.id)}
          onChange={(v) => setTweak('theme', v)} />
        <TweakColor label="Accent" value={t.accent}
          options={ACCENTS}
          onChange={(v)=>setTweak('accent', v)} />
      </TweaksPanel>
    </>
  );
}

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