const { useState, useEffect } = React;

function App() {
  const { NavBar, Footer } = window.GT;
  const [screen, setScreen] = useState("home");

  // Re-render lucide icons whenever the screen changes
  useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
    window.scrollTo({ top: 0 });
  }, [screen]);

  const go = (s) => (e) => { if (e) e.preventDefault(); setScreen(s); };

  // "Sermons" stays active on the detail view too
  const sermonsActive = screen === "sermons" || screen === "sermon-detail";

  const links = [
    { label: "Home", href: "#", active: screen === "home", onClick: go("home") },
    { label: "About", href: "#", active: screen === "about", onClick: go("about") },
    { label: "Sermons", href: "#", active: sermonsActive, onClick: go("sermons") },
    { label: "Give", href: "#", active: screen === "give", onClick: go("give") },
    { label: "Visit", href: "#", active: screen === "visit", onClick: go("visit") },
  ];

  // onNavigate from any screen accepts a route key
  const onNavigate = (s) => {
    const map = { contact: "visit", services: "visit" };
    setScreen(map[s] || s);
  };

  return (
    <div>
      <NavBar links={links} cta={{ label: "Plan Your Visit", href: "#", onClick: go("visit") }} />
      {screen === "home" && <HomeScreen onNavigate={onNavigate} />}
      {screen === "about" && <AboutScreen onNavigate={onNavigate} />}
      {screen === "sermons" && <SermonsScreen onNavigate={onNavigate} />}
      {screen === "sermon-detail" && <SermonDetailScreen onNavigate={onNavigate} />}
      {screen === "give" && <GiveScreen onNavigate={onNavigate} />}
      {screen === "visit" && <PlanVisitScreen onNavigate={onNavigate} />}
      <Footer />
    </div>
  );
}

window.App = App;