/* KNOX Data Magic — app shell: top bar with logo lockup + language switch. */
const { useState, useEffect } = React;
const Icon = window.Icon;
const LS = "knox-lang";

function initLang() {
  // 1) Respect a visitor's previous manual choice (localStorage is per-domain).
  try { const s = localStorage.getItem(LS); if (s === "de" || s === "en") return s; } catch (_) {}
  // 2) Default by domain: .de -> German, .com -> English.
  try {
    const h = (location.hostname || "").toLowerCase();
    if (h.endsWith(".de")) return "de";
    if (h.endsWith(".com")) return "en";
  } catch (_) {}
  // 3) Fallback to the browser language (e.g. on the CloudFront preview URL).
  return (navigator.language || "de").toLowerCase().startsWith("en") ? "en" : "de";
}

function TopBar({ lang, setLang, t }) {
  return (
    <header className="topbar">
      <div className="w topbar-row">
        <a href="#top" className="brand" aria-label="KNOX Data Magic">
          <span className="brand-icon"><img src="assets/knox-icon.png" alt="" /></span>
          <img className="brand-word" src="assets/knox-wordmark.png" alt="KNOX Data Magic" />
        </a>
        <nav className="topbar-nav" aria-label="Primary">
          <a href="#how">{t.nav.how}</a>
          <a href="#features">{t.nav.features}</a>
          <a href="#about">{t.nav.about}</a>
          <a href="#faq">{t.nav.faq}</a>
        </nav>
        <div className="topbar-right">
          <div className="lang" role="group" aria-label="Language">
            <button className={lang === "de" ? "on" : ""} onClick={() => setLang("de")} aria-pressed={lang === "de"}>DE</button>
            <button className={lang === "en" ? "on" : ""} onClick={() => setLang("en")} aria-pressed={lang === "en"}>EN</button>
          </div>
          <a href="#pioneer" className="btn btn--primary">{t.nav.cta}</a>
        </div>
      </div>
    </header>
  );
}

function App() {
  const [lang, setLang] = useState(initLang);
  const t = window.KNOX_I18N[lang];
  useEffect(() => {
    try { localStorage.setItem(LS, lang); } catch (_) {}
    document.documentElement.lang = lang;
  }, [lang]);

  const { Hero, Problem, Recognition, Solution, Features, Ampel, Trust, Pioneer, Faq, Footer } = window;
  return (
    <React.Fragment>
      <TopBar lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero t={t} />
        <Problem t={t} />
        <Recognition t={t} />
        <Solution t={t} />
        <Features t={t} />
        <Ampel t={t} />
        <Trust t={t} />
        <Pioneer t={t} />
        <Faq t={t} />
      </main>
      <Footer t={t} />
    </React.Fragment>
  );
}

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