// b-app.jsx — Variant B · Editorial
// Bloomberg/Stripe-grade restraint. Data-led. Reads like research, not marketing.
// No hero video. The pricing-gap chart IS the hero visual.

const B_TWEAKS = /*EDITMODE-BEGIN*/{
  "showAnnotations": true,
  "density": "standard",
  "chineseSignals": true
}/*EDITMODE-END*/;

const B_NAV = [
  { label: 'The Gap', href: '#gap' },
  { label: 'Case Study', href: '#case' },
  { label: 'Methodology', href: '#method' },
  { label: 'About', href: '#about' },
  { label: 'Affiliate Readiness', href: '#readiness' },
];

const B_DOMAINS = [
  { n: '01', name: 'Brand Strategy & Positioning', avg: 2.1, gap: 'High' },
  { n: '02', name: 'Digital & E-Commerce', avg: 3.4, gap: 'Mid' },
  { n: '03', name: 'Content & Creative', avg: 2.0, gap: 'High' },
  { n: '04', name: 'Social & Community', avg: 1.8, gap: 'High' },
  { n: '05', name: 'Influencer & Advocacy', avg: 1.5, gap: 'Critical' },
  { n: '06', name: 'PR & Communications', avg: 1.3, gap: 'Critical' },
  { n: '07', name: 'Retail Readiness', avg: 2.6, gap: 'Mid' },
  { n: '08', name: 'Packaging & Unboxing', avg: 2.4, gap: 'Mid' },
  { n: '09', name: 'Market Research & Intelligence', avg: 2.2, gap: 'High' },
  { n: '10', name: 'Organizational Readiness', avg: 2.9, gap: 'Mid' },
];

const B_PHASES = [
  { num: '01', name: 'Diagnose', span: '2–4 weeks', body: '10-domain evaluation. 240+ scored benchmarks. 5-level maturity model. Two evaluators, same score.' },
  { num: '02', name: 'Blueprint', span: '1–2 weeks', body: 'Prioritized action plan. ROI projections. Dependency mapping. Sequenced for cashflow.' },
  { num: '03', name: 'Domain Playbook', span: '4–8 wks / domain', body: 'Operational deliverables your team runs on afterward. Tested against real engagements.' },
  { num: '04', name: 'Navigate', span: 'Ongoing', body: 'Quarterly re-scoring. Updated roadmaps. Advisory continuity as the market evolves.' },
];

// ─── Editorial style helpers ───────────────────────────────────────────
const eMono = {
  fontFamily: 'var(--font-mono)',
  fontSize: 11,
  letterSpacing: '0.16em',
  textTransform: 'uppercase',
  color: 'var(--text-tertiary)',
};

// ─────────────────────────────────────────────────────────────
// Editorial nav — minimal, no CTA pill (CTA earns its place at the bottom)
// ─────────────────────────────────────────────────────────────
function BNav() {
  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 (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? 'rgba(20, 22, 30, 0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--surface-border)' : 'transparent'),
      transition: 'all .3s ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: scrolled ? '14px 48px' : '22px 48px',
        transition: 'padding .3s ease',
      }}>
        <a href="#" style={{
          display: 'flex', alignItems: 'baseline', gap: 4,
          fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 19,
        }}>
          <span style={{ color: 'var(--white)' }}>Project</span>
          <span style={{ color: 'var(--light-blue)' }}>Silk</span>
        </a>
        <ul style={{
          display: 'flex', gap: 36, listStyle: 'none', margin: 0, padding: 0,
          fontSize: 13, color: 'var(--text-secondary)',
        }}>
          {B_NAV.map(it => (
            <li key={it.label}>
              <a href={it.href} style={{ transition: 'color .2s' }}
                 onMouseEnter={(e) => e.currentTarget.style.color = 'var(--white)'}
                 onMouseLeave={(e) => e.currentTarget.style.color = ''}>
                {it.label}
              </a>
            </li>
          ))}
          <li style={{
            paddingLeft: 24,
            borderLeft: '1px solid var(--surface-border)',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em',
            color: 'var(--copper-hot)', textTransform: 'uppercase',
          }}>
            <a href="#cta">Contact ↗</a>
          </li>
        </ul>
      </div>
    </nav>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero — the gap, as a chart. Two-column typographic + data.
// ─────────────────────────────────────────────────────────────
function BHero({ t }) {
  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      paddingBlock: '180px 80px',
      background: 'var(--rich-black)',
      display: 'flex', alignItems: 'center',
      borderBottom: '1px solid var(--surface-border)',
    }}>
      <div className="container" style={{ width: '100%' }}>
        {/* Editorial masthead row */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          paddingBottom: 20,
          borderBottom: '1px solid var(--surface-border)',
          marginBottom: 64,
        }}>
          <span style={eMono}>
            A study · Q2 2026
          </span>
          <span style={eMono}>
            US Market Readiness System · v1.3
          </span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1.2fr',
          gap: 80, alignItems: 'center',
        }}>
          <div>
            {t.chineseSignals && (
              <div style={{ marginBottom: 24, fontFamily: 'var(--font-zh)', fontSize: 13, letterSpacing: '0.3em', color: 'var(--light-blue)', opacity: 0.8 }}>
                品 牌 出 海 · 数 据 说 话
              </div>
            )}
            <h1 style={{
              fontFamily: 'var(--font-heading)',
              fontSize: 'clamp(44px, 5.4vw, 84px)',
              lineHeight: 1.02,
              fontWeight: 700,
              letterSpacing: '-0.03em',
              marginBottom: 32,
            }}>
              Chinese brands earn
              <br />
              <span style={{ color: 'var(--light-blue)' }}>30–60% less</span><sup style={{ fontSize: '0.4em', verticalAlign: 'top', marginLeft: 4, color: 'var(--text-tertiary)' }}>1</sup>
              <br />
              in the US.
            </h1>

            <p style={{
              fontSize: 19, lineHeight: 1.55, color: 'var(--text-secondary)',
              maxWidth: 520, marginBottom: 36,
              fontWeight: 400,
            }}>
              We measure why — in 240+ scored benchmarks across 10 capability domains —
              and build the operating system to close it.
            </p>

            <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap', marginBottom: 40 }}>
              <a href="#cta" className="btn btn-primary">
                Schedule a diagnostic
                <span className="arrow">→</span>
              </a>
              <a href="#method" style={{
                fontSize: 14, color: 'var(--light-blue)',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                borderBottom: '1px solid rgba(96,165,250,0.3)',
                paddingBottom: 2,
              }}>
                Read the methodology
                <span style={{ display: 'inline-block' }}>↓</span>
              </a>
            </div>

            {t.showAnnotations && (
              <div style={{
                paddingTop: 24,
                borderTop: '1px solid var(--surface-border)',
                fontSize: 12, color: 'var(--text-tertiary)',
                lineHeight: 1.7,
                fontFamily: 'var(--font-body)',
              }}>
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', marginBottom: 6 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--light-blue)' }}>1.</span>
                  <span>Pricing-power gap measured across equivalent-SKU pairs in five consumer categories. Source: Silk internal study, 2025–2026. Sample n=1,184 SKUs.</span>
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--light-blue)' }}>↳</span>
                  <span>Methodology and full sample table available on request.</span>
                </div>
              </div>
            )}
          </div>

          <BHeroChart />
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Hero chart — pricing distribution histogram, Chinese vs Western
// ─────────────────────────────────────────────────────────────
function BHeroChart() {
  // Two distributions on the same x-axis. Chinese brands shift left.
  // Generated client-side to look real but stable.
  const bins = 24;
  const chineseDist = [3, 8, 16, 28, 42, 58, 64, 58, 48, 36, 24, 16, 10, 7, 4, 3, 2, 1, 1, 1, 0, 0, 0, 0];
  const westernDist = [0, 0, 0, 1, 2, 4, 8, 14, 22, 34, 46, 56, 62, 58, 50, 40, 30, 22, 14, 8, 4, 2, 1, 0];
  const maxV = Math.max(...chineseDist, ...westernDist);

  return (
    <div style={{
      position: 'relative',
      padding: '36px 32px 32px',
      border: '1px solid var(--surface-border-strong)',
      borderRadius: 4,
      background: 'linear-gradient(180deg, rgba(255,255,255,0.015) 0%, rgba(255,255,255,0) 100%)',
    }}>
      {/* Chart header */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 20, paddingBottom: 16,
        borderBottom: '1px solid var(--surface-border)',
      }}>
        <div>
          <div style={{ ...eMono, marginBottom: 4 }}>Figure 1</div>
          <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--white)' }}>
            Shelf-price distribution, equivalent SKUs
          </div>
        </div>
        <div style={{ display: 'flex', gap: 16 }}>
          <LegendDot color="var(--light-blue)" label="Chinese brands" />
          <LegendDot color="var(--white)" label="Western competitors" />
        </div>
      </div>

      {/* Chart body */}
      <div style={{ position: 'relative', paddingBottom: 28 }}>
        <svg viewBox="0 0 600 260" style={{ width: '100%', height: 'auto', display: 'block' }}>
          {/* gridlines */}
          {[0.25, 0.5, 0.75].map((p, i) => (
            <line key={i} x1="0" x2="600" y1={260 * p} y2={260 * p}
              stroke="rgba(255,255,255,0.04)" strokeDasharray="2 4" />
          ))}

          {/* Western distribution (filled, white) */}
          <path d={makeAreaPath(westernDist, 600, 240, maxV)}
            fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.8)" strokeWidth="1.5" />

          {/* Chinese distribution (filled blue) */}
          <path d={makeAreaPath(chineseDist, 600, 240, maxV)}
            fill="rgba(96,165,250,0.18)" stroke="var(--light-blue)" strokeWidth="1.5" />

          {/* annotations: median markers */}
          <line x1="240" x2="240" y1="0" y2="240" stroke="rgba(96,165,250,0.5)" strokeDasharray="3 3" />
          <line x1="380" x2="380" y1="0" y2="240" stroke="rgba(255,255,255,0.4)" strokeDasharray="3 3" />

          {/* baseline */}
          <line x1="0" x2="600" y1="240" y2="240" stroke="rgba(255,255,255,0.15)" />
        </svg>

        {/* x-axis labels */}
        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-tertiary)',
        }}>
          <span>$10</span>
          <span>$30</span>
          <span>$50</span>
          <span>$70</span>
          <span>$90+</span>
        </div>
      </div>

      {/* Footer stats — like a research paper */}
      <div style={{
        marginTop: 24, paddingTop: 20,
        borderTop: '1px solid var(--surface-border)',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
      }}>
        <StatCell label="Chinese median" value="$24" trend="–58% vs. Western" />
        <StatCell label="Western median" value="$58" trend="reference baseline" />
        <StatCell label="Compounded loss" value="–$34" trend="per equivalent SKU" hot />
      </div>
    </div>
  );
}

function LegendDot({ color, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
      <span style={{ width: 10, height: 2, background: color, borderRadius: 1 }} />
      {label}
    </div>
  );
}

function StatCell({ label, value, trend, hot }) {
  return (
    <div>
      <div style={{ ...eMono, marginBottom: 4 }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-heading)', fontSize: 28, fontWeight: 700,
        color: hot ? 'var(--copper-hot)' : 'var(--white)',
        lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 6,
      }}>{value}</div>
      <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '0.04em' }}>{trend}</div>
    </div>
  );
}

function makeAreaPath(vals, w, h, maxV) {
  const n = vals.length;
  const step = w / (n - 1);
  const pts = vals.map((v, i) => `${i * step},${h - (v / maxV) * h}`);
  return `M0,${h} L${pts.join(' L')} L${w},${h} Z`;
}

// ─────────────────────────────────────────────────────────────
// Section 2 — "The gap, mapped" — domain heat map
// ─────────────────────────────────────────────────────────────
function BDomainMap({ t }) {
  return (
    <section className="section section--black" id="gap" style={{ position: 'relative' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.2fr',
          gap: 80, alignItems: 'start',
        }}>
          <div>
            <div style={eMono}>Where the gap lives</div>
            <h2 style={{
              fontSize: 'clamp(34px, 4vw, 56px)',
              lineHeight: 1.1, letterSpacing: '-0.02em',
              marginTop: 16, marginBottom: 28,
            }}>
              Ten domains.
              <br />
              <span style={{ color: 'var(--text-secondary)' }}>Most brands bleed in three to five.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--text-secondary)', maxWidth: 460, marginBottom: 24 }}>
              Each capability is scored on a 5-level maturity model against what Western brands
              in your category actually do. The lower the score, the more pricing power leaks out.
            </p>

            {t.showAnnotations && (
              <div style={{
                paddingTop: 20, borderTop: '1px solid var(--surface-border)',
                fontSize: 12, color: 'var(--text-tertiary)',
                lineHeight: 1.7, maxWidth: 460,
              }}>
                <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--light-blue)' }}>2.</span>{' '}
                Average maturity score across diagnosed Chinese brands, Q4 2025 cohort. n = 14.
                Domain order matches Silk standard taxonomy. Higher is better; 5.0 is "Leading."
              </div>
            )}
          </div>

          <div>
            <div style={{ border: '1px solid var(--surface-border-strong)', borderRadius: 4, overflow: 'hidden' }}>
              <div style={{
                display: 'grid', gridTemplateColumns: '40px 1fr 80px 100px',
                gap: 0,
                padding: '12px 20px',
                background: 'rgba(255,255,255,0.02)',
                borderBottom: '1px solid var(--surface-border)',
                ...eMono, fontSize: 10,
              }}>
                <span>#</span>
                <span>Domain</span>
                <span style={{ textAlign: 'right' }}>Avg</span>
                <span style={{ textAlign: 'right' }}>Gap</span>
              </div>
              {B_DOMAINS.map(d => (
                <DomainRow key={d.n} {...d} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DomainRow({ n, name, avg, gap }) {
  const gapColor = gap === 'Critical' ? 'var(--copper-hot)'
                 : gap === 'High' ? 'var(--copper)'
                 : 'var(--text-secondary)';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '40px 1fr 80px 100px',
      alignItems: 'center', padding: '14px 20px',
      borderBottom: '1px solid var(--surface-border)',
      transition: 'background .2s',
    }}
      onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.015)'}
      onMouseLeave={(e) => e.currentTarget.style.background = ''}
    >
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-tertiary)' }}>{n}</span>
      <span style={{ fontSize: 14, color: 'var(--white)' }}>{name}</span>
      <div style={{ textAlign: 'right' }}>
        <MiniBar value={avg} max={5} />
      </div>
      <span style={{
        textAlign: 'right',
        fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
        textTransform: 'uppercase', color: gapColor, fontWeight: 500,
      }}>{gap}</span>
    </div>
  );
}

function MiniBar({ value, max }) {
  const pct = (value / max) * 100;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      width: '100%', justifyContent: 'flex-end',
    }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-secondary)' }}>{value.toFixed(1)}</span>
      <div style={{ width: 36, height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--light-blue)', opacity: 0.7 }} />
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Section 3 — Recent engagement (proof EARLY in this variant)
// ─────────────────────────────────────────────────────────────
function BCaseStudy({ t }) {
  return (
    <section className="section section--navy" id="case" style={{ borderTop: '1px solid var(--surface-border)' }}>
      <div className="container">
        <div style={{
          paddingBottom: 24,
          borderBottom: '1px solid var(--surface-border)',
          marginBottom: 56,
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        }}>
          <span style={eMono}>Recent engagement · anonymized</span>
          <span style={eMono}>Case 001 / 2026</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr',
          gap: 80, alignItems: 'start',
        }}>
          <div>
            <h2 style={{
              fontSize: 'clamp(32px, 3.6vw, 52px)',
              lineHeight: 1.1, letterSpacing: '-0.02em',
              marginBottom: 28,
            }}>
              A leading Chinese baby products brand.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-secondary)', marginBottom: 32 }}>
              Strong Amazon volume, no brand premium. Five domains diagnosed.
              Three intervention waves blueprinted. Projected ROI compounded across coordinated
              capabilities — not a single channel uplift.
            </p>

            <dl style={{ margin: 0, fontSize: 14, lineHeight: 1.7 }}>
              {[
                ['Category', 'Baby products · Amazon-native'],
                ['Pre-engagement', 'Top-15 category seller, no DTC, 0 retail'],
                ['Domains scored', 'Brand · Content · Influencer · Retail · Org'],
                ['Engagement length', '6 weeks (Diagnose + Blueprint)'],
                ['Deliverables', '38-page diagnostic · 52-page blueprint · ROI model'],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr',
                  paddingBlock: 10,
                  borderBottom: '1px dashed var(--surface-border)',
                  gap: 16,
                }}>
                  <dt style={{ ...eMono, fontSize: 10 }}>{k}</dt>
                  <dd style={{ margin: 0, color: 'var(--white)' }}>{v}</dd>
                </div>
              ))}
            </dl>

            <div style={{ marginTop: 32, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <a href="#" className="btn btn-ghost">Read the full case study →</a>
              <a href="#" style={{
                fontSize: 13, color: 'var(--text-secondary)',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '14px 0',
              }}>
                Download PDF (anonymized) ↓
              </a>
            </div>
          </div>

          <BROITable />
        </div>
      </div>
    </section>
  );
}

function BROITable() {
  const rows = [
    { wave: 'Wave 1', label: 'Influencer reset', q: 'Q1', roi: 1.4 },
    { wave: 'Wave 1', label: 'Listing emotional reframe', q: 'Q1', roi: 2.1 },
    { wave: 'Wave 2', label: 'DTC foundation build', q: 'Q2', roi: 1.8 },
    { wave: 'Wave 2', label: 'PR campaign · 12 outlets', q: 'Q2', roi: 0.9 },
    { wave: 'Wave 3', label: 'Retail entry · 2 chains', q: 'Q3–Q4', roi: 3.2 },
    { wave: 'Wave 3', label: 'Brand re-architecture', q: 'Q4', roi: 0.6 },
  ];
  const maxROI = 4;
  return (
    <div>
      <div style={{
        padding: '20px 24px', border: '1px solid var(--surface-border-strong)', borderRadius: 4,
        background: 'linear-gradient(180deg, rgba(96,165,250,0.03) 0%, rgba(255,255,255,0) 100%)',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          paddingBottom: 16, borderBottom: '1px solid var(--surface-border)', marginBottom: 16,
        }}>
          <div>
            <div style={{ ...eMono, marginBottom: 4 }}>Figure 2</div>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--white)' }}>
              Per-intervention projected ROI, Year 1
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: 'var(--font-heading)', fontSize: 32, fontWeight: 700,
              color: 'var(--white)', lineHeight: 1, letterSpacing: '-0.02em',
            }}>
              3.19×
            </div>
            <div style={{ ...eMono, marginTop: 4 }}>Aggregate Y1</div>
          </div>
        </div>

        {rows.map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '60px 1fr 60px 1fr 50px',
            alignItems: 'center', gap: 12, paddingBlock: 10,
            borderBottom: i < rows.length - 1 ? '1px solid var(--surface-border)' : 'none',
            fontSize: 13,
          }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-tertiary)', letterSpacing: '0.08em' }}>
              {r.wave.replace('Wave ', 'W')}
            </span>
            <span style={{ color: 'var(--white)' }}>{r.label}</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--text-tertiary)' }}>{r.q}</span>
            <div style={{ height: 4, background: 'rgba(255,255,255,0.06)', borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: `${(r.roi / maxROI) * 100}%`, height: '100%', background: 'var(--light-blue)', opacity: 0.8 }} />
            </div>
            <span style={{
              textAlign: 'right',
              fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--white)',
            }}>{r.roi.toFixed(1)}×</span>
          </div>
        ))}

        <div style={{
          marginTop: 16, paddingTop: 16,
          borderTop: '1px dashed var(--surface-border)',
          display: 'flex', justifyContent: 'space-between',
          fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-secondary)',
        }}>
          <span>Year 3 projection</span>
          <span style={{ color: 'var(--copper-hot)' }}>8.0×+</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Section 4 — Methodology (4 phases as a table, not cards)
// ─────────────────────────────────────────────────────────────
function BMethodology() {
  return (
    <section className="section section--black" id="method">
      <div className="container">
        <div style={{
          paddingBottom: 24, borderBottom: '1px solid var(--surface-border)',
          marginBottom: 56,
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        }}>
          <span style={eMono}>Methodology · the operating system</span>
          <span style={eMono}>4 phases · sequenced</span>
        </div>

        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <h2 style={{
            fontSize: 'clamp(32px, 3.6vw, 52px)',
            lineHeight: 1.1, letterSpacing: '-0.02em',
            marginBottom: 24,
          }}>
            We map your business as an operating system,
            then improve it.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-secondary)' }}>
            Each engagement runs the same four phases. The depth of each is calibrated to your scores,
            your category, and the gaps that actually cost you money.
          </p>
        </div>

        <div style={{ border: '1px solid var(--surface-border-strong)', borderRadius: 4 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '80px 200px 1.6fr 140px',
            padding: '14px 24px',
            ...eMono, fontSize: 10,
            borderBottom: '1px solid var(--surface-border)',
            background: 'rgba(255,255,255,0.02)',
          }}>
            <span>Phase</span>
            <span>Name</span>
            <span>What it does</span>
            <span style={{ textAlign: 'right' }}>Duration</span>
          </div>
          {B_PHASES.map(p => (
            <div key={p.num} style={{
              display: 'grid',
              gridTemplateColumns: '80px 200px 1.6fr 140px',
              padding: '24px',
              alignItems: 'start',
              borderBottom: '1px solid var(--surface-border)',
              gap: 16,
            }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14, color: 'var(--light-blue)' }}>{p.num}</span>
              <span style={{ fontSize: 19, fontWeight: 600, fontFamily: 'var(--font-heading)', color: 'var(--white)' }}>{p.name}</span>
              <span style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6 }}>{p.body}</span>
              <span style={{
                textAlign: 'right',
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--text-tertiary)', letterSpacing: '0.06em',
                textTransform: 'uppercase',
              }}>{p.span}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Section 5 — Working hypothesis / Difference
// ─────────────────────────────────────────────────────────────
function BDifference() {
  return (
    <section className="section section--navy" id="about">
      <div className="container">
        <div style={{
          paddingBottom: 24, borderBottom: '1px solid var(--surface-border)',
          marginBottom: 56,
        }}>
          <span style={eMono}>What we believe</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr',
          gap: 80,
        }}>
          <h2 style={{
            fontSize: 'clamp(32px, 3.6vw, 52px)',
            lineHeight: 1.1, letterSpacing: '-0.02em',
          }}>
            Three positions
            <br />
            we won't move from.
          </h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
            <Belief
              n="01"
              title="Methodology, not opinion"
              body="240+ scored benchmarks against what Western brands in your category actually do. Two evaluators, same brand, same score. The product is the map, not a deck."
            />
            <Belief
              n="02"
              title="One operating layer, not two vendors"
              body="A CN Professional Services team embedded in your operations, in Mandarin. A US Advisory team making the strategic calls, in English. Translation happens inside our team — not at your team's expense."
            />
            <Belief
              n="03"
              title="Aligned incentives"
              body="We work for you like a peer, not an agency selling you services to hit our own KPIs. Our reputation is our business — getting it right matters more than being right."
            />
          </div>
        </div>

        <div style={{
          marginTop: 80, paddingTop: 32,
          borderTop: '1px solid var(--surface-border)',
          display: 'grid', gridTemplateColumns: '180px 1fr 1fr',
          gap: 48, alignItems: 'center',
        }}>
          <div style={{
            width: 140, height: 140, borderRadius: '50%',
            border: '1px solid var(--surface-border-strong)',
            background: 'linear-gradient(135deg, rgba(96,165,250,0.1), rgba(180,83,9,0.06))',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            ...eMono, fontSize: 9, textAlign: 'center',
          }}>
            Tim Jordan<br />photo
          </div>
          <div>
            <div style={{ ...eMono, marginBottom: 8 }}>Founder</div>
            <div style={{ fontSize: 19, fontWeight: 600, fontFamily: 'var(--font-heading)', marginBottom: 6, color: 'var(--white)' }}>Tim Jordan</div>
            <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>
              In China since 2014. From small brand offices to the Alibaba executive campus.
              Educator, advisor, connector across US–China ecommerce.
            </p>
          </div>
          <div>
            <p style={{
              fontFamily: 'var(--font-heading)', fontSize: 18, fontWeight: 500,
              lineHeight: 1.5, color: 'var(--white)', margin: 0,
              fontStyle: 'italic',
            }}>
              "The system we built is what we wish someone had handed us in 2014."
            </p>
            <a href="#about" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 14,
              fontSize: 13, color: 'var(--light-blue)',
            }}>
              The team, advisors and partners
              <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Belief({ n, title, body }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '60px 1fr',
      gap: 24, paddingBottom: 28,
      borderBottom: '1px solid var(--surface-border)',
    }}>
      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--light-blue)', paddingTop: 4 }}>{n}</span>
      <div>
        <h3 style={{ fontSize: 22, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em' }}>{title}</h3>
        <p style={{ fontSize: 15, color: 'var(--text-secondary)', lineHeight: 1.65, margin: 0 }}>{body}</p>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// CTA — quiet, single ask
// ─────────────────────────────────────────────────────────────
function BCTA() {
  return (
    <section className="section section--black" id="cta" style={{ paddingBlock: 'min(140px, 12vw)' }}>
      <div className="container">
        <div style={{
          paddingBottom: 24, borderBottom: '1px solid var(--surface-border)',
          marginBottom: 56,
        }}>
          <span style={eMono}>How to start</span>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 56,
        }}>
          <div>
            <h2 style={{
              fontSize: 'clamp(34px, 4vw, 60px)',
              lineHeight: 1.05, letterSpacing: '-0.02em',
              marginBottom: 24,
            }}>
              See where your brand stands
              <br />
              <span style={{ color: 'var(--text-secondary)' }}>before you commit to anything.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--text-secondary)', maxWidth: 480 }}>
              A diagnostic conversation lasts 45 minutes. You walk away with our read on your
              top three pricing-power gaps and what would close them — whether or not you engage further.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <CTACard
              kind="primary"
              label="Schedule a Diagnostic"
              body="A 45-minute conversation. We show you your top three gaps."
              href="#cta"
            />
            <CTACard
              kind="ghost"
              label="Affiliate Readiness Check"
              body="Submit 10 fields. Receive a structured readiness snapshot. Fully anonymous."
              href="#readiness"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function CTACard({ kind, label, body, href }) {
  const primary = kind === 'primary';
  return (
    <a href={href} style={{
      border: '1px solid ' + (primary ? 'rgba(217,119,6,0.4)' : 'var(--surface-border-strong)'),
      borderRadius: 4,
      padding: '24px 28px',
      display: 'flex', flexDirection: 'column', gap: 10,
      background: primary
        ? 'linear-gradient(180deg, rgba(180,83,9,0.08), rgba(180,83,9,0.01))'
        : 'transparent',
      transition: 'border-color .25s, transform .25s',
    }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = ''; }}
    >
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <span style={{
          fontFamily: 'var(--font-heading)', fontSize: 22, fontWeight: 600,
          color: 'var(--white)', letterSpacing: '-0.01em',
        }}>
          {label}
        </span>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
          color: primary ? 'var(--copper-hot)' : 'var(--light-blue)',
          textTransform: 'uppercase',
        }}>
          {primary ? 'Primary →' : 'Optional →'}
        </span>
      </div>
      <p style={{ fontSize: 14, color: 'var(--text-secondary)', margin: 0, lineHeight: 1.55 }}>{body}</p>
    </a>
  );
}

// ─────────────────────────────────────────────────────────────
// Footer
// ─────────────────────────────────────────────────────────────
function BFooter({ t }) {
  return (
    <footer style={{
      background: 'var(--rich-black)',
      borderTop: '1px solid var(--surface-border)',
      paddingBlock: 64,
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr 1.2fr',
          gap: 56,
          marginBottom: 48,
        }}>
          <div>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'baseline', gap: 4,
              fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 22,
              marginBottom: 14,
            }}>
              <span style={{ color: 'var(--white)' }}>Project</span>
              <span style={{ color: 'var(--light-blue)' }}>Silk</span>
            </a>
            <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 340 }}>
              The US Market Readiness System for Chinese brands. Western strategy built for Chinese businesses.
            </p>
            {t.chineseSignals && (
              <div style={{ marginTop: 14, fontFamily: 'var(--font-zh)', fontSize: 13, color: 'var(--light-blue)', letterSpacing: '0.18em' }}>
                品牌出海，数据说话
              </div>
            )}
          </div>

          <div>
            <div style={{ ...eMono, marginBottom: 16 }}>Site</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              {['The Gap', 'Case Study', 'Methodology', 'About', 'Affiliate Readiness', 'Contact'].map(l => (
                <li key={l}><a href="#" style={{ color: 'var(--text-secondary)' }}>{l}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <div style={{ ...eMono, marginBottom: 16 }}>Connect</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              <li><a href="#" style={{ color: 'var(--text-secondary)' }}>hello@project-silk.com</a></li>
              <li><a href="#" style={{ color: 'var(--text-secondary)' }}>LinkedIn</a></li>
              <li><a href="#" style={{ color: 'var(--text-secondary)' }}>Foundry Studio</a></li>
            </ul>
          </div>

          <BWeChatBlock />
        </div>

        <div style={{
          paddingTop: 24, borderTop: '1px solid var(--surface-border)',
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontSize: 11, color: 'var(--text-tertiary)',
        }}>
          <div>© 2026 Project Silk · A Foundry Studio venture</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function BWeChatBlock() {
  return (
    <div>
      <div style={{ ...eMono, marginBottom: 16 }}>WeCom · 企业微信</div>
      <div style={{ display: 'flex', gap: 14 }}>
        <div style={{
          width: 76, height: 76,
          background: 'var(--deep-navy-2)',
          border: '1px solid var(--surface-border-strong)',
          borderRadius: 4,
          display: 'grid',
          gridTemplateColumns: 'repeat(8, 1fr)', gridTemplateRows: 'repeat(8, 1fr)',
          padding: 5, gap: 1.5,
        }}>
          {Array.from({ length: 64 }).map((_, i) => (
            <div key={i} style={{
              background: (i * 17 + Math.floor(i / 8) * 3) % 4 === 0 ? 'var(--white)' : 'transparent',
              borderRadius: 1,
            }} />
          ))}
        </div>
        <div style={{ fontSize: 12, color: 'var(--text-secondary)', lineHeight: 1.55 }}>
          Project Silk<br />
          <span style={{ fontFamily: 'var(--font-zh)' }}>项目丝路</span><br />
          <span style={{ color: 'var(--text-tertiary)', fontSize: 11 }}>Scan to add</span>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// WeChat pill (shared pattern)
// ─────────────────────────────────────────────────────────────
function BWeChatPill() {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ position: 'fixed', left: 24, bottom: 24, zIndex: 40 }}>
      {open && (
        <div style={{
          position: 'absolute', bottom: 60, left: 0,
          background: 'rgba(20, 22, 30, 0.94)',
          border: '1px solid var(--surface-border-strong)',
          backdropFilter: 'blur(18px) saturate(140%)',
          WebkitBackdropFilter: 'blur(18px) saturate(140%)',
          borderRadius: 8, padding: 14, width: 200,
          boxShadow: '0 24px 60px rgba(0,0,0,0.6)',
        }}>
          <div style={{ ...eMono, fontSize: 10, marginBottom: 10 }}>WeCom · 企业微信</div>
          <div style={{
            width: '100%', aspectRatio: '1/1',
            background: 'var(--deep-navy-2)',
            border: '1px solid var(--surface-border-strong)', borderRadius: 4,
            display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)', gridTemplateRows: 'repeat(10, 1fr)',
            padding: 7, gap: 1.5, marginBottom: 8,
          }}>
            {Array.from({ length: 100 }).map((_, i) => (
              <div key={i} style={{
                background: (i * 13 + Math.floor(i / 10) * 5) % 4 === 0 ? 'var(--white)' : 'transparent',
              }} />
            ))}
          </div>
          <div style={{ fontSize: 11, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
            Scan to add Project Silk's<br />official WeCom account
          </div>
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{
        background: open ? 'var(--light-blue)' : 'rgba(20, 22, 30, 0.92)',
        color: open ? 'var(--rich-black)' : 'var(--white)',
        border: '1px solid ' + (open ? 'var(--light-blue)' : 'var(--surface-border-strong)'),
        borderRadius: 999, padding: '10px 16px',
        display: 'flex', alignItems: 'center', gap: 10,
        fontSize: 12, fontWeight: 500, cursor: 'pointer',
        backdropFilter: 'blur(18px) saturate(140%)',
        WebkitBackdropFilter: 'blur(18px) saturate(140%)',
        transition: 'all .25s ease',
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: open ? 'var(--rich-black)' : 'var(--copper-hot)',
          boxShadow: open ? 'none' : '0 0 6px var(--copper-hot)',
        }} />
        WeChat · 微信
      </button>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// App
// ─────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(B_TWEAKS);

  return (
    <div data-density={t.density}>
      <BNav />
      <BHero t={t} />
      <BDomainMap t={t} />
      <BCaseStudy t={t} />
      <BMethodology />
      <BDifference />
      <BCTA />
      <BFooter t={t} />
      <BWeChatPill />

      <TweaksPanel>
        <TweakSection label="Editorial settings" />
        <TweakToggle label="Show research annotations"
          value={t.showAnnotations}
          onChange={(v) => setTweak('showAnnotations', v)} />
        <TweakToggle label="Show Chinese signals"
          value={t.chineseSignals}
          onChange={(v) => setTweak('chineseSignals', v)} />
        <TweakSection label="Density" />
        <TweakRadio label="Section rhythm"
          value={t.density}
          options={['compact', 'standard', 'spacious']}
          onChange={(v) => setTweak('density', v)} />
      </TweaksPanel>
    </div>
  );
}

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