/* global React, ReactDOM, window */
const { useState } = React;
const { Header, Footer, Icon, Eyebrow, Callout, SectionHeading, PageHero, ClaimBadge, useSharedLang, LangTweak, SprintProgress, AfterSubmit, FormIntro, TalkFirstCTA, IPSafetyBadge, WhyBother } = window;

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

const INTAKE_EMAIL = "hello@cantho2030.com";

// =====================================================================
// Challenges (v0.2) — marketplace hub. Intake + live challenge list.
// =====================================================================
const COPY = {
  en: {
    breadcrumb: [["Home","Home.html"],["Challenges"]],
    eyebrow: "The marketplace",
    h1: "Cần Thơ 2030 Challenges",
    lede: "Real institutional problems matched to deployable solutions through 90-day Sprints. Submit a new challenge or pitch a solution to one already open.",
    whyBother: {
      eyebrow: "Why submit a challenge",
      body: "Submitting a challenge puts your real Mekong Delta problem in front of a curated network of solution providers, CICT student-and-faculty teams, sponsors, and pilot hosts. Selected challenges enter a 90-day Sprint and land on the Forum stage — where the people who can fund, deploy, and adopt the answer are already in the room. The cost of submission is one structured brief. The upside is a working prototype, a pilot pathway, and named stakeholders.",
    },
    topCtas: [
      { label: "Submit a Challenge", desc: "Bring a real Cần Thơ problem to a Sprint.", href: "#submit", primary: true },
      { label: "Pitch a Solution", desc: "Solve a validated challenge.", href: "Pitch a Solution.html" },
      { label: "See focus areas", desc: "The two pillars and adjacent streams.", href: "About.html#focus-areas" },
    ],
    loop: {
      eyebrow: "The 90-day Sprint model",
      h2: "Five steps from problem to pilot",
      steps: [
        { n: "Define", d: "Scope the brief with the Vietnamese owner and CICT." },
        { n: "Staff", d: "Assign a Foundation Cohort — the staffed CICT student + faculty + The Improbability Company (TIC) team that runs the Sprint." },
        { n: "Build", d: "The team builds against the brief over a 90-day Sprint." },
        { n: "Show", d: "Present the result at the Innovation Forum." },
        { n: "Pilot or progress", d: "The Vietnamese owner may decide whether to pilot or progress it." },
      ],
    },
    audience: {
      eyebrow: "Who submits what",
      h2: "Two sides, two pathways",
      sub: "Not sure where you belong? This is the quickest way to tell.",
      rows: [
        { who: "Businesses, public institutions, CICT / CTU, community", action: "Submit a Challenge", cta: "Go to the form", href: "#submit" },
        { who: "Startups, companies, researchers, student teams", action: "Pitch a Solution", cta: "Pitch a solution", href: "Pitch a Solution.html" },
      ],
    },
    book: {
      eyebrow: "Challenge Book 2026",
      h2: "The Challenge Book",
      sub: "Once CICT validates the first 3–5 challenges, they'll be published here as a downloadable PDF that sponsors and solution providers use as the basis for sponsorship conversations, solution pitches, and pilot design.",
      btn: "Download Challenge Book (coming soon)",
      examplesLabel: "Illustrative examples — first round in CICT review",
      ownerLabel: "Challenge owner",
      lookingLabel: "Looking for",
      cardPitch: "Pitch a solution to this challenge",
      cardSponsor: "Sponsor this challenge",
      examples: [
        { domain: "ClimateTech", accent: "green", title: "Residential / SME energy-resilience modelling", owner: "Mekong household / SME pilot partner (to confirm)", problem: "Mekong households and small enterprises face rising climate stress with limited tools to model rooftop solar + battery + EV options for their context.", looking: "Deployable modelling solutions · pilot hosts · a sponsor for the 90-day Sprint", status: "Illustrative · awaiting CICT validation" },
        { domain: "RegTech", accent: "indigo", title: "Workforce compliance for industrial / data-centre environments", owner: "Industrial / data-centre partner (to confirm)", problem: "Industrial workforce credentials and compliance in Cần Thơ data-centre development need a deployable verification approach suitable for local context.", looking: "Identity-verification / RegTech solution providers · a sponsor for the 90-day Sprint", status: "Illustrative · awaiting CICT validation" },
      ],
    },
    students: {
      eyebrow: "Students & faculty",
      h2: "Join the Foundation Cohort",
      lead: "Build a commercial track record before you graduate. Faculty-supervised, TIC-mentored, and showcased at the Innovation Forum.",
      points: ["A real, owned industrial challenge — career capital you can show, not a classroom exercise", "A TIC mentor alongside you — an industry network from day one", "A faculty supervisor on the team — academic credibility behind the work", "A place in the Innovation Forum showcase — visibility to employers and investors"],
      cta: "Join the Foundation Cohort",
      secondary: "Student interest →",
      scarcity: "First cohort places: 12 · application window to be announced.",
    },
    examples: {
      label: "Good challenges look like this",
      items: [
        "Our SME wants to assess rooftop solar + battery + backup options for our manufacturing floor.",
        "Our factory needs better workforce credential tracking for our data-centre construction project.",
        "Our farm cooperative needs traceability or water-quality monitoring for export compliance.",
      ],
    },
    cohort: {
      eyebrow: "Foundation Cohort application",
      h2: "Apply to the Foundation Cohort",
      sub: "A structured application — reviewed by CICT + TIC, not a generic inbox. Tell us who you are and where you want to build.",
      scarcity: "Cohort 1: ~12 places · application window opens July 2026 · selection by CICT + TIC.",
      note: "This opens your email client with the details pre-filled — no account needed.",
      spec: [
        { k:"name", l:"Name", req:true },
        { k:"year", l:"CICT year & specialisation", req:true, full:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"pillar", l:"Pillar interest", req:true, opts:["Enterprise RegTech","Residential / SME ClimateTech","Mekong energy & grid","AgriTech / AquaTech","Not sure yet"] },
        { k:"skills", l:"Skills", req:true, multi:["Frontend","Backend","Mobile","Data / ML","UI / UX","Hardware / IoT","Research","Product / PM"], full:true },
        { k:"why", l:"Why you're applying", hint:"optional · max 200 words", area:true, full:true },
        { k:"teammate", l:"Preferred teammate (if any)" },
        { k:"supervisor", l:"Faculty supervisor (if known)" },
      ],
      submit: "Open email to apply",
      required: "Name, CICT year & specialisation, email, pillar interest and at least one skill are required.",
      subjectPrefix: "[CT2030 Foundation Cohort] application — ",
    },
    faculty: {
      eyebrow: "For faculty leads",
      h2: "Lead from the faculty side",
      body: "Faculty may support challenge definition, student supervision, technical review, and presentation of outputs at the Innovation Forum. TIC provides programme coordination and industry mentoring. Selected outputs may support applied research, teaching cases, sponsored research discussions, or future incubator tracks.",
      facts: [
        { k: "Time commitment", v: "~3–5 hours per week during a 3-Month Sprint cycle." },
        { k: "Recognition", v: "Faculty are credited on Sprint outputs and Innovation Forum showcases." },
      ],
      cta: "Nominate a Faculty Lead",
      subject: "[CT2030 Faculty] expression of interest",
      secondary: "Suggest a Student Team →",
      secondarySubject: "[CT2030 Faculty] suggest a student team",
    },
    community: {
      eyebrow: "For community groups & residents",
      h2: "Propose a community challenge",
      body: "Community groups and residents can propose challenge ideas for Cần Thơ 2030. Good community challenges include household energy resilience, flood / disruption data, SME climate adaptation, and traceability for cooperatives.",
      guardrail: "This is not a public-service complaint portal. It is a path for challenge ideas that may become research, prototype, or pilot briefs.",
      cta: "Submit a Community Challenge",
      subject: "[CT2030 Community] challenge idea",
      secondary: "Ask before submitting →",
      secondarySubject: "[CT2030 Community] question before submitting",
    },
    live: {
      eyebrow: "Live challenges",
      h2: "Currently open",
      sub: "A curated snapshot of open briefs. Pitch a solution to any of them, or submit your own below.",
      filters: ["All", "Open for solutions", "In a Sprint", "Showcase pending", "Closed"],
      pitchCta: "Pitch a solution to this",
      items: [
        { title: "Workforce compliance for a data-centre operator", domain: "Enterprise RegTech", accent: "indigo", owner: "VN data-centre operator — to confirm", status: "open" },
        { title: "Residential energy-resilience model for a Mekong commune", domain: "Residential / SME ClimateTech", accent: "green", owner: "CICT + CTU faculty + household pilot partner", status: "sprint" },
        { title: "Credential & education verification for high-growth industries", domain: "Enterprise RegTech", accent: "indigo", owner: "VN training institution — to confirm", status: "open" },
        { title: "Distributed energy & grid-support study", domain: "Mekong energy & grid", accent: "gold", owner: "CICT, on CTU expertise", status: "open" },
        { title: "AgriTech / AquaTech challenge-book intake", domain: "AgriTech / AquaTech", accent: "green", owner: "Mekong agri association — to confirm", status: "open" },
        { title: "SME flood-coordination data layer", domain: "Residential / SME ClimateTech", accent: "green", owner: "District authority — to confirm", status: "showcase" },
      ],
    },
    form: {
      eyebrow: "Submit a challenge",
      h2: "Outline the problem",
      note: "This opens your email client with the details pre-filled — no account needed.",
      step1Label: "Step 1 — the basics",
      step2Label: "Step 2 — the detail (optional now, helps later)",
      fields: {
        name: "Name", org: "Organisation", role: "Role", email: "Email", title: "Challenge title",
        domain: "Domain", owner: "Who owns this problem on the Vietnamese side", problem: "The problem in one paragraph",
        tried: "What's been tried so far", resources: "Resources available (data, sites, pilot budget)", conf: "Confidentiality posture",
      },
      domains: ["Enterprise RegTech", "Residential / SME ClimateTech", "Mekong energy & grid", "AgriTech / AquaTech", "Other"],
      confs: ["Open for public discussion", "Limited disclosure", "Confidential (do not submit here)"],
      submit: "Open email to submit",
      required: "Name, organisation, email and challenge title are required.",
      hints: { title: "max 100 chars", problem: "max 400 words", tried: "optional · max 200 words", resources: "optional" },
    },
    pitchSide: { h: "Have a solution instead?", sub: "If you can solve a Cần Thơ 2030 challenge, pitch it — we'll match it to a live or future brief.", cta: "Pitch a solution" },
    next: {
      eyebrow: "What happens next",
      h2: "A clear timeline",
      steps: [
        { k: "Within 2 weeks", v: "CICT + TIC triage your submission." },
        { k: "Within 4 weeks", v: "A yes / no decision." },
        { k: "If yes", v: "Matched to a Foundation Cohort Sprint." },
      ],
    },
    disclaimer1: "Submission does not guarantee selection, funding, partnership, presentation at the Innovation Forum, or pilot deployment. Submissions will be reviewed by CICT and TIC for alignment, feasibility, confidentiality, student suitability and pilot potential.",
    disclaimer2: "Do not submit confidential, personal, sensitive or commercially restricted information through this public form.",
  },
  vi: {
    breadcrumb: [["Trang chủ","Home.html"],["Thách thức"]],
    eyebrow: "Marketplace",
    h1: "Thách thức Cần Thơ 2030",
    lede: "Các vấn đề thể chế thực tế được ghép với giải pháp triển khai được qua các Sprint 90 ngày. Đề xuất một thách thức mới hoặc đề xuất giải pháp cho một thách thức đang mở.",
    whyBother: {
      eyebrow: "Vì sao nên đề xuất một thách thức",
      body: "Đề xuất một thách thức đưa vấn đề ĐBSCL thực của bạn tới trước một mạng lưới tuyển chọn gồm các đơn vị giải pháp, các nhóm sinh viên và giảng viên CICT, nhà tài trợ, và đơn vị chủ trì thí điểm. Các thách thức được chọn vào Sprint 90 ngày và lên sân khấu Diễn đàn — nơi những người có thể tài trợ, triển khai, và áp dụng câu trả lời đã ở trong phòng. Chi phí gửi là một đề bài có cấu trúc. Giá trị thu được là một nguyên mẫu hoạt động, một lộ trình thí điểm, và các bên liên quan được nêu tên.",
    },
    topCtas: [
      { label: "Đề xuất Thách thức", desc: "Mang một vấn đề thực tế vào Sprint.", href: "#submit", primary: true },
      { label: "Đề xuất Giải pháp", desc: "Giải một thách thức đã xác thực.", href: "Pitch a Solution.html" },
      { label: "Xem lĩnh vực trọng tâm", desc: "Hai trụ cột và các luồng liền kề.", href: "About.html#focus-areas" },
    ],
    loop: {
      eyebrow: "Mô hình Sprint 90 ngày",
      h2: "Năm bước từ vấn đề tới thí điểm",
      steps: [
        { n: "Xác định", d: "Xây đề bài cùng chủ sở hữu Việt Nam và CICT." },
        { n: "Bố trí", d: "Giao cho một Foundation Cohort — đội CICT gồm sinh viên + giảng viên + cố vấn The Improbability Company (TIC) vận hành Sprint." },
        { n: "Xây dựng", d: "Đội ngũ xây dựng theo đề bài trong một Sprint 90 ngày." },
        { n: "Trình diễn", d: "Trình bày kết quả tại Diễn đàn Đổi mới Sáng tạo." },
        { n: "Thí điểm hoặc tiến tới", d: "Chủ sở hữu Việt Nam có thể quyết định thí điểm hay tiến tới." },
      ],
    },
    audience: {
      eyebrow: "Ai đề xuất gì",
      h2: "Hai phía, hai lối vào",
      sub: "Không chắc mình thuộc bên nào? Đây là cách nhanh nhất để biết.",
      rows: [
        { who: "Doanh nghiệp, cơ quan công, CICT / CTU, cộng đồng", action: "Đề xuất Thách thức", cta: "Đến biểu mẫu", href: "#submit" },
        { who: "Startup, doanh nghiệp, nhà nghiên cứu, nhóm sinh viên", action: "Đề xuất Giải pháp", cta: "Đề xuất giải pháp", href: "Pitch a Solution.html" },
      ],
    },
    book: {
      eyebrow: "Sổ Thách thức 2026",
      h2: "Sổ Thách thức",
      sub: "Khi CICT xác thực 3–5 thách thức đầu tiên, chúng sẽ được công bố tại đây dưới dạng PDF tải về để nhà tài trợ và đơn vị giải pháp dùng làm cơ sở cho các trao đổi tài trợ, đề xuất giải pháp và thiết kế thí điểm.",
      btn: "Tải Sổ Thách thức (sắp ra mắt)",
      examplesLabel: "Ví dụ minh họa — vòng đầu đang được CICT rà soát",
      ownerLabel: "Chủ thách thức",
      lookingLabel: "Đang tìm",
      cardPitch: "Đề xuất giải pháp cho thách thức này",
      cardSponsor: "Tài trợ thách thức này",
      examples: [
        { domain: "ClimateTech", accent: "green", title: "Mô hình chống chịu năng lượng hộ gia đình / SME", owner: "Đối tác thí điểm hộ gia đình / SME Mekong (chờ xác nhận)", problem: "Hộ gia đình và doanh nghiệp nhỏ ở Mekong đối mặt áp lực khí hậu gia tăng với ít công cụ để mô hình hóa các lựa chọn điện mặt trời mái nhà + pin + xe điện cho bối cảnh của họ.", looking: "Giải pháp mô hình hóa triển khai được · đơn vị chủ trì thí điểm · nhà tài trợ cho Sprint 90 ngày", status: "Minh họa · chờ CICT xác thực" },
        { domain: "RegTech", accent: "indigo", title: "Tuân thủ nhân sự cho môi trường công nghiệp / trung tâm dữ liệu", owner: "Đối tác công nghiệp / trung tâm dữ liệu (chờ xác nhận)", problem: "Chứng chỉ và tuân thủ nhân sự công nghiệp trong phát triển trung tâm dữ liệu Cần Thơ cần một cách tiếp cận xác minh triển khai được phù hợp bối cảnh địa phương.", looking: "Đơn vị giải pháp xác minh danh tính / RegTech · nhà tài trợ cho Sprint 90 ngày", status: "Minh họa · chờ CICT xác thực" },
      ],
    },
    students: {
      eyebrow: "Sinh viên & giảng viên",
      h2: "Tham gia Foundation Cohort",
      lead: "Xây thành tích thương mại trước khi tốt nghiệp. Có giảng viên hướng dẫn, cố vấn TIC, và được trình diễn tại Diễn đàn Đổi mới Sáng tạo.",
      points: ["Một thách thức công nghiệp thực tế — vốn sự nghiệp bạn có thể trưng ra, không phải bài tập trên lớp", "Một cố vấn TIC đồng hành — mạng lưới ngành ngay từ đầu", "Một giảng viên hướng dẫn trong đội — uy tín học thuật sau công việc", "Một chỗ trong phần trình diễn tại Diễn đàn — hiện diện trước nhà tuyển dụng và nhà đầu tư"],
      cta: "Tham gia Foundation Cohort",
      secondary: "Quan tâm sinh viên →",
      scarcity: "Suất cohort đầu tiên: 12 · thời gian nhận hồ sơ sẽ công bố.",
    },
    examples: {
      label: "Một thách thức tốt trông như thế này",
      items: [
        "Doanh nghiệp SME của chúng tôi muốn đánh giá các phương án điện mặt trời mái nhà + pin + nguồn dự phòng cho xưởng sản xuất.",
        "Nhà máy của chúng tôi cần theo dõi chứng chỉ nhân sự tốt hơn cho dự án xây dựng trung tâm dữ liệu.",
        "Hợp tác xã nông nghiệp của chúng tôi cần truy xuất nguồn gốc hoặc giám sát chất lượng nước để tuân thủ xuất khẩu.",
      ],
    },
    cohort: {
      eyebrow: "Hồ sơ Foundation Cohort",
      h2: "Ứng tuyển vào Foundation Cohort",
      sub: "Một hồ sơ có cấu trúc — được CICT + TIC rà soát, không phải một hộp thư chung. Cho chúng tôi biết bạn là ai và muốn xây dựng ở đâu.",
      scarcity: "Cohort 1: ~12 suất · nhận hồ sơ từ tháng 7/2026 · CICT + TIC tuyển chọn.",
      note: "Thao tác này mở ứng dụng email của bạn với nội dung điền sẵn — không cần tài khoản.",
      spec: [
        { k:"name", l:"Tên", req:true },
        { k:"year", l:"Năm học & chuyên ngành CICT", req:true, full:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"pillar", l:"Trụ cột quan tâm", req:true, opts:["Enterprise RegTech","Residential / SME ClimateTech","Mekong energy & grid","AgriTech / AquaTech","Chưa chắc chắn"] },
        { k:"skills", l:"Kỹ năng", req:true, multi:["Frontend","Backend","Mobile","Data / ML","UI / UX","Phần cứng / IoT","Nghiên cứu","Product / PM"], full:true },
        { k:"why", l:"Vì sao bạn ứng tuyển", hint:"không bắt buộc · tối đa 200 từ", area:true, full:true },
        { k:"teammate", l:"Bạn đồng đội mong muốn (nếu có)" },
        { k:"supervisor", l:"Giảng viên hướng dẫn (nếu biết)" },
      ],
      submit: "Mở email để ứng tuyển",
      required: "Tên, năm học & chuyên ngành CICT, email, trụ cột quan tâm và ít nhất một kỹ năng là bắt buộc.",
      subjectPrefix: "[CT2030 Foundation Cohort] hồ sơ — ",
    },
    faculty: {
      eyebrow: "Dành cho giảng viên",
      h2: "Dẫn dắt từ phía giảng viên",
      body: "Giảng viên có thể hỗ trợ định nghĩa thách thức, hướng dẫn sinh viên, rà soát kỹ thuật và trình bày kết quả tại Diễn đàn Đổi mới Sáng tạo. TIC cung cấp điều phối chương trình và cố vấn ngành. Các kết quả được chọn có thể hỗ trợ nghiên cứu ứng dụng, tình huống giảng dạy, trao đổi nghiên cứu tài trợ, hoặc các hướng vườn ươm tương lai.",
      facts: [
        { k: "Thời lượng", v: "~3–5 giờ mỗi tuần trong một chu kỳ Sprint 90 ngày." },
        { k: "Ghi nhận", v: "Giảng viên được ghi nhận trên kết quả Sprint và phần trình diễn tại Diễn đàn Đổi mới Sáng tạo." },
      ],
      cta: "Đề cử Giảng viên hướng dẫn",
      subject: "[CT2030 Faculty] expression of interest",
      secondary: "Gợi ý một nhóm sinh viên →",
      secondarySubject: "[CT2030 Faculty] suggest a student team",
    },
    community: {
      eyebrow: "Dành cho cộng đồng & cư dân",
      h2: "Đề xuất một thách thức cộng đồng",
      body: "Các nhóm cộng đồng và cư dân có thể đề xuất ý tưởng thách thức cho Cần Thơ 2030. Các thách thức cộng đồng tốt gồm khả năng chống chịu năng lượng hộ gia đình, dữ liệu lũ / gián đoạn, thích ứng khí hậu cho SME, và truy xuất nguồn gốc cho hợp tác xã.",
      guardrail: "Đây không phải là cổng tiếp nhận khiếu nại dịch vụ công. Đây là lối đi cho các ý tưởng thách thức có thể trở thành đề bài nghiên cứu, nguyên mẫu hoặc thí điểm.",
      cta: "Gửi Thách thức Cộng đồng",
      subject: "[CT2030 Community] challenge idea",
      secondary: "Hỏi trước khi gửi →",
      secondarySubject: "[CT2030 Community] question before submitting",
    },
    live: {
      eyebrow: "Thách thức đang mở",
      h2: "Hiện đang mở",
      sub: "Một ảnh chụp tuyển chọn các đề bài đang mở. Hãy đề xuất giải pháp cho bất kỳ đề nào, hoặc gửi đề bài của bạn bên dưới.",
      filters: ["Tất cả", "Đang mở giải pháp", "Đang trong Sprint", "Chờ trình diễn", "Đã đóng"],
      pitchCta: "Đề xuất giải pháp cho đề này",
      items: [
        { title: "Tuân thủ nhân sự cho một nhà vận hành trung tâm dữ liệu", domain: "Enterprise RegTech", accent: "indigo", owner: "Nhà vận hành TTDL VN — chờ xác nhận", status: "open" },
        { title: "Mô hình chống chịu năng lượng cho một xã ở Mekong", domain: "Residential / SME ClimateTech", accent: "green", owner: "CICT + giảng viên CTU + đối tác thí điểm hộ gia đình", status: "sprint" },
        { title: "Xác minh chứng chỉ & học vấn cho ngành tăng trưởng cao", domain: "Enterprise RegTech", accent: "indigo", owner: "Cơ sở đào tạo VN — chờ xác nhận", status: "open" },
        { title: "Nghiên cứu năng lượng phân tán & hỗ trợ lưới", domain: "Mekong energy & grid", accent: "gold", owner: "CICT, trên năng lực CTU", status: "open" },
        { title: "Tiếp nhận tập đề bài AgriTech / AquaTech", domain: "AgriTech / AquaTech", accent: "green", owner: "Hiệp hội nông nghiệp Mekong — chờ xác nhận", status: "open" },
        { title: "Lớp dữ liệu điều phối lũ cho SME", domain: "Residential / SME ClimateTech", accent: "green", owner: "Chính quyền cấp huyện — chờ xác nhận", status: "showcase" },
      ],
    },
    form: {
      eyebrow: "Đề xuất thách thức",
      h2: "Phác thảo vấn đề",
      note: "Thao tác này mở ứng dụng email của bạn với nội dung điền sẵn — không cần tài khoản.",
      step1Label: "Bước 1 — thông tin cơ bản",
      step2Label: "Bước 2 — chi tiết (không bắt buộc bây giờ, hữu ích về sau)",
      fields: {
        name: "Tên", org: "Tổ chức", role: "Vai trò", email: "Email", title: "Tên thách thức",
        domain: "Lĩnh vực", owner: "Ai sở hữu vấn đề này phía Việt Nam", problem: "Vấn đề trong một đoạn",
        tried: "Đã thử những gì", resources: "Nguồn lực sẵn có (dữ liệu, địa điểm, ngân sách thí điểm)", conf: "Mức độ bảo mật",
      },
      domains: ["Enterprise RegTech", "Residential / SME ClimateTech", "Mekong energy & grid", "AgriTech / AquaTech", "Khác"],
      confs: ["Mở để thảo luận công khai", "Tiết lộ hạn chế", "Bảo mật (đừng gửi tại đây)"],
      submit: "Mở email để gửi",
      required: "Tên, tổ chức, email và tên thách thức là bắt buộc.",
      hints: { title: "tối đa 100 ký tự", problem: "tối đa 400 từ", tried: "không bắt buộc · tối đa 200 từ", resources: "không bắt buộc" },
    },
    pitchSide: { h: "Có giải pháp thay vì thách thức?", sub: "Nếu bạn có thể giải một thách thức Cần Thơ 2030, hãy đề xuất — chúng tôi sẽ ghép với một đề bài hiện tại hoặc tương lai.", cta: "Đề xuất giải pháp" },
    next: {
      eyebrow: "Tiếp theo là gì",
      h2: "Một dòng thời gian rõ ràng",
      steps: [
        { k: "Trong 2 tuần", v: "CICT + TIC sàng lọc đề xuất của bạn." },
        { k: "Trong 4 tuần", v: "Quyết định có / không." },
        { k: "Nếu có", v: "Ghép vào một Sprint của Foundation Cohort." },
      ],
    },
    disclaimer1: "Việc gửi không đảm bảo được chọn, được cấp vốn, hợp tác, trình bày tại Diễn đàn Đổi mới Sáng tạo, hay triển khai thí điểm. Các đề xuất sẽ được CICT và TIC rà soát về tính phù hợp, khả thi, bảo mật, mức độ phù hợp với sinh viên và tiềm năng thí điểm.",
    disclaimer2: "Đừng gửi thông tin bảo mật, cá nhân, nhạy cảm hoặc bị hạn chế thương mại qua biểu mẫu công khai này.",
  },
};

const statusMap = {
  open:     { idx: 1, cls: "border-ct-green-300 bg-ct-green-50 text-ct-green-700", dot: "bg-ct-green-600", en: "Open for solutions", vi: "Đang mở giải pháp" },
  sprint:   { idx: 2, cls: "border-ct-gold-300 bg-ct-gold-50 text-ct-gold-800", dot: "bg-ct-gold-500", en: "In a Sprint", vi: "Đang trong Sprint" },
  showcase: { idx: 3, cls: "border-ct-indigo-200 bg-ct-indigo-50 text-ct-indigo-800", dot: "bg-ct-indigo-400", en: "Showcase pending", vi: "Chờ trình diễn" },
  closed:   { idx: 4, cls: "border-gray-300 bg-gray-100 text-gray-500", dot: "bg-gray-400", en: "Closed", vi: "Đã đóng" },
};
const accentBadge = {
  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 Hero = ({ t }) => (
  <section data-screen-label="00 Hero" className="relative overflow-hidden bg-ct-indigo-900 text-white">
    <div className="absolute inset-0 opacity-25" aria-hidden="true" style={{background:"radial-gradient(ellipse at 30% 70%, oklch(0.5 0.09 200) 0%, transparent 55%), linear-gradient(180deg, oklch(0.22 0.05 250), oklch(0.16 0.045 250))"}}/>
    <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-24">
      <Eyebrow className="text-ct-gold-300">{t.eyebrow}</Eyebrow>
      <h1 className="mt-4 max-w-4xl text-3xl sm:text-4xl lg:text-5xl font-semibold tracking-tight leading-[1.14] text-balance">{t.h1}</h1>
      <p className="mt-6 max-w-3xl text-base sm:text-lg leading-relaxed text-white/85">{t.lede}</p>
    </div>
  </section>
);

const ThreeCta = ({ t }) => (
  <section data-screen-label="01 Three CTAs" className="bg-white border-b border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 -mt-10 pb-16 lg:pb-20">
      <div className="grid gap-4 sm:grid-cols-3">
        {t.topCtas.map((c, i) => (
          <a key={i} href={c.href}
             className={`group flex flex-col rounded-lg border p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md ${c.primary ? "border-ct-gold-300 bg-ct-gold-50" : "border-gray-200 bg-white"}`}>
            <span className={`text-base font-semibold ${c.primary ? "text-ct-gold-900" : "text-ct-indigo-900"}`}>{c.label}</span>
            <span className="mt-1.5 text-sm leading-6 text-gray-600 flex-grow">{c.desc}</span>
            <span className={`mt-4 inline-flex items-center gap-1.5 text-sm font-semibold group-hover:gap-2.5 transition-all ${c.primary ? "text-ct-gold-800" : "text-ct-indigo-900"}`}>{c.label}<Icon name="arrow-right" className="size-3.5"/></span>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const Loop = ({ t }) => (
  <section data-screen-label="01 Loop" 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="02">{t.loop.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.loop.h2}</SectionHeading>
      <ol className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {t.loop.steps.map((s, i) => (
          <li key={i} className="relative rounded-lg border border-gray-200 bg-white p-5">
            <span className="inline-flex size-8 items-center justify-center rounded-md bg-ct-indigo-900 text-white font-mono text-xs">{i+1}</span>
            <h3 className="mt-3 text-base font-semibold text-ct-indigo-900">{s.n}</h3>
            <p className="mt-1.5 text-sm leading-6 text-gray-700">{s.d}</p>
            {i < t.loop.steps.length-1 && <span className="hidden lg:flex absolute -right-3 top-8 z-10 size-6 rounded-full bg-white border border-gray-200 items-center justify-center text-gray-400"><Icon name="arrow-right" className="size-3"/></span>}
          </li>
        ))}
      </ol>
    </div>
  </section>
);

const Live = ({ t, lang }) => {
  const [filter, setFilter] = useState(0);
  const shown = filter === 0 ? t.live.items : t.live.items.filter(it => statusMap[it.status].idx === filter);
  return (
    <section data-screen-label="02 Live challenges" 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 n="01">{t.live.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{t.live.h2}</SectionHeading>
        <p className="mt-3 max-w-3xl text-base text-gray-600 leading-relaxed">{t.live.sub}</p>
        <div className="mt-8 flex flex-wrap gap-2">
          {t.live.filters.map((f, i) => (
            <button key={i} onClick={() => setFilter(i)}
                    className={`rounded-full px-4 py-1.5 text-sm font-medium transition-colors ${filter===i ? "bg-ct-indigo-900 text-white" : "bg-white border border-gray-200 text-gray-600 hover:bg-gray-100"}`}>{f}</button>
          ))}
        </div>
        <div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {shown.map((it, i) => {
            const st = statusMap[it.status];
            return (
              <article key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-6">
                <div className="flex items-center justify-between gap-2">
                  <span className={`inline-flex items-center rounded-sm border px-2 py-0.5 text-[11px] font-mono tracking-wide uppercase ${accentBadge[it.accent]}`}>{it.domain}</span>
                  <span className={`inline-flex items-center gap-1.5 rounded-sm border px-2 py-0.5 text-[11px] font-mono tracking-wide ${st.cls}`}><span className={`size-1.5 rounded-full ${st.dot}`}/>{st[lang]||st.en}</span>
                </div>
                <h3 className="mt-4 text-base font-semibold leading-snug text-ct-indigo-900 text-balance flex-grow">{it.title}</h3>
                <p className="mt-3 text-xs font-mono tracking-wide text-gray-500">{it.owner}</p>
                {it.status !== "closed" && (
                  <a href="Pitch a Solution.html" className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{t.live.pitchCta}<Icon name="arrow-right" className="size-3.5"/></a>
                )}
              </article>
            );
          })}
        </div>
        {shown.length === 0 && <p className="mt-8 text-sm text-gray-500">{lang==="vi"?"Không có đề bài trong nhóm này.":"No challenges in this group."}</p>}
      </div>
    </section>
  );
};

const ChallengeForm = ({ F, lang }) => {
  const [v, setV] = useState({ name:"", org:"", role:"", email:"", title:"", domain:F.domains[0], owner:"", problem:"", tried:"", resources:"", conf:F.confs[0] });
  const set = (k) => (e) => setV(s => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    if (!v.name || !v.org || !v.email || !v.title) { alert(F.required); return; }
    const L = F.fields;
    const body = `${L.name}: ${v.name}\n${L.org}: ${v.org}\n${L.role}: ${v.role}\n${L.email}: ${v.email}\n${L.domain}: ${v.domain}\n${L.conf}: ${v.conf}\n\n${L.title}: ${v.title}\n${L.owner}: ${v.owner}\n\n${L.problem}:\n${v.problem}\n\n${L.tried}:\n${v.tried}\n\n${L.resources}:\n${v.resources}`;
    window.location.href = `mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent("[CT2030 Challenge] " + v.title)}&body=${encodeURIComponent(body)}`;
  };
  const input = "w-full rounded-md border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-ct-indigo-500 focus:ring-1 focus:ring-ct-indigo-500 outline-none transition";
  const label = "block text-[11px] font-mono tracking-[0.14em] uppercase text-gray-500 mb-1.5";
  const L = F.fields, H = F.hints;
  return (
    <form id="submit" onSubmit={submit} className="rounded-lg border border-gray-200 bg-white p-6 sm:p-8 scroll-mt-20">
      <SprintProgress lang={lang} active={0} caption={lang==="vi" ? "Bước 1/5 — Xác định thách thức." : "Step 1 of 5 — Define the challenge."}/>
      <FormIntro lang={lang} className="mb-5"/>
      <p className="text-sm text-gray-500 mb-6">{F.note}</p>
      <div className="rounded-md border-2 border-ct-indigo-300 bg-ct-indigo-50/40 p-5 sm:p-6">
        <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-800 mb-4">{F.step1Label}</p>
        <div className="grid gap-5 sm:grid-cols-2">
          <div><label className={label}>{L.name} *</label><input className={input} value={v.name} onChange={set("name")} required/></div>
          <div><label className={label}>{L.org} *</label><input className={input} value={v.org} onChange={set("org")} required/></div>
          <div><label className={label}>{L.email} *</label><input type="email" className={input} value={v.email} onChange={set("email")} required/></div>
          <div><label className={label}>{L.title} * <span className="text-gray-400 normal-case tracking-normal">· {H.title}</span></label><input maxLength={100} className={input} value={v.title} onChange={set("title")} required/></div>
        </div>
      </div>
      <div className="mt-5 rounded-md border border-gray-200 bg-gray-50/70 p-5 sm:p-6">
        <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500 mb-4">{F.step2Label}</p>
        <div className="grid gap-5 sm:grid-cols-2">
          <div><label className={label}>{L.role}</label><input className={input} value={v.role} onChange={set("role")}/></div>
          <div><label className={label}>{L.domain}</label><select className={input} value={v.domain} onChange={set("domain")}>{F.domains.map(d=><option key={d} value={d}>{d}</option>)}</select></div>
          <div className="sm:col-span-2"><label className={label}>{L.owner}</label><input className={input} value={v.owner} onChange={set("owner")}/></div>
          <div className="sm:col-span-2"><label className={label}>{L.problem} <span className="text-gray-400 normal-case tracking-normal">· {H.problem}</span></label><textarea rows={4} className={input} value={v.problem} onChange={set("problem")}/></div>
          <div className="sm:col-span-2"><label className={label}>{L.tried} <span className="text-gray-400 normal-case tracking-normal">· {H.tried}</span></label><textarea rows={2} className={input} value={v.tried} onChange={set("tried")}/></div>
          <div><label className={label}>{L.resources} <span className="text-gray-400 normal-case tracking-normal">· {H.resources}</span></label><input className={input} value={v.resources} onChange={set("resources")}/></div>
          <div><label className={label}>{L.conf}</label><select className={input} value={v.conf} onChange={set("conf")}>{F.confs.map(c=><option key={c} value={c}>{c}</option>)}</select></div>
        </div>
      </div>
      <button type="submit" className="mt-7 inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{F.submit}<Icon name="mail" className="size-4"/></button>
      <AfterSubmit lang={lang}/>
      <div className="mt-7 rounded-md border border-gray-200 bg-gray-50 p-5 space-y-2.5">
        <p className="text-sm leading-relaxed text-gray-600">{F.disc1}</p>
        <p className="text-sm leading-relaxed font-semibold text-ct-indigo-900">{F.disc2}</p>
      </div>
    </form>
  );
};

const AudienceTable = ({ t }) => (
  <section data-screen-label="03 Who submits what" 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="03">{t.audience.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.audience.h2}</SectionHeading>
      <p className="mt-3 max-w-3xl text-base text-gray-600 leading-relaxed">{t.audience.sub}</p>
      <div className="mt-8 grid gap-4 md:grid-cols-2">
        {t.audience.rows.map((r, i) => (
          <div key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-6">
            <p className="text-sm leading-6 text-gray-700 flex-grow">{r.who}</p>
            <div className="mt-4 flex items-center justify-between gap-3 pt-4 border-t border-gray-200/70">
              <span className="text-base font-semibold text-ct-indigo-900">{r.action}</span>
              <a href={r.href} className="inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{r.cta}<Icon name="arrow-right" className="size-3.5"/></a>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const ChallengeBook = ({ t, lang }) => (
  <section id="challenge-book" data-screen-label="02 Challenge Book" className="bg-gray-50 py-20 lg:py-24 border-y border-gray-200 scroll-mt-20">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow>{t.book.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.book.h2}</SectionHeading>
      <p className="mt-3 max-w-3xl text-base text-gray-600 leading-relaxed">{t.book.sub}</p>

      <p className="mt-10 text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-700">{t.book.examplesLabel}</p>
      <div className="mt-4 grid gap-5 lg:grid-cols-2">
        {t.book.examples.map((ex, i) => (
          <article key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-6">
            <div className="flex items-center justify-between gap-2">
              <span className={`inline-flex items-center rounded-sm border px-2 py-0.5 text-[11px] font-mono tracking-wide uppercase ${accentBadge[ex.accent]}`}>{ex.domain}</span>
              <span className="inline-flex items-center gap-1.5 rounded-sm border border-ct-gold-300 bg-ct-gold-50 px-2 py-0.5 text-[11px] font-mono tracking-wide text-ct-gold-800"><span className="size-1.5 rounded-full bg-ct-gold-500"/>{ex.status}</span>
            </div>
            <h3 className="mt-4 text-lg font-semibold leading-snug text-ct-indigo-900 text-balance">{ex.title}</h3>
            <p className="mt-3 text-xs font-mono tracking-wide text-gray-500">{t.book.ownerLabel}: {ex.owner}</p>
            <p className="mt-3 text-sm leading-6 text-gray-700">{ex.problem}</p>
            <div className="mt-4 flex-grow">
              <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-700">{t.book.lookingLabel}</p>
              <p className="mt-1 text-sm leading-6 text-gray-700">{ex.looking}</p>
            </div>
            <div className="mt-5 flex flex-wrap gap-2 pt-4 border-t border-gray-200/70">
              <a href="Pitch a Solution.html" className="inline-flex items-center gap-1.5 rounded-md bg-ct-indigo-900 px-3.5 py-2 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{t.book.cardPitch}<Icon name="arrow-right" className="size-3.5"/></a>
              <a href="Sponsor.html" className="inline-flex items-center gap-1.5 rounded-md border border-ct-indigo-900/20 px-3.5 py-2 text-sm font-medium text-ct-indigo-900 hover:bg-ct-indigo-50 transition-colors">{t.book.cardSponsor}</a>
            </div>
          </article>
        ))}
      </div>

      <div className="mt-8 rounded-lg border border-dashed border-gray-300 bg-white/60 p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <p className="text-sm text-gray-500 max-w-xl">{lang==="vi" ? "Sổ Thách thức đầy đủ tải về được sắp ra mắt, khi các thách thức đầu tiên được xác thực." : "The full downloadable Challenge Book is coming soon, once the first challenges are validated."}</p>
        <button disabled aria-disabled="true" className="shrink-0 inline-flex h-11 items-center gap-2 rounded-md border border-gray-300 bg-gray-100 px-5 text-sm font-medium text-gray-400 cursor-not-allowed"><Icon name="doc" className="size-4"/>{t.book.btn}</button>
      </div>
    </div>
  </section>
);

// -------------------- Foundation Cohort (merged value props + application form — CUT 11) --------------------
const FoundationCohort = ({ t, lang }) => (
  <section id="students" data-screen-label="05 Foundation Cohort" 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">
      <div className="grid gap-12 lg:grid-cols-2 lg:gap-16 items-start">
        <div>
          <Eyebrow className="text-ct-gold-300">{t.students.eyebrow}</Eyebrow>
          <h2 className="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl text-balance">{t.students.h2}</h2>
          <p className="mt-4 text-base leading-relaxed text-white/85">{t.students.lead}</p>
          <p className="mt-6 inline-flex items-center gap-2 rounded-md border border-ct-gold-400/40 bg-ct-gold-400/10 px-3.5 py-2 text-xs font-mono tracking-wide text-ct-gold-200"><span className="size-1.5 rounded-full bg-ct-gold-400"/>{t.students.scarcity}</p>
          <div className="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3">
            <a href="#cohort-apply" className="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">{t.students.cta}<Icon name="arrow-right" className="size-4"/></a>
            <a href="#cohort-apply" className="inline-flex items-center gap-1.5 text-sm font-medium text-ct-gold-300 hover:text-ct-gold-200">{t.students.secondary}</a>
          </div>
        </div>
        <ul className="space-y-4">
          {t.students.points.map((p, i) => (
            <li key={i} className="flex gap-3 items-start">
              <Icon name="check" className="size-5 shrink-0 text-ct-gold-400 mt-0.5"/>
              <span className="text-base leading-relaxed text-white/90">{p}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Application form — the final block of the merged section */}
      <div className="mt-14 max-w-3xl">
        <h3 className="text-2xl font-semibold tracking-tight text-white text-balance">{t.cohort.h2}</h3>
        <p className="mt-2 text-base leading-relaxed text-white/80">{t.cohort.sub}</p>
        <div className="mt-6"><TalkFirstCTA lang={lang} sideHint="vn" page="Foundation Cohort" className="mb-6"/><CohortForm C={t.cohort} lang={lang}/></div>
      </div>
    </div>
  </section>
);

const CohortForm = ({ C, lang }) => {
  const init = {}; C.spec.forEach(f => { init[f.k] = f.multi ? [] : ""; });
  const [v, setV] = useState(init);
  const set = (k) => (e) => setV(s => ({ ...s, [k]: e.target.value }));
  const toggleMulti = (k, opt) => setV(s => { const arr = s[k] || []; return { ...s, [k]: arr.includes(opt) ? arr.filter(o => o !== opt) : [...arr, opt] }; });
  const onSubmit = (e) => {
    e.preventDefault();
    const missing = C.spec.some(f => f.req && (f.multi ? !(v[f.k] || []).length : !v[f.k]));
    if (missing) { alert(C.required); return; }
    const body = C.spec.map(f => f.multi ? `${f.l}: ${(v[f.k]||[]).join(", ")}` : `${f.l}: ${v[f.k]}`).join("\n");
    window.location.href = `mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent(C.subjectPrefix + (v.name || ""))}&body=${encodeURIComponent(body)}`;
  };
  const input = "w-full rounded-md border border-gray-300 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-ct-indigo-500 focus:ring-1 focus:ring-ct-indigo-500 outline-none transition";
  const label = "block text-[11px] font-mono tracking-[0.14em] uppercase text-gray-500 mb-1.5";
  return (
    <form id="cohort-apply" onSubmit={onSubmit} className="rounded-lg border border-gray-200 bg-white p-6 sm:p-8 scroll-mt-20">
      <SprintProgress lang={lang} active={1} caption={lang==="vi" ? "Bước 2/5 — Sinh viên gia nhập pha Bố trí của một Sprint." : "Step 2 of 5 — Students join the Staff phase of a Sprint."}/>
      <p className="mb-5 inline-flex items-center gap-2 rounded-md border border-ct-gold-300 bg-ct-gold-50 px-3.5 py-2 text-xs font-mono tracking-wide text-ct-gold-800"><span className="size-1.5 rounded-full bg-ct-gold-500"/>{C.scarcity}</p>
      <p className="text-sm text-gray-500 mb-6">{C.note}</p>
      <div className="grid gap-5 sm:grid-cols-2">
        {C.spec.map(f => (
          <div key={f.k} className={f.full ? "sm:col-span-2" : ""}>
            <label className={label}>{f.l}{f.req ? " *" : ""}{f.hint && <span className="text-gray-400 normal-case tracking-normal"> · {f.hint}</span>}</label>
            {f.multi
              ? <div className="flex flex-wrap gap-2">{f.multi.map(o => { const on = (v[f.k]||[]).includes(o); return (
                  <button type="button" key={o} onClick={() => toggleMulti(f.k, o)} className={`inline-flex items-center gap-1.5 rounded-md border px-3 py-2 text-sm font-medium transition-colors ${on ? "border-ct-indigo-900 bg-ct-indigo-900 text-white" : "border-gray-300 bg-white text-gray-700 hover:border-ct-indigo-400"}`}>{on && <Icon name="check" className="size-3.5"/>}{o}</button>
                ); })}</div>
              : f.opts
                ? <select className={input} value={v[f.k]||""} onChange={set(f.k)}><option value="" disabled>{lang==="vi"?"Chọn…":"Select…"}</option>{f.opts.map(o => <option key={o} value={o}>{o}</option>)}</select>
                : f.area
                  ? <textarea rows={3} className={input} value={v[f.k]} onChange={set(f.k)}/>
                  : <input type={f.type||"text"} className={input} value={v[f.k]} onChange={set(f.k)} required={f.req}/>}
          </div>
        ))}
      </div>
      <button type="submit" className="mt-7 inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{C.submit}<Icon name="mail" className="size-4"/></button>
      <AfterSubmit lang={lang}/>
    </form>
  );
};

// -------------------- (Standalone Cohort application merged into FoundationCohort — CUT 11) --------------------

const Faculty = ({ t, lang }) => (
  <section id="faculty" data-screen-label="For faculty leads" className="bg-white py-20 lg:py-24 border-b border-gray-200 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>{t.faculty.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{t.faculty.h2}</SectionHeading>
        <p className="mt-4 text-base leading-relaxed text-gray-700">{t.faculty.body}</p>
        <div className="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3">
          <a href={`mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent(t.faculty.subject)}`} className="inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{t.faculty.cta}<Icon name="arrow-right" className="size-4"/></a>
          <a href={`mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent(t.faculty.secondarySubject)}`} className="inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{t.faculty.secondary}</a>
        </div>
      </div>
      <dl className="grid gap-px rounded-lg overflow-hidden border border-gray-200 bg-gray-200 lg:mt-2">
        {t.faculty.facts.map((f, i) => (
          <div key={i} className="bg-white p-6">
            <dt className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-700">{f.k}</dt>
            <dd className="mt-2 text-base font-medium text-ct-indigo-900 leading-snug">{f.v}</dd>
          </div>
        ))}
      </dl>
    </div>
  </section>
);

const Community = ({ t, lang }) => (
  <section id="community" data-screen-label="For community & residents" className="bg-gray-50 py-20 lg:py-24 border-b border-gray-200 scroll-mt-20">
    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
      <Eyebrow>{t.community.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.community.h2}</SectionHeading>
      <p className="mt-4 text-base leading-relaxed text-gray-700">{t.community.body}</p>
      <div className="mt-6 flex items-start gap-3 rounded-md border border-ct-gold-300 bg-ct-gold-50/70 px-4 py-3.5">
        <span className="mt-0.5 inline-flex size-6 shrink-0 items-center justify-center rounded-md bg-ct-gold-100 text-ct-gold-800 font-semibold text-sm">!</span>
        <p className="text-sm leading-6 text-ct-gold-900"><span className="font-semibold">{lang==="vi"?"Lưu ý:":"Please note:"}</span> {t.community.guardrail}</p>
      </div>
      <div className="mt-7 flex flex-wrap items-center gap-x-6 gap-y-3">
        <a href={`mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent(t.community.subject)}`} className="inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{t.community.cta}<Icon name="arrow-right" className="size-4"/></a>
        <a href={`mailto:${INTAKE_EMAIL}?subject=${encodeURIComponent(t.community.secondarySubject)}`} className="inline-flex items-center gap-1.5 text-sm font-medium text-ct-indigo-900 hover:gap-2.5 transition-all">{t.community.secondary}</a>
      </div>
    </div>
  </section>
);

const TweaksMount = ({ tweaks, 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);
  const formCopy = { ...t.form, disc1: t.disclaimer1, disc2: t.disclaimer2 };

  return (
    <>
      <Header lang={lang} setLang={setLang} current="Challenges.html"/>
      <Hero t={t}/>
      <ThreeCta t={t}/>
      <WhyBother eyebrow={t.whyBother.eyebrow} tone="gray">{t.whyBother.body}</WhyBother>
      <Live t={t} lang={lang}/>
      <ChallengeBook t={t} lang={lang}/>
      <Loop t={t}/>
      <AudienceTable t={t}/>
      <section data-screen-label="04 Submit form" className="bg-white py-20 lg:py-24">
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
          <Eyebrow n="04">{t.form.eyebrow}</Eyebrow>
          <SectionHeading className="mt-4">{t.form.h2}</SectionHeading>
          <div className="mt-8 rounded-lg border border-ct-green-200 bg-ct-green-50/50 p-6">
            <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-green-800">{t.examples.label}</p>
            <ul className="mt-4 space-y-3">
              {t.examples.items.map((ex, i) => (
                <li key={i} className="flex gap-3 items-start text-sm leading-6 text-gray-700">
                  <span className="mt-2 size-1.5 shrink-0 rounded-full bg-ct-green-600"/>
                  <span className="italic">“{ex}”</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="mt-6"><IPSafetyBadge lang={lang} formType="challenge"/></div>
          <div className="mt-4"><TalkFirstCTA lang={lang} sideHint="vn" page="Submit a Challenge"/></div>
          <div className="mt-6"><ChallengeForm F={formCopy} lang={lang}/></div>
        </div>
      </section>
      <FoundationCohort t={t} lang={lang}/>
      <Faculty t={t} lang={lang}/>
      <Community t={t} lang={lang}/>
      <section data-screen-label="06 Pitch CTA" className="bg-gray-50 py-16 lg:py-20 border-y border-gray-200">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-6">
          <div className="max-w-2xl">
            <h2 className="text-2xl font-semibold tracking-tight text-ct-indigo-900">{t.pitchSide.h}</h2>
            <p className="mt-2 text-gray-600 leading-relaxed">{t.pitchSide.sub}</p>
          </div>
          <a href="Pitch a Solution.html" className="shrink-0 inline-flex h-11 items-center gap-2 rounded-md bg-ct-indigo-900 px-5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">{t.pitchSide.cta}<Icon name="arrow-right" className="size-4"/></a>
        </div>
      </section>
      <Footer lang={lang}/>
      <TweaksMount tweaks={tweaks} setLang={setLang}/>
    </>
  );
};

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