/* Simple i18n: a Lang context + an inline <T en="..." sl="..." /> component
   and a `t(lang, { en, sl })` helper for use in attributes. */

const LangContext = React.createContext({ lang: "en", setLang: () => {} });

function useLang() {
  return React.useContext(LangContext);
}

function LangProvider({ children, initial = "en" }) {
  const [lang, setLang] = React.useState(() => {
    try {
      const stored = localStorage.getItem("bbd-lang");
      if (stored === "en" || stored === "sl") return stored;
    } catch {}
    return initial;
  });

  React.useEffect(() => {
    try { localStorage.setItem("bbd-lang", lang); } catch {}
    document.documentElement.setAttribute("lang", lang);
  }, [lang]);

  return (
    <LangContext.Provider value={{ lang, setLang }}>
      {children}
    </LangContext.Provider>
  );
}

/* Inline string switcher.
   <T en="products" sl="izdelki" />
   <T en={<>Hand-finished in <em>Kranj</em>.</>} sl={<>Ročno izdelano v <em>Kranju</em>.</>} />
*/
function T({ en, sl }) {
  const { lang } = useLang();
  if (lang === "sl" && sl !== undefined) return <>{sl}</>;
  return <>{en}</>;
}

/* For attribute strings: t(lang, { en, sl }) */
function t(lang, { en, sl }) {
  if (lang === "sl" && sl !== undefined) return sl;
  return en;
}

/* Compact segmented switcher used in the nav */
function LangSwitch() {
  const { lang, setLang } = useLang();
  const opts = [
    { code: "en", label: "ENG" },
    { code: "sl", label: "SLO" },
  ];
  return (
    <div
      role="group"
      aria-label="language"
      style={{
        display: "inline-flex",
        alignItems: "center",
        border: "1px solid var(--rule-strong)",
        padding: 2,
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        letterSpacing: "0.12em",
        textTransform: "uppercase",
      }}
    >
      {opts.map((o) => (
        <button
          key={o.code}
          onClick={() => setLang(o.code)}
          style={{
            padding: "5px 10px",
            background: lang === o.code ? "var(--ink)" : "transparent",
            color: lang === o.code ? "var(--bone)" : "var(--ink-soft)",
            transition: "background .15s ease, color .15s ease",
            cursor: "pointer",
            border: "none",
            font: "inherit",
          }}
          aria-pressed={lang === o.code}
        >
          {o.label}
        </button>
      ))}
    </div>
  );
}

function useIsMobile(breakpoint = 768) {
  const [isMobile, setIsMobile] = React.useState(
    () => window.innerWidth < breakpoint
  );
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const handler = (e) => setIsMobile(e.matches);
    setIsMobile(mq.matches);
    mq.addEventListener("change", handler);
    return () => mq.removeEventListener("change", handler);
  }, [breakpoint]);
  return isMobile;
}

Object.assign(window, { LangProvider, LangContext, useLang, T, t, LangSwitch, useIsMobile });