/* ============================================================
   STREAM WITH LIEN — App shell, routing, language state
   ============================================================ */

/* Shared hero for inner pages lives in components.jsx (window.PageHero) */

const ROUTES = ["home", "setup", "muziekbingo", "playlists", "letters", "loveletters", "contact", "webshop"];

function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("swl-lang") || "nl");
  const [route, setRoute] = useState(() => {
    const h = (location.hash || "").replace("#", "");
    return ROUTES.includes(h) ? h : "home";
  });
  // Demo: pretend Lien is live (drives the live badge)
  const [live] = useState(true);

  useEffect(() => { localStorage.setItem("swl-lang", lang); }, [lang]);
  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  const go = useCallback((id) => {
    setRoute(id);
    history.replaceState(null, "", "#" + id);
    window.scrollTo({ top: 0, behavior: "auto" });
  }, []);

  useEffect(() => {
    const onHash = () => {
      const h = (location.hash || "").replace("#", "");
      if (ROUTES.includes(h)) setRoute(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const S = window.SITE;
  const ui = S.ui[lang];
  const navItems = S.nav[lang];

  let page = null;
  const common = { d: S, ui, social: S.social, live, go, lang };
  switch (route) {
    case "home": page = <HomePage {...common} />; break;
    case "setup": page = <SetupPage d={S.setup[lang]} ui={ui} social={S.social} />; break;
    case "muziekbingo": page = <BingoPage d={S.muziekbingo[lang]} ui={ui} social={S.social} />; break;
    case "playlists": page = <PlaylistsPage d={S.playlists[lang]} ui={ui} social={S.social} />; break;
    case "letters": page = <LettersPage d={S.letters[lang]} ui={ui} social={S.social} />; break;
    case "loveletters": page = <LoveLettersPage d={S.loveletters[lang]} ui={ui} social={S.social} />; break;
    case "contact": page = <ContactPage d={S.contact[lang]} ui={ui} social={S.social} />; break;
    case "webshop": page = <WebshopPage d={S.webshop[lang]} ui={ui} social={S.social} />; break;
    default: page = <HomePage {...common} />;
  }

  return (
    <div className="app-bg">
      <Nav route={route} go={go} lang={lang} setLang={setLang} live={live}
           ui={ui} navItems={navItems} social={S.social} />
      <main id="main-content" key={route + lang} className="page-fade">
        {page}
      </main>
      <Footer go={go} lang={lang} f={S.footer[lang]} ui={ui} navItems={navItems} social={S.social} />
    </div>
  );
}

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