/* ============================================================
   GEMS Group — About page
   ============================================================ */

// Leadership team — hardcoded fallback (portraits + bilingual bios). CMS
// (team_members) overrides name/role/bio when available; portraits stay here
// because the CMS portrait field is not yet populated.
const ABOUT_TEAM = [
  { roleCode: "MANAGING PARTNER", name: "Nguyễn Khôi Nguyên", portrait: "BOD/Khoi.png", assetKey: "team_khoi",
    bioVi: "Dẫn dắt chiến lược đầu tư của GEMS Group — chịu trách nhiệm thẩm định, cấu trúc thương vụ và đồng vận hành các tổ chức giáo dục trong danh mục đầu tư.",
    bioEn: "Leads GEMS Group's investment strategy — responsible for due diligence, deal structuring and co-operating the education institutions in the portfolio.",
    expVi: "10+ năm kinh nghiệm Quản lý Tài sản", expEn: "10+ Years Experience in Asset Management" },
  { roleCode: "INVESTMENT PARTNER", name: "Trần Vũ Sơn", portrait: "BOD/S%C6%A1n.png", assetKey: "team_son",
    bioVi: "Phụ trách thẩm định thương vụ, cấu trúc đầu tư và quan hệ với các nhà sáng lập trong giai đoạn thương lượng — đảm bảo kỷ luật đầu tư của GEMS.",
    bioEn: "Leads deal diligence, investment structuring and founder relationships during negotiation — upholding GEMS's investment discipline.",
    expVi: "15+ năm kinh nghiệm Quản lý Tài sản", expEn: "15+ Years Experience in Asset Management" },
  { roleCode: "ACADEMIC PARTNER", name: "Nguyễn Thị Quỳnh Vân", portrait: "BOD/Van.png", assetKey: "team_van",
    bioVi: "Dẫn dắt nền tảng học thuật và chất lượng giáo dục — xây dựng chương trình, chuẩn mực sư phạm và phát triển đội ngũ cho các tổ chức trong danh mục.",
    bioEn: "Leads the academic foundation and education quality — building curricula, pedagogical standards and faculty development for portfolio institutions.",
    expVi: "30+ năm kinh nghiệm Quản trị, phát triển & vận hành hệ thống giáo dục", expEn: "30+ Years Experience in governance, development & operation of education systems" },
  { roleCode: "OPERATING PARTNER", name: "Nguyễn Tuấn Anh", portrait: "BOD/Anh.png", assetKey: "team_anh",
    bioVi: "Dẫn dắt mảng tư vấn vận hành và đồng quản trị — hỗ trợ các tổ chức trong danh mục tối ưu mô hình kinh doanh, học thuật và phát triển thương hiệu giáo dục.",
    bioEn: "Leads operations advisory and co-governance — helping portfolio institutions optimize their business model, academics and education brand development.",
    expVi: "16+ năm kinh nghiệm Quản trị, phát triển & vận hành hệ thống giáo dục", expEn: "16+ Years Experience in governance, development & operation of education systems" },
];

// Core Expert (deck slide 5) + Fellow Council (deck slide 6) — hardcoded
// fallbacks (bilingual). CMS collections `core_experts` / `fellow_council`
// override name/specialty/bio + portrait when available (Pattern A, like
// team_members). No portraits ship yet → cards render a monogram avatar.
const ABOUT_CORE_EXPERTS = [
  { name: { vi: "ThS. Nguyễn Lệ Chi", en: "MSc. Nguyễn Lệ Chi" }, specialty: { vi: "Chuyên gia Giáo dục Đại học Quốc tế", en: "International Higher Education Specialist" },
    bio: { vi: "Với hơn 20 năm kinh nghiệm trong lĩnh vực Giáo dục Quốc tế và Quản lý Dự án Chiến lược, bà sở hữu mạng lưới quan hệ rộng lớn và có tầm ảnh hưởng, duy trì các mối quan hệ cấp cao với các cơ quan chính phủ, các trường đại học danh tiếng và các tổ chức giáo dục hàng đầu tại Việt Nam, Úc và New Zealand.", en: "20+ years of expertise in International Education and Strategic Project Management. She possesses an extensive and influential network, maintaining high-level relationships with government agencies, prestigious universities, and leading educational organisations across Vietnam, Australia, and New Zealand." } },
  { name: { vi: "TS. Nguyễn Xuân Quang", en: "Dr. Nguyễn Xuân Quang" }, specialty: { vi: "Sức khỏe & Phát triển Con người", en: "Health & Human Development" },
    bio: { vi: "Hơn 15 năm trong ngành làm đẹp và chăm sóc sức khỏe; Tổng Giám đốc MD Medical; chuyên gia về chăm sóc sức khỏe toàn diện cho học sinh — thể chất, phát triển tâm lý và trưởng thành cá nhân.", en: "15+ years in the beauty and healthcare industry; CEO of MD Medical; specialist in holistic student wellbeing — physical health, psychological development, and personal growth." } },
  { name: { vi: "ThS. Haley Phan", en: "MSc. Haley Phan" }, specialty: { vi: "Công nghệ Giáo dục, Giáo dục Đại học & R&D", en: "EdTech, Higher Education & R&D" },
    bio: { vi: "Hơn 14 năm hoạt động trong lĩnh vực công nghệ và giáo dục; đã dẫn dắt 4 startup; phát triển 2 sản phẩm EdTech được Google và AWS hậu thuẫn; giảng viên tại RMIT, VinUni và BUV; Top 100 Nhà lãnh đạo MBA Toàn cầu của Microsoft năm 2017.", en: "14+ years across technology and education; led 4 startups; developed 2 EdTech products backed by Google and AWS; Lecturer at RMIT, VinUni, and BUV; Microsoft Top 100 Global MBA Leader 2017." } },
  { name: { vi: "Nguyễn Tuyết Lê", en: "Nguyễn Tuyết Lê" }, specialty: { vi: "Quản trị Dữ liệu & Vận hành Giáo dục", en: "Data Governance & Education Operations" },
    bio: { vi: "Hơn 10 năm trong giáo dục K-12; trực tiếp triển khai chuyển đổi số trong trường học; chuyên gia kiểm định chất lượng Cognia.", en: "10+ years in K-12 education; hands-on digital transformation in schools; Cognia quality accreditation specialist." } },
];
const ABOUT_FELLOWS = [
  { name: { vi: "GS. TS. Nguyễn Đức Chính", en: "Prof. Dr. Nguyễn Đức Chính" }, specialty: { vi: "Nhà giáo Nhân dân; Chuyên gia Giáo dục cấp cao", en: "People's Teacher; Senior Education Expert" },
    bio: { vi: "Hơn 50 năm trong ngành giáo dục; cố vấn cho nhiều trường đại học hàng đầu; tác giả công trình nghiên cứu hệ thống đầu tiên của Việt Nam về kiểm định chất lượng giáo dục đại học — được Đại học Quốc gia Hà Nội trao giải Nghiên cứu Khoa học Xuất sắc năm 2003.", en: "50+ years in education; advisor to leading universities; author of Vietnam's first systematic research on higher education quality accreditation — awarded Outstanding Scientific Research by Vietnam National University, 2003." } },
  { name: { vi: "ThS. Nguyễn Quỳnh Anh", en: "MSc. Nguyễn Quỳnh Anh" }, specialty: { vi: "Ngoại giao & Quan hệ Quốc tế", en: "Diplomacy & International Relations" },
    bio: { vi: "Hơn 30 năm dẫn dắt chiến lược ngoại giao quốc tế của Việt Nam; kiến trúc sư chủ chốt của quan hệ Việt Nam–Hoa Kỳ và Việt Nam–EU; trực tiếp đóng góp vào Quan hệ Đối tác Chiến lược Việt Nam–Hoa Kỳ (2023) và Hiệp định Thương mại Tự do và Bảo hộ Đầu tư Việt Nam–EU (2020).", en: "30+ years leading Vietnam's international diplomatic strategy; key architect of Vietnam–US and Vietnam–EU relations; directly contributed to the Vietnam–US Strategic Partnership (2023) and Vietnam–EU Free Trade and Investment Protection Agreements (2020)." } },
  { name: { vi: "ThS. Bùi Nguyệt Anh", en: "MSc. Bùi Nguyệt Anh" }, specialty: { vi: "Phát triển Con người & Đánh giá Năng lực", en: "Human Development & Capability Assessment" },
    bio: { vi: "Hơn 14 năm trong lĩnh vực tư vấn, giáo dục và phát triển cá nhân; nhà sáng lập GeneCode — ứng dụng khoa học vân tay vào giáo dục với gần 10.000 khách hàng; đối tác chiến lược của Olympia, VIP School và nhiều tổ chức giáo dục hàng đầu khác.", en: "14+ years in consulting, education, and personal development; Founder of GeneCode — applying fingerprint science to education with nearly 10,000 clients; strategic partner to Olympia, VIP Schools, and other leading education institutions." } },
];

// Monogram initials from a full name — drops dotted title tokens (MSc./Dr./
// Prof.) and takes the initials of the last two remaining tokens.
function expertInitials(fullName) {
  const tokens = String(fullName || "").split(/\s+/).filter((t) => t && !t.endsWith("."));
  const pick = tokens.slice(-2);
  const out = pick.map((t) => t[0]).join("").toUpperCase();
  return out || "GEMS";
}

// Vision / Mission cards — hardcoded fallback (matches the original JSX).
// CMS (page_sections "about_story_03" `data`) overrides the text only; the
// two-paragraph dual-flex card layout is art-directed and stays in the JSX.
// `tone` is structural (blue/red) — always taken from this fallback, never CMS.
const ABOUT_VM_FALLBACK = [
  {
    tone: "blue",
    label: { vi: "— Tầm nhìn", en: "— Vision" },
    title: { vi: "Kiến trúc hệ sinh thái giáo dục tái tạo hàng đầu — cho định chế và cá nhân.", en: "Architecting a best-in-class regenerative education ecosystem — for institutions and individuals." },
    body: [
      { vi: "Trở thành một trong những tổ chức đầu tư và quản lý giáo dục hàng đầu Châu Á, thông qua các hệ sinh thái giáo dục hiệu suất cao, nơi con người được phát triển năng lực ở quy mô lớn, hướng tới sự tương hợp giữa nhận thức và thực tại.", en: "To become one of Asia's leading educational investment and management organizations through the ecosystem of highly effective educational institutions; where human capabilities are developed on a larger scale, towards the convergence of perception and reality." },
    ],
    stat: { vi: "Tái tạo · Cho định chế & cá nhân", en: "Regenerative · For institutions & individuals" },
  },
  {
    tone: "red",
    label: { vi: "— Sứ mệnh", en: "— Mission" },
    title: { vi: "Tạo ra một môi trường phát triển toàn diện — nơi Đạo đức – Sức khỏe – Trí tuệ được vun bồi đồng thời", en: "To create an environment for holistic growth — where Ethics, Health and Intellect are cultivated together" },
    body: [
      { vi: "Chúng tôi nỗ lực kiến tạo hệ sinh thái giáo dục bền vững hàng đầu cho các tổ chức và cá nhân, thông qua việc kết hợp trí tuệ, công nghệ và sức mạnh tài chính.", en: "We strive to architect best-in-class regenerative education ecosystem for institutions and individuals through integrating worldly knowledge, technology, and financial strength." },
    ],
    stat: { vi: "Đạo đức · Sức khỏe · Trí tuệ", en: "Ethics · Health · Intellect" },
  },
];

// Merge a CMS {vi,en} value over a fallback {vi,en}, keeping the fallback
// per-language when the CMS value omits that language (never blanks).
function vmPick(cmsVal, fbVal) {
  return {
    vi: cmsVal && cmsVal.vi != null ? cmsVal.vi : fbVal.vi,
    en: cmsVal && cmsVal.en != null ? cmsVal.en : fbVal.en,
  };
}

function AboutPage() {
  useLang(); // subscribe: re-render whole tree on VI/EN switch
  useCms();  // re-render when CMS content loads / updates

  // Wave S — SHARED blocks managed in common (also on Homepage / Insights):
  //  • lead-magnet  → insights_magnet_fields singleton
  //  • CTA form copy → cta_form_fields singleton (the decorative "Share your
  //    vision" form; its <select> options diverge per page and stay in code).
  const _mag = window.cms ? window.cms.get("insights_magnet_fields") : null;
  const magVe = _mag && _mag.id && window.veAttr && window.veAttr("insights_magnet_fields", _mag.id, ["label", "title", "body", "download_cta"], "drawer");
  const magLabel = _mag && _mag.label ? L(_mag.label.vi, _mag.label.en) : L("Tài liệu miễn phí", "Free resource");
  const magTitle = _mag && _mag.title ? L(_mag.title.vi, _mag.title.en) : L("Báo cáo Thị trường Giáo dục Tư nhân Việt Nam 2026", "Vietnam Private Education Market Report 2026");
  const magBody = _mag && _mag.body ? L(_mag.body.vi, _mag.body.en) : L("42 trang phân tích quy mô thị trường, top 20 thương vụ, xu hướng đầu tư và dự báo 2027.", "42 pages on market size, the top 20 deals, investment trends and a 2027 outlook.");
  const magCta = _mag && _mag.download_cta ? L(_mag.download_cta.vi, _mag.download_cta.en) : L("Tải PDF · 42 trang", "Download PDF · 42 pages");
  const _ctaf = window.cms ? window.cms.get("cta_form_fields") : null;
  const ctaFormVe = _ctaf && _ctaf.id && window.veAttr && window.veAttr("cta_form_fields", _ctaf.id, ["name_label", "name_placeholder", "email_label", "email_placeholder", "area_label", "message_label", "message_placeholder", "submit_label"], "drawer");
  const cf = (key, vi, en) => {
    const v = _ctaf && _ctaf[key];
    return v && typeof v === "object" ? L(v.vi, v.en) : (typeof v === "string" && v ? v : L(vi, en));
  };

  // Wave A2 — About section-header chrome (sec-meta eyebrow/meta-right + story
  // tag + LinkedIn label) from the about_ui_fields singleton. Hardcoded fallback.
  const _au = window.cms ? window.cms.get("about_ui_fields") : null;
  const auF = (key, vi, en) => {
    const v = _au && _au[key];
    return v && typeof v === "object" ? L(v.vi || vi, v.en || v.vi || en) : L(vi, en);
  };
  const auVe = (key, mode) =>
    window.veAttr && _au && _au.id ? window.veAttr("about_ui_fields", _au.id, key, mode || "popover") : undefined;

  // Group B — render Core-Expert / Fellow-Council person cards. Reuses the
  // board `about-team-*` card markup; CMS collection (Pattern A) overrides
  // name/specialty/bio + portrait, falling back to the hardcoded array by
  // index. No portrait → monogram avatar.
  const renderExpertCards = (collection, fallbackArr) => {
    const cmsRows = window.cms ? window.cms.get(collection) : null;
    // Drive the list off CMS whenever it has rows (already sorted + status-
    // filtered) so people added beyond the hardcoded fallback still render.
    // Offline / pre-seed → fall back to the hardcoded array. Per-field fallback
    // still applies by index for the original entries.
    const rows = Array.isArray(cmsRows) && cmsRows.length ? cmsRows : null;
    const count = rows ? rows.length : fallbackArr.length;
    return Array.from({ length: count }).map((_, i) => {
      const row = rows ? (rows[i] || null) : null;
      const fb = fallbackArr[i] || null;
      const name = (row && row.member_name) ? L(row.member_name.vi, row.member_name.en) : (fb ? L(fb.name.vi, fb.name.en) : "");
      const specialty = (row && row.specialty) ? L(row.specialty.vi, row.specialty.en) : (fb ? L(fb.specialty.vi, fb.specialty.en) : "");
      const bio = (row && row.bio) ? L(row.bio.vi, row.bio.en) : (fb ? L(fb.bio.vi, fb.bio.en) : "");
      const portrait = row && row.portrait ? fileImg(row.portrait, null, 600) : null;
      return (
        <article className="about-team-card about-expert-card" key={row && row.id != null ? row.id : i}>
          <div className="about-team-portrait" data-directus={window.veAttr && window.veAttr(collection, row && row.id, "portrait", "drawer")}>
            {portrait
              ? <img src={portrait} alt={name} />
              : <span className="about-team-mono" aria-hidden="true">{expertInitials(name)}</span>}
          </div>
          <div className="about-team-body">
            <div className="about-team-role" data-directus={window.veAttr && window.veAttr(collection, row && row.id, "specialty", "popover")}>{specialty}</div>
            <h3 className="about-team-name" data-directus={window.veAttr && window.veAttr(collection, row && row.id, "member_name", "popover")}>{name}</h3>
            <p className="about-team-bio" data-directus={window.veAttr && window.veAttr(collection, row && row.id, "bio", "drawer")}>{bio}</p>
          </div>
        </article>
      );
    });
  };

  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 32);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Global scroll text-fx — same lazy pattern as homepage
  React.useLayoutEffect(() => {
    if (document.body.classList.contains("no-anim")) return;
    const selector = [
    ".about-page section h2",
    ".about-page section h3",
    ".about-page section h4",
    ".about-page section p",
    ".about-page .sec-meta",
    ".about-page section .about-story-label",
    ".about-page section .about-cta-label"].
    join(", ");
    const candidates = Array.from(document.querySelectorAll(selector)).
    filter((el) => !el.closest(".reveal, .reveal-stagger, .about-hero"));
    const vh = window.innerHeight || document.documentElement.clientHeight;
    const targets = [];
    candidates.forEach((el) => {
      const r = el.getBoundingClientRect();
      if (r.top < vh * 0.95 && r.bottom > 0) return;
      el.classList.add("text-fx");
      const sib = Array.from(el.parentElement?.children || []).indexOf(el);
      el.style.setProperty("--text-fx-delay", `${Math.min(sib, 4) * 80}ms`);
      targets.push(el);
    });
    if (!targets.length) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("text-fx-in");
            obs.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );
    targets.forEach((el) => obs.observe(el));
    const fallback = setTimeout(() => {
      targets.forEach((el) => el.classList.add("text-fx-in"));
    }, 2400);
    return () => {obs.disconnect();clearTimeout(fallback);};
  }, []);

  // Section reorder + show/hide (Phase 2): renderer map built INSIDE AboutPage so
  // each thunk keeps closure access to the data vars/hooks (auF/auVe/mediaSrc/cms…)
  // and all veAttr + Reveal animations stay byte-identical. Order/visibility come
  // from page_layouts (page_slug="about"); falls back to DEFAULT_ORDER offline.
  const SECTION_RENDERERS = {
    hero: () => <AboutHero />,
    story: () => (
      <section className="about-story">
        <div className="container">
          <div className="sec-meta">
            <span className="idx">01 / 06</span>
            <span className="eyebrow" data-directus={auVe("story_eyebrow")}>{auF("story_eyebrow", "CÂU CHUYỆN GEMS", "THE GEMS STORY")}</span>
            <span className="meta-right" data-directus={auVe("story_meta")}>{auF("story_meta", "Gotama Education & Mind System", "Gotama Education & Mind System")}</span>
          </div>

          <div className="about-story-spread">
            <Reveal>
              <div className="about-story-img">
                <img src={mediaSrc("about_gems", "assets/about-gems.jpg", 1600)} alt={window.cms ? window.cms.assetAlt("about_gems", "GEMS Group") : "GEMS Group"} />
                <span className="about-story-tag" data-directus={auVe("story_tag")}>{auF("story_tag", "— GEMS GROUP", "— GEMS GROUP")}</span>
              </div>
            </Reveal>

            <Reveal delay={120}>
              <div className="about-story-body">
                {(() => {
                  // section label + headline now editable from about_story_01 row
                  // (eyebrow="— Về GEMS", heading="GEMS là nền tảng đầu tư..."; both plain).
                  const s01 = window.cms ? window.cms.get("page_sections", "about_story_01") : null;
                  const lbl = s01 && s01.eyebrow ? window.cms.t(s01.eyebrow) : null;
                  const head = s01 && s01.heading ? window.cms.t(s01.heading) : null;
                  return (
                    <React.Fragment>
                      <div className="about-story-label"
                        data-directus={window.veAttr && window.veAttr("page_sections", s01 && s01.id, "eyebrow", "popover")}>
                        {lbl || L("— Về GEMS", "— About GEMS")}
                      </div>
                      <h2 className="about-story-headline"
                        data-directus={window.veAttr && window.veAttr("page_sections", s01 && s01.id, "heading", "popover")}>
                        {head || <React.Fragment>{L("GEMS là nền tảng đầu tư và quản lý ", "GEMS is a private education investment and ")}{L("giáo dục tư nhân", "management platform")} {L("tại Việt Nam và Châu Á.", "in Vietnam and Asia.")}</React.Fragment>}
                      </h2>
                    </React.Fragment>
                  );
                })()}
                {(() => {
                  // CMS rich-text prose (Phase 5.5) — editor-editable HTML body.
                  // Falls back to the hardcoded paragraphs when CMS is absent.
                  const story = window.cms ? window.cms.get("page_sections", "about_story_01") : null;
                  const bodyHtml = story && story.body ? L(story.body.vi, story.body.en) : null;
                  if (bodyHtml) {
                    return <RichText className="about-story-prose" html={bodyHtml} data-directus={window.veAttr && window.veAttr("page_sections", story && story.id, "body", "drawer")} />;
                  }
                  // Fallback prose khi CMS body trống. Vẫn phải mang data-directus
                  // (trỏ về field `body`) để Visual Editor hiện nút sửa khi hover —
                  // bấm vào mở drawer soạn body, sau đó nhánh CMS ở trên tiếp quản.
                  return (
                    <div className="about-story-prose"
                      data-directus={window.veAttr && window.veAttr("page_sections", story && story.id, "body", "drawer")}>
                      <p>
                        <strong>Gotama Education &amp; Mind System (GEMS)</strong> {L("là tổ chức tiên phong tại Việt Nam hoạt động theo mô hình full-stack — tích hợp ", "is a pioneer in Vietnam operating on a full-stack model — integrating ")}<strong>{L("đầu tư, tư vấn và đồng vận hành", "investment, advisory and co-operation")}</strong>{L(" trong cùng một đội ngũ, xuyên suốt vòng đời thương vụ.", " within a single team, across the full deal lifecycle.")}
                      </p>
                      <p>
                        {L("Chúng tôi không chỉ là một đơn vị quản lý tài chính, mà là người ", "We are not merely a financial manager, but a ")}<em>{L("kiến trúc sư dài hạn", "long-term architect")}</em> {L("đồng hành cùng người sáng lập — từ việc rót vốn, đến việc dựng hệ vận hành, nền tảng học thuật và phát triển thương hiệu qua nhiều chu kỳ.", "standing beside founders — from deploying capital to building the operating system, the academic foundation and brand development across many cycles.")}
                      </p>
                      <p>
                        {L("Mỗi quyết định đầu tư, mỗi cuộc tư vấn, mỗi giờ đồng vận hành — đều được dẫn dắt bởi một niềm tin chung: ", "Every investment decision, every advisory session, every hour of co-operation — all guided by one shared belief: ")}<em>{L("giáo dục bền vững cần kiến trúc sư dài hạn, không chỉ nguồn vốn.", "durable education needs long-term architects, not just capital.")}</em>
                      </p>
                    </div>
                  );
                })()}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    ),
    philo: () => {
        // Phase 3: WIRE existing about_philo row. heading = single string WITH
        // <em>/<br> → sanitized rich-text. Từ vòng review 2026-07-30, heading
        // khác nhau giữa VI/EN (trước đó dùng chung câu Latin) và body cũng là
        // rich-text nhiều dòng ngăn bằng <br>.
        const row = window.cms ? window.cms.get("page_sections", "about_philo") : null;
        const headHtml = row && row.heading ? window.cms.t(row.heading) : null;
        const eyebrow = row && row.eyebrow ? window.cms.t(row.eyebrow) : L("Triết lý GEMS", "GEMS Philosophy");
        const trans = row && row.subheading ? window.cms.t(row.subheading) : L("Sức mạnh của tư duy kiến tạo nên thế giới.", "The power of the mind shapes the world.");
        const sub = row && row.body ? window.cms.t(row.body) : L(
          "Chúng tôi xây dựng cùng những người dám nghĩ dám làm với tư duy thế hệ<br>Chúng tôi xây dựng cho những đứa trẻ của hôm nay và mai sau<br>Chúng tôi xây dựng để tinh hoa của bạn tiếp tục tồn tại trong tinh hoa của con em.",
          "We build with those who think and act in generations.<br>We build for the children of today and tomorrow.<br>We build so that the best of you lives on in the best of them.");
        return (
      <section className="about-philo">
        <div className="container">
          <div className="about-philo-inner">
            <img className="about-philo-watermark" src="assets/GEMS-symbol-b.svg" alt="" aria-hidden="true" />
            <div className="about-philo-content">
              <Reveal>
                <div className="about-philo-eyebrow"
                  data-directus={window.veAttr && window.veAttr("page_sections", row && row.id, "eyebrow", "popover")}>{eyebrow}</div>
              </Reveal>
              <Reveal delay={120}>
                <h2 className="about-philo-quote"
                  data-directus={window.veAttr && window.veAttr("page_sections", row && row.id, "heading", "popover")}
                  {...(headHtml ? { dangerouslySetInnerHTML: { __html: window.gemsSanitize(headHtml) } } : {})}>
                  {headHtml ? null : (
                    <React.Fragment>
                      {L("Những công trình vĩ đại sống lâu hơn người xây chúng.", "The greatest structures outlive their builders.")}
                      <br /><em>{L("Đó có thể là công trình của bạn", "They can be yours.")}</em>
                    </React.Fragment>
                  )}
                </h2>
              </Reveal>
              <Reveal delay={240}>
                <div className="about-philo-trans">
                  <b data-directus={window.veAttr && window.veAttr("page_sections", row && row.id, "subheading", "popover")}>{trans}</b>
                  {/* body giờ là nhiều dòng ngăn bằng <br> (review 2026-07-30) →
                      sanitize rồi render như heading, không đổ thẳng text nữa. */}
                  <span data-directus={window.veAttr && window.veAttr("page_sections", row && row.id, "body", "popover")}
                    dangerouslySetInnerHTML={{ __html: window.gemsSanitize(sub) }} />
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>
      );
    },
    team: () => {
      // Đoạn dẫn của nhóm này (deck: "GEMS is led by a founding team…") dùng
      // chung markup .about-experts-intro với hai nhóm người phía dưới. Để
      // trống trong CMS thì không render thẻ <p> nào.
      const teamIntro = auF("team_intro", "", "");
      return (
      <section className="about-team-section">
        <div className="container">
          <div className="sec-meta">
            <span className="idx">02 / 06</span>
            <span className="eyebrow" data-directus={auVe("team_eyebrow")}>{auF("team_eyebrow", "BAN ĐIỀU HÀNH", "BOARD OF MANAGEMENT")}</span>
            <span className="meta-right" data-directus={auVe("team_meta")}>{auF("team_meta", "Đội ngũ chuyên gia", "A team of experts")}</span>
          </div>

          {teamIntro ? (
            <Reveal>
              <p className="about-experts-intro" data-directus={auVe("team_intro", "drawer")}>{teamIntro}</p>
            </Reveal>
          ) : null}

          <RevealStagger className="about-team-grid">
            {(() => {
              const cmsTeam = window.cms ? window.cms.get("team_members") : null;
              return ABOUT_TEAM.map((fb, i) => {
                // Match a CMS row by role_code; CMS overrides text. Portrait is
                // served from the Phase 6 media library (asset_library) with the
                // local BOD/ image as fallback.
                const row = Array.isArray(cmsTeam)
                  ? cmsTeam.find((r) => r.role_code === fb.roleCode) || cmsTeam[i]
                  : null;
                const name = (row && row.member_name) ? L(row.member_name.vi, row.member_name.en) : fb.name;
                const roleCode = (row && row.role_code) || fb.roleCode;
                const bio = (row && row.bio) ? L(row.bio.vi, row.bio.en) : L(fb.bioVi, fb.bioEn);
                const experience = (row && row.experience) ? L(row.experience.vi, row.experience.en) : L(fb.expVi, fb.expEn);
                const portrait = (row && row.portrait)
                  ? fileImg(row.portrait, fb.portrait, 600)
                  : mediaSrc(fb.assetKey, fb.portrait, 600);
                return (
                  <article className="about-team-card" key={fb.roleCode}>
                    <div className="about-team-portrait" data-directus={window.veAttr && window.veAttr("team_members", row && row.id, "portrait", "drawer")}>
                      <img src={portrait} alt={name} />
                    </div>
                    <div className="about-team-body">
                      <div className="about-team-role" data-directus={window.veAttr && window.veAttr("team_members", row && row.id, "role_code", "popover")}>— {roleCode}</div>
                      <h3 className="about-team-name" data-directus={window.veAttr && window.veAttr("team_members", row && row.id, "member_name", "popover")}>{name}</h3>
                      <p className="about-team-bio" data-directus={window.veAttr && window.veAttr("team_members", row && row.id, "bio", "drawer")}>{bio}</p>
                      {experience ? (
                        <div className="about-team-exp" data-directus={window.veAttr && window.veAttr("team_members", row && row.id, "experience", "popover")}>{experience}</div>
                      ) : null}
                    </div>
                  </article>
                );
              });
            })()}
          </RevealStagger>


        </div>
      </section>
      );
    },
    coreExpert: () => {
      const sec = window.cms ? window.cms.get("page_sections", "core_expert") : null;
      const eyebrow = sec && sec.eyebrow ? window.cms.t(sec.eyebrow) : L("CHUYÊN GIA NÒNG CỐT", "CORE EXPERT");
      const intro = sec && sec.subheading ? window.cms.t(sec.subheading) : L("Chuyên gia nòng cốt là những người đồng hành cùng GEMS ở mọi giai đoạn — chia sẻ tri thức với đội ngũ nội bộ và cùng chịu trách nhiệm về kết quả. Một số chuyên gia tiêu biểu mà GEMS đã có cơ hội hợp tác:", "Core Experts are those who stand alongside GEMS at every stage — sharing knowledge with the internal team and taking joint ownership of results. Some of the prominent experts that GEMS has had the pleasure of working with:");
      return (
        <section className="about-team-section about-experts-section">
          <div className="container">
            <div className="sec-meta">
              <span className="eyebrow" data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "eyebrow", "popover")}>{eyebrow}</span>
              <span className="meta-right">{L("Chuyên gia đồng hành", "Partner experts")}</span>
            </div>
            <Reveal>
              <p className="about-experts-intro" data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "subheading", "drawer")}>{intro}</p>
            </Reveal>
            <RevealStagger className="about-team-grid">
              {renderExpertCards("core_experts", ABOUT_CORE_EXPERTS)}
            </RevealStagger>
          </div>
        </section>
      );
    },
    fellowCouncil: () => {
      const sec = window.cms ? window.cms.get("page_sections", "fellow_council") : null;
      const eyebrow = sec && sec.eyebrow ? window.cms.t(sec.eyebrow) : L("HỘI ĐỒNG CỐ VẤN", "FELLOW COUNCIL");
      const intro = sec && sec.subheading ? window.cms.t(sec.subheading) : L("Hội đồng Cố vấn – tập hợp những người dẫn đường đáng kính – bảo chứng cho cam kết của GEMS về sự chính trực và các giá trị nhân văn:", "The Advisory Board – a group of respected guides – ensures that GEMS maintains its commitment to integrity and human values:");
      const sub = sec && sec.body ? window.cms.t(sec.body) : L("GEMS vinh dự nhận được sự cố vấn từ một hội đồng gồm các chuyên gia cấp cao và mẫu mực:", "GEMS is honored to have the advice of a board of senior and exemplary experts:");
      const tags = sec && Array.isArray(sec.data) ? sec.data : null;
      // `label` là tầng từ khoá ngắn đứng trên câu mô tả. CMS có thể chưa có key
      // này (dữ liệu cũ chỉ có `tag`), nên fallback theo vị trí.
      const FELLOW_ROLES_FB = [
        { label: { vi: "Chiến lược", en: "Strategy" }, tag: { vi: "Chiến lược giáo dục và đánh giá chương trình", en: "Educational strategy and program evaluation" } },
        { label: { vi: "Tầm nhìn", en: "Vision" }, tag: { vi: "Cố vấn định hướng chiến lược dài hạn và xu hướng toàn cầu.", en: "Advisor on long-term strategic direction and global trends." } },
        { label: { vi: "Dẫn dắt", en: "Mentorship" }, tag: { vi: "Dẫn dắt đội ngũ GEMS về tư duy và năng lực lãnh đạo.", en: "Mentoring the GEMS team on mindset and leadership skills." } },
        { label: { vi: "Giám sát", en: "Oversight" }, tag: { vi: "Giám sát độc lập, bảo chứng cam kết của GEMS về sự chính trực và các giá trị nhân văn.", en: "Independent oversight ensures GEMS maintains its commitment to integrity and human values" } },
      ];
      const roleList = tags
        ? tags.map((t, i) => ({
            label: (t && t.label) || (FELLOW_ROLES_FB[i] && FELLOW_ROLES_FB[i].label) || null,
            tag: (t && t.tag) || t,
          }))
        : FELLOW_ROLES_FB;
      return (
        <section className="about-team-section about-experts-section about-fellows-section">
          <div className="container">
            <div className="sec-meta">
              <span className="eyebrow" data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "eyebrow", "popover")}>{eyebrow}</span>
              <span className="meta-right">{L("Hội đồng cố vấn", "Advisory board")}</span>
            </div>
            <Reveal>
              <p className="about-experts-intro" data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "subheading", "drawer")}>{intro}</p>
            </Reveal>
            {/* Reveal cả khung như một khối — nếu stagger từng ô thì các gạch
                chia cột sẽ trượt lệch nhau lúc vào màn hình. */}
            <Reveal>
              <div className="about-fellows-roles"
                data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "data", "drawer")}>
                {roleList.map((r, i) => (
                  <div className="about-fellow-role" key={i}>
                    {r.label ? <div className="afr-label">{L(r.label.vi, r.label.en)}</div> : null}
                    <p className="afr-text">{L(r.tag.vi, r.tag.en)}</p>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal>
              <p className="about-fellows-subhead" data-directus={window.veAttr && window.veAttr("page_sections", sec && sec.id, "body", "popover")}>{sub}</p>
            </Reveal>
            <RevealStagger className="about-team-grid">
              {renderExpertCards("fellow_council", ABOUT_FELLOWS)}
            </RevealStagger>
          </div>
        </section>
      );
    },
    vision: () => (
      <section className="vm-wrap" style={{ padding: "140px 0" }}>
        <div className="container">
          <div className="sec-meta">
            <span className="idx">03 / 06</span>
            <span className="eyebrow" data-directus={auVe("vm_eyebrow")}>{auF("vm_eyebrow", "TẦM NHÌN · SỨ MỆNH", "VISION · MISSION")}</span>
            <span className="meta-right" data-directus={auVe("vm_meta")}>{auF("vm_meta", "Định hình lại tiêu chuẩn giáo dục khu vực", "Redefining the region's education standard")}</span>
          </div>

          <div className="vm-grid">
            {(() => {
              // CMS-driven (Phase 5.5 rollout): text from page_sections
              // "about_story_03" `data`; the art-directed dual-flex card layout
              // and tone stay in the JSX. Falls back per-field to ABOUT_VM_FALLBACK.
              const row = window.cms ? window.cms.get("page_sections", "about_story_03") : null;
              // Items now live in the about_story_03_items collection, attached back
              // onto row.data via SECTION_ITEM_MAP. `tone`/`key` are art-directed
              // structure (kept from fallback by index); label/title/stat are {vi,en};
              // `body` is ONE multiline {vi,en} field = paragraphs joined "\n\n"
              // (split back to <p> each — lossless round-trip).
              const cards = row && Array.isArray(row.data) ? row.data : null;
              return ABOUT_VM_FALLBACK.map((fb, i) => {
                const c = cards && cards[i] ? cards[i] : null;
                const cardId = c && c.id;
                const label = vmPick(c && c.label, fb.label);
                const title = vmPick(c && c.title, fb.title);
                const stat = vmPick(c && c.stat, fb.stat);
                const fbBody = {
                  vi: fb.body.map((p) => p.vi).join("\n\n"),
                  en: fb.body.map((p) => p.en).join("\n\n"),
                };
                const bodyVal = vmPick(c && c.body, fbBody);
                const paras = L(bodyVal.vi, bodyVal.en).split("\n\n");
                return (
                  <Reveal key={fb.tone} delay={i * 120}>
                    <article className={`vm-card-c ${fb.tone}`}>
                      <div className="vm-label-c" data-directus={cardId && window.veAttr && window.veAttr("about_story_03_items", cardId, "label", "popover")}>{L(label.vi, label.en)}</div>
                      <h2 className="vm-title-c" style={{ minHeight: "92px" }} data-directus={cardId && window.veAttr && window.veAttr("about_story_03_items", cardId, "title", "popover")}>{L(title.vi, title.en)}</h2>
                      {paras.map((p, j) => (
                        <p className="vm-body-c" key={j} data-directus={cardId && window.veAttr && window.veAttr("about_story_03_items", cardId, "body", "popover")}>{p}</p>
                      ))}
                      <div className="vm-stat-c" data-directus={cardId && window.veAttr && window.veAttr("about_story_03_items", cardId, "stat", "popover")}>{L(stat.vi, stat.en)}</div>
                    </article>
                  </Reveal>
                );
              });
            })()}
          </div>
        </div>
      </section>
    ),
    values: () => (
      <section className="values-c" style={{ padding: "140px 0" }}>
        <div className="container">
          <div className="sec-meta">
            <span className="idx">04 / 06</span>
            <span className="eyebrow" data-directus={auVe("values_eyebrow")}>{auF("values_eyebrow", "GIÁ TRỊ CỐT LÕI", "CORE VALUES")}</span>
            <span className="meta-right" data-directus={auVe("values_meta")}>{auF("values_meta", "04 trụ — Discipline · Performance · System · Accumulation", "04 trụ — Discipline · Performance · System · Accumulation")}</span>
          </div>

          <RevealStagger className="v-grid-c">
            {(() => {
              // CMS-driven (Option B Phase 6): title + body promoted to the
              // about_story_04_items collection, attached onto row.data via
              // SECTION_ITEM_MAP; the icon/tone/order are art-directed structure
              // and stay in the JSX (merged by index). Per-field popover + fallback.
              const row = window.cms ? window.cms.get("page_sections", "about_story_04") : null;
              const cmsCards = row && Array.isArray(row.data) ? row.data : null;
              const VALUES_FALLBACK = [
                { num: "01", en: "Discipline", title: { vi: "Kỷ luật", en: "Discipline" }, body: { vi: "Duy trì kỷ luật như một chuẩn mực nội tại — có sự nhất quán giữa suy nghĩ, lời nói và hành động. Coi khả năng thực thi trọn vẹn lời hứa với cá nhân và tổ chức là nền tảng của sự thành công.", en: "Holding discipline as an inner standard — consistency between thought, word and action. Treating the ability to fully honor a promise, to oneself and the organization, as the foundation of success." } },
                { num: "02", en: "Performance", title: { vi: "Hiệu suất", en: "Performance" }, body: { vi: "Lấy kết quả thực tế và giá trị tạo ra làm phương pháp đo lường. Luôn học hỏi nhằm nâng cao năng lực chuyên môn và chất lượng cuộc sống.", en: "Measuring by real results and the value created. Always learning to raise professional capacity and quality of life." } },
                { num: "03", en: "System", title: { vi: "Hệ thống", en: "System" }, body: { vi: "Xây dựng hệ thống để chất lượng trở thành một năng lực có thể lặp lại — không phụ thuộc vào cá nhân. Phát triển tư duy hệ thống, nhìn nhận toàn diện, hiểu mối liên kết và cải thiện từ nguyên nhân gốc.", en: "Building systems so that quality becomes a repeatable capability — not dependent on any individual. Developing systems thinking: seeing the whole, understanding the connections, and improving from root causes." } },
                { num: "04", en: "Accumulation", title: { vi: "Tích luỹ", en: "Accumulation" }, body: { vi: "Tin vào từng bước tiến nhỏ — tích lũy giá trị thông qua sự cải tiến bền bỉ và nhất quán theo thời gian. Hướng đến lợi thế dài hạn, nơi chất lượng được bồi đắp và chuyển hóa thành năng lực bền vững.", en: "Believing in small steps — compounding value through patient, consistent improvement over time. Aiming for a long-term advantage, where quality accrues and converts into durable capability." } },
              ];
              const tones = ["blue", "paper", "paper", "paper"];
              const arcColors = ["white", "var(--gems-blue)", "var(--gems-red)", "var(--gems-blue)"];
              const iconTypes = ["discipline", "performance", "system", "accumulation"];
              return VALUES_FALLBACK.map((v, i) => {
                const c = cmsCards && cmsCards[i] ? cmsCards[i] : null;
                const cardId = c && c.id;
                const title = vmPick(c && c.title, v.title);
                const body = vmPick(c && c.body, v.body);
                const iconType = iconTypes[i];
                return (
                  <div className={`v-card-c ${tones[i]} icon-${iconType}`} key={v.num}>
                    <div className="v-num-c" data-directus={cardId && window.veAttr && window.veAttr("about_story_04_items", cardId, "title", "popover")}>{(title.en || title.vi || v.en).toUpperCase()}</div>
                    <h3 className="v-title-c" data-directus={cardId && window.veAttr && window.veAttr("about_story_04_items", cardId, "title", "popover")}>{L(title.vi, title.en)}</h3>
                    <p className="v-body-c" data-directus={cardId && window.veAttr && window.veAttr("about_story_04_items", cardId, "body", "popover")}>{L(body.vi, body.en)}</p>
                    <div className="v-arc-c">
                      <ValueIcon type={iconType} color={arcColors[i]} />
                    </div>
                  </div>);

              });
            })()}
          </RevealStagger>
        </div>
      </section>
    ),
    // "Các con số nổi bật" — 4 chỉ số quy mô, đọc THẲNG từ collection
    // about_stats_items (như team_members) chứ không qua page_sections. `value`
    // là scalar (không dịch, giống portfolio_stats_items); label + description
    // dịch được, mỗi trường một popover riêng. Fallback hardcoded trùng nguyên
    // văn bản seed để khối vẫn đúng khi offline / trước khi có dòng CMS.
    stats: () => (
      <section className="about-stats">
        <div className="container">
          <div className="sec-meta">
            <span className="eyebrow" data-directus={auVe("stats_eyebrow")}>{auF("stats_eyebrow", "CÁC CON SỐ NỔI BẬT", "KEY FIGURES")}</span>
            <span className="meta-right" data-directus={auVe("stats_meta")}>{auF("stats_meta", "Quy mô hệ thống GEMS · 2026", "GEMS at a glance · 2026")}</span>
          </div>

          <RevealStagger className="about-stats-grid">
            {(() => {
              const statRows = window.cms ? window.cms.get("about_stats_items") : null;
              const STATS_FALLBACK = [
                { value: "10,000+", label: { vi: "Học sinh K-12", en: "K-12 Students Enrolled" }, description: { vi: "Đang theo học tại các trường trong hệ thống", en: "Enrolled across the network" } },
                { value: "$500M+", label: { vi: "AUM Giáo dục", en: "Education AUM" }, description: { vi: "Quản lý & vận hành hệ thống giáo dục", en: "Management & operation of education systems" } },
                { value: "$300M+", label: { vi: "AUM Tài chính", en: "Financial AUM" }, description: { vi: "Tái cấu trúc tài chính & quản lý tài sản", en: "Financial restructuring & asset management" } },
                { value: "$1B+", label: { vi: "AUM Công nghệ", en: "Technology AUM" }, description: { vi: "Đầu tư công nghệ & chuyển đổi số", en: "Technology investment & digital transformation" } },
              ];
              return STATS_FALLBACK.map((fb, i) => {
                const r = Array.isArray(statRows) && statRows[i] ? statRows[i] : null;
                const rid = r && r.id;
                const label = vmPick(r && r.label, fb.label);
                const desc = vmPick(r && r.description, fb.description);
                const ve = (field) => rid && window.veAttr && window.veAttr("about_stats_items", rid, field, "popover");
                return (
                  <div className="about-stat" key={fb.value}>
                    <div className="about-stat-v" data-directus={ve("value")}>{(r && r.value) || fb.value}</div>
                    <div className="about-stat-l" data-directus={ve("label")}>{L(label.vi, label.en)}</div>
                    <p className="about-stat-d" data-directus={ve("description")}>{L(desc.vi, desc.en)}</p>
                  </div>);

              });
            })()}
          </RevealStagger>
        </div>
      </section>
    ),
    commitment: () => (
      <section className="approach-c approach-founder" id="approach">
        <div className="container">
          {(() => {
            // sec-meta eyebrow + meta-right now editable from about_story_05
            // (eyebrow="CAM KẾT VỚI NGƯỜI SÁNG LẬP", subheading="Đứng cùng — không thay thế").
            const m = window.cms ? window.cms.get("page_sections", "about_story_05") : null;
            const eb = m && m.eyebrow ? window.cms.t(m.eyebrow) : null;
            const mr = m && m.subheading ? window.cms.t(m.subheading) : null;
            return (
              <div className="sec-meta">
                <span className="idx">05 / 06</span>
                <span className="eyebrow"
                  data-directus={window.veAttr && window.veAttr("page_sections", m && m.id, "eyebrow", "popover")}>
                  {eb || L("CAM KẾT VỚI NGƯỜI SÁNG LẬP", "COMMITMENT TO FOUNDERS")}
                </span>
                <span className="meta-right"
                  data-directus={window.veAttr && window.veAttr("page_sections", m && m.id, "subheading", "popover")}>
                  {mr || L("Đứng cùng — không thay thế", "Alongside — not replacing")}
                </span>
              </div>
            );
          })()}

          {(() => {
            // CMS-driven (Option B Phase 6): the `lede` prose now lives on the
            // page_sections "about_story_05" `body` field (plain, rendered via
            // cms.t like about_philo); the 3 steps are promoted to the
            // about_story_05_items collection and attached onto row.data via
            // SECTION_ITEM_MAP. The headline carries an inline <em> (art-directed)
            // so it stays hardcoded above. Per-field fallback keeps the section
            // intact when CMS is absent (offline → row null → id undefined → veAttr no-op).
            const row = window.cms ? window.cms.get("page_sections", "about_story_05") : null;
            const ledeFb = { vi: "Nỗi lo lớn nhất của một người sáng lập khi gọi vốn là bị thay thế. Với GEMS thì ngược lại: chúng tôi tin người sáng lập là động lực dài hạn của một thương hiệu giáo dục — và cấu trúc mọi hợp tác quanh niềm tin đó.", en: "A founder's biggest fear when raising capital is being replaced. At GEMS it's the opposite: we believe the founder is the long-term engine of an education brand — and we structure every partnership around that belief." };
            const lede = vmPick(row && row.body, ledeFb);
            const STEP_FIELDS = ["tag", "title", "desc"];
            const STEPS_FALLBACK = [
              { n: "01", tag: { vi: "TỰ CHỦ HỌC THUẬT", en: "ACADEMIC AUTONOMY" }, title: { vi: "Tầm nhìn vẫn thuộc về bạn", en: "The vision stays yours" }, desc: { vi: "Chúng tôi mang đến cấu trúc, hệ thống và nguồn lực — nhưng triết lý giáo dục và bản sắc của ngôi trường vẫn do bạn dẫn dắt.", en: "We bring structure, systems and resources — but the educational philosophy and identity of the school remain yours to lead." } },
              { n: "02", tag: { vi: "VAI TRÒ ĐỒNG HÀNH", en: "A PARTNER'S ROLE" }, title: { vi: "Một ghế để hỗ trợ", en: "A seat to support" }, desc: { vi: "Chúng tôi ngồi trong hội đồng để cố vấn và đồng quản trị, không phải để giành lấy quyền điều hành mỗi ngày khỏi tay bạn.", en: "We sit on the board to advise and co-govern, not to take day-to-day control out of your hands." } },
              { n: "03", tag: { vi: "DÀI HẠN", en: "LONG-TERM" }, title: { vi: "Không có đồng hồ thoái vốn", en: "No exit clock" }, desc: { vi: "Vốn của chúng tôi đi cùng cam kết qua nhiều chu kỳ, và cả những kỳ chuyển giao thế hệ — không phải một thời hạn thoái vốn áp đặt.", en: "Our capital comes with commitment across many cycles, and even generational handovers — not an imposed exit deadline." } },
            ];
            const cmsSteps = row && Array.isArray(row.data) ? row.data : null;
            const steps = STEPS_FALLBACK.map((fb, i) => {
              const c = cmsSteps && cmsSteps[i] ? cmsSteps[i] : null;
              return {
                n: fb.n,
                id: c && c.id,
                tag: vmPick(c && c.tag, fb.tag),
                title: vmPick(c && c.title, fb.title),
                desc: vmPick(c && c.desc, fb.desc),
              };
            });
            return (
              <>
                <div className="approach-intro">
                  <Reveal>
                    <h2 className="approach-headline"
                      data-directus={window.veAttr && window.veAttr("page_sections", row && row.id, "heading", "popover")}
                      {...(row && row.heading ? { dangerouslySetInnerHTML: { __html: window.gemsSanitize(window.cms.t(row.heading)) } } : {})}>
                      {row && row.heading ? null : <React.Fragment>{L("Chúng tôi đầu tư vào điều bạn đã dựng nên, ", "We invest in what you have built, ")}<em>{L("và vào chính người sẽ tiếp tục dựng nó.", "and in the person who will keep building it.")}</em></React.Fragment>}
                    </h2>
                  </Reveal>
                  <Reveal delay={120}>
                    <p className="approach-lede" data-directus={row && window.veAttr && window.veAttr("page_sections", row.id, "body", "popover")}>{L(lede.vi, lede.en)}</p>
                  </Reveal>
                </div>

                <RevealStagger className="approach-steps">
                  {steps.map((step, i) =>
                    <div className="approach-step" key={step.n}>
                      <div className="as-num">{step.n}</div>
                      <div className="as-tag" data-directus={step.id && window.veAttr && window.veAttr("about_story_05_items", step.id, "tag", "popover")}>— {L(step.tag.vi, step.tag.en)}</div>
                      <h3 className="as-title" data-directus={step.id && window.veAttr && window.veAttr("about_story_05_items", step.id, "title", "popover")}>{L(step.title.vi, step.title.en)}</h3>
                      <p className="as-desc" data-directus={step.id && window.veAttr && window.veAttr("about_story_05_items", step.id, "desc", "popover")}>{L(step.desc.vi, step.desc.en)}</p>
                    </div>
                  )}
                </RevealStagger>
              </>
            );
          })()}
        </div>
      </section>
    ),
    cta: () => {
      // Dải CTA đóng trang dùng chung row home_cta với trang chủ (cùng nội dung).
      const ctaRow = window.cms ? window.cms.get("page_sections", "home_cta") : null;
      const ctaHeadHtml = ctaRow && ctaRow.heading ? window.cms.t(ctaRow.heading) : null;
      const ctaLedeHtml = ctaRow && ctaRow.subheading ? window.cms.t(ctaRow.subheading) : null;
      return (
      <section className="cta-c" id="contact">
        <div className="video-bg">
          <VideoBg src="https://stream.mux.com/T6oQJQ02cQ6N01TR6iHwZkKFkbepS34dkkIc9iukgy400g.m3u8" />
        </div>
        <div className="video-overlay" />
        <div className="container">
          <div className="cta-head-c">
            <div>
              <div className="vm-label-c" style={{
                color: "rgba(255,255,255,0.85)", marginBottom: 16,
                display: "inline-flex", alignItems: "center", gap: 12,
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em",
                textTransform: "uppercase", fontWeight: 600
              }}>
                <span style={{ width: 24, height: 2, background: "white" }} />
                06 / 06 — <span data-directus={window.veAttr && window.veAttr("page_sections", ctaRow && ctaRow.id, "eyebrow", "popover")}>{ctaRow && ctaRow.eyebrow ? window.cms.t(ctaRow.eyebrow) : L("Liên hệ", "Contact")}</span>
              </div>
              <h2 data-directus={window.veAttr && window.veAttr("page_sections", ctaRow && ctaRow.id, "heading", "popover")}
                {...(ctaHeadHtml ? { dangerouslySetInnerHTML: { __html: window.gemsSanitize(ctaHeadHtml) } } : {})}>
                {ctaHeadHtml ? null : <React.Fragment>{L("Hãy chia sẻ", "Share")}<br /><span style={{ color: "rgba(255,255,255,0.6)" }}>{L("tầm nhìn", "your vision")}</span> {L("của bạn.", "with us.")}</React.Fragment>}
              </h2>
            </div>
            <p className="cta-lede-c"
              data-directus={window.veAttr && window.veAttr("page_sections", ctaRow && ctaRow.id, "subheading", "drawer")}
              {...(ctaLedeHtml ? { dangerouslySetInnerHTML: { __html: window.gemsSanitize(ctaLedeHtml) } } : {})}>
              {ctaLedeHtml ? null : <React.Fragment>{L("Dù bạn là người sáng lập đang tìm vốn dài hạn, hay nhà đầu tư mong muốn tiếp cận lĩnh vực giáo dục tư nhân — GEMS sẵn sàng lắng nghe và xây dựng cùng bạn. ", "Whether you are a founder seeking long-term capital, or an investor looking to enter private education — GEMS is ready to listen and build with you. ")}<b style={{ color: "white" }}>{L("Phản hồi trong 24 giờ.", "We reply within 24 hours.")}</b></React.Fragment>}
            </p>
          </div>

          <div className="cta-grid-c">
            <Reveal>
              <form className="form-c" onSubmit={(e) => e.preventDefault()} data-directus={ctaFormVe}>
                <label>
                  <span>{cf("name_label", "Họ và tên", "Full name")}</span>
                  <input className="input" placeholder={cf("name_placeholder", "Nguyễn Văn A", "Your full name")} />
                </label>
                <label>
                  <span>{cf("email_label", "Email công việc", "Work email")}</span>
                  <input className="input" type="email" placeholder={cf("email_placeholder", "ban@cong-ty.com", "ban@cong-ty.com")} />
                </label>
                <label>
                  <span>{cf("area_label", "Lĩnh vực quan tâm", "Area of interest")}</span>
                  <select className="input" style={{ appearance: "none", color: "white" }}>
                    <option>{L("Đầu tư chiến lược", "Strategic investment")}</option>
                    <option>{L("Tư vấn vận hành", "Operations advisory")}</option>
                    <option>{L("Quản lý danh mục", "Portfolio management")}</option>
                    <option>{L("Phát triển thương hiệu", "Brand development")}</option>
                  </select>
                </label>
                <label>
                  <span>{cf("message_label", "Chia sẻ với chúng tôi", "Tell us")}</span>
                  <textarea className="input" rows={3} placeholder={cf("message_placeholder", "Mô tả ngắn về tổ chức / câu hỏi của bạn", "A short note about your organization / your question")} style={{ resize: "vertical", color: "white" }} />
                </label>
                <button type="submit" className="submit-c">
                  {cf("submit_label", "Gửi thông tin", "Send")} <span>→</span>
                </button>
              </form>
            </Reveal>

            <Reveal delay={120}>
              <div className="magnet-c" data-directus={magVe}>
                <div className="lm-eyebrow">{magLabel}</div>
                <h4>{magTitle}</h4>
                <p>
                  {magBody}
                </p>
                <a href={window.cms ? window.cms.assetHref("market_report_2026", "#") : "#"} download className="lm-btn">{magCta} →</a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
      );
    },
  };
  const DEFAULT_ORDER = ["hero", "story", "philo", "team", "coreExpert", "fellowCouncil", "vision", "values", "stats", "commitment", "cta"];
  const order = (window.cms && window.cms.layout && window.cms.layout("about")) || DEFAULT_ORDER;

  return (
    <div className="opt-c about-page">
      <ModernStyles />
      <AboutStyles />
      <Nav scrolled={scrolled} current="about" />
      {order.map((k) => (SECTION_RENDERERS[k] ? <React.Fragment key={k}>{SECTION_RENDERERS[k]()}</React.Fragment> : null))}
      <Footer />
      <BackToTop />
    </div>);

}

/* ============================================================
   ABOUT HERO — cinematic editorial
   ============================================================ */
function AboutHero() {
  const [loaded, setLoaded] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setLoaded(true), 80);
    return () => clearTimeout(t);
  }, []);
  const ic = loaded ? "in" : "";
  // CMS-driven (hero_sections "about" — shared hero collection like home/solutions/contact).
  // headline carries inline <em>/<br>: split on <br> to keep the staggered .line reveal
  // while rendering em via gemsSanitize. Per-field fallback keeps the hero intact offline.
  const hero = window.cms ? window.cms.get("hero_sections", "about") : null;
  const heroEyebrow = hero && hero.eyebrow ? window.cms.t(hero.eyebrow) : null;
  const headHtml = hero && hero.headline ? window.cms.t(hero.headline) : null;
  const headLines = headHtml ? headHtml.split(/<br\s*\/?>/i) : null;
  const ctaLabel = hero && hero.cta_label ? window.cms.t(hero.cta_label) : null;
  return (
    <section className="about-hero">
      <div className="about-hero-bg" data-directus={window.veAttr && window.veAttr("hero_sections", hero && hero.id, "bg_image", "drawer")}>
        <img src={fileImg(hero && hero.bg_image, UNSPLASH.architecture2, 2000)} alt="" className={ic} />
      </div>
      <div className="about-hero-scrim" />
      <div className="about-hero-content">
        <div className={`about-hero-eyebrow ${ic}`}
          data-directus={window.veAttr && window.veAttr("hero_sections", hero && hero.id, "eyebrow", "popover")}>
          <span className="about-hero-eyebrow-line" />
          {heroEyebrow || <React.Fragment>{L("Về chúng tôi", "About us")} — Gotama Education &amp; Mind System</React.Fragment>}
        </div>
        <h1 className="about-hero-statement"
          data-directus={window.veAttr && window.veAttr("hero_sections", hero && hero.id, "headline", "popover")}>
          {headLines
            ? headLines.map((ln, i) =>
                <span key={i} className={`line line-${i + 1} ${ic}`}
                  dangerouslySetInnerHTML={{ __html: window.gemsSanitize(ln) }} />)
            : (
              <React.Fragment>
                <span className={`line line-1 ${ic}`}>
                  {L("Kiến tạo nền tảng giáo dục", "Building an education foundation")}
                </span>
                <span className={`line line-2 ${ic}`}>
                  <em>{L("bền vững từ gốc rễ.", "that endures from the roots.")}</em>
                </span>
              </React.Fragment>
            )}
        </h1>
        <div className={`about-hero-bottom ${ic}`}>
          <a href="#" className="about-hero-cta"
            data-directus={window.veAttr && window.veAttr("hero_sections", hero && hero.id, "cta_label", "popover")}
            onClick={(e) => {
            e.preventDefault();
            const el = document.querySelector(".about-story");
            if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
          }}>
            {ctaLabel || L("Đọc câu chuyện GEMS", "Read the GEMS story")} <span>↓</span>
          </a>
          <div className="about-hero-locale">
            <span>Power of the mind shapes the world</span>
          </div>
        </div>
      </div>
    </section>);

}

window.AboutPage = AboutPage;

/* Mount */
const aboutRoot = ReactDOM.createRoot(document.getElementById("root"));
aboutRoot.render(<AboutPage />);