/* TeamTipp marketing — App shell with hash-based router & tweaks */

const { useState: useStateApp, useEffect: useEffectApp } = React;

/* ---------------- Hash router ---------------- */
function useHashRoute() {
  const [route, setRoute] = useStateApp(() => parseRoute(window.location.hash));
  useEffectApp(() => {
    const onChange = () => {
      const r = parseRoute(window.location.hash);
      setRoute(r);
      // Scroll-to-anchor support after route renders
      requestAnimationFrame(() => {
        if (r.anchor) {
          const el = document.getElementById(r.anchor);
          if (el) el.scrollIntoView ? el.scrollIntoView({ behavior: "smooth", block: "start" }) : null;
        } else {
          window.scrollTo({ top: 0, behavior: "instant" in document.documentElement.style ? "instant" : "auto" });
        }
      });
    };
    window.addEventListener("hashchange", onChange);
    // initial scroll handling
    if (route.anchor) onChange();
    return () => window.removeEventListener("hashchange", onChange);
  }, []);
  return route;
}

function parseRoute(hash) {
  // Accept #/, #/pricing, #/legal, #/legal#anchor, #/#features
  let h = (hash || "").replace(/^#/, "");
  if (!h.startsWith("/")) h = "/" + h;
  const [pathRaw, anchor] = h.split("#");
  let path = pathRaw.replace(/\/+$/g, "") || "/";
  return { path, anchor: anchor || null };
}

/* ---------------- SEO updater ---------------- */
function updateSEO(route) {
  const meta = {
    "/": {
      title: "TeamTipp – Dein WM-Tipp mit Freunden und Kollegen",
      desc: "TeamTipp ist ein Tippspiel für Fußballturniere. Teams erstellen, Spiele tippen, Rangliste verfolgen.",
    },
    "/pricing": { title: "Preise – TeamTipp", desc: "Free, Pro und Business für TeamTipp. Einmaliger Kauf pro Team. Keine Wetten, keine Einsätze." },
    "/imprint": { title: "Impressum – TeamTipp", desc: "Impressum der TeamTipp App und Website." },
    "/legal":   { title: "Rechtliches – TeamTipp", desc: "TeamTipp ist kein Wettangebot. Hinweise zu Quoten, Einsätzen und Verantwortung." },
    "/terms":   { title: "Nutzungsbedingungen – TeamTipp", desc: "AGB für die Nutzung von TeamTipp." },
    "/privacy": { title: "Datenschutz – TeamTipp", desc: "Datenschutzerklärung der TeamTipp App und Website." },
    "/copyright": { title: "Urheberrecht – TeamTipp", desc: "Urheberrecht, Marken und Lizenz-Hinweise für TeamTipp." },
  };
  const m = meta[route.path] || meta["/"];
  document.title = m.title;
  let descTag = document.querySelector('meta[name="description"]');
  if (descTag) descTag.setAttribute("content", m.desc);
  let ogTitle = document.querySelector('meta[property="og:title"]');
  if (ogTitle) ogTitle.setAttribute("content", m.title);
  let ogDesc = document.querySelector('meta[property="og:description"]');
  if (ogDesc) ogDesc.setAttribute("content", m.desc);
}

/* ---------------- Theme handling ---------------- */
const THEME_KEY = "teamtipp.marketing.theme";
function applyTheme(theme) {
  document.documentElement.setAttribute("data-theme", theme);
}

/* ---------------- Page resolver ---------------- */
function PageForRoute({ path }) {
  switch (path) {
    case "/pricing":   return <PricingPage />;
    case "/imprint":   return <ImprintPage />;
    case "/legal":     return <LegalPage />;
    case "/terms":     return <TermsPage />;
    case "/privacy":   return <PrivacyPage />;
    case "/copyright": return <CopyrightPage />;
    case "/":
    default:           return <LandingPage />;
  }
}

/* ---------------- App ---------------- */
function App() {
  const route = useHashRoute();
  const [theme, setTheme] = useStateApp(() => {
    return localStorage.getItem(THEME_KEY) || "dark";
  });

  useEffectApp(() => {
    applyTheme(theme);
    localStorage.setItem(THEME_KEY, theme);
  }, [theme]);

  useEffectApp(() => {
    updateSEO(route);
  }, [route.path]);

  return (
    <>
      <Header
        route={route.path}
        theme={theme}
        onToggleTheme={() => setTheme(t => (t === "dark" ? "light" : "dark"))}
      />
      <main>
        <PageForRoute path={route.path} />
      </main>
      <Footer />
    </>
  );
}

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