/* Landing — HI-FI tour.
   Polished proof: refined portrait (duotone + SVG silhouette + vignette + grain),
   staged hero reveal, scroll-triggered reveals, door hover with gold underline + lift.
   Vanilla CSS animations + IntersectionObserver — no GSAP needed here.
*/

const HF_DOORS = [
  { n: "01", navKey: "life",         sub: "sub_life",         meta: "meta_life",         go: "/life" },
  { n: "02", navKey: "professional", sub: "sub_professional", meta: "meta_professional", go: "/professional" },
  { n: "03", navKey: "forerunner",   sub: "sub_forerunner",   meta: "meta_forerunner",   go: "/forerunner" },
  { n: "04", navKey: "thinker",      sub: "sub_thinker",      meta: "meta_thinker",      go: "/thinker" },
  { n: "05", navKey: "guide",        sub: "sub_guide",        meta: "meta_guide",        go: "/guide" },
  { n: "06", navKey: "friend",       sub: "sub_friend",       meta: "meta_friend",       go: "/friend" },
];

const LANDING_I18N = {
  a_life_in_ideas: { en: "A life devoted to the Creator", tr: "İman ve Aksiyon Dolu Bir Hayat", es: "Una vida de fe y acción", de: "Ein Leben aus Glaube und Tat", fr: "Une vie de foi et d'action", ru: "Жизнь веры и действия", ja: "信仰と行動の生涯", zh: "信仰与行动的一生" },
  pull_quote: { en: "My Lord, You are my goal, and Your pleasure is what I seek.", tr: "Rabbim, Sen benim maksudumsun ve aradığım Senin rızandır.", es: "Señor mío, Tú eres mi meta, y Tu complacencia es lo que busco.", de: "Mein Herr, Du bist mein Ziel, und Dein Wohlgefallen ist es, wonach ich suche.", fr: "Mon Seigneur, Tu es mon but, et Ton agrément est ce que je recherche.", ru: "Господь мой, Ты — моя цель, и Твоё благоволение — вот что я ищу.", ja: "我が主よ、あなたこそ我が目指すもの、あなたの御満悦こそ我が求めるもの。", zh: "我的主啊，你是我的目标，你的喜悦正是我所追寻的。" },
  scroll: { en: "Scroll", tr: "Kaydır", es: "Desplázate", de: "Scrollen", fr: "Faire défiler", ru: "Прокрутить", ja: "スクロール", zh: "滚动" },
  eight_rooms: { en: "Eight rooms", tr: "Sekiz oda", es: "Ocho salas", de: "Acht Räume", fr: "Huit salles", ru: "Восемь комнат", ja: "八つの部屋", zh: "八个房间" },
  site_chapters: { en: "A site in eight chapters", tr: "Sekiz bölümden oluşan bir site", es: "Un sitio en ocho capítulos", de: "Eine Website in acht Kapiteln", fr: "Un site en huit chapitres", ru: "Сайт в восьми главах", ja: "八章からなるサイト", zh: "八个篇章构成的网站" },
  explore: { en: "Explore", tr: "Keşfet", es: "Explorar", de: "Entdecken", fr: "Explorer", ru: "Обзор", ja: "見てまわる", zh: "探索" },
  posts: { en: "Posts", tr: "Yazılar", es: "Publicaciones", de: "Beiträge", fr: "Articles", ru: "Публикации", ja: "投稿", zh: "文章" },
  all_posts: { en: "All posts", tr: "Tüm yazılar", es: "Todas las publicaciones", de: "Alle Beiträge", fr: "Tous les articles", 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: "延续的传承" },
  sub_life: { en: "Born 1938 in Çanakkale. A descendant of the Prophet (peace be upon him); ancestors from Bukhara.", tr: "1938'de Çanakkale'de doğdu. Peygamber (peace be upon him) soyundan; ataları Buhara'dan.", es: "Nació en 1938 en Çanakkale. Descendiente del Profeta (peace be upon him); sus ancestros provenían de Bukhara.", de: "1938 in Çanakkale geboren. Ein Nachkomme des Propheten (peace be upon him); seine Vorfahren stammten aus Bukhara.", fr: "Né en 1938 à Çanakkale. Descendant du Prophète (peace be upon him) ; ses ancêtres venaient de Boukhara.", ru: "Родился в 1938 году в Чанаккале. Потомок Пророка (peace be upon him); его предки происходили из Бухары.", ja: "1938年、チャナッカレに生まれる。預言者(peace be upon him)の末裔であり、祖先はブハラの出。", zh: "1938年生于恰纳卡莱。先知(peace be upon him)的后裔，祖先来自布哈拉。" },
  sub_professional: { en: "PhD 1965 · Professor 1982 · 27 years at Ankara University.", tr: "1965'te doktora · 1982'de profesör · Ankara Üniversitesi'nde 27 yıl.", es: "Doctorado en 1965 · Catedrático en 1982 · 27 años en la Universidad de Ankara.", de: "Promotion 1965 · Professor 1982 · 27 Jahre an der Universität Ankara.", fr: "Doctorat en 1965 · Professeur en 1982 · 27 ans à l'Université d'Ankara.", ru: "Докторская степень в 1965 году · Профессор с 1982 года · 27 лет в Университете Анкары.", ja: "1965年に博士号 · 1982年に教授 · アンカラ大学で27年間。", zh: "1965年获博士学位 · 1982年任教授 · 在安卡拉大学任教27年。" },
  sub_forerunner: { en: "Founded and supported educational, cultural, environmental and welfare initiatives worldwide.", tr: "Dünya genelinde eğitim, kültür, çevre ve hayır alanlarında girişimler kurdu ve destekledi.", es: "Fundó y apoyó iniciativas educativas, culturales, ambientales y benéficas en todo el mundo.", de: "Gründete und förderte weltweit Bildungs-, Kultur-, Umwelt- und Wohltätigkeitsinitiativen.", fr: "A fondé et soutenu des initiatives éducatives, culturelles, environnementales et caritatives dans le monde entier.", ru: "Основал и поддерживал образовательные, культурные, экологические и благотворительные начинания по всему миру.", ja: "世界各地で教育・文化・環境・福祉の取り組みを設立し、支援した。", zh: "在世界各地创办并支持教育、文化、环境和慈善事业。" },
  sub_thinker: { en: "Harmonising the timeless wisdom of tradition with the evolving needs of the modern world.", tr: "Geleneğin çağlar üstü hikmetini modern dünyanın değişen ihtiyaçlarıyla uyumlulaştırdı.", es: "Armonizó la sabiduría atemporal de la tradición con las cambiantes necesidades del mundo moderno.", de: "Brachte die zeitlose Weisheit der Tradition mit den sich wandelnden Bedürfnissen der modernen Welt in Einklang.", fr: "A harmonisé la sagesse intemporelle de la tradition avec les besoins changeants du monde moderne.", ru: "Сочетал вневременную мудрость традиции с меняющимися потребностями современного мира.", ja: "伝統の不変の叡智を、変化し続ける現代世界の必要と調和させた。", zh: "将传统中永恒的智慧与现代世界不断变化的需求相融合。" },
  sub_guide: { en: "Devoted his life to guiding seekers toward their Creator through love, sincerity and learning.", tr: "Hayatını sevgi, samimiyet ve ilimle arayış içindekileri Yaratıcılarına yöneltmeye adadı.", es: "Dedicó su vida a guiar a los buscadores hacia su Creador mediante el amor, la sinceridad y el saber.", de: "Widmete sein Leben der Aufgabe, Suchende durch Liebe, Aufrichtigkeit und Wissen zu ihrem Schöpfer zu führen.", fr: "A consacré sa vie à guider les chercheurs vers leur Créateur par l'amour, la sincérité et le savoir.", ru: "Посвятил свою жизнь тому, чтобы вести ищущих к их Творцу через любовь, искренность и знание.", ja: "愛と誠実と学びをもって、求める者をその創造主へと導くことに生涯を捧げた。", zh: "以爱、真诚与学识，毕生引导寻道者归向他们的造物主。" },
  sub_friend: { en: "A sincere companion to people from all walks of life — humility, warmth, integrity.", tr: "Her kesimden insana içten bir dost — tevazu, sıcaklık, dürüstlük.", es: "Un compañero sincero para personas de toda condición: humildad, calidez, integridad.", de: "Ein aufrichtiger Gefährte für Menschen aus allen Lebensbereichen – Demut, Wärme, Integrität.", fr: "Un compagnon sincère pour les gens de tous horizons — humilité, chaleur, intégrité.", ru: "Искренний друг для людей из всех слоёв общества — смирение, теплота, честность.", ja: "あらゆる立場の人々にとっての誠実な友 — 謙虚さ、温かさ、誠実さ。", zh: "对各行各业的人都是真诚的伙伴 — 谦逊、温暖、正直。" },
  sub_library: { en: "Books, essays, audio and video — the full body of work in one place.", tr: "Kitaplar, makaleler, sesli ve görüntülü eserler — tüm külliyat tek bir yerde.", es: "Libros, ensayos, audio y video: toda la obra reunida en un solo lugar.", de: "Bücher, Aufsätze, Audio und Video – das gesamte Werk an einem Ort.", fr: "Livres, essais, audio et vidéo — l'ensemble de l'œuvre en un seul endroit.", ru: "Книги, статьи, аудио и видео — всё наследие в одном месте.", ja: "書籍、論文、音声、映像 — その全著作を一つの場所に。", zh: "书籍、文章、音频与视频 — 全部著作汇于一处。" },
  sub_legacy: { en: "An unbroken chain of spiritual guidance — passed from heart to heart across generations.", tr: "Kesintisiz bir manevi rehberlik silsilesi — nesilden nesile gönülden gönüle aktarıldı.", es: "Una cadena ininterrumpida de guía espiritual, transmitida de corazón a corazón a través de las generaciones.", de: "Eine ungebrochene Kette spiritueller Führung – von Herz zu Herz über die Generationen weitergegeben.", fr: "Une chaîne ininterrompue de guidance spirituelle — transmise de cœur à cœur au fil des générations.", ru: "Непрерывная цепь духовного наставничества — передаваемая от сердца к сердцу из поколения в поколение.", ja: "途切れることのない精神的導きの連鎖 — 世代を超えて心から心へと受け継がれてきた。", zh: "一脉相承、绵延不绝的心灵指引 — 代代相传，心心相印。" },
  meta_life: { en: "In brief", tr: "Kısaca", es: "En resumen", de: "Kurz gefasst", fr: "En bref", ru: "Вкратце", ja: "概要", zh: "简介" },
  meta_professional: { en: "Scholar", tr: "Âlim", es: "Erudito", de: "Gelehrter", fr: "Savant", ru: "Учёный", ja: "学者", zh: "学者" },
  meta_forerunner: { en: "Institutions", tr: "Kurumlar", es: "Instituciones", de: "Institutionen", fr: "Institutions", ru: "Учреждения", ja: "機関", zh: "机构" },
  meta_thinker: { en: "Thought", tr: "Düşünce", es: "Pensamiento", de: "Denken", fr: "Pensée", ru: "Мысль", ja: "思想", zh: "思想" },
  meta_guide: { en: "Path", tr: "Yol", es: "Camino", de: "Weg", fr: "Voie", ru: "Путь", ja: "道", zh: "道路" },
  meta_friend: { en: "Character", tr: "Karakter", es: "Carácter", de: "Charakter", fr: "Caractère", ru: "Характер", ja: "人柄", zh: "品格" },
  meta_library: { en: "Works", tr: "Eserler", es: "Obras", de: "Werke", fr: "Œuvres", ru: "Труды", ja: "著作", zh: "著作" },
  meta_legacy: { en: "Living chain", tr: "Yaşayan silsile", es: "Cadena viva", de: "Lebendige Kette", fr: "Chaîne vivante", ru: "Живая цепь", ja: "生きた連鎖", zh: "活着的传承" },
};
function landingT(key, lang) { const e = LANDING_I18N[key]; return (e && (e[lang] || e.en)) || ""; }

/* SVG silhouette — distinguished elder scholar, three-quarter profile, shoulders visible.
   Pure shape (no facial detail) — reads as a portrait placeholder of the right register. */
function PortraitSilhouette({ accent }) {
  return (
    <svg viewBox="0 0 320 480" xmlns="http://www.w3.org/2000/svg" aria-label="Portrait placeholder">
      <defs>
        <linearGradient id="hfFigGrad" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#3A3530" stopOpacity="0.92" />
          <stop offset="55%" stopColor="#1F1C18" stopOpacity="0.96" />
          <stop offset="100%" stopColor="#0A0908" stopOpacity="1" />
        </linearGradient>
        <linearGradient id="hfRim" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%"   stopColor={accent} stopOpacity="0.0" />
          <stop offset="55%"  stopColor={accent} stopOpacity="0.0" />
          <stop offset="78%"  stopColor={accent} stopOpacity="0.18" />
          <stop offset="100%" stopColor={accent} stopOpacity="0.0" />
        </linearGradient>
      </defs>

      {/* shoulders / coat */}
      <path
        d="M -30 480
           L -30 380
           C 20 330, 60 318, 100 312
           C 130 302, 140 296, 145 286
           L 175 286
           C 180 296, 190 302, 220 312
           C 260 318, 300 330, 350 380
           L 350 480 Z"
        fill="url(#hfFigGrad)"
      />
      {/* neck */}
      <path
        d="M 142 286 L 142 250 C 142 240, 178 240, 178 250 L 178 286 Z"
        fill="url(#hfFigGrad)"
      />
      {/* head — slight head turn left, looking past camera */}
      <path
        d="M 110 178
           C 108 138, 132 100, 165 100
           C 200 100, 220 130, 220 168
           C 220 195, 218 215, 212 232
           C 206 248, 195 258, 178 262
           L 178 268
           C 160 268, 142 264, 132 258
           C 118 248, 110 232, 110 210 Z"
        fill="url(#hfFigGrad)"
      />
      {/* subtle rim light on right edge */}
      <rect x="0" y="0" width="320" height="480" fill="url(#hfRim)" />
    </svg>
  );
}

function LandingHiFi({ mode = "desktop", accent = "#B89968", showPortrait = true }) {
  const mobile = mode === "mobile";
  const [lang] = (typeof useLang === "function" ? useLang() : ["en"]);
  const nav = (typeof useT === "function" ? useT() : {});
  const lt = (k) => landingT(k, lang);
  const eyebrowLine = `${nav.forerunner || "Forerunner"} · ${nav.thinker || "Thinker"} · ${nav.guide || "Guide"} · ${nav.friend || "Friend"}`;
  const rootRef = React.useRef(null);

  /* IntersectionObserver — toggles .is-in on .hf-reveal elements inside this artboard.
     Uses the scroll container as root so it works inside DCArtboards. */
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    const targets = root.querySelectorAll(".hf-reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { root, threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    targets.forEach((t) => io.observe(t));
    return () => io.disconnect();
  }, []);

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

      {/* HERO B — portrait + name block */}
      {!mobile ? (
        <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 760, borderBottom: "1px solid var(--hairline)", position: "relative" }}>
          {showPortrait ? (
            <div className="hf-portrait hf-fade" style={{ height: "100%", animationDelay: "0ms", overflow: "hidden" }}>
              <img src="uploads/photos/hero-home.jpg" alt="Esad Cosan" loading="eager"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "70% center", display: "block" }} />
              <div className="hf-grain" />
            </div>
          ) : (
            <div style={{ background: "var(--bg-warm)" }} />
          )}

          <div style={{ padding: "120px 80px", display: "flex", flexDirection: "column", justifyContent: "center", position: "relative" }}>
            <span className="hf-eyebrow-rule hf-rise" style={{ color: "var(--gray-warm)", animationDelay: "200ms" }}>
              {eyebrowLine}
            </span>
            <h1 className="serif hf-rise" style={{
              fontWeight: 300, fontSize: 156, lineHeight: 0.94, letterSpacing: "-0.03em",
              margin: "26px 0 28px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
              animationDelay: "350ms",
            }}>Esad<br />Cosan</h1>
            <div className="hf-rule" style={{ width: 80, height: 1, background: accent, marginBottom: 22, animationDelay: "900ms" }} />
            <p className="serif italic hf-rise" style={{
              fontSize: 32, color: "var(--ink-soft)", margin: 0, lineHeight: 1.25,
              fontVariationSettings: '"opsz" 9, "SOFT" 100',
              animationDelay: "1100ms",
            }}>
              {lt("a_life_in_ideas")}
            </p>

            {/* scroll cue */}
            <div className="hf-fade" style={{ position: "absolute", left: 80, bottom: 56, display: "flex", alignItems: "center", gap: 12, animationDelay: "2000ms" }}>
              <span className="eyebrow" style={{ color: accent }}>{lt("scroll")}</span>
              <span style={{ width: 1, height: 36, background: accent, display: "inline-block" }} />
            </div>
          </div>
        </section>
      ) : (
        <section style={{ position: "relative" }}>
          {showPortrait && (
            <div className="hf-portrait hf-fade" style={{ aspectRatio: "4/5", margin: "12px 22px 0", overflow: "hidden" }}>
              <img src="uploads/photos/hero-home.jpg" alt="Esad Cosan" loading="eager"
                style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "70% center", display: "block" }} />
              <div className="hf-grain" />
            </div>
          )}
          <div style={{ padding: "32px 22px 16px" }}>
            <span className="hf-eyebrow-rule hf-rise" style={{ animationDelay: "150ms" }}>
              {eyebrowLine}
            </span>
            <h1 className="serif hf-rise" style={{
              fontWeight: 300, fontSize: 72, lineHeight: 0.94, letterSpacing: "-0.028em",
              margin: "14px 0 14px", fontVariationSettings: '"opsz" 144, "SOFT" 30',
              animationDelay: "300ms",
            }}>Esad<br />Cosan</h1>
            <div className="hf-rule" style={{ width: 56, height: 1, background: accent, margin: "0 0 14px", animationDelay: "750ms" }} />
            <p className="serif italic hf-rise" style={{
              fontSize: 22, color: "var(--ink-soft)", margin: 0,
              fontVariationSettings: '"opsz" 9, "SOFT" 100',
              animationDelay: "950ms",
            }}>{lt("a_life_in_ideas")}</p>
          </div>
        </section>
      )}

      {/* PULL QUOTE — scroll reveal */}
      <section className="hf-reveal" style={{ padding: mobile ? "64px 22px" : "140px 96px", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ maxWidth: 960, marginInline: "auto", display: "grid", gridTemplateColumns: mobile ? "auto 1fr" : "120px 1fr", gap: mobile ? 16 : 32 }}>
          <span className="qmark" style={{ color: accent, fontSize: mobile ? 72 : 112, lineHeight: 0.6 }}>"</span>
          <div>
            <p className="serif italic" style={{
              fontSize: mobile ? 26 : 44, lineHeight: 1.22, margin: 0,
              fontVariationSettings: '"opsz" 9, "SOFT" 100', color: "var(--ink)",
              textWrap: "pretty",
            }}>
              {lt("pull_quote")}
            </p>
          </div>
        </div>
      </section>

      {/* EIGHT DOORS — hover lift + gold underline, staggered reveal */}
      <section style={{ padding: mobile ? "56px 22px 72px" : "120px 96px 140px" }}>
        <div className="hf-reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: mobile ? 32 : 64 }}>
          <span className="hf-eyebrow-rule">{lt("explore")}</span>
        </div>
        {HF_DOORS.map((d, i) => (
          <article
            key={d.n}
            className="hf-door hf-reveal"
            data-go={d.go}
            style={{
              gridTemplateColumns: mobile ? "1fr auto" : "1fr 320px 100px",
              columnGap: mobile ? 14 : 32,
              padding: mobile ? "26px 0" : "40px 0",
              borderTop: i === 0 ? "1px solid var(--ink)" : "1px solid var(--hairline)",
              transitionDelay: `${i * 40}ms`,
              cursor: "pointer",
            }}
          >
            <h3 className="serif" style={{
              fontWeight: 400, fontSize: mobile ? 28 : 58, letterSpacing: "-0.02em",
              margin: 0, lineHeight: 1.02,
              fontVariationSettings: '"opsz" 96, "SOFT" 30',
            }}>{d.navKey ? (nav[d.navKey] || lt(d.titleKey)) : lt(d.titleKey)}</h3>
            {!mobile && (
              <p style={{ fontSize: 14, color: "var(--gray-warm)", margin: 0, lineHeight: 1.6, textWrap: "pretty" }}>
                {lt(d.sub)}
              </p>
            )}
            <span style={{ fontSize: 12, color: "var(--gray-warm)", letterSpacing: "0.04em", textAlign: "right" }}>
              {!mobile && lt(d.meta)}
              <span className="hf-arrow" style={{ color: accent, marginLeft: mobile ? 0 : 14 }}>→</span>
            </span>
          </article>
        ))}
      </section>

      <SiteFooter mobile={mobile} accent={accent} />

      {/* Global grain on the whole frame — very subtle */}
      <div className="hf-grain" style={{ opacity: 0.035, position: "fixed" }} />
    </div>
  );
}

Object.assign(window, { LandingHiFi });