// c-app.jsx — Variant C · Triage
// Provocative campaign. Emotional-bleeding thesis from the strategic brief.
// Bigger type, more copper presence, more direct copy. Urgency-led.
const C_TWEAKS = /*EDITMODE-BEGIN*/{
"showBleedingPulse": true,
"showChineseSignals": true,
"density": "standard"
}/*EDITMODE-END*/;
const C_NAV = [
{ label: 'The Bleeding', href: '#bleeding' },
{ label: 'The Triage', href: '#triage' },
{ label: 'Proof', href: '#proof' },
{ label: 'About', href: '#about' },
{ label: 'Readiness Check', href: '#readiness' },
];
const BLEEDING_SITES = [
{ id: 'L', x: 22, y: 28, label: 'Listing copy', bleeds: 'authority', severity: 'critical', body: 'Spec-heavy bullets where a Western competitor sells aspiration. Reads like a manufacturer, not a brand.' },
{ id: 'N', x: 64, y: 18, label: 'Brand name', bleeds: 'trust', severity: 'critical', body: 'Pinyin abbreviation. No recall. No category association. The first 200ms of brand perception, wasted.' },
{ id: 'I', x: 48, y: 52, label: 'Lifestyle imagery', bleeds: 'aspiration', severity: 'high', body: "Stock photos. White-table flat lays. No one feels themselves in the brand's world — because there isn't one." },
{ id: 'R', x: 80, y: 42, label: 'Review patterns', bleeds: 'permission to charge', severity: 'high', body: 'Negative review themes cluster around perceived quality despite manufacturing parity. Trust deficit, priced in.' },
{ id: 'D', x: 16, y: 68, label: 'Owned demand', bleeds: 'pricing autonomy', severity: 'mid', body: 'No DTC. No email list. No way to talk to a buyer outside the marketplace fee structure.' },
{ id: 'C', x: 70, y: 76, label: 'Creator strategy', bleeds: 'cultural permission', severity: 'mid', body: 'Mega-influencer one-shots with no follow-through. Nano/micro creators outperform 4–6× on efficiency. Spend misallocated.' },
];
const C_TRIAGE = [
{ num: '01', name: 'Diagnose', verb: 'Find the bleeding.', body: 'Score 10 capability domains and 240+ benchmarks. Locate every site where pricing power leaks. Quantify what each costs.' },
{ num: '02', name: 'Blueprint', verb: 'Stop the bleeding.', body: 'Prioritized triage plan. Critical bleeds first, then compounding builds. Sequenced for cashflow and momentum.' },
{ num: '03', name: 'Domain Playbook', verb: 'Repair the system.', body: 'Operational deliverables your team runs on after we leave. Brand, content, influencer, retail — built for your reality.' },
{ num: '04', name: 'Navigate', verb: 'Protect the gains.', body: 'Quarterly re-scoring. Drift detection. Advisory continuity as the market evolves and new bleeds emerge.' },
];
const C_PILLARS = [
{ kicker: 'Not opinions', label: 'Methodology with teeth', body: '240+ scored benchmarks. Two evaluators, same brand, same score. The product is a map, not a deck.' },
{ kicker: 'Not two vendors', label: 'One operating layer', body: 'CN Professional Services embedded with your team in Mandarin. US Advisory making the strategic calls in English. The translation happens on our side.' },
{ kicker: 'Not extractive', label: 'Aligned incentives', body: "We work for you like a peer, not an agency selling services to hit our own KPIs. Reputation is our business — getting it right beats being right." },
];
const SEVERITY_COLOR = {
critical: 'var(--copper-hot)',
high: 'var(--copper)',
mid: 'var(--light-blue)',
};
// ─────────────────────────────────────────────────────────────
// Nav — bold, with copper accent
// ─────────────────────────────────────────────────────────────
function CNav() {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ─────────────────────────────────────────────────────────────
// Hero — bold provocation, diagonal copper slash
// ─────────────────────────────────────────────────────────────
function CHero({ t }) {
return (
{/* Diagonal copper slash (the bleeding gesture) */}
{t.showChineseSignals && (
止 血 · 然 后 建 品 牌
Stop the bleeding. Then build the brand.
)}
Your brand is
bleeding pricing power.
{/* Underline animation */}
We can see exactly where.
Chinese brands are world-class operators. Operationally excellent.
{' '}But in the US, you're emotionally invisible —
and that's costing you 30–60% of pricing power you've already earned.
);
}
function VitalStat({ n, unit, label, pulse }) {
return (
{pulse && (
)}
{n}{unit}
{label}
);
}
// ─────────────────────────────────────────────────────────────
// Section 2 — "The bleeding now" — symptoms map + list
// ─────────────────────────────────────────────────────────────
function CBleeding({ t }) {
const [active, setActive] = React.useState('L');
const current = BLEEDING_SITES.find(b => b.id === active);
return (
Vital signs · the six common bleeds
Most brands bleed
in three to five places at once.
A bleeding site isn't "not working." It's actively hurting you. A typo bleeds trust.
Amateur photography bleeds authority. Discounting too often bleeds premium perception.
Bleeds destroy quick emotion and long emotion instantly. They're triaged first, before anything else.
{/* Bleeding map — abstract surface with marked hotspots */}
{/* Detail panel for active site */}
);
}
// ─────────────────────────────────────────────────────────────
// Section 3 — Triage system (the OS reframed)
// ─────────────────────────────────────────────────────────────
function CTriage() {
return (
The triage system
Find it. Stop it.
Repair the system. Protect the gains.
Every engagement runs the same four phases. Emergency surgery first.
Diet and exercise second. Then maintenance, forever, because the market doesn't stand still.
The product is the map itself — a scored, living picture of your business as an operating system,
measured against what world-class looks like in your category. The roadmap falls out of the gap analysis,
not from opinion.
5 bleeds diagnosed.
3.19× ROI in Year 1. 8.0×+ projected by Year 3.
A leading Chinese baby products brand. Strong Amazon volume, no brand premium.
We diagnosed gaps across five capability domains, blueprinted three intervention waves,
and modeled the path through Year 3.