/* global React, ReactDOM, window */
const { useState } = React;
const { Header, Footer, Icon, Eyebrow, Callout, StatBox, SectionHeading, PageHero, CtaStrip, ClaimBadge, useSharedLang, LangTweak } = window;

const EMAIL = "hello@cantho2030.com";

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "lang": "en"
}/*EDITMODE-END*/;

// =====================================================================
// About — anchor the framing. CICT protagonist, TIC operator, CTU parent.
// =====================================================================
const COPY = {
  en: {
    breadcrumb: [["Home","Home.html"],["About"]],
    eyebrow: "About the programme",
    h1: "Why CICT matters. How TIC operates. Where Cần Thơ University fits.",
    lede: "Project Cần Thơ 2030 turns the priorities of Politburo Resolution 59 and the Mekong Delta Master Plan into funded, deployable work — based inside a Vietnamese university, operated by an international company, and labelled honestly at every step.",
    archLine: "The Forum is where it starts. Challenges and Pitch are how the work gets made. Sponsors make it possible. This page is how you check us out — and Contact is where the conversation begins.",
    whyCict: {
      eyebrow: "Why CICT matters",
      h2: "Naming the institutional partner",
      body: "Project Cần Thơ 2030 names CICT — the College of Information and Communication Technology at Cần Thơ University — as its institutional partner: not one partner among many, but the one that holds the standing, convenes the Innovation Forum, and is the point through which Cần Thơ government engagement is coordinated. That single decision changes how every claim, contact, and contract on this programme reads — attribution stays honest (Confirmed, In discussion, Proposed, Future pathway), sponsorship architecture is developed by TIC rather than asked of CICT, and any public use of CICT's name or logo is reviewed by CICT before release.",
      quote: "We named the institutional partner, and we are letting the rest follow from it.",
    },
    intro: {
      eyebrow: "What this programme is",
      body: "The Improbability Company (TIC) partners with Cần Thơ University through CICT — the College of Information and Communication Technology. CICT is the institutional partner for this programme inside Cần Thơ University. The programme scopes regulatory and climate constraints into challenge briefs, staffs them through CICT and CTU research capacity, and delivers them with TIC as operator and named partners as contributors.",
    },
    roles: {
      eyebrow: "Why CICT matters",
      h2: "Who does what",
      cards: [
        { mark: "CICT", tone: "anchor", role: "Institutional partner", body: "The College of Information and Communication Technology at Cần Thơ University. CICT holds the institutional standing, convenes the Innovation Forum, and is where government-facing engagement is coordinated where appropriate.", tag: "Institutional partner" },
        { mark: "TIC", tone: "operator", role: "Operator", body: "The Improbability Company operates the programme — scoping briefs, running the 90-day Sprints, coordinating partners and sponsors, and delivering commercial and research output.", tag: "Operator" },
        { mark: "Cần Thơ University", tone: "parent", role: "Parent ecosystem", body: "CTU is the parent ecosystem within which CICT sits — faculty, research labs, and standing capacity in ICT, agriculture, environment, and engineering.", tag: "Parent" },
      ],
    },
    instNet: {
      eyebrow: "Institutional and education network",
      h2: "CICT is the anchor. The education network supports the wider programme.",
      link: "Visit CICT",
    },
    why: {
      eyebrow: "Why Cần Thơ, why now",
      h2: "Vietnam's most strategically positioned climate-adaptation and industrial corridor",
      body: "The Mekong Delta is the engine of Vietnam's agricultural exports and one of the most climate-exposed regions in Southeast Asia. Resolution 59 and the Master Plan commit the city to a 2030 horizon. The operating window for compliant, deployable work is open now.",
      arc: "This is built to last, not a one-off: the 2026 Foundation Cohort and Innovation Forum lead into first adoption decisions in 2027, scaled cohorts across 2027–2028, and a standing CICT-anchored, TIC-operated programme beyond. Each stage is designed to compound the one before it.",
      stats: [
        { value: "≈12.4%", label: "Mekong Delta share of national GDP", source: "Indicative — to confirm" },
        { value: "≈3%", label: "Delta share of national FDI — far below its economic weight", source: "Indicative — to confirm" },
        { value: "≈1.7M", label: "People displaced from the Delta over the past decade under climate stress", source: "Indicative — to confirm" },
      ],
    },
    arc: {
      eyebrow: "The foundational arc",
      h2: "Built to last, not a one-off",
      sub: "Four stages prove this is a foundational programme rather than a single event.",
      steps: [
        { when: "2026", title: "Foundation Cohort + Innovation Forum", body: "First 90-day Sprints staffed through CICT; curated Innovation Forum in Sep/Oct.", tone: "live" },
        { when: "Q1 2027", title: "First adoption decisions", body: "Sprint outputs reviewed by Vietnamese owners; first commercial and research adoptions.", tone: "scoping" },
        { when: "2027–2028", title: "Scaled cohorts", body: "Repeat Sprint cohorts across the two pillars and adjacent streams.", tone: "future" },
        { when: "Ongoing", title: "Standing programme", body: "CICT-anchored, TIC-operated, sponsor-backed — a durable delivery surface for the Delta.", tone: "future" },
      ],
    },
    gov: {
      eyebrow: "Governance",
      h2: "Who runs it",
      people: [
        { name: "Anh Phan", role: "CT2030 Project Lead", line: "Main CICT liaison; coordinates the partnership between TIC and CICT.", status: null },
        { name: "Tracy", role: "CEO of The Improbability Company", line: "Chief executive of The Improbability Company. [Surname to confirm]", status: null },
        { name: "Oz Omegna", role: "Australia Lead", line: "Leads sponsor and partner conversations across Australia.", status: null },
        { name: "Magrathea project lead", role: "Operations", line: "Programme operations partner.", status: "nominate" },
        { name: "CICT focal point", role: "CICT-side coordinator", line: "Named CICT contact for the partnership.", status: "nominate" },
      ],
    },
    publicSector: {
      eyebrow: "For public-sector stakeholders",
      h2: "Engaging with the public sector",
      body: "Project Cần Thơ 2030 is an independent TIC × CICT challenge-to-pilot platform aligned with Cần Thơ's 2030 priorities under Politburo Resolution 59-NQ/TW. Government-facing engagement is coordinated through CICT where appropriate.",
      assurances: [
        "Submitting or supporting a challenge does not create a procurement process, funding obligation, or endorsement commitment.",
        "Public-sector challenge submissions remain non-public until both parties agree to share.",
        "Any public use of CICT's name or logo is reviewed by CICT before release.",
      ],
      contactLabel: "Primary contact for public-sector engagement",
      contactName: "Anh Phan, CT2030 Project Lead",
      cta: "Discuss a Public-Sector Challenge",
      subject: "[CT2030 Public Sector] discussion request",
    },
    auGovNote: "Australian government and trade stakeholders (DFAT, Austrade, the Australian Consulate, Global Victoria) are engagement pathways unless separately confirmed. The programme welcomes dialogue on trade, education, innovation, and delegation support.",
    briefing: {
      label: "For institutional reviewers",
      title: "Government & Institutional Briefing",
      body: "A one-page summary you can forward upward — programme scope, pillars, named partners with claim status, and AU engagement framing.",
      cta: "Briefing for institutional reviewers (PDF, 1 page)",
      meta: "PDF · 1 page · placeholder pending final language review",
      href: "assets/CT2030_Government_Briefing_v1.pdf",
    },
  },
  vi: {
    breadcrumb: [["Trang chủ","Home.html"],["Giới thiệu"]],
    eyebrow: "Về chương trình",
    h1: "Vì sao CICT quan trọng. TIC vận hành như thế nào. Đại học Cần Thơ ở đâu.",
    lede: "Dự án Cần Thơ 2030 biến các ưu tiên của Nghị quyết 59 và Quy hoạch tổng thể ĐBSCL thành công việc có ngân sách, triển khai được — đặt trong một trường đại học Việt Nam, vận hành bởi một công ty quốc tế, và ghi nhận trung thực ở mọi bước.",
    archLine: "Diễn đàn là nơi mọi thứ bắt đầu. Thách thức và Đề xuất là cách công việc được tạo ra. Nhà tài trợ giúp điều đó thành hiện thực. Trang này để bạn tìm hiểu về chúng tôi — và Liên hệ là nơi cuộc trò chuyện bắt đầu.",
    whyCict: {
      eyebrow: "Vì sao CICT quan trọng",
      h2: "Đặt tên đối tác thể chế",
      body: "Dự án Cần Thơ 2030 đặt CICT — Trường Công nghệ Thông tin và Truyền thông thuộc Đại học Cần Thơ — là đối tác thể chế: không phải một đối tác giữa nhiều bên, mà là đơn vị giữ vị thế, tổ chức Diễn đàn Đổi mới Sáng tạo, và là điểm mà việc tiếp xúc với chính quyền Cần Thơ được điều phối. Quyết định đó thay đổi cách đọc mọi tuyên bố, đầu mối và hợp đồng của chương trình — việc ghi nhận giữ trung thực (Đã xác nhận, Đang trao đổi, Đề xuất, Hướng tương lai), kiến trúc tài trợ do TIC xây dựng chứ không đòi hỏi ở CICT, và mọi việc sử dụng công khai tên hoặc logo CICT được CICT rà soát trước khi công bố.",
      quote: "Chúng tôi đã chọn đối tác thể chế, và để mọi thứ còn lại đi theo từ đó.",
    },
    intro: {
      eyebrow: "Chương trình này là gì",
      body: "The Improbability Company (TIC) hợp tác với Đại học Cần Thơ thông qua CICT — Trường Công nghệ Thông tin và Truyền thông. CICT là đối tác thể chế của chương trình trong Đại học Cần Thơ. Chương trình chuyển các ràng buộc pháp lý và khí hậu thành đề bài, bố trí nhân lực qua năng lực nghiên cứu của CICT và CTU, và triển khai với TIC là đơn vị vận hành cùng các đối tác được nêu tên.",
    },
    roles: {
      eyebrow: "Vì sao CICT quan trọng",
      h2: "Ai làm gì",
      cards: [
        { mark: "CICT", tone: "anchor", role: "Đối tác thể chế", body: "Trường Công nghệ Thông tin và Truyền thông thuộc Đại học Cần Thơ. CICT giữ vị thế thể chế, tổ chức Diễn đàn Đổi mới Sáng tạo, và là nơi việc tiếp xúc với phía chính quyền được điều phối khi phù hợp.", tag: "Đối tác thể chế" },
        { mark: "TIC", tone: "operator", role: "Đơn vị vận hành", body: "The Improbability Company vận hành chương trình — xây đề bài, chạy Sprint 90 ngày, điều phối đối tác và nhà tài trợ, tạo ra sản phẩm thương mại và nghiên cứu.", tag: "Vận hành" },
        { mark: "Đại học Cần Thơ", tone: "parent", role: "Hệ sinh thái chủ quản", body: "CTU là hệ sinh thái chủ quản nơi CICT đặt trong đó — giảng viên, phòng thí nghiệm và năng lực thường trực về CNTT, nông nghiệp, môi trường, kỹ thuật.", tag: "Chủ quản" },
      ],
    },
    instNet: {
      eyebrow: "Mạng lưới thể chế và giáo dục",
      h2: "CICT là nòng cốt. Mạng lưới giáo dục hỗ trợ chương trình rộng hơn.",
      link: "Thăm CICT",
    },
    why: {
      eyebrow: "Vì sao Cần Thơ, vì sao lúc này",
      h2: "Hành lang thích ứng khí hậu và công nghiệp có vị trí chiến lược nhất của Việt Nam",
      body: "ĐBSCL là động lực xuất khẩu nông nghiệp của Việt Nam và là một trong những vùng chịu ảnh hưởng khí hậu nặng nề nhất Đông Nam Á. Nghị quyết 59 và Quy hoạch tổng thể cam kết thành phố tới mốc 2030. Cửa sổ vận hành cho công việc tuân thủ, triển khai được đang mở ngay bây giờ.",
      arc: "Đây là chương trình xây để bền, không phải sự kiện đơn lẻ: Foundation Cohort và Diễn đàn 2026 dẫn tới các quyết định áp dụng đầu tiên năm 2027, mở rộng cohort giai đoạn 2027–2028, và một chương trình thường trực do CICT làm nòng cốt, TIC vận hành về sau. Mỗi giai đoạn được thiết kế để bồi đắp giai đoạn trước.",
      stats: [
        { value: "≈12,4%", label: "Tỷ trọng GDP cả nước của ĐBSCL", source: "Số liệu tham khảo — chờ xác nhận" },
        { value: "≈3%", label: "Tỷ trọng FDI cả nước — thấp hơn nhiều so với quy mô kinh tế", source: "Số liệu tham khảo — chờ xác nhận" },
        { value: "≈1,7 triệu", label: "Người rời ĐBSCL trong thập kỷ qua dưới áp lực khí hậu", source: "Số liệu tham khảo — chờ xác nhận" },
      ],
    },
    arc: {
      eyebrow: "Lộ trình nền tảng",
      h2: "Xây để bền, không phải sự kiện đơn lẻ",
      sub: "Bốn giai đoạn chứng minh đây là chương trình nền tảng chứ không phải một sự kiện.",
      steps: [
        { when: "2026", title: "Foundation Cohort + Diễn đàn Đổi mới Sáng tạo", body: "Các Sprint 90 ngày đầu tiên qua CICT; Diễn đàn Đổi mới Sáng tạo tuyển chọn vào tháng 9/10.", tone: "live" },
        { when: "Q1 2027", title: "Quyết định áp dụng đầu tiên", body: "Kết quả Sprint được các đơn vị Việt Nam rà soát; áp dụng thương mại và nghiên cứu đầu tiên.", tone: "scoping" },
        { when: "2027–2028", title: "Mở rộng cohort", body: "Lặp lại các cohort Sprint trên hai trụ cột và các luồng liền kề.", tone: "future" },
        { when: "Lâu dài", title: "Chương trình thường trực", body: "CICT là đối tác thể chế, TIC vận hành, nhà tài trợ hậu thuẫn — một nền tảng triển khai bền vững cho đồng bằng.", tone: "future" },
      ],
    },
    gov: {
      eyebrow: "Quản trị",
      h2: "Ai điều hành",
      people: [
        { name: "Anh Phan", role: "Trưởng dự án CT2030", line: "Đầu mối chính với CICT; điều phối quan hệ hợp tác giữa TIC và CICT.", status: null },
        { name: "Tracy", role: "CEO của TIC (từ 1/7)", line: "Tổng giám đốc The Improbability Company. [Họ tên đầy đủ chờ xác nhận]", status: null },
        { name: "Oz Omegna", role: "Phụ trách Úc", line: "Dẫn dắt các trao đổi với nhà tài trợ và đối tác tại Úc.", status: null },
        { name: "Trưởng dự án Magrathea", role: "Vận hành", line: "Đối tác vận hành chương trình.", status: "nominate" },
        { name: "Đầu mối phía CICT", role: "Điều phối phía CICT", line: "Đầu mối CICT cho quan hệ hợp tác.", status: "nominate" },
      ],
    },
    publicSector: {
      eyebrow: "Dành cho khối công lập",
      h2: "Tiếp xúc với khối công lập",
      body: "Dự án Cần Thơ 2030 là một nền tảng từ thách thức tới thí điểm độc lập của TIC × CICT, phù hợp với các ưu tiên 2030 của Cần Thơ theo Nghị quyết 59-NQ/TW của Bộ Chính trị. Việc tiếp xúc với phía chính quyền được điều phối qua CICT khi phù hợp.",
      assurances: [
        "Việc gửi hoặc hỗ trợ một thách thức không tạo ra quy trình mua sắm, nghĩa vụ cấp vốn, hay cam kết bảo trợ.",
        "Đề xuất thách thức của khối công lập được giữ không công khai cho đến khi hai bên đồng ý chia sẻ.",
        "Mọi việc sử dụng công khai tên hoặc logo của CICT đều được CICT rà soát trước khi công bố.",
      ],
      contactLabel: "Đầu mối cho tiếp xúc khối công lập",
      contactName: "Anh Phan, Trưởng dự án CT2030",
      cta: "Trao đổi về một Thách thức Công lập",
      subject: "[CT2030 Public Sector] discussion request",
    },
    auGovNote: "Các bên chính phủ và thương mại Úc (DFAT, Austrade, Lãnh sự quán Úc, Global Victoria) là các kênh tiếp xúc trừ khi được xác nhận riêng. Chương trình hoan nghênh đối thoại về thương mại, giáo dục, đổi mới và hỗ trợ đoàn công tác.",
    briefing: {
      label: "Dành cho cơ quan rà soát",
      title: "Bản tóm tắt Chính phủ & Thể chế",
      body: "Một bản tóm tắt một trang bạn có thể chuyển tiếp lên cấp trên — phạm vi chương trình, các trụ cột, đối tác được nêu tên cùng mức độ hợp tác, và khung tiếp xúc phía Úc.",
      cta: "Bản tóm tắt cho cơ quan rà soát (PDF, 1 trang)",
      meta: "PDF · 1 trang · bản mẫu, chờ rà soát ngôn ngữ",
      href: "assets/CT2030_Government_Briefing_v1.pdf",
    },
  },
};

const FOCUS = {
  en: {
    eyebrow: "Focus areas",
    h2: "Two core pillars, two adjacent streams",
    sub: "Where challenges and solutions are matched. Partners are named at their honest engagement status.",
    labels: { core: "Core pillar", adjacent: "Adjacent stream", challenge: "The challenge", response: "The TIC response" },
    areas: [
      { domain: "RegTech", accent: "indigo", kind: "core", title: "Enterprise RegTech", challenge: "Industrial and data-centre environments face rising workforce-compliance and credential-verification obligations.", response: "TIC adapts proven RegTech delivery to Vietnamese regulatory context through CICT.", partners: [{ name: "Kinatico", status: "confirmed" }, { name: "FrankieOne", status: "proposed" }] },
      { domain: "ClimateTech", accent: "green", kind: "core", title: "Residential & SME ClimateTech", challenge: "Households and small enterprises face energy insecurity under intensifying climate stress.", response: "VoltaRocks delivers residential and SME energy-resilience modelling tuned to Mekong conditions.", partners: [{ name: "VoltaRocks", status: "confirmed", note: "TIC venture" }] },
      { domain: "Energy & grid", accent: "gold", kind: "adjacent", title: "Mekong energy & grid research", challenge: "Distributed-energy and grid-support questions are research-heavy and locally specific.", response: "CICT leads the research on CTU's engineering and environmental expertise.", partners: [{ name: "Engagement underway", status: "discussion" }] },
      { domain: "AgriTech / AquaTech", accent: "green", kind: "adjacent", title: "AgriTech / AquaTech", challenge: "The Delta's agriculture and aquaculture economy generates a stream of deployable problems.", response: "TIC assembles a challenge book and routes it to agritech and startup networks.", partners: [{ name: "Engagement underway", status: "discussion" }] },
    ],
  },
  vi: {
    eyebrow: "Lĩnh vực trọng tâm",
    h2: "Hai trụ cột cốt lõi, hai luồng liền kề",
    sub: "Nơi thách thức và giải pháp được ghép cặp. Đối tác được nêu tên đúng theo mức độ hợp tác.",
    labels: { core: "Trụ cột cốt lõi", adjacent: "Luồng liền kề", challenge: "Thách thức", response: "Phản hồi của TIC" },
    areas: [
      { domain: "RegTech", accent: "indigo", kind: "core", title: "RegTech doanh nghiệp", challenge: "Môi trường công nghiệp và trung tâm dữ liệu đối mặt nghĩa vụ tuân thủ nhân sự và xác minh chứng chỉ ngày càng tăng.", response: "TIC điều chỉnh kinh nghiệm RegTech đã kiểm chứng theo bối cảnh pháp lý Việt Nam thông qua CICT.", partners: [{ name: "Kinatico", status: "confirmed" }, { name: "FrankieOne", status: "proposed" }] },
      { domain: "ClimateTech", accent: "green", kind: "core", title: "ClimateTech hộ gia đình & SME", challenge: "Hộ gia đình và doanh nghiệp nhỏ đối mặt mất an ninh năng lượng dưới áp lực khí hậu gia tăng.", response: "VoltaRocks cung cấp mô hình chống chịu năng lượng cho hộ và SME phù hợp điều kiện Mekong.", partners: [{ name: "VoltaRocks", status: "confirmed", note: "doanh nghiệp của TIC" }] },
      { domain: "Năng lượng & lưới", accent: "gold", kind: "adjacent", title: "Nghiên cứu năng lượng & lưới Mekong", challenge: "Các câu hỏi về năng lượng phân tán và hỗ trợ lưới nặng tính nghiên cứu và đặc thù địa phương.", response: "CICT dẫn dắt nghiên cứu trên năng lực kỹ thuật và môi trường của CTU.", partners: [{ name: "Đang trao đổi với đối tác", status: "discussion" }] },
      { domain: "AgriTech / AquaTech", accent: "green", kind: "adjacent", title: "AgriTech / AquaTech", challenge: "Kinh tế nông nghiệp và thủy sản của đồng bằng tạo ra dòng vấn đề triển khai được.", response: "TIC tập hợp một tập đề bài và kết nối tới các mạng lưới agritech và khởi nghiệp.", partners: [{ name: "Đang trao đổi với đối tác", status: "discussion" }] },
    ],
  },
};

const focusBadge = {
  indigo: "bg-ct-indigo-50 text-ct-indigo-900 border-ct-indigo-200",
  green:  "bg-ct-green-50 text-ct-green-700 border-ct-green-200",
  gold:   "bg-ct-gold-50 text-ct-gold-800 border-ct-gold-200",
};
const focusBar = { indigo: "bg-ct-indigo-700", green: "bg-ct-green-600", gold: "bg-ct-gold-500" };

const FocusAreas = ({ lang, note }) => {
  const f = FOCUS[lang] || FOCUS.en;
  const L = f.labels;
  return (
    <section id="focus-areas" data-screen-label="Focus areas" className="bg-white py-20 lg:py-24 border-t border-gray-200 scroll-mt-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl">
          <Eyebrow n="03">{f.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{f.h2}</SectionHeading>
          <p className="mt-3 text-base text-gray-600 leading-relaxed">{f.sub}</p>
        </div>
        <div className="mt-12 grid gap-6 lg:grid-cols-2 items-start">
          {f.areas.map((a, i) => {
            const isCore = a.kind === "core";
            return (
              <article key={i} className={`relative flex flex-col overflow-hidden rounded-lg border bg-white ${isCore ? "border-ct-indigo-200" : "border-gray-200"}`}>
                <span className={`absolute left-0 top-0 bottom-0 w-1 ${focusBar[a.accent]}`} aria-hidden="true"/>
                <div className="flex flex-col flex-grow p-7 pl-8">
                  <div className="flex items-center justify-between gap-3">
                    <span className={`inline-flex items-center rounded-sm border px-2 py-0.5 text-[11px] font-mono tracking-wide uppercase ${focusBadge[a.accent]}`}>{a.domain}</span>
                    <span className="text-[10px] font-mono tracking-[0.18em] uppercase text-gray-400">{isCore ? L.core : L.adjacent}</span>
                  </div>
                  <h3 className="mt-4 text-xl font-semibold leading-snug text-ct-indigo-900 text-balance">{a.title}</h3>
                  <div className="mt-4 space-y-4">
                    <div>
                      <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-700 mb-1">{L.challenge}</p>
                      <p className="text-sm leading-6 text-gray-700">{a.challenge}</p>
                    </div>
                    <div>
                      <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-700 mb-1">{L.response}</p>
                      <p className="text-sm leading-6 text-gray-700">{a.response}</p>
                    </div>
                  </div>
                  <div className="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 pt-4 border-t border-gray-200/70">
                    {a.partners.map((p, j) => (
                      <div key={j} className="flex items-center gap-2">
                        <span className="text-sm text-gray-800">{p.name}{p.note && <span className="text-gray-400 italic"> — {p.note}</span>}</span>
                        <ClaimBadge status={p.status} lang={lang}/>
                      </div>
                    ))}
                  </div>
                </div>
              </article>
            );
          })}
        </div>
        {note && (
          <p className="mt-8 max-w-3xl border-l-2 border-ct-gold-400/60 pl-4 text-sm italic leading-relaxed text-gray-600">{note}</p>
        )}
      </div>
    </section>
  );
};

const roleTone = {
  anchor:   { card: "border-ct-indigo-300 bg-ct-indigo-900 text-white", role: "text-ct-gold-300", body: "text-white/80", tag: "bg-ct-gold-400 text-ct-indigo-900" },
  operator: { card: "border-gray-200 bg-white", role: "text-ct-indigo-700", body: "text-gray-700", tag: "bg-ct-indigo-100 text-ct-indigo-800" },
  parent:   { card: "border-gray-200 bg-gray-50", role: "text-ct-green-700", body: "text-gray-700", tag: "bg-ct-green-100 text-ct-green-800" },
};

const Roles = ({ t }) => (
  <section data-screen-label="02 Three roles" className="bg-white py-20 lg:py-24">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow n="01">{t.roles.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.roles.h2}</SectionHeading>
      <div className="mt-12 grid gap-6 lg:grid-cols-3">
        {t.roles.cards.map((c, i) => {
          const tone = roleTone[c.tone];
          return (
            <article key={i} className={`flex flex-col rounded-lg border p-7 ${tone.card} ${c.tone==="anchor" ? "lg:scale-[1.03] shadow-lg" : ""}`}>
              <div className="flex items-center justify-between gap-3">
                <span className="text-xl font-semibold tracking-tight">{c.mark}</span>
                <span className={`rounded-sm px-2 py-0.5 text-[11px] font-mono tracking-wide uppercase ${tone.tag}`}>{c.tag}</span>
              </div>
              <p className={`mt-1.5 text-xs font-mono tracking-[0.16em] uppercase ${tone.role}`}>{c.role}</p>
              <p className={`mt-5 text-sm leading-relaxed ${tone.body}`}>{c.body}</p>
            </article>
          );
        })}
      </div>
    </div>
  </section>
);

const InstitutionalNetwork = ({ t, lang }) => {
  const uall = window.CT_PARTNERS && window.CT_PARTNERS.universities;
  const u = uall ? (uall[lang] || uall.en) : null;
  if (!u) return null;
  return (
    <section data-screen-label="Institutional & education network" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <Eyebrow>{t.instNet.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{t.instNet.h2}</SectionHeading>
        <div className="mt-10 rounded-lg border-2 border-ct-indigo-300 bg-white p-7 lg:p-9">
          <div className="flex flex-wrap items-center gap-3">
            <span className="text-xl font-semibold tracking-tight text-ct-indigo-900">{u.anchor.name}</span>
            <span className="rounded-sm bg-ct-gold-400 px-2 py-0.5 text-[11px] font-mono tracking-wide uppercase text-ct-indigo-900 whitespace-nowrap">{u.anchor.role}</span>
          </div>
          <p className="mt-1.5 text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500">{u.anchor.full}</p>
          <p className="mt-4 max-w-3xl text-base leading-relaxed text-gray-700">{u.anchor.body}</p>
          <blockquote className="mt-5 max-w-3xl border-l-2 border-ct-gold-400 pl-4 text-base italic leading-relaxed text-gray-500">{u.anchor.quote}</blockquote>
          <a href={u.anchor.url} target="_blank" rel="noopener" className="mt-5 inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{t.instNet.link}<Icon name="external" className="size-3.5"/></a>
        </div>
        <p className="mt-8 max-w-3xl border-l-2 border-ct-gold-400/60 pl-4 text-sm italic leading-relaxed text-gray-600">{u.safeguard}</p>
        <div className="mt-6 grid gap-5 md:grid-cols-3">
          {u.network.map((c, i) => (
            <article key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-6">
              <h3 className="text-base font-semibold text-ct-indigo-900">{c.name}</h3>
              <p className="mt-1 text-[11px] font-mono tracking-wide uppercase text-ct-gold-700">{c.role}</p>
              <p className="mt-3 text-sm leading-6 text-gray-700">{c.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const Why = ({ t }) => (  <section data-screen-label="03 Why now" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div className="max-w-3xl">
        <Eyebrow n="02">{t.why.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{t.why.h2}</SectionHeading>
        <p className="mt-4 text-base leading-relaxed text-gray-700">{t.why.body}</p>
        {t.why.arc && <p className="mt-4 text-base leading-relaxed text-gray-700">{t.why.arc}</p>}
      </div>
      <div className="mt-12 grid gap-5 sm:grid-cols-3">
        {t.why.stats.map((s, i) => <StatBox key={i} value={s.value} label={s.label} source={s.source}/>)}
      </div>
    </div>
  </section>
);

// -------------------- Foundational arc + Governance sections removed (CUT 13) --------------------
// Arc folded into the "Why now" section as a 2-sentence paragraph (t.why.arc).
// Governance moved to internal docs / pitch deck.



const Briefing = ({ t }) => {
  const b = t.briefing;
  return (
    <section data-screen-label="Government briefing" className="bg-white py-12 lg:py-14 border-b border-gray-200">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-5 rounded-lg border border-ct-indigo-200 bg-ct-indigo-50/50 p-6 sm:flex-row sm:items-center sm:justify-between lg:p-7">
          <div className="flex items-start gap-4">
            <span className="hidden sm:inline-flex size-11 shrink-0 items-center justify-center rounded-md bg-ct-indigo-900 text-ct-gold-300"><Icon name="doc" className="size-5"/></span>
            <div>
              <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-700">{b.label}</p>
              <h3 className="mt-1 text-lg font-semibold text-ct-indigo-900">{b.title}</h3>
              <p className="mt-1.5 max-w-xl text-sm leading-6 text-gray-700">{b.body}</p>
            </div>
          </div>
          <div className="shrink-0 sm:text-right">
            <a href={b.href} target="_blank" rel="noopener" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{b.cta}<Icon name="arrow-right" className="size-4"/></a>
            <p className="mt-2 text-[11px] font-mono tracking-wide text-gray-400">{b.meta}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const PublicSector = ({ t }) => {
  const p = t.publicSector;
  return (
    <section id="public-sector" data-screen-label="For public-sector stakeholders" className="bg-ct-indigo-900 text-white py-20 lg:py-24 scroll-mt-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 grid gap-12 lg:grid-cols-2 lg:gap-16 items-start">
        <div>
          <Eyebrow className="text-ct-gold-300">{p.eyebrow}</Eyebrow>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl text-balance">{p.h2}</h2>
          <p className="mt-5 text-base leading-relaxed text-white/85">{p.body}</p>
          <div className="mt-8 rounded-md border border-white/15 bg-white/[0.04] p-5">
            <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-300">{p.contactLabel}</p>
            <p className="mt-2 text-base font-semibold text-white">{p.contactName}</p>
            <a href={`mailto:${EMAIL}?subject=${encodeURIComponent(p.subject)}`} className="mt-4 inline-flex h-11 items-center gap-2 rounded-md bg-ct-gold-400 px-5 text-sm font-medium text-ct-indigo-900 hover:bg-ct-gold-300 transition-colors">{p.cta}<Icon name="arrow-right" className="size-4"/></a>
          </div>
        </div>
        <ul className="space-y-4 lg:pt-10">
          {p.assurances.map((a, i) => (
            <li key={i} className="flex gap-3 items-start rounded-lg border border-white/12 bg-white/[0.03] p-5">
              <Icon name="check" className="size-5 shrink-0 text-ct-gold-400 mt-0.5"/>
              <span className="text-sm leading-relaxed text-white/90">{a}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

// -------------------- Why CICT matters (sole surviving Insight, embedded — CUT 3) --------------------
const WhyCict = ({ t }) => {
  const w = t.whyCict;
  return (
    <section id="why-cict-matters" data-screen-label="Why CICT matters" className="bg-white py-20 lg:py-24 border-t border-gray-200 scroll-mt-20">
      <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        <Eyebrow>{w.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{w.h2}</SectionHeading>
        <p className="mt-6 text-lg leading-relaxed text-gray-800 text-pretty">{w.body}</p>
        <blockquote className="mt-8 border-l-2 border-ct-gold-400 pl-5 text-xl italic leading-relaxed text-ct-indigo-900">{w.quote}</blockquote>
      </div>
    </section>
  );
};

const TweaksMount = ({ tweaks, setTweak, setLang }) => {
  if (!window.TweaksPanel) return null;
  const { TweaksPanel } = window;
  return (
    <TweaksPanel title="Tweaks">
      <LangTweak lang={tweaks.lang} setLang={setLang}/>
    </TweaksPanel>
  );
};

const App = () => {
  const [tweaks, setTweak] = (window.useTweaks || ((d) => [d, () => {}]))(TWEAK_DEFAULS);
  const lang = tweaks.lang;
  const t = COPY[lang] || COPY.en;
  const setLang = useSharedLang(tweaks, setTweak);

  return (
    <>
      <Header lang={lang} setLang={setLang} current="About.html"/>
      <PageHero lang={lang} breadcrumb={t.breadcrumb} eyebrow={t.eyebrow} title={t.h1} lede={t.lede} archLine={t.archLine}/>
      <section data-screen-label="01 What this is" className="bg-white py-16 lg:py-20 border-b border-gray-200">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <Eyebrow>{t.intro.eyebrow}</Eyebrow>
          <p className="mt-4 text-lg leading-relaxed text-gray-800">{t.intro.body}</p>
        </div>
      </section>
      <Briefing t={t}/>
      <Roles t={t}/>
      <InstitutionalNetwork t={t} lang={lang}/>
      <WhyCict t={t}/>
      <PublicSector t={t}/>
      <Why t={t}/>
      <FocusAreas lang={lang} note={t.auGovNote}/>
      <CtaStrip lang={lang}/>
      <Footer lang={lang}/>
      <TweaksMount tweaks={tweaks} setTweak={setTweak} setLang={setLang}/>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);