/* Shared chrome: theme-aware sticky top nav + theme/lang switchers + mobile drawer + footer. */

const NAV_KEYS = ["life", "professional", "forerunner", "thinker", "guide", "friend"];

/* Long page titles (md.15): the top menu stays short/one-word, but inside each
   page the heading shows the fuller title. EN + TR provided; other languages
   fall back to EN until fine-tuned. */
const LONG_TITLES = {
  life:         { en: "A Life", tr: "Bir Hayat", es: "Una vida", de: "Ein Leben", fr: "Une vie", ru: "Одна жизнь", ja: "ひとつの生涯", zh: "一生" },
  professional: { en: "The Scholar", tr: "Âlim", es: "El erudito", de: "Der Gelehrte", fr: "Le savant", ru: "Учёный", ja: "学者", zh: "学者" },
  forerunner:   { en: "Forerunner in Goodness", tr: "Hayırda Öncü", es: "Precursor en el bien", de: "Wegbereiter des Guten", fr: "Précurseur dans le bien", ru: "Первопроходец в добре", ja: "善の先駆者", zh: "行善的先驱" },
  thinker:      { en: "A Thinker for Our Time", tr: "Çağının Düşünürü", es: "Un pensador para nuestro tiempo", de: "Ein Denker für unsere Zeit", fr: "Un penseur pour notre temps", ru: "Мыслитель нашего времени", ja: "時代の思想家", zh: "这个时代的思想家" },
  guide:        { en: "Spiritual Guide", tr: "Mânevî Rehber", es: "Guía espiritual", de: "Spiritueller Wegweiser", fr: "Guide spirituel", ru: "Духовный наставник", ja: "精神の導き手", zh: "心灵导师" },
  friend:       { en: "A True Friend", tr: "Gerçek Dost", es: "Un amigo verdadero", de: "Ein wahrer Freund", fr: "Un ami véritable", ru: "Настоящий друг", ja: "まことの友", zh: "真正的朋友" },
  library:      { en: "The Library", tr: "Kütüphane", es: "La biblioteca", de: "Die Bibliothek", fr: "La bibliothèque", ru: "Библиотека", ja: "蔵書", zh: "典藏" },
};
function longTitle(key, lang) { const e = LONG_TITLES[key]; return (e && (e[lang] || e.en)) || ""; }

const I18N = {
  en: { life: "Life", professional: "Professional", forerunner: "Forerunner", thinker: "Thinker", guide: "Guide", friend: "Friend", library: "Library", archive: "Archive",
    menu: "Menu", theme: "Theme", language: "Language", light: "Light", dark: "Dark",
    footerTag: "A life devoted to the Creator.",
    sections: "Sections", languages: "Languages", imprint: "Imprint",
    imprintLine1: "Curated by his students", imprintLine2: "and the Cosan Estate, 2026", contact: "contact →" },
  tr: { life: "Hayat", professional: "Mesleki", forerunner: "Öncü", thinker: "Düşünür", guide: "Rehber", friend: "Dost", library: "Eserler", archive: "Arşiv",
    menu: "Menü", theme: "Tema", language: "Dil", light: "Açık", dark: "Koyu",
    footerTag: "İman ve Aksiyon Dolu Bir Hayat — 1938–2001.",
    sections: "Bölümler", languages: "Diller", imprint: "Künye",
    imprintLine1: "Talebeleri ve Cosan", imprintLine2: "Mirası tarafından, 2026", contact: "iletişim →" },
  es: { life: "Vida", professional: "Profesional", forerunner: "Precursor", thinker: "Pensador", guide: "Guía", friend: "Amigo", library: "Biblioteca", archive: "Archivo",
    menu: "Menú", theme: "Tema", language: "Idioma", light: "Claro", dark: "Oscuro",
    footerTag: "Una vida de fe y acción — 1938–2001.", sections: "Secciones", languages: "Idiomas", imprint: "Pie editorial",
    imprintLine1: "Curado por sus estudiantes", imprintLine2: "y la Sucesión Cosan, 2026", contact: "contacto →" },
  de: { life: "Leben", professional: "Beruf", forerunner: "Wegbereiter", thinker: "Denker", guide: "Wegweiser", friend: "Freund", library: "Bibliothek", archive: "Archiv",
    menu: "Menü", theme: "Thema", language: "Sprache", light: "Hell", dark: "Dunkel",
    footerTag: "Ein Leben aus Glaube und Tat — 1938–2001.", sections: "Bereiche", languages: "Sprachen", imprint: "Impressum",
    imprintLine1: "Kuratiert von seinen Schülern", imprintLine2: "und dem Cosan Nachlass, 2026", contact: "kontakt →" },
  fr: { life: "Vie", professional: "Professionnel", forerunner: "Précurseur", thinker: "Penseur", guide: "Guide", friend: "Ami", library: "Bibliothèque", archive: "Archive",
    menu: "Menu", theme: "Thème", language: "Langue", light: "Clair", dark: "Sombre",
    footerTag: "Une vie de foi et d'action — 1938–2001.", sections: "Sections", languages: "Langues", imprint: "Ours",
    imprintLine1: "Conservé par ses étudiants", imprintLine2: "et la Succession Cosan, 2026", contact: "contact →" },
  ru: { life: "Жизнь", professional: "Профессия", forerunner: "Первопроходец", thinker: "Мыслитель", guide: "Наставник", friend: "Друг", library: "Библиотека", archive: "Архив",
    menu: "Меню", theme: "Тема", language: "Язык", light: "Светлая", dark: "Тёмная",
    footerTag: "Жизнь веры и действия — 1938–2001.", sections: "Разделы", languages: "Языки", imprint: "Выходные данные",
    imprintLine1: "Курировано его учениками", imprintLine2: "и Наследием Чошан, 2026", contact: "контакт →" },
  ja: { life: "生涯", professional: "専門", forerunner: "先駆者", thinker: "思想家", guide: "導き手", friend: "友", library: "著作", archive: "記録",
    menu: "メニュー", theme: "テーマ", language: "言語", light: "ライト", dark: "ダーク",
    footerTag: "信仰と行動の生涯 — 1938–2001。", sections: "セクション", languages: "言語", imprint: "奥付",
    imprintLine1: "弟子たちと", imprintLine2: "コシャン家により編纂、2026", contact: "連絡先 →" },
  zh: { life: "人生", professional: "专业", forerunner: "先驱", thinker: "思想家", guide: "导师", friend: "友人", library: "著作", archive: "档案",
    menu: "菜单", theme: "主题", language: "语言", light: "浅色", dark: "深色",
    footerTag: "信仰与行动的一生 — 1938–2001。", sections: "栏目", languages: "语言", imprint: "版权",
    imprintLine1: "由其学生与", imprintLine2: "科尚遗产管理处编辑，2026", contact: "联系 →" },
};

const LANG_OPTIONS = [
  { code: "en", label: "EN", name: "English" },
  { code: "tr", label: "TR", name: "Türkçe" },
  { code: "es", label: "ES", name: "Español" },
  { code: "de", label: "DE", name: "Deutsch" },
  { code: "fr", label: "FR", name: "Français" },
  { code: "ru", label: "RU", name: "Русский" },
  { code: "ja", label: "JA", name: "日本語" },
  { code: "zh", label: "ZH", name: "中文" },
];

function makeStore(initial) {
  let v = initial; const subs = new Set();
  return { get() { return v; }, set(nv) { v = nv; subs.forEach(fn => fn(v)); }, subscribe(fn) { subs.add(fn); return () => subs.delete(fn); } };
}
if (typeof window !== "undefined") {
  if (!window.__themeStore) window.__themeStore = makeStore((typeof localStorage !== "undefined" && localStorage.getItem("cosan-theme")) || "light");
  if (!window.__langStore) window.__langStore = makeStore("en");
}
function useStore(store) { const [v, setV] = React.useState(() => store.get()); React.useEffect(() => store.subscribe(setV), [store]); return v; }
function useTheme() {
  const v = useStore(window.__themeStore);
  const set = (nv) => { window.__themeStore.set(nv); try { localStorage.setItem("cosan-theme", nv); } catch (e) {} document.documentElement.setAttribute("data-theme", nv); };
  React.useEffect(() => { document.documentElement.setAttribute("data-theme", v); }, [v]);
  return [v, set];
}
function useLang() {
  const v = useStore(window.__langStore);
  const set = (nv) => { window.__langStore.set(nv); try { localStorage.setItem("cosan-lang", nv); } catch (e) {} };
  return [v, set];
}
function useT() { const [lang] = useLang(); return I18N[lang] || I18N.en; }

function themeTokens(theme) {
  if (theme === "dark") return {
    bg: "#0F0F0F", bgWarm: "#15130F", ink: "#FAFAF7", inkSoft: "rgba(250,250,247,0.84)",
    grayWarm: "rgba(250,250,247,0.62)", grayLight: "rgba(250,250,247,0.42)",
    hairline: "rgba(255,255,255,0.10)", hairlineSoft: "rgba(255,255,255,0.18)",
    headerBg: "rgba(15,15,15,0.86)",
  };
  return {
    bg: "#FAFAF7", bgWarm: "#F2EEE3", ink: "#0F0F0F", inkSoft: "#2A2825",
    grayWarm: "#6B6B68", grayLight: "#B8B5AB", hairline: "#E2DFD4", hairlineSoft: "#C9C4B5",
    headerBg: "rgba(250,250,247,0.88)",
  };
}

const GOLD = "var(--accent)";

/* ─── Language dropdown ─── */
function LangDropdown({ tk, dark, compact }) {
  const t = useT();
  const [lang, setLang] = useLang();
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);
  const current = LANG_OPTIONS.find(l => l.code === lang) || LANG_OPTIONS[0];

  return (
    <div ref={ref} style={{ position: "relative" }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          display: "flex", alignItems: "center", gap: 8,
          padding: compact ? "6px 10px" : "6px 12px",
          border: `1px solid ${tk.hairline}`,
          background: open ? (dark ? "rgba(255,255,255,0.06)" : "rgba(15,15,15,0.04)") : "transparent",
          color: tk.ink, cursor: "pointer", borderRadius: 999,
          fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.14em", fontWeight: 500,
          transition: "background 200ms, border-color 200ms",
        }}
      >
        <span>{current.label}</span>
        <svg width="9" height="6" viewBox="0 0 9 6" fill="none" stroke="currentColor" strokeWidth="1.4"
          style={{ transform: open ? "rotate(180deg)" : "none", transition: "transform 240ms" }}>
          <path d="M1 1.2L4.5 4.8L8 1.2" />
        </svg>
      </button>
      {open && (
        <div
          style={{
            position: "absolute", top: "calc(100% + 8px)", right: 0,
            minWidth: 200, background: tk.bg, color: tk.ink,
            border: `1px solid ${tk.hairline}`, borderRadius: 4,
            boxShadow: dark
              ? "0 20px 40px -16px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.04) inset"
              : "0 22px 48px -16px rgba(20,16,8,0.22), 0 1px 0 rgba(0,0,0,0.02) inset",
            padding: "6px 0", zIndex: 100,
            animation: "cwFade 200ms cubic-bezier(0.22,1,0.36,1) both",
          }}
        >
          <div style={{ padding: "6px 16px 8px", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase",
            color: tk.grayWarm, borderBottom: `1px solid ${tk.hairline}`, marginBottom: 4,
            fontFamily: "var(--sans)", fontWeight: 500 }}>{t.language}</div>
          {LANG_OPTIONS.map(l => {
            const sel = l.code === lang;
            return (
              <button
                key={l.code}
                onClick={() => { setLang(l.code); setOpen(false); }}
                onMouseEnter={(e) => e.currentTarget.style.background = dark ? "rgba(255,255,255,0.06)" : "color-mix(in srgb, var(--accent) 8%, transparent)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                style={{
                  display: "flex", justifyContent: "space-between", alignItems: "baseline",
                  width: "100%", padding: "10px 16px", border: 0, background: "transparent",
                  cursor: "pointer", color: sel ? GOLD : tk.ink, textAlign: "left",
                  fontFamily: "var(--sans)", fontSize: 13, letterSpacing: "0.01em",
                  transition: "background 180ms, color 180ms",
                }}
              >
                <span className="serif" style={{ fontSize: 15, fontWeight: 400, letterSpacing: "-0.005em" }}>{l.name}</span>
                <span style={{ fontSize: 10, letterSpacing: "0.18em", color: sel ? GOLD : tk.grayWarm }}>{l.label}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}

function ThemeBtn({ tk, dark, compact }) {
  const [theme, setTheme] = useTheme();
  return (
    <button
      aria-label="theme"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="cw-icon-btn"
      style={{
        width: compact ? 30 : 32, height: compact ? 30 : 32, borderRadius: 999,
        border: `1px solid ${tk.hairline}`, background: "transparent", color: tk.ink, cursor: "pointer",
        display: "grid", placeItems: "center",
        transition: "background 200ms, border-color 200ms, transform 250ms",
      }}
    >
      {theme === "dark" ? (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
          <path d="M13 9.5A5.5 5.5 0 1 1 6.5 3a4.5 4.5 0 0 0 6.5 6.5z" />
        </svg>
      ) : (
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="8" cy="8" r="3" />
          <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.4 1.4M11.6 11.6L13 13M3 13l1.4-1.4M11.6 4.4L13 3" />
        </svg>
      )}
    </button>
  );
}

/* ─── Accent color swatches ─── */
function AccentSwatches({ tk, dark, compact }) {
  const opts = (typeof window !== "undefined" && window.__ACCENT_OPTIONS) || [
    { name: "Gold", color: "#B89968" },
    { name: "Bordo", color: "#7A2E2E" },
    { name: "Forest", color: "#3A5A40" },
    { name: "Slate", color: "#3A4F66" },
    { name: "Ink",   color: "#1A1A1A" },
  ];
  const [theme] = useTheme();
  const [resolved, raw, setAccent] = (window.__useAccent ? window.__useAccent() : [null, "auto", () => {}]);
  return (
    <div style={{ display: "flex", alignItems: "center", gap: compact ? 4 : 6,
      padding: compact ? "3px 6px" : "4px 8px",
      border: `1px solid ${tk.hairline}`, borderRadius: 999 }}>
      {opts.map(o => {
        const sel = resolved === o.color;
        return (
          <button key={o.name} aria-label={o.name} title={o.name}
            onClick={() => setAccent(o.color)}
            style={{
              width: compact ? 14 : 16, height: compact ? 14 : 16, borderRadius: "50%",
              border: sel ? `1.5px solid ${tk.ink}` : `1px solid ${tk.hairlineSoft || tk.hairline}`,
              boxShadow: sel ? `0 0 0 2px ${tk.bg}, 0 0 0 3.5px ${o.color}` : "none",
              background: o.color, padding: 0, cursor: "pointer",
              transition: "transform 200ms, box-shadow 200ms",
            }}
            onMouseEnter={(e) => e.currentTarget.style.transform = "scale(1.15)"}
            onMouseLeave={(e) => e.currentTarget.style.transform = "scale(1)"}
          />
        );
      })}
    </div>
  );
}

function TopNav({ current, mobile: forceMobile, accent = GOLD, dark: forceDark, onNav }) {
  const [theme] = useTheme();
  const t = useT();
  const tk = themeTokens(theme);
  const dark = typeof forceDark === "boolean" ? forceDark : theme === "dark";
  const mobile = forceMobile;
  const [open, setOpen] = React.useState(false);

  const handle = (e, key) => { if (onNav) { e.preventDefault(); onNav(key); } setOpen(false); };
  const navItems = NAV_KEYS.map(k => ({ key: k, label: t[k], active: current && current.toLowerCase() === k }));

  return (
    <>
      <header style={{
        position: "sticky", top: 0, zIndex: 50,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: mobile ? "14px 22px" : "22px 64px",
        borderBottom: `1px solid ${tk.hairline}`,
        background: tk.headerBg, color: tk.ink,
        backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)",
        transition: "background 250ms, color 250ms, border-color 250ms",
      }}>
        <a href="#/" onClick={(e) => handle(e, "bio")}
          style={{ display: "flex", alignItems: "center", color: "inherit", textDecoration: "none" }}>
          <img src="uploads/mec-logo.png" alt="Esad Cosan" style={{ height: mobile ? 32 : 38, width: "auto", display: "block", filter: dark ? "invert(1)" : "none" }} />
        </a>

        {!mobile && (
          <>
            <nav style={{ display: "flex", gap: 28 }}>
              {navItems.map(n => (
                <a key={n.key} href={`#/${n.key}`} onClick={(e) => handle(e, n.key)}
                  className="cw-nav-link"
                  style={{
                    fontSize: 13, textDecoration: "none", letterSpacing: "0.02em",
                    color: n.active ? GOLD : tk.ink, paddingBottom: 4, position: "relative",
                  }}
                  data-active={n.active ? "true" : "false"}
                >{n.label}</a>
              ))}
            </nav>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <ThemeBtn tk={tk} dark={dark} />
            </div>
          </>
        )}

        {mobile && (
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <ThemeBtn tk={tk} dark={dark} compact />
            <button aria-label={t.menu} onClick={() => setOpen(o => !o)}
              style={{ width: 36, height: 32, border: 0, background: "transparent", color: tk.ink, cursor: "pointer", padding: 0, display: "grid", placeItems: "center" }}>
              <span style={{ position: "relative", display: "block", width: 22, height: 14 }}>
                <span style={{ position: "absolute", left: 0, right: 0, top: open ? 6 : 0, height: 1, background: "currentColor",
                  transform: open ? "rotate(45deg)" : "none", transition: "transform 280ms cubic-bezier(0.22,1,0.36,1), top 280ms" }} />
                <span style={{ position: "absolute", left: 0, right: 0, top: 6, height: 1, background: "currentColor",
                  opacity: open ? 0 : 1, transition: "opacity 200ms" }} />
                <span style={{ position: "absolute", left: 0, right: 0, top: open ? 6 : 13, height: 1, background: "currentColor",
                  transform: open ? "rotate(-45deg)" : "none", transition: "transform 280ms cubic-bezier(0.22,1,0.36,1), top 280ms" }} />
              </span>
            </button>
          </div>
        )}
      </header>

      {mobile && (
        <div style={{
          position: "fixed", inset: 0, zIndex: 49, background: tk.bg, color: tk.ink,
          transform: open ? "translateY(0)" : "translateY(-100%)",
          transition: "transform 420ms cubic-bezier(0.22,1,0.36,1)",
          paddingTop: 70, display: "flex", flexDirection: "column",
        }}>
          <nav style={{ padding: "12px 22px 24px", flex: 1, overflowY: "auto" }}>
            {navItems.map((n, i) => (
              <a key={n.key} href={`#/${n.key}`} onClick={(e) => handle(e, n.key)}
                style={{
                  display: "flex", alignItems: "baseline", justifyContent: "space-between",
                  padding: "20px 0",
                  borderTop: i === 0 ? `1px solid ${tk.hairline}` : "none",
                  borderBottom: `1px solid ${tk.hairline}`,
                  textDecoration: "none", color: n.active ? GOLD : tk.ink,
                  fontFamily: "var(--serif)", fontWeight: 350, fontSize: 32, letterSpacing: "-0.015em",
                  fontVariationSettings: '"opsz" 144, "SOFT" 30',
                }}
              >
                <span>{n.label}</span>
                <span style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.22em",
                  textTransform: "uppercase", color: tk.grayWarm }}>{String(i + 1).padStart(2, "0")}</span>
              </a>
            ))}
          </nav>
        </div>
      )}
    </>
  );
}

/* Silsile — Continued Legacy chain of heart medallions (footer variant C). */
const SILSILE_NODES = [
  { name: "Zahid Kotku", href: "#", cur: false },
  { name: "Esad Cosan", href: "https://mec-bio-site.vercel.app", cur: true },
  { name: "Nureddin Cosan", href: "https://mnc-bio-site.pages.dev/", cur: false },
];
const SILSILE_I18N = {
  en: { eyebrow: "Continued Legacy",
    copy: "An unbroken chain of guidance—passed from heart to heart across generations—where each link represents a leader carrying forward a living legacy of faith, wisdom, and care. Click on the hearts below to explore this living connection." },
  tr: { eyebrow: "Devam Eden Miras",
    copy: "Nesilden nesile, gönülden gönüle aktarılan kesintisiz bir manevi rehberlik silsilesi—her halka, iman, hikmet ve şefkat mirasını yaşatan bir mürşidi temsil eder. Bu canlı bağı keşfetmek için aşağıdaki kalplere tıklayın." },
  es: { eyebrow: "Legado Continuo",
    copy: "Una cadena ininterrumpida de guía espiritual—transmitida de corazón a corazón a través de las generaciones—donde cada eslabón representa a un maestro que lleva adelante un legado vivo de fe, sabiduría y cuidado. Haz clic en los corazones para explorar esta conexión viva." },
  de: { eyebrow: "Fortwährendes Erbe",
    copy: "Eine ununterbrochene Kette geistiger Führung—von Herz zu Herz über Generationen weitergegeben—in der jedes Glied einen Lehrer verkörpert, der ein lebendiges Erbe aus Glaube, Weisheit und Fürsorge weiterträgt. Klicken Sie auf die Herzen, um diese lebendige Verbindung zu erkunden." },
  fr: { eyebrow: "Héritage Continu",
    copy: "Une chaîne ininterrompue de guidance spirituelle—transmise de cœur à cœur au fil des générations—où chaque maillon représente un maître perpétuant un héritage vivant de foi, de sagesse et de bienveillance. Cliquez sur les cœurs pour explorer ce lien vivant." },
  ru: { eyebrow: "Продолжающееся наследие",
    copy: "Непрерывная цепь духовного наставничества—передаваемая от сердца к сердцу через поколения—где каждое звено олицетворяет учителя, несущего живое наследие веры, мудрости и заботы. Нажмите на сердца ниже, чтобы увидеть эту живую связь." },
  ja: { eyebrow: "受け継がれる遺産",
    copy: "世代を超えて心から心へと受け継がれる、途切れることのない霊的導きの連なり。その一つひとつの環は、信仰と叡智と慈しみという生きた遺産を受け継ぐ導き手を表します。下のハートをクリックして、この生きた繋がりを辿ってください。" },
  zh: { eyebrow: "延续的传承",
    copy: "一条绵延不断的精神引导之链——世代相传，心心相印——每一环都代表一位承续信仰、智慧与关怀这一鲜活传承的导师。点击下方的爱心，探索这一鲜活的联系。" },
};
const SILSILE_CSS = `
.sc-block{display:flex;flex-direction:column;}
.sc-eyebrow{font-family:var(--sans);font-size:10px;letter-spacing:0.28em;text-transform:uppercase;font-weight:600;color:var(--sc-gray);}
.sc-legacy-copy{font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--sc-ink-soft);margin:14px 0 0;max-width:560px;}
.sc-row{display:flex;align-items:flex-start;margin-top:28px;}
.sc-node{display:flex;flex-direction:column;align-items:center;gap:11px;width:140px;text-decoration:none;color:inherit;}
.sc-med{width:62px;height:62px;border-radius:50%;border:1px solid var(--sc-hairline);display:flex;align-items:center;justify-content:center;background:var(--sc-bg);transition:border-color .3s,background .3s,transform .3s cubic-bezier(.22,1,.36,1);}
.sc-med .heart{font-size:24px;color:var(--sc-gold-deep);transition:color .3s;font-family:var(--serif),Georgia,serif;line-height:1;display:inline-block;font-variant-emoji:text;}
.sc-node:hover .sc-med{border-color:var(--sc-gold);transform:translateY(-3px);}
.sc-node:hover .sc-med .heart{color:var(--sc-bordo);}
.sc-node.cur .sc-med{background:var(--sc-bordo);border-color:var(--sc-bordo);}
.sc-node.cur .sc-med .heart{color:#fff;}
.sc-name{font-family:var(--sans);font-size:12px;color:var(--sc-ink-soft);text-align:center;line-height:1.35;white-space:nowrap;}
.sc-conn{width:34px;height:1px;background:var(--sc-hairline);margin-top:31px;flex:none;}
.sc-mobile .sc-block{align-items:center;}
.sc-mobile .sc-row{flex-wrap:nowrap;justify-content:center;width:100%;}
.sc-mobile .sc-node{width:auto;flex:1 1 0;min-width:0;}
.sc-mobile .sc-conn{width:20px;flex:0 0 20px;margin-top:26px;}
.sc-mobile .sc-name{font-size:11px;}
.sc-mobile .sc-med{width:52px;height:52px;}
.sc-mobile .sc-med .heart{font-size:20px;}
@media(max-width:340px){.sc-mobile .sc-name{font-size:10px;}.sc-mobile .sc-conn{width:16px;flex-basis:16px;}}
`;

function SiteFooter({ mobile, accent = GOLD, dark: forceDark, onNav }) {
  const [theme] = useTheme();
  const [lang] = useLang();
  const t = useT();
  const tk = themeTokens(theme);
  const sl = SILSILE_I18N[lang] || SILSILE_I18N.en;
  const handle = (e, key) => { if (onNav) { e.preventDefault(); onNav(key); } };

  return (
    <footer className={mobile ? "sc-mobile" : undefined} style={{
      padding: mobile ? "40px 22px 40px" : "60px 64px 46px",
      borderTop: `1px solid ${tk.hairline}`,
      background: tk.bg, color: tk.grayWarm,
      fontSize: 12, letterSpacing: "0.02em",
      display: "grid", gridTemplateColumns: mobile ? "1fr" : "0.9fr 1.5fr",
      gap: mobile ? 36 : 64, alignItems: "center",
      textAlign: mobile ? "center" : "left",
      "--sc-bg": tk.bg, "--sc-hairline": tk.hairline, "--sc-ink-soft": tk.inkSoft,
      "--sc-gray": tk.grayWarm, "--sc-gold": accent, "--sc-gold-deep": "#9A7F50", "--sc-bordo": "#7A2E2E",
    }}>
      <style>{SILSILE_CSS}</style>
      <div style={{ display: "flex", flexDirection: "column", alignItems: mobile ? "center" : "flex-start" }}>
        <a href="#/" onClick={(e) => handle(e, "bio")}
          style={{ fontFamily: "var(--serif)", fontSize: mobile ? 30 : 40, color: tk.ink,
            letterSpacing: "-0.015em", textDecoration: "none", lineHeight: 1, display: "inline-block",
            fontVariationSettings: '"opsz" 144, "SOFT" 30' }}>Esad Cosan</a>
        <p style={{ margin: "18px 0 0", maxWidth: 320, lineHeight: 1.5 }}>
          <span className="serif italic" style={{ fontVariationSettings: '"opsz" 9, "SOFT" 100',
            color: tk.inkSoft, fontSize: mobile ? 15 : 17 }}>
            {t.footerTag}
          </span>
        </p>
      </div>
      <div className="sc-block">
        <span className="sc-eyebrow">{sl.eyebrow}</span>
        <p className="sc-legacy-copy">{sl.copy}</p>
        <div className="sc-row">
          {SILSILE_NODES.map((n, i) => [
            i > 0 ? <span className="sc-conn" key={"conn" + i} /> : null,
            <a className={"sc-node" + (n.cur ? " cur" : "")} key={n.name}
              href={n.href} target="_blank" rel="noopener">
              <span className="sc-med"><span className="heart">♥</span></span>
              <span className="sc-name">{n.name}</span>
            </a>,
          ])}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopNav, SiteFooter, useTheme, useLang, useT, themeTokens, AccentSwatches, longTitle });