/* global React, ReactDOM, window */ const { useState, useEffect, useRef } = React; const { Header, Footer, Icon, Eyebrow, SectionHeading, useSharedLang, LangTweak } = window; const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{ "lang": "en", "headline": "concrete" }/*EDITMODE-END*/; const EMAIL = "hello@cantho2030.com"; // ===================================================================== // Home — Cần Thơ 2030 Innovation Forum (v0.13) // A Forum landing page, powered by the Challenge Programme. Multi-role // magnet; sponsor-priority conversion. 9 sections (brief §5): // Hero+footing · Proof strip · Choose-your-role · Why now · How it works // · Momentum scoreboard · Forum snapshot · Proof & partners · Final CTA. // ===================================================================== const F = () => (window.CT_FORUM || { en: {}, vi: {} }); const SP = () => (window.CT_SPEAKERS || { en: {}, vi: {} }); const UNI = () => ((window.CT_PARTNERS && window.CT_PARTNERS.universities) || { en: {}, vi: {} }); const ORG = () => ((window.CT_PARTNERS && window.CT_PARTNERS.organizer) || { en: [], vi: [] }); // vertical → accent const vAccent = (v = "") => { const s = v.toLowerCase(); if (s.includes("climate") || s.includes("agri") || s.includes("academic") || s.includes("học")) return "green"; if (s.includes("regtech") || s.includes("aqua")) return "indigo"; return "gold"; }; const accentChip = { 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 VChip = ({ v }) => ( {v} ); const Placeholder = ({ label, className = "", ratio = "aspect-[4/3]" }) => (
{label}
); const LogoRect = ({ name }) => ( {name} ); // ===================================================================== // 1 — Hero (rework §2/§3): new H1 + footing proof line + status strip + // 3 weighted primary CTAs + 4 secondary CTAs + restrained motion. // ===================================================================== const ForumHero = ({ t, headline }) => { const ref = useRef(null); useEffect(() => { const id = requestAnimationFrame(() => ref.current && ref.current.setAttribute("data-hero-in", "")); return () => cancelAnimationFrame(id); }, []); const h1 = (t.hero.h1Alts && t.hero.h1Alts[headline]) || t.hero.h1; let i = 0; const rise = () => ({ "--i": i++ }); return (
); }; // ===================================================================== // 2 — Proof strip (NEW §5#2): thin early credibility band. // ===================================================================== const ProofStrip = ({ t }) => (

{t.proof.label}

{t.proof.items.map((it, i) => (
{it.stat} {it.label}
))}

{t.proof.note}

); // ===================================================================== // 3 — Choose your role (NEW §4): six-path router; Sponsor heaviest. // ===================================================================== const ChooseRole = ({ t }) => (
{t.role.eyebrow} {t.role.h2}

{t.role.intro}

{t.role.paths.map((p) => { const sponsor = p.weight === "sponsor"; return (
{p.micro} {sponsor && Priority}

{p.label}

{p.desc}

{p.label} ); })}
); // ===================================================================== // 4 — Why Cần Thơ, why now — compressed to a BAND (keeps the Resolution-59 // frame; metrics fold into a compact side panel). [Cowork amendment] // ===================================================================== const WhyNow = ({ t }) => (
{t.whyNow.eyebrow} {t.whyNow.h2}

{t.whyNow.body[0]}

{t.whyNow.body[1]}

    {t.whyNow.highlights.map((b, i) => (
  • {b.n}

    {b.heading}

    {b.body}

    • ))}
{/* Scale metrics — compact side panel */}
{t.whyNow.scale.map((m, i) => (

{m.value}

{m.label}

{m.note}

))}

{t.whyNow.disclaimer}

); // ===================================================================== // 5 — How it works (NEW §5#5): the validated pathway, progress-bias. // ===================================================================== const HowItWorks = ({ t, lang }) => (
{t.how.eyebrow} {t.how.h2}

{t.how.intro}

    {/* connecting line on lg */}

{t.how.note}

{t.how.cta}
); // ===================================================================== // 6 — Momentum scoreboard (REWORK + promote §5#6): Speakers + Showcase, // four-state counts framed as visibly filling. // ===================================================================== const StateCount = ({ n, label, tone }) => { const map = { confirmed: "border-ct-green-200 bg-ct-green-50 text-ct-green-700", invited: "border-ct-indigo-200 bg-ct-indigo-50 text-ct-indigo-800", discussion: "border-ct-gold-300 bg-ct-gold-50 text-ct-gold-800", target: "border-gray-300 bg-gray-100 text-gray-600", }; const dot = { confirmed: "bg-ct-green-600", invited: "bg-ct-indigo-400", discussion: "bg-ct-gold-500", target: "bg-gray-400" }; return (
{n} {label}
); }; const Momentum = ({ t, lang }) => { const sp = SP()[lang] || SP().en || {}; const booths = (window.CT_BOOTHS && (window.CT_BOOTHS[lang] || window.CT_BOOTHS.en)) || null; const sl = t.speakers.stateLabels; const ms = t.momentum.stateLabels; const strip = [ ...(sp.invited || []).map(r => ({ ...r, state: "invited" })), ...(sp.target || []).map(r => ({ ...r, state: "target" })), ]; const stateBadge = { invited: "border-ct-indigo-200 bg-ct-indigo-50 text-ct-indigo-800", target: "border-gray-300 bg-gray-100 text-gray-500", }; const reserved = booths && booths.tba && booths.tba[0] ? booths.tba[0].count : 0; return (
{t.momentum.eyebrow} {t.momentum.h2}

{t.momentum.intro}

{/* Lead counters — three big numbers + one progress bar toward the 25-booth cap */} {(() => { const spConf = (sp.confirmed || []).length, spInv = (sp.invited || []).length; const bConf = booths ? booths.confirmed.length : 0; const bInv = booths ? booths.invited.length : 0; const bTgt = booths ? booths.target.length : 0; const confirmedTotal = spConf + bConf; const invitedTotal = spInv + bInv; const spokenFor = bConf + bInv + bTgt; const pct = Math.min(100, Math.round((spokenFor / 25) * 100)); const vi = lang === "vi"; return (
{ms.confirmed}

{confirmedTotal}

{vi ? "di\u1ec5n gi\u1ea3 + \u0111\u1ed1i t\u00e1c tr\u01b0ng b\u00e0y \u0111\u00e3 ch\u1ed1t" : "speakers + showcase partners locked in"}

{ms.invited}

{invitedTotal}

{vi ? "l\u1eddi m\u1eddi \u0111\u00e3 g\u1eedi, \u0111ang trao \u0111\u1ed5i" : "invitations out, in active discussion"}

{vi ? "gian \u0111\u00e3 \u0111\u01b0\u1ee3c gi\u1eef ch\u1ed7" : "booths spoken for"}

{spokenFor} / 25

{vi ? `${pct}% ti\u1ebfn t\u1edbi m\u1ee9c tr\u1ea7n 25 gian` : `${pct}% toward the 25-booth cap`}

); })()} {/* --- Speakers --- */}

{t.momentum.speakersTitle}

{t.momentum.speakersConfirmed}

{(sp.confirmed || []).map((s, i) => (

{s.name}

{s.nameNote &&

{s.nameNote}

}

{s.org}

{s.day}

{s.topic}

))}
{strip.length > 0 && (
    {strip.map((r, i) => (
  • {sl[r.state]}
    {r.topic} · {r.day} · {t.speakers.slotLabel}: {r.slot}
    • ))}
)} {/* Nominate-a-speaker CTA (anchor preserved) */}

{t.momentum.nomQ}

{t.momentum.nomCta}
{/* --- Showcase --- */} {booths && (

{t.momentum.boothsTitle}

{t.momentum.boothCap}

{reserved} {lang === "vi" ? "gian giữ cho các đơn đăng ký giai đoạn sau" : "of the 25 booths held in reserve for late-stage applications"}

{t.momentum.boothsConfirmed}

{booths.confirmed.map((p, i) => (
{p.logo ? ( {p.name} { e.currentTarget.style.display = "none"; e.currentTarget.nextSibling.style.display = "flex"; }}/> ) : null} logo pending

{p.name}

{p.role}

{p.track}
))}
{t.momentum.boothsCta}
)}
); }; // ===================================================================== // 7 — Forum snapshot (KEEP §5#7): Day 1/2/3 cards. // ===================================================================== const DayCard = ({ d, accent }) => (

{d.tag}

{d.theme}

{d.purpose}

{d.rows && ( )}
); const Day3Card = ({ d }) => (

{d.optionalTag}

{d.tag}

{d.theme}

{d.intro}

{d.eligibilityLabel}

{d.shapeLabel}

{d.cta}
); const ForumSnapshot = ({ t }) => (
{t.days.eyebrow} {t.days.h2}
{t.days.venue && (

{t.days.venue}

)}
); // ===================================================================== // 8 — Proof & partners, full (KEEP §5#8): organizer stack + CICT anchor // + education network. The considered trust spine, low on the page. // ===================================================================== const ProofPartners = ({ t, lang }) => { const rows = ORG()[lang] || ORG().en || []; const u = UNI()[lang] || UNI().en; const a = u.anchor; return (
{t.cict.eyebrow} {lang === "vi" ? "Ai đứng sau Cần Thơ 2030" : "Who stands behind Cần Thơ 2030"} {/* Organizer stack */}
{rows.map((r, i) => (
{r.label}
{r.names.map((n, j) => )}
))}

{t.logoPlaceholder} — {lang === "vi" ? "logo thật chờ ký duyệt theo từng đơn vị" : "real logos appear once signed off per entity"}.

{/* CICT anchor — full row */}

{t.cict.hostedLabel}

{a.name} {a.role}

{a.full}

{a.body}

{a.quote}
{t.cict.link}

{u.safeguard}

{/* Education network */}

{t.eduNet.eyebrow}

{u.network.map((c, i) => (

{c.name}

{c.role}

{c.body}

))}

{t.gate}

); }; // ===================================================================== // 9 — Final CTA (§5#9): Request Invitation primary; Sponsor heaviest. // ===================================================================== const SponsorBand = ({ t, lang }) => { const s = t.sponsorCta; return (
{s.eyebrow}

{s.h2}

{s.body}

{s.highlights.map((h, i) => (

{h.tier}

{h.line}

))}

{s.outcomesLabel}

    {s.outcomes.map((o, i) => (
  • {o}
    • ))}
{s.ctaProspectus} {s.ctaCall} {s.ctaTiers}
); }; const RequestInvitation = ({ t, lang }) => { const R = t.invite; const [v, setV] = useState({ name: "", org: "", role: "", email: "", reason: "", day3: R.dayOptions[0] }); const set = (k) => (e) => setV(s => ({ ...s, [k]: e.target.value })); const submit = (e) => { e.preventDefault(); if (!v.name || !v.org || !v.email) { alert(R.required); return; } const L = R.fields; const body = `${L.name}: ${v.name}\n${L.org}: ${v.org}\n${L.role}: ${v.role}\n${L.email}: ${v.email}\n${R.dayQuestion} ${v.day3}\n\n${L.reason}:\n${v.reason}`; window.location.href = `mailto:${EMAIL}?subject=${encodeURIComponent(R.subject)}&body=${encodeURIComponent(body)}`; }; const input = "w-full rounded-md border border-white/20 bg-white/[0.06] px-3.5 py-2.5 text-sm text-white placeholder-white/40 focus:border-ct-indigo-300 focus:ring-1 focus:ring-ct-indigo-300 outline-none transition"; const label = "block text-[11px] font-mono tracking-[0.14em] uppercase text-white/60 mb-1.5"; const L = R.fields; return (
{R.eyebrow}

{R.h2}

{R.lede}

{R.workflowLabel}

{R.workflow}

{R.briefingLabel}

{R.briefingText}

{R.briefingMeta}