/* Legacy — Continued Legacy. The "unbroken chain" from the bio brief.
   Vertical chain visualization + initiatives grid (HAKYOL, CEKUD, SERVER, AKRA FM, etc).
*/

const MISC_I18N = {
  the_voice: { en: "The Voice", tr: "Ses", es: "La voz", de: "Die Stimme", fr: "La voix", ru: "Голос", ja: "肉声", zh: "声音" },
  recorded_archive: { en: "the recorded archive", tr: "ses arşivi", es: "el archivo grabado", de: "das Tonarchiv", fr: "les archives enregistrées", ru: "звуковой архив", ja: "録音アーカイブ", zh: "录音档案" },
  hours: { en: "Hours", tr: "Saat", es: "Horas", de: "Stunden", fr: "Heures", ru: "Часы", ja: "時間", zh: "小时" },
  range: { en: "Range", tr: "Dönem", es: "Período", de: "Zeitraum", fr: "Période", ru: "Период", ja: "期間", zh: "时间跨度" },
  now_playing: { en: "Now playing", tr: "Şimdi çalıyor", es: "Reproduciendo ahora", de: "Wird abgespielt", fr: "Lecture en cours", ru: "Сейчас играет", ja: "再生中", zh: "正在播放" },
  transcript: { en: "Transcript", tr: "Deşifre", es: "Transcripción", de: "Transkript", fr: "Transcription", ru: "Расшифровка", ja: "書き起こし", zh: "文字记录" },
  read_full: { en: "Read full transcript", tr: "Tam deşifreyi oku", es: "Leer la transcripción completa", de: "Vollständiges Transkript lesen", fr: "Lire la transcription complète", ru: "Читать полную расшифровку", ja: "全文を読む", zh: "阅读完整记录" },
  more_archive: { en: "More from the archive", tr: "Arşivden daha fazlası", es: "Más del archivo", de: "Mehr aus dem Archiv", fr: "Plus dans les archives", ru: "Больше из архива", ja: "アーカイブをもっと見る", zh: "更多档案内容" },
  recordings: { en: "recordings", tr: "kayıt", es: "grabaciones", de: "Aufnahmen", fr: "enregistrements", ru: "записей", ja: "録音", zh: "录音" },
  four_languages: { en: "4 languages", tr: "4 dil", es: "4 idiomas", de: "4 Sprachen", fr: "4 langues", ru: "4 языка", ja: "4言語", zh: "4种语言" },
  vf_all: { en: "All", tr: "Tümü", es: "Todos", de: "Alle", fr: "Tout", ru: "Все", ja: "すべて", zh: "全部" },
  vf_friday: { en: "Friday talks", tr: "Cuma sohbetleri", es: "Pláticas del viernes", de: "Freitagsgespräche", fr: "Causeries du vendredi", ru: "Пятничные беседы", ja: "金曜の講話", zh: "主麻日讲话" },
  vf_lectures: { en: "Lectures", tr: "Dersler", es: "Conferencias", de: "Vorträge", fr: "Conférences", ru: "Лекции", ja: "講義", zh: "讲座" },
  vf_conversations: { en: "Conversations", tr: "Sohbetler", es: "Conversaciones", de: "Gespräche", fr: "Conversations", ru: "Беседы", ja: "対話", zh: "对话" },
  vf_letters: { en: "Letters read aloud", tr: "Sesli okunan mektuplar", es: "Cartas leídas en voz alta", de: "Vorgelesene Briefe", fr: "Lettres lues à voix haute", ru: "Письма вслух", ja: "朗読された書簡", zh: "诵读的书信" },
  continued_legacy: { en: "Continued Legacy", tr: "Devam Eden Miras", es: "Legado continuo", de: "Fortwährendes Vermächtnis", fr: "Héritage perpétué", ru: "Продолжающееся наследие", ja: "受け継がれる遺産", zh: "延续的传承" },
  an_unbroken_chain: { en: "An unbroken chain.", tr: "Kesintisiz bir silsile.", es: "Una cadena ininterrumpida.", de: "Eine ungebrochene Kette.", fr: "Une chaîne ininterrompue.", ru: "Непрерывная цепь.", ja: "途切れぬ系譜。", zh: "一脉相承，绵延不绝。" },
  legacy_intro: { en: "Spiritual guidance passed from heart to heart across generations — each link a teacher carrying forward a living legacy of faith, wisdom, and care.", tr: "Nesilden nesile gönülden gönüle aktarılan manevi rehberlik — her halka, iman, hikmet ve şefkatten oluşan yaşayan bir mirası ileriye taşıyan bir öğretmen.", es: "Una guía espiritual transmitida de corazón a corazón a lo largo de las generaciones; cada eslabón es un maestro que perpetúa un legado vivo de fe, sabiduría y cuidado.", de: "Geistige Führung, die über Generationen von Herz zu Herz weitergegeben wird – jedes Glied ein Lehrer, der ein lebendiges Erbe aus Glaube, Weisheit und Fürsorge weiterträgt.", fr: "Une guidance spirituelle transmise de cœur à cœur au fil des générations — chaque maillon est un maître qui perpétue un héritage vivant de foi, de sagesse et de bienveillance.", ru: "Духовное наставничество, передаваемое от сердца к сердцу из поколения в поколение, — каждое звено это учитель, несущий дальше живое наследие веры, мудрости и заботы.", ja: "世代を超えて心から心へと受け継がれる霊的な導き——その一つひとつの結び目が、信仰と叡智と慈しみの生きた遺産を継いでいく師である。", zh: "心传心授、代代相承的精神指引——每一环都是一位将信仰、智慧与关怀的鲜活传承延续下去的导师。" },
  institutions_seeded: { en: "Institutions seeded", tr: "Kurulan müesseseler", es: "Instituciones fundadas", de: "Gegründete Institutionen", fr: "Institutions fondées", ru: "Основанные учреждения", ja: "創設された機関", zh: "创建的机构" },
  initiatives: { en: "initiatives", tr: "girişim", es: "iniciativas", de: "Initiativen", fr: "initiatives", ru: "инициатив", ja: "取り組み", zh: "项目" },
  the_archive: { en: "The Archive", tr: "Arşiv", es: "El archivo", de: "Das Archiv", fr: "Les archives", ru: "Архив", ja: "アーカイブ", zh: "档案馆" },
  archive: { en: "Archive", tr: "Arşiv", es: "Archivo", de: "Archiv", fr: "Archives", ru: "Архив", ja: "アーカイブ", zh: "档案" },
  museum_view: { en: "museum view", tr: "müze görünümü", es: "vista de museo", de: "Museumsansicht", fr: "vue musée", ru: "режим музея", ja: "ミュージアム表示", zh: "博物馆视图" },
};
function miscT(key, lang) { const e = MISC_I18N[key]; return (e && (e[lang] || e.en)) || ""; }
const VF_KEYS = { "All": "vf_all", "Friday talks": "vf_friday", "Lectures": "vf_lectures", "Conversations": "vf_conversations", "Letters read aloud": "vf_letters" };

const CHAIN = [
  { gen: "I",   name: "The teacher",       note: "A chain passed heart to heart, beyond the names of any one generation." },
  { gen: "II",  name: "The students",      note: "Hundreds across four continents — scholars, imams, teachers, parents." },
  { gen: "III", name: "Their students",    note: "A second generation now beginning to write, to teach, to lead." },
  { gen: "IV",  name: "What comes next",   note: "Open. The chain is alive only while it is carried." },
];

const INITIATIVES = [
  { name: "HAKYOL",  what: "Education, Solidarity and Friendship Foundation" },
  { name: "CEKUD",   what: "Environmental Association" },
  { name: "SERVER",  what: "Foundation · Publishing" },
  { name: "AKRA FM", what: "Radio (early private broadcasting)" },
  { name: "AKRA TV", what: "Television" },
  { name: "SAGDUYU",  what: "Newspaper" },
  { name: "ASFA",    what: "Schools" },
  { name: "ILKSAV",  what: "Islamic Science, Culture and Art Foundation" },
  { name: "Health",  what: "Health Foundation" },
  { name: "Women's", what: "Associations for women's empowerment" },
  { name: "ZINDE",   what: "Scouts & Sport Association" },
];

function Legacy({ mode = "desktop", accent = "#B89968", showPortrait = true }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const mt = (k) => miscT(k, lang);

  return (
    <div className="cw-frame" style={{ overflowY: "auto" }}>
      <TopNav current="Legacy" mobile={mobile} accent={accent} />

      <section style={{ padding: mobile ? "56px 22px 36px" : "120px 96px 80px", borderBottom: "1px solid var(--hairline)" }}>
        <span className="eyebrow"><span style={{ color: accent }}>—</span>  08 / {mt("continued_legacy")}</span>
        <h1 className="serif" style={{
          fontWeight: 300, fontSize: mobile ? 64 : 156, lineHeight: 0.92, letterSpacing: "-0.028em",
          margin: "16px 0 28px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
        }}><span style={{ fontStyle: "italic", color: accent, fontVariationSettings: '"opsz" 9, "SOFT" 100', fontWeight: 350 }}>{mt("an_unbroken_chain")}</span></h1>
        <p className="serif italic" style={{
          fontSize: mobile ? 18 : 26, lineHeight: 1.4, color: "var(--ink-soft)", margin: 0, maxWidth: 760,
          fontVariationSettings: '"opsz" 9, "SOFT" 100'
        }}>
          {mt("legacy_intro")}
        </p>
      </section>

      {/* Chain — vertical, centered link line + four generations */}
      <section style={{ padding: mobile ? "40px 22px 60px" : "80px 96px 120px", position: "relative" }}>
        <div style={{ position: "absolute",
          top: 60, bottom: 60,
          left: mobile ? 38 : "50%", width: 1, background: "var(--hairline)" }} />
        {CHAIN.map((c, i) => (
          <div key={c.gen} style={{
            display: "grid",
            gridTemplateColumns: mobile ? "76px 1fr" : "1fr 80px 1fr",
            alignItems: "center", marginBottom: mobile ? 44 : 80,
          }}>
            <div style={{ gridColumn: mobile ? 1 : (i % 2 === 0 ? 1 : 3), textAlign: mobile ? "left" : (i % 2 === 0 ? "right" : "left"),
              paddingRight: !mobile && i % 2 === 0 ? 48 : 0, paddingLeft: !mobile && i % 2 === 1 ? 48 : 0 }}>
              {mobile ? (
                <span className="serif italic" style={{ fontSize: 28, color: accent, fontWeight: 350,
                  fontVariationSettings: '"opsz" 9, "SOFT" 100' }}>{c.gen}</span>
              ) : (
                <>
                  <span className="eyebrow">— Generation {c.gen}</span>
                  <h3 className="serif" style={{ fontWeight: 400, fontSize: 42, letterSpacing: "-0.015em", margin: "10px 0 10px", lineHeight: 1.1 }}>{c.name}</h3>
                  <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: 0, maxWidth: 360, marginLeft: i % 2 === 0 ? "auto" : 0, lineHeight: 1.55 }}>{c.note}</p>
                </>
              )}
            </div>

            {!mobile && (
              <div style={{ gridColumn: 2, textAlign: "center", position: "relative" }}>
                <span style={{ display: "inline-block", width: 22, height: 22, borderRadius: "50%",
                  background: accent, border: "4px solid var(--bg)" }} />
              </div>
            )}
            {mobile && (
              <>
                <div style={{ gridColumn: 1, position: "absolute", left: 30, marginTop: 4 }}>
                  <span style={{ display: "inline-block", width: 16, height: 16, borderRadius: "50%",
                    background: accent, border: "3px solid var(--bg)" }} />
                </div>
                <div style={{ gridColumn: 2 }}>
                  <span className="eyebrow">— Generation {c.gen}</span>
                  <h3 className="serif" style={{ fontWeight: 400, fontSize: 24, letterSpacing: "-0.01em", margin: "6px 0 6px", lineHeight: 1.15 }}>{c.name}</h3>
                  <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: 0, lineHeight: 1.55 }}>{c.note}</p>
                </div>
              </>
            )}

            {!mobile && (
              <div style={{ gridColumn: i % 2 === 0 ? 3 : 1, opacity: 0 }}>placeholder</div>
            )}
          </div>
        ))}
      </section>

      {/* Initiatives — institutional grid */}
      <section style={{ padding: mobile ? "16px 22px 64px" : "40px 96px 120px", borderTop: "1px solid var(--hairline)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: mobile ? 28 : 56, marginBottom: mobile ? 24 : 40 }}>
          <span className="eyebrow"><span style={{ color: accent }}>—</span>  {mt("institutions_seeded")}</span>
          <span className="eyebrow eyebrow-light">{INITIATIVES.length} {mt("initiatives")}</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(2, 1fr)", gap: mobile ? 14 : 0, columnGap: 48 }}>
          {INITIATIVES.map((it, i) => (
            <div key={it.name} style={{
              display: "grid", gridTemplateColumns: "140px 1fr",
              gap: 24, alignItems: "baseline",
              padding: mobile ? "16px 0" : "22px 0",
              borderTop: "1px solid var(--hairline)",
            }}>
              <span className="serif" style={{ fontWeight: 400, fontSize: mobile ? 18 : 22, letterSpacing: "-0.005em", color: "var(--ink)" }}>{it.name}</span>
              <span style={{ fontSize: 13, color: "var(--gray-warm)", lineHeight: 1.5 }}>{it.what}</span>
            </div>
          ))}
        </div>
      </section>

      <SiteFooter mobile={mobile} accent={accent} />
    </div>
  );
}

Object.assign(window, { Legacy, miscT, MISC_I18N, VF_KEYS, INITIATIVES });