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

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

const EMAIL = "hello@cantho2030.com";

// =====================================================================
// Sponsor — conversion. Tiers, what you receive, 3-step path, contacts.
// =====================================================================
const COPY = {
  en: {
    eyebrow: "Sponsor the programme",
    h1: "Sponsor a challenge. Host a pilot. Provide industry expertise support.",
    lede: "Project Cần Thơ 2030 is operated by The Improbability Company (TIC), with CICT as the institutional partner inside Cần Thơ University. There are five named ways to sponsor — most start with a single challenge.",
    whyBother: {
      eyebrow: "Why sponsor a Sprint or the Forum",
      body: "Sponsoring the Cần Thơ 2030 Innovation Forum buys placement on the Forum stage, association with a named challenge or vertical track, deployment access to the Foundation Cohort, and visibility across the two-day innovation forum. Sponsorship is structured around activities — Anchor Sponsor, Track Sponsor, Showcase Partner, Challenge Sponsor, In-kind Partner — not status badges. You sponsor an outcome, not a logo wall.",
    },
    forumPlacementLabel: "Forum placement",
    bespoke: "Bespoke sponsorship packages available — speak to us.",
    ctaPrimary: "Talk to us about sponsoring",
    ctaNote: "Two low-commitment first steps — book a 15-min scoping call, or request the prospectus. No commitment.",
    safetyLine: "CICT is not responsible for sponsor revenue. Sponsorship is coordinated by TIC, with CICT supporting introductions only where appropriate.",
    claimNote: "Partners are labelled honestly by engagement status. Any public use of CICT's name or logo will be reviewed by CICT before release.",
    wayfinding: {
      label: "Three ways to back the programme",
      scopingCall: "Book a 15-min scoping call",
      items: [
        { id: "sponsor", label: "Sponsor a challenge" },
        { id: "showcase", label: "Showcase booths" },
        { id: "host", label: "Host a pilot" },
        { id: "investor", label: "Register as an Investor Observer" },
      ],
    },
    why: {
      eyebrow: "Why sponsor",
      h2: "What sponsorship buys",
      cards: [
        { title: "An institutional partner", body: "Your support sits behind a Vietnamese university programme — CICT is the institutional partner inside Cần Thơ University, not a pop-up event." },
        { title: "Deployable output", body: "Sprints produce both public-good research and commercial products, not just reports." },
        { title: "A curated room", body: "The Innovation Forum puts you in front of 150 curated guests across government, enterprise, and investment." },
      ],
    },
    tiersLabel: { eyebrow: "Ways to sponsor", h2: "Five sponsor tiers, six track sponsorships", subhead: "Anchor · Track · Showcase Partner · Challenge Sponsor · In-kind. Sponsors back the Innovation Forum, a vertical track, a curated booth, or one Mekong Delta challenge — not a generic conference. Reviewed for track fit, relevance, and contribution to the Cần Thơ 2030 themes.", note: "The named role leads — tiers are a starting point for a conversation. Booth pricing and any partner fees are confirmed once the tier model locks." },
    trackVsChallenge: {
      label: "Track Sponsor vs Challenge Sponsor",
      intro: "Two different products — buy either, or both together.",
      cols: [
        { name: "Track Sponsor", buy: "Visibility and sector authority across one vertical, for the duration of the Forum.", rofr: "No pilot right of first refusal — track ownership is not pilot ownership." },
        { name: "Challenge Sponsor", buy: "R&D investment and pilot execution on a specific challenge.", rofr: "Pilot pathway by default — Challenge Sponsors get the pilot route." },
      ],
      combine: "A single sponsor can buy both — e.g. the RegTech Track plus a specific compliance challenge inside RegTech.",
    },
    tiers: (window.CT_TIERS && window.CT_TIERS.en) || [
      { name: "Challenge Sponsor", tone: "indigo", featured: true, covers: "Fund one 90-day Sprint on a named challenge", amount: "\n" },
      { name: "Industry Partner", tone: "gold", covers: "Local know how, Niche Industry, Agriculture, aquiculture mentoring", amount: "In-kind" },
      { name: "Pilot Host", tone: "green", covers: "Host a pilot deployment at your premises or supply chain", amount: "In-kind + pilot cost" },
      { name: "Forum Sponsor", tone: "gold", covers: "Anchor or contribute to the Sep/Oct Innovation Forum", amount: "\n" },
      { name: "In-kind Partner", tone: "neutral", covers: "Venue, logistics, media or translation", amount: "Non-cash" },
    ],
    showcase: {
      eyebrow: "Showcase Partners",
      h2: "Up to 25 curated booths across two days",
      intro: "Booths are reviewed against track fit, relevance, and contribution to the Cần Thơ 2030 themes, curated by the Cần Thơ 2030 partner committee. The Showcase Partner tier is the expo layer of the Forum — a branded booth across Day 1 and Day 2, delegate access, a listing in the Forum guide, eligibility for B2B matching sessions, and sectoral grouping by track.",
      states: {
        confirmed: { label: "Confirmed", note: "Signed or operating partners." },
        invited: { label: "Invited", note: "Invited — names reflect engagement status; logos shown only after each partner signs off." },
        target: { label: "Target", note: "Outreach in progress — to be announced." },
      },
      applyCta: "Apply for a Showcase Booth",
      apply: {
        eyebrow: "Expression of interest",
        h2: "Express interest in a Showcase Booth",
        intro: "Tell us where you'd fit. This is an expression of interest, not a binding application — we'll follow up with full programme details, confidentiality terms, and a partner agreement if there's a fit.",
        spec: [
          { k: "name", l: "Name", req: true },
          { k: "org", l: "Organisation", req: true },
          { k: "email", l: "Email", req: true, type: "email" },
          { k: "track", l: "Track", opts: ["RegTech", "ClimateTech", "AquaTech", "AgriTech", "Renewables", "Education", "Finance", "Digital", "Hospitality", "Industrial", "Other"], full: true },
          { k: "pitch", l: "Two-sentence pitch — what your organisation would showcase at the Forum", area: true, full: true },
        ],
        submit: "Open email to send EOI",
        required: "Name, organisation and email are required.",
        subject: "[CT2030 Innovation Forum — Showcase EOI]",
        disc1: "Up to 25 curated showcase partners. EOIs are reviewed for track fit, relevance, and contribution to the Cần Thơ 2030 themes. We'll respond within 5 working days, and follow up with full programme details, confidentiality terms, and a partner agreement if there's a fit.",
        disc2: "This is an expression of interest only — please share non-confidential information at this stage.",
      },
    },
    receive: {
      eyebrow: "Included at every tier",
      h2: "What every sponsor gets",
      items: ["Honest attribution at your actual level of support", "Access to Sprint outputs and programme briefings", "Introductions curated by TIC and CICT", "A seat in the Innovation Forum room", "Recognition reviewed with CICT before any public release"],
    },
    whatReceive: {
      eyebrow: "What sponsors receive",
      h2: "Value before price",
      lead: "Across every tier, sponsorship buys association and access — not just a logo placement.",
      items: [
        "Challenge association — your name behind a named brief",
        "CICT student & faculty engagement",
        "Curated B2B meetings at the Innovation Forum",
        "Branded presence — logo, panel slot, or session sponsorship by tier",
        "Early access to pilot pathways and follow-on incubator placements",
      ],
      note: "Sponsorship is coordinated by TIC. CICT may support introductions where appropriate but is not responsible for sponsor revenue.",
    },
    host: {
      eyebrow: "Host a pilot",
      h2: "Gain early access to deployable innovation",
      intro: "Be the first to validate Mekong-context solutions on your site. Selected solutions need real places to run — hosting may support a 90-day validation sprint, pilot-design process, or controlled test environment, selected by CICT and TIC from incoming solutions matched to your sector.",
      reframeTitle: "Hosting is flexible — and does not automatically mean installing equipment.",
      reframe: "Hosting may mean: site interviews, controlled observation, non-sensitive data sharing, pilot design workshops, or a controlled test of a deployable solution. The scope is co-designed between you, CICT, and TIC before any commitment.",
      cols: [
        { label: "Who hosts", items: ["SMEs", "Hotels", "Farms", "Factories", "Public-sector departments", "Households (Residential ClimateTech)"] },
        { label: "What hosting involves", items: ["A 90-day pilot deployment", "A CICT student + faculty team", "TIC technical supervision"] },
        { label: "What hosts receive", items: ["First-mover access to validated solutions", "Co-branding with the programme", "Placement in the Innovation Forum showcase"] },
      ],
      formTitle: "Host-a-Pilot intake",
      note: "This opens your email client with the details pre-filled — no account needed.",
      spec: [
        { k:"name", l:"Name", req:true },
        { k:"org", l:"Organisation", req:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"sector", l:"Sector" },
        { k:"location", l:"Location" },
        { k:"env", l:"Type of environment", full:true },
        { k:"hosting", l:"What kind of hosting fits", multi:["Site interviews","Pilot design only","Limited deployment","Full deployment"], full:true },
        { k:"domain", l:"Domain interest", opts:["Enterprise RegTech","Residential / SME ClimateTech","Mekong energy & grid","AgriTech / AquaTech","Other"] },
        { k:"duration", l:"Pilot duration appetite", opts:["~30 days","~60 days","Full 90-day Sprint","Flexible"] },
        { k:"nondisrupt", l:"Strict operational non-disruption required", check:true, full:true },
        { k:"conf", l:"Confidentiality posture", opts:["Open for public discussion","Limited disclosure","Confidential (do not submit here)"], full:true },
      ],
      submit: "Open email to submit",
      required: "Name, organisation and email are required.",
      subject: "[CT2030 Pilot Host] enquiry",
    },
    investor: {
      eyebrow: "Investor Observer",
      h2: "Early visibility on validated challenges and pilots",
      intro: "Early visibility on validated Cần Thơ 2030 challenges, the startups solving them, and pilot candidates ready for next-stage funding. Ecosystem access only — not a financial product, not investment advice.",
      receiveLabel: "What investors receive",
      receive: ["Pre-Launch-Forum briefings", "Curated startup introductions", "Pilot-ready candidates", "A Innovation Forum observer / co-host invitation"],
      notLabel: "What we do not offer",
      not: ["Investment products", "Returns guarantees", "Investment advice"],
      formTitle: "Register as an Investor Observer",
      note: "This opens your email client with the details pre-filled — no account needed.",
      spec: [
        { k:"name", l:"Name", req:true },
        { k:"fund", l:"Fund / firm", req:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"sectors", l:"Sectors of Interest", multi:["RegTech","ClimateTech","Energy / Grid","AgriTech / AquaTech","Other"], full:true },
      ],
      submit: "Open email to register",
      required: "Name, fund/firm and email are required.",
      subject: "[CT2030 Investor Observer] registration",
      financialLine: "Project Cần Thơ 2030 is not a financial product, regulated investment vehicle, or licensed adviser. Registration is for ecosystem introduction only.",
      whatNext: {
        label: "What happens next",
        items: ["Curated monthly updates", "Challenge Book preview when CICT validates the first round", "Forum invitation as observer or co-host", "Curated startup introductions on request"],
      },
    },
    formDisc1: "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.",
    formDisc2: "Do not submit confidential, personal, sensitive or commercially restricted information through this public form.",
    path: {
      eyebrow: "How it works",
      h2: "Three steps to sponsor",
      steps: [
        { n: "1", title: "Express interest", body: "Email us with the pillar, stream, or Sprint you're interested in. No commitment." },
        { n: "2", title: "Scope the fit", body: "We shape the right tier and contribution with you, alongside CICT where relevant." },
        { n: "3", title: "Confirm", body: "We confirm attribution, Forum role, and timing — reviewed with CICT before release." },
      ],
    },
    contacts: {
      eyebrow: "Contacts",
      h2: "Who to talk to",
      people: [
        { name: "Oz Omegna", role: "Australia Lead", line: "Sponsor and partner conversations across Australia." },
        { name: "Anh Phan", role: "CT2030 Project Lead", line: "Main CICT liaison; programme delivery in Cần Thơ." },
      ],
      emailLabel: "Email the team",
    },
    disclaimer: "The sponsorship programme is being developed by TIC. CICT may introduce Vietnamese sponsors where appropriate but is not responsible for sponsor revenue.",
    labels: { perTier: "By tier", contact: "Contact us", scoping: "Book a 15-min call" },
  },
  vi: {
    eyebrow: "Tài trợ chương trình",
    h1: "Tài trợ một thách thức. Hỗ trợ một nhóm sinh viên. Chủ trì một thí điểm. Cung cấp hỗ trợ kỹ thuật.",
    lede: "Dự án Cần Thơ 2030 do The Improbability Company (TIC) vận hành, với CICT là đối tác thể chế trong Đại học Cần Thơ. Có năm cách tài trợ có tên gọi — phần lớn bắt đầu từ một thách thức.",
    whyBother: {
      eyebrow: "Vì sao tài trợ một Sprint hoặc Diễn đàn",
      body: "Tài trợ Diễn đàn Đổi mới Sáng tạo Cần Thơ 2030 mua vị trí trên sân khấu Diễn đàn, sự gắn kết với một thách thức hoặc lĩnh vực dọc cụ thể, quyền triển khai cùng Foundation Cohort, và hiện diện xuyên suốt hội nghị song phương hai ngày. Tài trợ được cấu trúc quanh các hoạt động — Nhà tài trợ Chủ lực, Nhà tài trợ Lĩnh vực, Đối tác Trưng bày, Nhà tài trợ Thách thức, Đối tác Hiện vật — không phải huy hiệu vị thế. Bạn tài trợ một kết quả, không phải một bức tường logo.",
    },
    forumPlacementLabel: "Vị trí tại Diễn đàn",
    bespoke: "Có các gói tài trợ thiết kế riêng — hãy trao đổi với chúng tôi.",
    ctaPrimary: "Trao đổi về tài trợ",
    ctaNote: "Hai bước đầu nhẹ nhàng — đặt lịch gọi tư vấn 15 phút, hoặc yêu cầu hồ sơ. Không ràng buộc.",
    safetyLine: "CICT không chịu trách nhiệm về doanh thu tài trợ. Việc tài trợ do TIC điều phối, CICT chỉ hỗ trợ giới thiệu khi phù hợp.",
    claimNote: "Các đối tác được ghi nhận trung thực theo mức độ hợp tác. Mọi việc sử dụng công khai tên hoặc logo của CICT sẽ được CICT rà soát trước khi công bố.",
    wayfinding: {
      label: "Ba cách hậu thuẫn chương trình",
      scopingCall: "Đặt lịch gọi tư vấn 15 phút",
      items: [
        { id: "sponsor", label: "Tài trợ một thách thức" },
        { id: "showcase", label: "Gian trưng bày" },
        { id: "host", label: "Chủ trì thí điểm" },
        { id: "investor", label: "Đăng ký làm Nhà đầu tư Quan sát" },
      ],
    },
    why: {
      eyebrow: "Vì sao tài trợ",
      h2: "Tài trợ mang lại gì",
      cards: [
        { title: "Một đối tác thể chế", body: "Sự hỗ trợ của bạn đứng sau một chương trình đại học Việt Nam — CICT là đối tác thể chế trong Đại học Cần Thơ, không phải một sự kiện chớp nhoáng." },
        { title: "Sản phẩm triển khai được", body: "Các Sprint tạo ra cả nghiên cứu vì lợi ích công lẫn sản phẩm thương mại, không chỉ báo cáo." },
        { title: "Một phòng họp tuyển chọn", body: "Diễn đàn Đổi mới Sáng tạo đưa bạn tới trước 150 khách mời tuyển chọn từ chính quyền, doanh nghiệp và đầu tư." },
      ],
    },
    tiersLabel: { eyebrow: "Cách tài trợ", h2: "Năm hạng tài trợ, sáu lĩnh vực", subhead: "Chủ lực · Lĩnh vực · Đối tác Trưng bày · Nhà tài trợ Thách thức · Hiện vật. Nhà tài trợ hậu thuẫn Diễn đàn Đổi mới Sáng tạo, một lĩnh vực dọc, một gian trưng bày tuyển chọn, hoặc một thách thức ĐBSCL — không phải hội nghị chung chung. Được rà soát theo độ phù hợp lĩnh vực, mức liên quan và đóng góp cho các chủ đề Cần Thơ 2030.", note: "Vai trò có tên dẫn đầu — các hạng là điểm khởi đầu cho một cuộc trao đổi. Giá gian và phí đối tác (nếu có) sẽ được xác nhận khi mô hình hạng được chốt." },
    trackVsChallenge: {
      label: "Nhà tài trợ Lĩnh vực vs Nhà tài trợ Thách thức",
      intro: "Hai sản phẩm khác nhau — mua một trong hai, hoặc cả hai cùng lúc.",
      cols: [
        { name: "Nhà tài trợ Lĩnh vực", buy: "Hiện diện và uy tín ngành trên một lĩnh vực dọc, suốt thời gian Diễn đàn.", rofr: "Không có quyền ưu tiên thí điểm — sở hữu lĩnh vực không phải sở hữu thí điểm." },
        { name: "Nhà tài trợ Thách thức", buy: "Đầu tư R&D và triển khai thí điểm trên một thách thức cụ thể.", rofr: "Lộ trình thí điểm mặc định — Nhà tài trợ Thách thức có đường vào thí điểm." },
      ],
      combine: "Một nhà tài trợ có thể mua cả hai — ví dụ Lĩnh vực RegTech cộng một thách thức tuân thủ cụ thể trong RegTech.",
    },
    tiers: (window.CT_TIERS && window.CT_TIERS.vi) || [
      { name: "Nhà tài trợ Thách thức", tone: "indigo", featured: true, covers: "Tài trợ một Sprint 90 ngày cho một thách thức cụ thể", amount: "AUD 5.000 – 10.000" },
      { name: "Đối tác Kỹ thuật", tone: "gold", covers: "Phần mềm, đám mây, phương pháp hoặc cố vấn", amount: "Hiện vật" },
      { name: "Đơn vị Chủ trì Thí điểm", tone: "green", covers: "Chủ trì triển khai thí điểm tại cơ sở hoặc chuỗi cung ứng của bạn", amount: "Hiện vật + chi phí thí điểm" },
      { name: "Nhà tài trợ Diễn đàn", tone: "gold", covers: "Chủ trì hoặc đóng góp cho Diễn đàn Đổi mới Sáng tạo tháng 9/10", amount: "AUD 5.000 – 20.000 theo hạng" },
      { name: "Đối tác Hiện vật", tone: "neutral", covers: "Địa điểm, hậu cần, truyền thông hoặc biên dịch", amount: "Phi tiền mặt" },
    ],
    showcase: {
      eyebrow: "Đối tác Trưng bày",
      h2: "Tối đa 25 gian trưng bày tuyển chọn trong hai ngày",
      intro: "Các gian được rà soát theo độ phù hợp lĩnh vực, mức liên quan và đóng góp cho các chủ đề Cần Thơ 2030, do hội đồng đối tác Cần Thơ 2030 tuyển chọn. Hạng Đối tác Trưng bày là lớp triển lãm của Diễn đàn — gian thương hiệu suốt Ngày 1 và Ngày 2, quyền tham dự đại biểu, có tên trong cẩm nang Diễn đàn, đủ điều kiện các phiên kết nối B2B, và phân nhóm theo lĩnh vực.",
      states: {
        confirmed: { label: "Đã xác nhận", note: "Đối tác đã ký kết hoặc đang vận hành." },
        invited: { label: "Đã mời", note: "Đã mời — tên phản ánh mức độ hợp tác; logo chỉ hiển thị sau khi từng đối tác phê duyệt." },
        target: { label: "Mục tiêu", note: "Đang xúc tiến — sẽ công bố." },
      },
      applyCta: "Đăng ký gian Trưng bày",
      apply: {
        eyebrow: "Bày tỏ quan tâm",
        h2: "Bày tỏ quan tâm gian Trưng bày",
        intro: "Cho chúng tôi biết bạn phù hợp ở đâu. Đây là bày tỏ quan tâm, không phải đơn ràng buộc — chúng tôi sẽ theo dõi với thông tin chương trình đầy đủ, điều khoản bảo mật và thỏa thuận đối tác nếu phù hợp.",
        spec: [
          { k: "name", l: "Họ tên", req: true },
          { k: "org", l: "Tổ chức", req: true },
          { k: "email", l: "Email", req: true, type: "email" },
          { k: "track", l: "Lĩnh vực", opts: ["RegTech", "ClimateTech", "AquaTech", "AgriTech", "Năng lượng tái tạo", "Giáo dục", "Tài chính", "Số", "Lưu trú", "Công nghiệp", "Khác"], full: true },
          { k: "pitch", l: "Pitch hai câu — tổ chức của bạn sẽ trưng bày gì tại Diễn đàn", area: true, full: true },
        ],
        submit: "Mở email để gửi EOI",
        required: "Họ tên, tổ chức và email là bắt buộc.",
        subject: "[CT2030 Innovation Forum — Showcase EOI]",
        disc1: "Tối đa 25 đối tác trưng bày tuyển chọn. Các EOI được rà soát theo độ phù hợp lĩnh vực, mức liên quan và đóng góp cho các chủ đề Cần Thơ 2030. Chúng tôi phản hồi trong vòng 5 ngày làm việc, và theo dõi với thông tin chương trình đầy đủ, điều khoản bảo mật và thỏa thuận đối tác nếu phù hợp.",
        disc2: "Đây chỉ là bày tỏ quan tâm — vui lòng chia sẻ thông tin không bảo mật ở giai đoạn này.",
      },
    },
    receive: {
      eyebrow: "Bao gồm ở mọi hạng",
      h2: "Mọi nhà tài trợ đều nhận",
      items: ["Ghi nhận trung thực đúng mức độ hỗ trợ của bạn", "Tiếp cận kết quả Sprint và báo cáo chương trình", "Kết nối do TIC và CICT tuyển chọn", "Một chỗ ngồi tại Diễn đàn Đổi mới Sáng tạo", "Ghi nhận được rà soát với CICT trước khi công bố"],
    },
    whatReceive: {
      eyebrow: "Nhà tài trợ nhận được gì",
      h2: "Giá trị trước giá cả",
      lead: "Ở mọi hạng, tài trợ mua sự gắn kết và tiếp cận — không chỉ là đặt logo.",
      items: [
        "Gắn tên với thách thức — tên bạn đứng sau một đề bài cụ thể",
        "Gắn kết với sinh viên & giảng viên CICT",
        "Các cuộc gặp B2B tuyển chọn tại Diễn đàn Đổi mới Sáng tạo",
        "Hiện diện thương hiệu — logo, suất tọa đàm, hoặc tài trợ phiên theo hạng",
        "Tiếp cận sớm các lộ trình thí điểm và suất vườn ươm tiếp theo",
      ],
      note: "Việc tài trợ do TIC điều phối. CICT có thể hỗ trợ giới thiệu khi phù hợp nhưng không chịu trách nhiệm về doanh thu tài trợ.",
    },
    host: {
      eyebrow: "Chủ trì thí điểm",
      h2: "Tiếp cận sớm các giải pháp triển khai được",
      reframeTitle: "Chủ trì rất linh hoạt — và không tự động đồng nghĩa với việc lắp đặt thiết bị.",
      reframe: "Chủ trì có thể là: phỏng vấn tại cơ sở, quan sát có kiểm soát, chia sẻ dữ liệu không nhạy cảm, hội thảo thiết kế thí điểm, hoặc một thử nghiệm có kiểm soát của một giải pháp triển khai được. Phạm vi được cùng thiết kế giữa bạn, CICT và TIC trước mọi cam kết.",
      intro: "Hãy là đơn vị đầu tiên xác thực các giải pháp phù hợp bối cảnh Mekong tại cơ sở của bạn. Các giải pháp được chọn cần nơi thực tế để vận hành — chủ trì có thể hỗ trợ một sprint xác thực 90 ngày, quy trình thiết kế thí điểm, hoặc một môi trường thử nghiệm có kiểm soát, do CICT và TIC chọn từ các giải pháp phù hợp với lĩnh vực của bạn.",
      cols: [
        { label: "Ai chủ trì", items: ["Doanh nghiệp nhỏ (SME)", "Khách sạn", "Nông trại", "Nhà máy", "Cơ quan công lập", "Hộ gia đình (ClimateTech)"] },
        { label: "Chủ trì gồm những gì", items: ["Một thí điểm 90 ngày", "Một đội sinh viên + giảng viên CICT", "Giám sát kỹ thuật của TIC"] },
        { label: "Đơn vị chủ trì nhận được", items: ["Tiếp cận sớm các giải pháp đã xác thực", "Đồng thương hiệu cùng chương trình", "Một chỗ trong phần trình diễn tại Diễn đàn Đổi mới Sáng tạo"] },
      ],
      formTitle: "Đăng ký Chủ trì thí điểm",
      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:"org", l:"Tổ chức", req:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"sector", l:"Lĩnh vực" },
        { k:"location", l:"Địa điểm" },
        { k:"env", l:"Loại môi trường", full:true },
        { k:"hosting", l:"Hình thức chủ trì phù hợp", multi:["Phỏng vấn tại cơ sở","Chỉ thiết kế thí điểm","Triển khai hạn chế","Triển khai đầy đủ"], full:true },
        { k:"domain", l:"Lĩnh vực quan tâm", opts:["Enterprise RegTech","Residential / SME ClimateTech","Mekong energy & grid","AgriTech / AquaTech","Khác"] },
        { k:"duration", l:"Thời lượng thí điểm mong muốn", opts:["~30 ngày","~60 ngày","Sprint 90 ngày đầy đủ","Linh hoạt"] },
        { k:"nondisrupt", l:"Yêu cầu không gián đoạn vận hành nghiêm ngặt", check:true, full:true },
        { k:"conf", l:"Mức độ bảo mật", opts:["Mở để thảo luận công khai","Tiết lộ hạn chế","Bảo mật (đừng gửi tại đây)"], full:true },
      ],
      submit: "Mở email để gửi",
      required: "Tên, tổ chức và email là bắt buộc.",
      subject: "[CT2030 Pilot Host] yêu cầu",
    },
    investor: {
      eyebrow: "Nhà đầu tư Quan sát",
      h2: "Hiển thị sớm các thách thức và thí điểm đã xác thực",
      intro: "Hiển thị sớm các thách thức Cần Thơ 2030 đã xác thực, các startup đang giải chúng, và các ứng viên thí điểm sẵn sàng cho vòng vốn tiếp theo. Chỉ tiếp cận hệ sinh thái — không phải sản phẩm tài chính, không phải tư vấn đầu tư.",
      receiveLabel: "Nhà đầu tư nhận được",
      receive: ["Báo cáo trước Diễn đàn Đổi mới Sáng tạo", "Kết nối startup được tuyển chọn", "Ứng viên sẵn sàng thí điểm", "Lời mời quan sát / đồng tổ chức Diễn đàn"],
      notLabel: "Chúng tôi không cung cấp",
      not: ["Sản phẩm đầu tư", "Bảo đảm lợi nhuận", "Tư vấn đầu tư"],
      formTitle: "Đăng ký làm Nhà đầu tư Quan sát",
      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:"fund", l:"Quỹ / công ty", req:true },
        { k:"email", l:"Email", req:true, type:"email" },
        { k:"sectors", l:"Lĩnh vực quan tâm", multi:["RegTech","ClimateTech","Năng lượng / Lưới","AgriTech / AquaTech","Khác"], full:true },
      ],
      submit: "Mở email để đăng ký",
      required: "Tên, quỹ/công ty và email là bắt buộc.",
      subject: "[CT2030 Investor Observer] đăng ký",
      financialLine: "Dự án Cần Thơ 2030 không phải là sản phẩm tài chính, phương tiện đầu tư được quản lý, hay đơn vị tư vấn được cấp phép. Việc đăng ký chỉ nhằm kết nối hệ sinh thái.",
      whatNext: {
        label: "Tiếp theo là gì",
        items: ["Cập nhật hàng tháng được tuyển chọn", "Xem trước Sổ Thách thức khi CICT xác thực vòng đầu", "Lời mời Diễn đàn với vai trò quan sát hoặc đồng tổ chức", "Kết nối startup được tuyển chọn theo yêu cầu"],
      },
    },
    formDisc1: "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.",
    formDisc2: "Đừ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.",
    path: {
      eyebrow: "Cách thực hiện",
      h2: "Ba bước để tài trợ",
      steps: [
        { n: "1", title: "Bày tỏ quan tâm", body: "Gửi email cho chúng tôi về trụ cột, luồng hoặc Sprint bạn quan tâm. Không ràng buộc." },
        { n: "2", title: "Định hình phương án", body: "Chúng tôi cùng bạn định hình hạng và đóng góp phù hợp, cùng CICT khi liên quan." },
        { n: "3", title: "Xác nhận", body: "Chúng tôi xác nhận ghi nhận, vai trò Diễn đàn và thời gian — rà soát với CICT trước khi công bố." },
      ],
    },
    contacts: {
      eyebrow: "Đầu mối",
      h2: "Liên hệ với ai",
      people: [
        { name: "Oz Omegna", role: "Phụ trách Úc", line: "Trao đổi với nhà tài trợ và đối tác tại Úc." },
        { name: "Anh Phan", role: "Trưởng dự án CT2030", line: "Đầu mối chính với CICT; triển khai chương trình tại Cần Thơ." },
      ],
      emailLabel: "Gửi email cho nhóm",
    },
    disclaimer: "Chương trình tài trợ đang được TIC xây dựng. CICT có thể giới thiệu nhà tài trợ Việt Nam khi phù hợp nhưng không chịu trách nhiệm về doanh thu tài trợ.",
    labels: { perTier: "Theo hạng", contact: "Liên hệ", scoping: "Đặt lịch gọi 15 phút" },
  },
};

const tierTone = {
  indigo:  { card: "border-ct-indigo-300 bg-ct-indigo-900 text-white", name: "text-white", blurb: "text-ct-gold-300", check: "text-ct-gold-400", item: "text-white/85", btn: "bg-ct-gold-400 text-ct-indigo-900 hover:bg-ct-gold-300" },
  gold:    { card: "border-ct-gold-300 bg-white", name: "text-ct-gold-900", blurb: "text-ct-gold-700", check: "text-ct-gold-600", item: "text-gray-700", btn: "border border-ct-indigo-900/20 text-ct-indigo-900 hover:bg-ct-indigo-900 hover:text-white" },
  green:   { card: "border-ct-green-200 bg-white", name: "text-ct-green-800", blurb: "text-ct-green-700", check: "text-ct-green-600", item: "text-gray-700", btn: "border border-ct-indigo-900/20 text-ct-indigo-900 hover:bg-ct-indigo-900 hover:text-white" },
  neutral: { card: "border-gray-200 bg-gray-50", name: "text-ct-indigo-900", blurb: "text-gray-500", check: "text-gray-400", item: "text-gray-700", btn: "border border-ct-indigo-900/20 text-ct-indigo-900 hover:bg-ct-indigo-900 hover:text-white" },
};

const Wayfinding = ({ t }) => {
  const [active, setActive] = useState("sponsor");
  useEffect(() => {
    const ids = t.wayfinding.items.map(i => i.id);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActive(e.target.id); });
    }, { rootMargin: "-45% 0px -50% 0px" });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []); // eslint-disable-line
  return (
    <section data-screen-label="Wayfinding" className="sticky top-16 z-30 bg-white/95 backdrop-blur border-b border-gray-200">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-3 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6">
        <span className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-400 shrink-0">{t.wayfinding.label}</span>
        <div className="flex flex-wrap items-center gap-x-6 gap-y-1.5">
          {t.wayfinding.items.map(it => (
            <a key={it.id} href={`#${it.id}`} className={`inline-flex items-center gap-2 text-sm font-medium transition-colors ${active === it.id ? "text-ct-indigo-900" : "text-gray-500 hover:text-ct-indigo-900"}`}>
              <span className={`size-1.5 rounded-full transition-colors ${active === it.id ? "bg-ct-gold-500" : "bg-gray-300"}`}/>{it.label}
            </a>
          ))}
        </div>
        <a href={`mailto:${EMAIL}?subject=${encodeURIComponent("[CT2030 Sponsor] 15-min scoping call")}`} className="sm:ml-auto shrink-0 inline-flex h-9 items-center justify-center gap-1.5 rounded-md bg-ct-indigo-900 px-3.5 text-sm font-medium text-white hover:bg-ct-indigo-800 transition-colors">
          {t.wayfinding.scopingCall}<Icon name="arrow-right" className="size-3.5"/>
        </a>
      </div>
    </section>
  );
};

const Hero = ({ t }) => (
  <section data-screen-label="00 Sponsor hero" className="relative overflow-hidden bg-ct-indigo-900 text-white">
    <div className="absolute inset-0 opacity-30" aria-hidden="true" style={{background:"radial-gradient(ellipse at 80% 20%, oklch(0.55 0.12 80) 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-2xl text-lg leading-relaxed text-white/85">{t.lede}</p>
      <a href={`mailto:${EMAIL}?subject=CT2030%20sponsorship%20enquiry`} className="mt-9 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.ctaPrimary}<Icon name="mail" className="size-4"/>
      </a>
      <p className="mt-4 text-xs sm:text-sm font-mono tracking-wide text-white/55">{t.ctaNote}</p>
      <p className="mt-7 max-w-2xl text-xs leading-relaxed text-white/55 font-mono border-l-2 border-ct-gold-400/50 pl-3">{t.safetyLine}</p>
    </div>
  </section>
);

const Why = ({ t }) => (
  <section data-screen-label="01 Why sponsor" 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.why.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.why.h2}</SectionHeading>
      <div className="mt-10 grid gap-6 md:grid-cols-3">
        {t.why.cards.map((c, i) => (
          <div key={i} className="rounded-lg border border-gray-200 bg-white p-7">
            <span className="inline-flex size-9 items-center justify-center rounded-md bg-ct-gold-100 text-ct-gold-800 font-mono text-sm">0{i+1}</span>
            <h3 className="mt-4 text-lg font-semibold text-ct-indigo-900">{c.title}</h3>
            <p className="mt-2 text-sm leading-6 text-gray-700">{c.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Tiers = ({ t, lang }) => (
  <section id="sponsor" data-screen-label="02 Tiers" 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 n="02">{t.tiersLabel.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.tiersLabel.h2}</SectionHeading>
      <p className="mt-3 max-w-3xl text-base text-gray-700 leading-relaxed">{t.tiersLabel.subhead}</p>
      <div className="mt-7"><SprintProgress lang={lang} active={3} caption={lang==="vi" ? "Bước 4/5 — Nhà tài trợ hậu thuẫn pha Trình diễn: Diễn đàn Đổi mới Sáng tạo." : "Step 4 of 5 — Sponsors back the Show phase: the Innovation Forum."}/></div>
      <div className="mt-8"><TalkFirstCTA lang={lang} sideHint="au" page="Sponsor"/></div>
      <div className="mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 items-stretch">
        {t.tiers.map((tier, i) => {
          const tone = tierTone[tier.tone];
          const isDark = tier.tone === "indigo";
          return (
            <div key={i} className={`relative flex flex-col rounded-lg border p-6 ${tone.card} ${tier.featured ? "shadow-lg ring-1 ring-ct-gold-400/40" : ""}`}>
              {tier.featured && <span className="absolute -top-2.5 left-6 rounded-sm bg-ct-gold-400 px-2 py-0.5 text-[10px] font-mono tracking-wide uppercase text-ct-indigo-900">Lead</span>}
              <p className={`text-base font-semibold ${tone.name}`}>{tier.name}</p>
              <span className={`mt-2 inline-flex w-fit items-center rounded-sm border px-2 py-0.5 text-[10px] font-mono tracking-wide uppercase ${isDark ? "border-white/20 text-ct-gold-300" : "border-gray-200 bg-gray-50 text-gray-500"}`}>{tier.amount}</span>
              <p className={`mt-3 text-sm leading-6 ${tone.item}`}>{tier.covers}</p>
              {tier.tracks && (
                <div className="mt-3 flex flex-wrap gap-1.5">
                  {tier.tracks.map((tr) => (
                    <span key={tr} className="rounded-sm border border-ct-gold-300 bg-ct-gold-50 px-1.5 py-0.5 text-[10px] font-mono tracking-wide text-ct-gold-800">{tr}</span>
                  ))}
                </div>
              )}
              {tier.benefits && (
                <ul className="mt-4 space-y-1.5 flex-grow">
                  {tier.benefits.map((b, j) => (
                    <li key={j} className="flex gap-2 text-xs leading-5">
                      <Icon name="check" className={`size-3.5 shrink-0 mt-0.5 ${tone.check}`}/>
                      <span className={tone.item}>{b}</span>
                    </li>
                  ))}
                </ul>
              )}
              {tier.forumPlacement && (
                <div className={`mt-4 border-t pt-4 ${isDark ? "border-white/15" : "border-gray-200/70"}`}>
                  <p className={`text-[10px] font-mono tracking-[0.16em] uppercase ${tone.blurb}`}>{t.forumPlacementLabel}</p>
                  <p className={`mt-1.5 text-xs leading-5 ${tone.item}`}>{tier.forumPlacement}</p>
                </div>
              )}
              {tier.pilotNote && (
                <p className={`mt-3 text-[11px] italic leading-5 ${isDark ? "text-white/70" : "text-gray-500"}`}>{tier.pilotNote}</p>
              )}
              <RequestProspectus lang={lang} tier={tier.name} variant="button" className={`mt-6 ${tone.btn}`}/>
              <a href={`mailto:${EMAIL}?subject=${encodeURIComponent("[CT2030 Sponsor] 15-min scoping call — " + tier.name)}`} className={`mt-2.5 inline-flex items-center gap-1 text-xs font-medium transition-colors ${isDark ? "text-ct-gold-300 hover:text-ct-gold-200" : "text-gray-500 hover:text-ct-indigo-900"}`}>{t.labels.scoping}<Icon name="arrow-right" className="size-3"/></a>
            </div>
          );
        })}
      </div>
      <p className="mt-6 text-sm italic text-gray-500 max-w-3xl">{t.tiersLabel.note}</p>
      <p className="mt-3 flex items-center gap-2 text-sm font-medium text-ct-indigo-900">{t.bespoke} <a href={`mailto:${EMAIL}?subject=${encodeURIComponent("[CT2030 Sponsor] Bespoke package")}`} className="inline-flex items-center gap-1 text-ct-indigo-700 hover:gap-2 transition-all"><Icon name="mail" className="size-3.5"/></a></p>
      {t.trackVsChallenge && (
        <div className="mt-10 rounded-lg border border-ct-indigo-200 bg-white p-6 sm:p-7">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-800">{t.trackVsChallenge.label}</p>
          <p className="mt-2 text-sm text-gray-600">{t.trackVsChallenge.intro}</p>
          <div className="mt-5 grid gap-4 sm:grid-cols-2">
            {t.trackVsChallenge.cols.map((c, i) => (
              <div key={i} className="rounded-md border border-gray-200 bg-gray-50/70 p-5">
                <p className="text-sm font-semibold text-ct-indigo-900">{c.name}</p>
                <p className="mt-2 text-sm leading-6 text-gray-700">{c.buy}</p>
                <p className="mt-3 flex items-start gap-2 text-xs leading-5 text-ct-gold-800"><Icon name="arrow-up-right" className="size-3.5 shrink-0 mt-0.5 text-ct-gold-600"/>{c.rofr}</p>
              </div>
            ))}
          </div>
          <p className="mt-4 text-sm italic leading-relaxed text-gray-500">{t.trackVsChallenge.combine}</p>
        </div>
      )}
    </div>
  </section>
);

const WhatReceive = ({ t }) => (
  <section data-screen-label="What sponsors receive" className="bg-white py-16 lg:py-20 border-b border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow>{t.whatReceive.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.whatReceive.h2}</SectionHeading>
      <p className="mt-3 max-w-3xl text-base text-gray-700 leading-relaxed">{t.whatReceive.lead}</p>
      <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {t.whatReceive.items.map((it, i) => (
          <div key={i} className="flex gap-3 items-start rounded-lg border border-gray-200 bg-gray-50/70 p-5">
            <Icon name="check" className="size-5 shrink-0 text-ct-green-600 mt-0.5"/>
            <span className="text-sm leading-6 text-gray-800">{it}</span>
          </div>
        ))}
      </div>
      <p className="mt-6 max-w-3xl text-sm italic leading-relaxed text-gray-500">{t.whatReceive.note}</p>
    </div>
  </section>
);

// -------------------- Showcase Partners (booth grid + apply form) --------------------
const BoothLogo = ({ p }) => (
  <div className="flex h-12 items-center">
    {p.logo ? (
      <img src={p.logo} alt={p.name} className="max-h-9 max-w-full object-contain object-left"
           onError={(e) => { e.currentTarget.style.display = "none"; e.currentTarget.nextSibling.style.display = "flex"; }}/>
    ) : null}
    <span className="hidden h-9 w-full items-center rounded-sm bg-[repeating-linear-gradient(135deg,#eceef1_0_8px,#f6f7f9_8px_16px)] px-2 font-mono text-[10px] tracking-wide text-gray-400"
          style={{ display: p.logo ? "none" : "flex" }}>logo pending</span>
  </div>
);
const StateHeading = ({ label, count, dot }) => (
  <div className="mt-12 flex items-center gap-3">
    <span className={`size-2 rounded-full ${dot}`}/>
    <h3 className="text-sm font-mono tracking-[0.16em] uppercase text-ct-indigo-900">{label}</h3>
    {count != null && <span className="rounded-sm bg-gray-100 px-1.5 py-0.5 text-[11px] font-mono tabular-nums text-gray-500">{count}</span>}
  </div>
);
const ShowcaseSection = ({ t, lang }) => {
  const booths = (window.CT_BOOTHS && window.CT_BOOTHS[lang]) || (window.CT_BOOTHS && window.CT_BOOTHS.en);
  if (!booths) return null;
  const s = t.showcase;
  return (
    <section id="showcase" data-screen-label="Showcase booths" className="bg-white py-20 lg:py-24 scroll-mt-20 border-t border-gray-200">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <Eyebrow>{s.eyebrow}</Eyebrow>
        <SectionHeading className="mt-4">{s.h2}</SectionHeading>
        <p className="mt-4 max-w-3xl text-base leading-relaxed text-gray-700 text-pretty">{s.intro}</p>

        {/* Confirmed */}
        <StateHeading label={s.states.confirmed.label} count={booths.confirmed.length} dot="bg-ct-green-600"/>
        <p className="mt-1.5 text-sm text-gray-500">{s.states.confirmed.note}</p>
        <div className="mt-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {booths.confirmed.map((p, i) => (
            <div key={i} className="flex flex-col rounded-lg border border-gray-200 bg-white p-5">
              <BoothLogo p={p}/>
              <p className="mt-3 text-sm font-semibold leading-snug text-ct-indigo-900">{p.name}</p>
              <p className="mt-1 text-xs leading-5 text-gray-600 flex-grow">{p.role}</p>
              <span className="mt-3 inline-flex w-fit items-center rounded-sm border border-ct-green-200 bg-ct-green-50 px-2 py-0.5 text-[10px] font-mono tracking-wide uppercase text-ct-green-700">{p.track}</span>
            </div>
          ))}
        </div>

        {/* Invited */}
        <StateHeading label={s.states.invited.label} count={booths.invited.length} dot="bg-ct-indigo-400"/>
        <p className="mt-1.5 text-sm text-gray-500">{s.states.invited.note}</p>
        <ul className="mt-5 divide-y divide-gray-200 border-y border-gray-200">
          {booths.invited.map((p, i) => (
            <li key={i} className="flex flex-col gap-1 py-3.5 sm:flex-row sm:items-center sm:gap-4">
              <span className="text-sm font-medium text-ct-indigo-900 sm:w-72 shrink-0">{p.name}</span>
              <span className="text-sm text-gray-600 flex-grow">{p.role}</span>
              <span className="inline-flex w-fit items-center rounded-sm border border-gray-200 bg-gray-50 px-2 py-0.5 text-[10px] font-mono tracking-wide uppercase text-gray-500 shrink-0">{p.track}</span>
            </li>
          ))}
        </ul>

        {/* Target */}
        <StateHeading label={s.states.target.label} count={booths.target.length} dot="bg-ct-gold-500"/>
        <p className="mt-1.5 text-sm text-gray-500">{s.states.target.note}</p>
        <ul className="mt-4 grid gap-2 sm:grid-cols-2">
          {booths.target.map((p, i) => (
            <li key={i} className="flex items-baseline gap-3 text-sm">
              <span className="italic text-gray-500">{p.name}</span>
              <span className="text-xs text-gray-400">— {p.role}</span>
            </li>
          ))}
        </ul>

        {/* TBA + apply CTA */}
        <p className="mt-8 max-w-3xl text-sm italic leading-relaxed text-gray-500">{booths.tba[0].note}.</p>
        <a href="#showcase-apply" className="mt-6 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">
          {s.applyCta}<Icon name="arrow-right" className="size-4"/>
        </a>

        {/* Apply form */}
        <div id="showcase-apply" className="mt-14 max-w-3xl scroll-mt-20">
          <Eyebrow>{s.apply.eyebrow}</Eyebrow>
          <SectionHeading className="mt-3">{s.apply.h2}</SectionHeading>
          <p className="mt-3 text-base leading-relaxed text-gray-700">{s.apply.intro}</p>
          <div className="mt-6"><TalkFirstCTA lang={lang} sideHint="both" page="Showcase Booth" className="mb-5"/></div>
          <IntakeForm spec={s.apply.spec} note={s.apply.intro} submit={s.apply.submit} required={s.apply.required} subject={s.apply.subject} disc1={s.apply.disc1} disc2={s.apply.disc2} lang={lang}/>
        </div>
      </div>
    </section>
  );
};

// -------------------- Closing CTA (replaces "What you receive" CUT 8, "Three-step path" CUT 9, and "Contacts" CUT 10) --------------------
const ClosingCta = ({ t, lang }) => (
  <section data-screen-label="Closing CTA" className="bg-white py-16 lg:py-20 border-t border-gray-200">
    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
      <p className="text-base leading-relaxed text-gray-700">
        {lang === "vi" ? (
          <>Câu hỏi khác? Xem <a href="Contact.html" className="font-medium text-ct-indigo-900 underline decoration-ct-gold-400 underline-offset-2 hover:text-ct-indigo-700">trang Liên hệ</a> hoặc gửi email <a href={`mailto:${EMAIL}`} className="font-medium text-ct-indigo-900 underline decoration-ct-gold-400 underline-offset-2 hover:text-ct-indigo-700">{EMAIL}</a>.</>
        ) : (
          <>Other questions? See our <a href="Contact.html" className="font-medium text-ct-indigo-900 underline decoration-ct-gold-400 underline-offset-2 hover:text-ct-indigo-700">Contact page</a> or email <a href={`mailto:${EMAIL}`} className="font-medium text-ct-indigo-900 underline decoration-ct-gold-400 underline-offset-2 hover:text-ct-indigo-700">{EMAIL}</a>.</>
        )}
      </p>
      <Callout className="mt-8">{t.disclaimer}</Callout>
    </div>
  </section>
);

const IntakeForm = ({ spec, note, submit, required, subject, disc1, disc2, extraLine, lang }) => {
  const init = {}; spec.forEach(f => { init[f.k] = f.multi ? [] : f.check ? false : f.opts ? f.opts[0] : ""; });
  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 toggleCheck = (k) => setV(s => ({ ...s, [k]: !s[k] }));
  const onSubmit = (e) => {
    e.preventDefault();
    if (spec.some(f => f.req && !v[f.k])) { alert(required); return; }
    const body = spec.map(f => f.multi ? `${f.l}: ${(v[f.k]||[]).join(", ")}` : f.check ? `${f.l}: ${v[f.k] ? "Yes" : "No"}` : `${f.l}: ${v[f.k]}`).join("\n");
    window.location.href = `mailto:${EMAIL}?subject=${encodeURIComponent(subject)}&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 onSubmit={onSubmit} className="rounded-lg border border-gray-200 bg-white p-6 sm:p-8">
      <FormIntro lang={lang} className="mb-5"/>
      <p className="text-sm text-gray-500 mb-6">{note}</p>
      <div className="grid gap-5 sm:grid-cols-2">
        {spec.map(f => (
          <div key={f.k} className={f.full ? "sm:col-span-2" : ""}>
            {!f.check && <label className={label}>{f.l}{f.req ? " *" : ""}</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.check
                ? <label className="flex items-start gap-3 cursor-pointer rounded-md border border-gray-300 bg-white px-3.5 py-3"><input type="checkbox" checked={v[f.k]} onChange={() => toggleCheck(f.k)} className="mt-0.5 size-4 accent-ct-indigo-900"/><span className="text-sm leading-6 text-gray-700">{f.l}</span></label>
                : f.opts
                  ? <select className={input} value={v[f.k]} onChange={set(f.k)}>{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)} required={f.req}/>
                    : <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">{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">{disc1}</p>
        <p className="text-sm leading-relaxed font-semibold text-ct-indigo-900">{disc2}</p>
        {extraLine && <p className="text-sm leading-relaxed text-gray-600">{extraLine}</p>}
      </div>
    </form>
  );
};

const HostSection = ({ t, lang }) => (
  <section id="host" data-screen-label="05 Host a pilot" className="bg-white py-20 lg:py-24 scroll-mt-20 border-t border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow>{t.host.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.host.h2}</SectionHeading>
      <div className="mt-5 max-w-3xl rounded-r-md border-l-2 border-ct-green-500 bg-ct-green-50/60 px-5 py-4">
        <p className="text-sm font-semibold text-ct-green-900">{t.host.reframeTitle}</p>
        <p className="mt-1.5 text-sm leading-6 text-gray-700">{t.host.reframe}</p>
      </div>
      <p className="mt-6 max-w-3xl text-base leading-relaxed text-gray-700">{t.host.intro}</p>
      <div className="mt-10 grid gap-6 md:grid-cols-3">
        {t.host.cols.map((c, i) => (
          <div key={i} className="rounded-lg border border-gray-200 bg-white p-6">
            <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-gold-700">{c.label}</p>
            <ul className="mt-4 space-y-2.5">
              {c.items.map((it, j) => (<li key={j} className="flex gap-2.5 items-start text-sm leading-6 text-gray-700"><span className="mt-2 size-1.5 shrink-0 rounded-full bg-ct-green-600"/>{it}</li>))}
            </ul>
          </div>
        ))}
      </div>
      <div className="mt-10 max-w-3xl">
        <h3 className="text-lg font-semibold text-ct-indigo-900 mb-5">{t.host.formTitle}</h3>
        <TalkFirstCTA lang={lang} sideHint="both" page="Host a Pilot" className="mb-5"/>
        <IntakeForm spec={t.host.spec} note={t.host.note} submit={t.host.submit} required={t.host.required} subject={t.host.subject} disc1={t.formDisc1} disc2={t.formDisc2} lang={lang}/>
      </div>
    </div>
  </section>
);

const InvestorSection = ({ t, lang }) => (
  <section id="investor" data-screen-label="06 Investor register" className="bg-gray-50 py-20 lg:py-24 scroll-mt-20 border-t border-gray-200">
    <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <Eyebrow>{t.investor.eyebrow}</Eyebrow>
      <SectionHeading className="mt-4">{t.investor.h2}</SectionHeading>
      <p className="mt-4 max-w-3xl text-base leading-relaxed text-gray-700">{t.investor.intro}</p>
      <div className="mt-10 grid gap-6 md:grid-cols-2 max-w-3xl">
        <div className="rounded-lg border border-ct-green-200 bg-white p-6">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-green-700">{t.investor.receiveLabel}</p>
          <ul className="mt-4 space-y-2.5">{t.investor.receive.map((it, i) => (<li key={i} className="flex gap-2.5 items-start text-sm leading-6 text-gray-700"><Icon name="check" className="size-4 shrink-0 text-ct-green-600 mt-0.5"/>{it}</li>))}</ul>
        </div>
        <div className="rounded-lg border border-gray-200 bg-white p-6">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-gray-500">{t.investor.notLabel}</p>
          <ul className="mt-4 space-y-2.5">{t.investor.not.map((it, i) => (<li key={i} className="flex gap-2.5 items-start text-sm leading-6 text-gray-500"><Icon name="close" className="size-4 shrink-0 text-gray-400 mt-0.5"/>{it}</li>))}</ul>
        </div>
      </div>
      <div className="mt-10 max-w-3xl">
        <h3 className="text-lg font-semibold text-ct-indigo-900 mb-5">{t.investor.formTitle}</h3>
        <TalkFirstCTA lang={lang} sideHint="au" page="Investor Observer" className="mb-5"/>
        <IntakeForm spec={t.investor.spec} note={t.investor.note} submit={t.investor.submit} required={t.investor.required} subject={t.investor.subject} disc1={t.formDisc1} disc2={t.formDisc2} extraLine={t.investor.financialLine} lang={lang}/>
        <div className="mt-6 rounded-md border border-ct-indigo-200 bg-ct-indigo-50/50 p-5">
          <p className="text-[11px] font-mono tracking-[0.16em] uppercase text-ct-indigo-800 mb-3">{t.investor.whatNext.label}</p>
          <ul className="grid gap-2.5 sm:grid-cols-2">
            {t.investor.whatNext.items.map((it, i) => (
              <li key={i} className="flex gap-2.5 items-start text-sm leading-6 text-gray-700"><Icon name="arrow-right" className="size-4 shrink-0 text-ct-indigo-600 mt-0.5"/>{it}</li>
            ))}
          </ul>
        </div>
      </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);
  return (
    <>
      <Header lang={lang} setLang={setLang} current="Sponsor.html"/>
      <Hero t={t}/>
      <Wayfinding t={t}/>
      <section data-screen-label="Claim note" className="bg-ct-gold-50 border-b border-ct-gold-200 py-5">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <p className="flex gap-3 items-start text-sm leading-relaxed text-ct-gold-900"><span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-ct-gold-600"/>{t.claimNote}</p>
        </div>
      </section>
      <Why t={t}/>
      <WhyBother eyebrow={t.whyBother.eyebrow} tone="gray">{t.whyBother.body}</WhyBother>
      <WhatReceive t={t}/>
      <Tiers t={t} lang={lang}/>
      <ShowcaseSection t={t} lang={lang}/>
      <HostSection t={t} lang={lang}/>
      <InvestorSection t={t} lang={lang}/>
      <ClosingCta t={t} lang={lang}/>
      <Footer lang={lang}/>
      <TweaksMount tweaks={tweaks} setLang={setLang}/>
    </>
  );
};

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