// Brand components + i18n context + router — ported from src/components/brand & src/i18n
const { createContext, useContext, useState, useEffect, useCallback, createElement: h } = React;

/* ---------- i18n ---------- */
const LangContext = createContext(null);
const STORAGE_KEY = "sanabria.lang";

function LanguageProvider({ children }) {
  const [lang, setLang] = useState(() => {
    try {
      const saved = window.localStorage.getItem(STORAGE_KEY);
      return saved === "en" ? "en" : "es";
    } catch (e) { return "es"; }
  });
  useEffect(() => {
    document.documentElement.lang = lang;
    try { window.localStorage.setItem(STORAGE_KEY, lang); } catch (e) {}
  }, [lang]);
  const t = useCallback((key) => {
    const entry = window.DICT[key];
    if (!entry) return key;
    return entry[lang] ?? entry.en;
  }, [lang]);
  return <LangContext.Provider value={{ lang, setLang, t }}>{children}</LangContext.Provider>;
}
function useLang() {
  const ctx = useContext(LangContext);
  if (!ctx) throw new Error("useLang must be used inside LanguageProvider");
  return ctx;
}

/* ---------- tiny router (hash based) ---------- */
const RouteContext = createContext({ path: "/", navigate: () => {} });

function normalize(hash) {
  const h2 = (hash || "").replace(/^#/, "");
  return h2 && h2.startsWith("/") ? h2 : "/";
}
function Router({ children }) {
  const [path, setPath] = useState(() => normalize(window.location.hash));
  useEffect(() => {
    const onHash = () => { setPath(normalize(window.location.hash)); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  const navigate = useCallback((to) => { window.location.hash = to; }, []);
  return <RouteContext.Provider value={{ path, navigate }}>{children}</RouteContext.Provider>;
}
function useRoute() { return useContext(RouteContext); }

function Link({ to, className, children, ...rest }) {
  const { navigate } = useRoute();
  return (
    <a
      href={"#" + to}
      className={className}
      onClick={(e) => { e.preventDefault(); navigate(to); }}
      {...rest}
    >
      {children}
    </a>
  );
}

function cn(...parts) { return parts.filter(Boolean).join(" "); }

/* ---------- Wordmark (brandbook §09) ---------- */
function Wordmark({ className, blink = false, size = "md" }) {
  const sizes = { sm: "text-base", md: "text-xl", lg: "text-3xl" };
  return (
    <span
      className={cn("inline-flex items-baseline font-sans font-semibold tracking-tight lowercase leading-none", sizes[size], className)}
      aria-label="sanabria_"
    >
      <span>sanabr</span>
      <span style={{ color: "hsl(var(--amber))" }}>ia</span>
      <span aria-hidden className={blink ? "blink-underscore" : undefined} style={{ color: "hsl(var(--amber))" }}>_</span>
    </span>
  );
}

/* ---------- SectionHeader ---------- */
function SectionHeader({ index, label, title, intro }) {
  return (
    <div className="border-t border-border pt-8 mb-10">
      <div className="flex items-baseline gap-4 op-label">
        <span>{index}</span>
        <span>{label}</span>
      </div>
      <h2 className="mt-4 text-3xl md:text-4xl max-w-3xl leading-tight">{title}</h2>
      {intro && <p className="mt-4 max-w-2xl text-muted-foreground">{intro}</p>}
    </div>
  );
}

/* ---------- Header ---------- */
const NAV = [
  { to: "/", key: "nav.home" },
  { to: "/systems", key: "nav.systems" },
  { to: "/work", key: "nav.work" },
  { to: "/about", key: "nav.about" },
  { to: "/content", key: "nav.content" },
  { to: "/contact", key: "nav.contact" },
];

function LangToggle({ lang, setLang }) {
  return (
    <div className="inline-flex items-center border border-border" role="group" aria-label="Language">
      {["en", "es"].map((l) => (
        <button
          key={l}
          type="button"
          onClick={() => setLang(l)}
          aria-pressed={lang === l}
          className={cn(
            "px-2 py-1 font-sans text-[0.65rem] font-medium uppercase tracking-[0.12em] transition-colors",
            lang === l ? "bg-foreground text-background" : "text-muted-foreground hover:text-foreground"
          )}
        >
          {l}
        </button>
      ))}
    </div>
  );
}

function Header() {
  const { path } = useRoute();
  const { t, lang, setLang } = useLang();
  return (
    <header className="sticky top-0 z-40 border-b border-border bg-background/85 backdrop-blur supports-[backdrop-filter]:bg-background/70">
      <div className="container flex h-14 items-center justify-between gap-6">
        <Link to="/" className="flex items-center gap-2.5">
          <img src="sanabria/s_icon.png" alt="s_" className="h-8 w-8 rounded-[6px]" />
          <span className="font-sans font-bold tracking-tight leading-none text-base sm:text-lg whitespace-nowrap lowercase">
            sanabr<span style={{ color: "hsl(var(--amber))" }}>ia</span><span className="blink-underscore">_</span>
          </span>
        </Link>

        <nav className="hidden md:flex items-center gap-1">
          {NAV.map((item) => {
            const active = path === item.to;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "px-3 py-1.5 font-sans text-[0.72rem] font-medium uppercase tracking-[0.09em] transition-colors",
                  active ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                )}
              >
                {t(item.key)}
              </Link>
            );
          })}
        </nav>

        <div className="hidden md:flex items-center gap-3">
          <span className="op-chip op-chip--live">
            <span className="op-dot-live" /> {t("common.sessionOpen")}
          </span>
          <LangToggle lang={lang} setLang={setLang} />
        </div>
      </div>

      {/* mobile nav */}
      <div className="md:hidden border-t border-border">
        <div className="container flex items-center gap-3 overflow-x-auto py-2">
          {NAV.map((item) => {
            const active = path === item.to;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "shrink-0 font-sans text-[0.7rem] font-medium uppercase tracking-[0.09em]",
                  active ? "text-foreground" : "text-muted-foreground"
                )}
              >
                {t(item.key)}
              </Link>
            );
          })}
          <div className="ml-auto shrink-0">
            <LangToggle lang={lang} setLang={setLang} />
          </div>
        </div>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const { t } = useLang();
  return (
    <footer data-surface="tinta" className="mt-24 border-t border-border bg-background text-foreground">
      <div className="container py-14 grid gap-10 md:grid-cols-4">
        <div className="md:col-span-2 space-y-5">
          <Wordmark size="lg" />
          <p className="max-w-md text-sm text-muted-foreground">{t("footer.body")}</p>
          <p className="op-label">{t("common.tagline")}</p>
        </div>

        <div className="space-y-3">
          <p className="op-label">{t("common.contact")}</p>
          <a href="mailto:james@jamessanabria.com" className="block font-sans text-sm text-foreground hover:text-amber">james@jamessanabria.com</a>
          <a href="mailto:james@jamessanabria.com" className="btn-primary mt-2">{t("common.openSession")}</a>
        </div>

        <div className="space-y-3">
          <p className="op-label">{t("common.navigate")}</p>
          <ul className="space-y-1.5 font-sans text-sm">
            <li><Link to="/systems" className="hover:text-amber">{t("nav.systems")}</Link></li>
            <li><Link to="/work" className="hover:text-amber">{t("nav.work")}</Link></li>
            <li><Link to="/about" className="hover:text-amber">{t("nav.about")}</Link></li>
            <li><Link to="/content" className="hover:text-amber">{t("nav.content")}</Link></li>
            <li><Link to="/contact" className="hover:text-amber">{t("nav.contact")}</Link></li>
          </ul>
        </div>
      </div>

      <div className="border-t border-border">
        <div className="container flex flex-col md:flex-row items-start md:items-center justify-between gap-2 py-5 op-label">
          <span>© {new Date().getFullYear()} James Sanabria — sanabria_</span>
          <span>{t("common.sessionOpen")}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Layout ---------- */
function Layout({ children }) {
  return (
    <div className="min-h-screen flex flex-col bg-background text-foreground">
      <Header />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>
  );
}

Object.assign(window, {
  LanguageProvider, useLang, Router, useRoute, Link, cn,
  Wordmark, SectionHeader, Header, Footer, Layout,
});