// Pair invite, pairwise cohesion, pair development reports.
// PairCohesionScreen uses real scores for participant A via getKalibrScores().
// MOCK_PARTNER remains mock until the partner completes the assessment.

function PairComingSoonBanner() {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 10,
      background: 'var(--k-bg-2)',
      borderBottom: '1px solid var(--k-line)',
      padding: '10px 48px',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{ fontSize: 11, fontFamily: 'var(--k-mono)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--k-ink-4)', background: 'var(--k-bg-3)', padding: '3px 8px', borderRadius: 4 }}>Coming soon</span>
      <span style={{ fontSize: 13, color: 'var(--k-ink-3)' }}>Pairwise reports launch after individual assessments are live. Preview only — interactions disabled.</span>
    </div>
  );
}

function PairInviteScreen({ onEnter }) {
  return (
    <div>
      <PairComingSoonBanner />
      <div style={{ pointerEvents: 'none', userSelect: 'none' }}>
        <div style={{ maxWidth: 720, margin: '0 auto', padding: '48px 48px 80px' }}>
          <div className="k-label">Pair invite</div>
          <h1 className="k-serif" style={{ fontSize: 40, margin: '8px 0 12px', letterSpacing: '-0.025em' }}>Invite your co-founder, partner, or manager.</h1>
          <p style={{ fontSize: 15.5, color: 'var(--k-ink-2)', lineHeight: 1.55, marginBottom: 32 }}>
            When they complete the assessment, you unlock the <strong>Pairwise Cohesion Report</strong> and the <strong>Pair Development Report</strong> — with Joint, Private, and Facilitator blocks.
          </p>
          <div className="k-card" style={{ padding: 28 }}>
            <div className="k-label" style={{ marginBottom: 12 }}>Send invite</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input placeholder="Partner's full name" defaultValue="Lena Sørensen" style={{ padding: '12px 14px', border: '1px solid var(--k-line)', borderRadius: 10, fontSize: 14, fontFamily: 'inherit', background: 'var(--k-surface)' }} />
              <input placeholder="Work email" defaultValue="lena@meridianlabs.com" style={{ padding: '12px 14px', border: '1px solid var(--k-line)', borderRadius: 10, fontSize: 14, fontFamily: 'inherit', background: 'var(--k-surface)' }} />
              <select style={{ padding: '12px 14px', border: '1px solid var(--k-line)', borderRadius: 10, fontSize: 14, fontFamily: 'inherit', background: 'var(--k-surface)' }}>
                <option>Peer (co-founder, co-lead)</option>
                <option>Manager above me</option>
                <option>Direct report</option>
                <option>Investor / board</option>
              </select>
              <textarea rows={3} placeholder="Optional note" defaultValue="Hey Lena — let's do the Kalibr pair report before next week's board prep. 27 min." style={{ padding: '12px 14px', border: '1px solid var(--k-line)', borderRadius: 10, fontSize: 14, fontFamily: 'inherit', background: 'var(--k-surface)', resize: 'none' }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 18 }}>
              <button className="k-btn k-btn--ghost">Copy shareable link</button>
              <button className="k-btn k-btn--primary">Send invite</button>
            </div>
          </div>
          <div style={{ marginTop: 24, padding: 18, background: 'var(--k-bg-2)', borderRadius: 10, fontSize: 13, color: 'var(--k-ink-3)', lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--k-ink-2)' }}>Privacy:</strong> Neither of you will see the other's individual blind-spot report. You'll see shared dimension scores, complementarity analysis, and the joint facilitator block.
          </div>
        </div>
      </div>
    </div>
  );
}

function PairCohesionScreen({ onEnter }) {
  // Use real scores for participant A; MOCK_PARTNER stays until partner completes.
  const live = getKalibrScores();
  const participantA = live
    ? { ...MOCK_PARTICIPANT, dimensions: live.dimensions }
    : MOCK_PARTICIPANT;
  const isLive = !!live;

  const pair = computePair(participantA, MOCK_PARTNER);
  const aRadar = DIMS.map(d => ({ short: d.label.split(' ').map(w => w[0]).join(''), value: participantA.dimensions[d.id] || 0 }));
  const bRadar = DIMS.map(d => ({ short: d.label.split(' ').map(w => w[0]).join(''), value: MOCK_PARTNER.dimensions[d.id] }));
  const gapRows = [...pair.rows].sort((a, b) => (b.type === 'similarity' ? b.diff - a.diff : -1) - (a.type === 'similarity' ? a.diff - b.diff : -1));

  // Find the two largest-gap dimensions for the risk strip
  const riskDims = [...pair.rows].sort((a, b) => b.diff - a.diff).slice(0, 2);
  const riskStr = riskDims.map(r => `${r.id} (${r.av} vs ${r.bv})`).join(' and ');

  return (
    <div style={{ maxWidth: 1080, margin: '0 auto', padding: '40px 48px 80px' }}>
      <div className="k-label">Pairwise cohesion · Prompt 1 · {isLive ? 'live scores' : 'demo'}</div>
      <h1 className="k-serif" style={{ fontSize: 44, margin: '8px 0 8px', letterSpacing: '-0.025em' }}>{participantA.name} × {MOCK_PARTNER.name}</h1>
      <p style={{ fontSize: 14, color: 'var(--k-ink-3)', marginBottom: 28 }}>
        {participantA.org} · Founders · generated {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
      </p>

      {/* cohesion score */}
      <div className="k-card" style={{ padding: 32, marginBottom: 28, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, alignItems: 'center' }}>
        <div>
          <div className="k-label">Overall cohesion</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
            <div className="k-serif" style={{ fontSize: 72, letterSpacing: '-0.03em', color: pair.cohesion >= 70 ? 'var(--k-sage-ink)' : pair.cohesion >= 45 ? 'var(--k-sun-ink)' : 'var(--k-rose-ink)' }}>{pair.cohesion}</div>
            <div style={{ fontSize: 16, color: 'var(--k-ink-4)' }}>/ 100</div>
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--k-ink-2)', marginTop: 8, lineHeight: 1.5 }}>
            {pair.cohesion >= 70
              ? 'Strong complementary partnership with potential friction areas in high-gap dimensions.'
              : pair.cohesion >= 45
              ? 'Moderate compatibility with meaningful friction areas that warrant active management.'
              : 'Significant friction areas — this pair will need structured processes to work well together.'}
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Radar data={aRadar} size={240} fill="var(--k-accent)" compareData={bRadar} compareFill="var(--k-indigo)" />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
            <span style={{ width: 12, height: 12, background: 'var(--k-accent)', borderRadius: 2 }} /> {participantA.name}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
            <span style={{ width: 12, height: 12, background: 'var(--k-indigo)', borderRadius: 2 }} /> {MOCK_PARTNER.name}
          </div>
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--k-ink-4)', lineHeight: 1.5 }}>
            Role classification: <strong style={{ color: 'var(--k-ink-2)' }}>Peer × Peer</strong>. Context: <strong style={{ color: 'var(--k-ink-2)' }}>Growth stage.</strong>
          </div>
        </div>
      </div>

      {/* symmetry risk strip */}
      <div style={{ padding: '14px 20px', background: 'var(--k-sun-soft)', borderRadius: 12, marginBottom: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--k-sun)' }} />
        <div style={{ fontSize: 13, color: 'var(--k-sun-ink)', lineHeight: 1.5 }}>
          <strong>Risk concentration line ·</strong> You differ most on <strong>{riskStr}</strong>. Both are silent friction areas in co-founder partnerships: they produce conflict that neither party sees as personality, just "being right."
        </div>
      </div>

      {/* dimension table */}
      <div className="k-card" style={{ padding: 0, overflow: 'hidden', marginBottom: 28 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 60px 60px 1fr 80px 80px', padding: '12px 20px', background: 'var(--k-bg-2)', borderBottom: '1px solid var(--k-line)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--k-ink-4)' }}>
          <div>Dimension</div>
          <div style={{ textAlign: 'right' }}>{participantA.name.split(' ')[0]}</div>
          <div style={{ textAlign: 'right' }}>{MOCK_PARTNER.name.split(' ')[0]}</div>
          <div style={{ paddingLeft: 16 }}>Compatibility visual</div>
          <div style={{ textAlign: 'right' }}>Type</div>
          <div style={{ textAlign: 'right' }}>Score</div>
        </div>
        {gapRows.map((r, i) => (
          <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '180px 60px 60px 1fr 80px 80px', padding: '14px 20px', borderBottom: i < gapRows.length - 1 ? '1px solid var(--k-line)' : 'none', alignItems: 'center', fontSize: 13 }}>
            <div style={{ fontWeight: 500 }}>{r.label}</div>
            <div className="k-mono" style={{ textAlign: 'right' }}>{r.av}</div>
            <div className="k-mono" style={{ textAlign: 'right' }}>{r.bv}</div>
            <div style={{ padding: '0 16px' }}>
              <div style={{ position: 'relative', height: 6, background: 'var(--k-bg-3)', borderRadius: 3 }}>
                <div style={{ position: 'absolute', left: `${Math.min(r.av, r.bv)}%`, width: `${Math.abs(r.av - r.bv)}%`, height: '100%', background: r.score >= 70 ? 'var(--k-sage)' : r.score >= 45 ? 'var(--k-sun)' : 'var(--k-rose)', borderRadius: 3 }} />
                <div style={{ position: 'absolute', left: `${r.av}%`, transform: 'translateX(-50%)', top: -3, width: 2, height: 12, background: 'var(--k-accent)' }} />
                <div style={{ position: 'absolute', left: `${r.bv}%`, transform: 'translateX(-50%)', top: -3, width: 2, height: 12, background: 'var(--k-indigo)' }} />
              </div>
            </div>
            <div style={{ textAlign: 'right', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--k-ink-4)' }}>{r.type}</div>
            <div className="k-mono" style={{ textAlign: 'right', fontWeight: 600, color: r.score >= 70 ? 'var(--k-sage-ink)' : r.score >= 45 ? 'var(--k-sun-ink)' : 'var(--k-rose-ink)' }}>{Math.round(r.score)}</div>
          </div>
        ))}
      </div>

      <button className="k-btn k-btn--primary k-btn--lg" onClick={() => onEnter('pair-development')}>Open Pair Development Report →</button>
    </div>
  );
}

function PairDevelopmentScreen() {
  const [block, setBlock] = React.useState('joint');
  const content = {
    joint: {
      title: 'What you talk about together',
      subtitle: 'For a joint 30-min conversation. Facilitator optional.',
      agreements: [
        ['Decision tempo', "When one of you says 'let's go' and the other says 'let me think', default to a 48-hour clock. Neither of you is wrong — the clock is the contract."],
        ['Directness lane', 'Both partners can be direct by name. Neither reads the other\'s mode as a personal statement.'],
        ['Silent friction signal', "If either of you feels the other is moving at the wrong speed three times in a week, that's the signal to calendar a 20-min check-in. Not a fight. A re-sync."],
      ],
    },
    private: {
      title: 'What each of you reads alone',
      subtitle: 'Specific to your profile. Not shared with your partner.',
      agreements: [
        ["For the high-drive partner", "Your partner's deliberation is not resistance. It is the feature that prevents the company from making a reversible mistake that looks irreversible to them. Budget for it in timelines."],
        ["For the high-drive partner", "Your bondingIndex is reading as transactional. One sentence of relational framing before directive messages closes most of that gap."],
        ["For the deliberative partner", "Your partner's speed is not impulsiveness. High volatilityVector paired with high temporalOrientation means they're fast because they've already run the long-term model. Ask for the model."],
      ],
    },
    facilitator: {
      title: 'For your coach or facilitator',
      subtitle: 'Classified context — not shown to the pair.',
      agreements: [
        ['Read this first', "Both are peers; neither should default to deferring. Watch for the more directive partner's force dominating air-time even when the other is the domain owner."],
        ['Dimension to probe live', 'Feedback orientation gap: if large, when critical input comes from the lower-assertiveness partner, the higher-assertiveness one may appear to dismiss before absorbing. Slow the room down for 60 seconds.'],
        ['Do not disclose', 'Individual blind-spot codes. SD3 adminOnly block. Signature pattern labels.'],
      ],
    },
  }[block];

  return (
    <div style={{ maxWidth: 980, margin: '0 auto', padding: '40px 48px 80px' }}>
      <div className="k-label">Pair development · Prompt 4</div>
      <h1 className="k-serif" style={{ fontSize: 44, margin: '8px 0 12px', letterSpacing: '-0.025em' }}>How to work together, starting tomorrow.</h1>
      <p style={{ fontSize: 15.5, color: 'var(--k-ink-2)', marginBottom: 28, lineHeight: 1.55 }}>
        Three blocks derived from your pairwise analysis. Joint for the conversation you have together. Private for the one you have with yourself. Facilitator for the one your coach has with both.
      </p>

      <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--k-bg-2)', borderRadius: 999, marginBottom: 28, width: 'fit-content' }}>
        {[['joint', 'Joint block'], ['private', 'Private block'], ['facilitator', 'Facilitator block']].map(([k, l]) => (
          <button key={k} onClick={() => setBlock(k)} style={{
            padding: '7px 18px', border: 'none', borderRadius: 999, cursor: 'pointer',
            background: block === k ? 'var(--k-surface)' : 'transparent',
            color: block === k ? 'var(--k-ink)' : 'var(--k-ink-3)', fontWeight: 500, fontSize: 13,
            boxShadow: block === k ? 'var(--sh-1)' : 'none',
          }}>{l}</button>
        ))}
      </div>

      <div className="k-card" style={{ padding: '32px 36px' }}>
        <div className="k-serif" style={{ fontSize: 30, letterSpacing: '-0.02em', marginBottom: 4 }}>{content.title}</div>
        <div style={{ fontSize: 14, color: 'var(--k-ink-3)', marginBottom: 28 }}>{content.subtitle}</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          {content.agreements.map(([head, body], i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, paddingBottom: 20, borderBottom: i < content.agreements.length - 1 ? '1px solid var(--k-line)' : 'none' }}>
              <div className="k-label" style={{ color: 'var(--k-accent-ink)' }}>{head}</div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--k-ink-2)' }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function CrosswalkScreen() {
  const [instrument, setInstrument] = React.useState('NEO PI-R');
  const instruments = ['NEO PI-R', 'HEXACO-PI', 'HPI', 'JPI-R', 'MPQ', 'TCI', '6-FPQ', 'CPI'];
  return (
    <div style={{ maxWidth: 920, margin: '0 auto', padding: '40px 48px 80px' }}>
      <div className="k-label">Crosswalk import · Section 0A</div>
      <h1 className="k-serif" style={{ fontSize: 40, margin: '8px 0 10px', letterSpacing: '-0.025em' }}>Already assessed? Import your scores.</h1>
      <p style={{ fontSize: 15.5, color: 'var(--k-ink-2)', lineHeight: 1.55, marginBottom: 28, maxWidth: 680 }}>
        Kalibr accepts pre-scored output from eight psychometric instruments. Blend formulas convert your existing subscales into Kalibr's 17 internal scales. All crosswalk-derived scores carry a <strong>±5 point confidence band</strong>, surfaced throughout your report.
      </p>

      <div className="k-card" style={{ padding: 28 }}>
        <div className="k-label" style={{ marginBottom: 12 }}>1 · Select your source instrument</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 28 }}>
          {instruments.map(n => (
            <button key={n} onClick={() => setInstrument(n)} style={{
              padding: '12px 10px', border: '1px solid ' + (instrument === n ? 'var(--k-accent)' : 'var(--k-line)'),
              borderRadius: 10, background: instrument === n ? 'var(--k-accent-soft)' : 'var(--k-surface)',
              color: instrument === n ? 'var(--k-accent-ink)' : 'var(--k-ink-2)',
              fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
            }}>{n}</button>
          ))}
        </div>

        <div className="k-label" style={{ marginBottom: 12 }}>2 · Upload scored output</div>
        <div style={{ padding: 32, border: '2px dashed var(--k-line-strong)', borderRadius: 12, textAlign: 'center', background: 'var(--k-bg-2)' }}>
          <div style={{ fontSize: 36, marginBottom: 10 }}>⇪</div>
          <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--k-ink-2)', marginBottom: 4 }}>Drop your {instrument} subscale export</div>
          <div style={{ fontSize: 12, color: 'var(--k-ink-4)' }}>CSV, XLSX, or JSON · up to 500 respondents</div>
          <button className="k-btn k-btn--ghost" style={{ marginTop: 14 }}>Browse files</button>
        </div>

        <div style={{ marginTop: 20, padding: 16, background: 'var(--k-sun-soft)', borderRadius: 10, fontSize: 12.5, color: 'var(--k-sun-ink)', lineHeight: 1.55 }}>
          <strong>Quality flags will apply.</strong> A112 (bondingIndex) and A174 (energyResilience) are single-item anchors — when absent, Kalibr substitutes blended means and marks both as APPROXIMATION. Grit, BRCS, and Work Ethic will appear as proxy estimates if not separately supplied. AI preferences cannot be derived from {instrument} — you'll be asked to answer those 25 items directly (~4 min).
        </div>
      </div>
    </div>
  );
}

function PairReportScreen({ onEnter }) {
  const [tab, setTab] = React.useState('cohesion');
  const live = getKalibrScores();
  const participantA = live ? { ...MOCK_PARTICIPANT, dimensions: live.dimensions } : MOCK_PARTICIPANT;
  const isLive = !!live;
  const pair = computePair(participantA, MOCK_PARTNER);

  const aRadar   = DIMS.map(d => ({ short: d.label.split(' ').map(w => w[0]).join(''), value: participantA.dimensions[d.id] || 0 }));
  const bRadar   = DIMS.map(d => ({ short: d.label.split(' ').map(w => w[0]).join(''), value: MOCK_PARTNER.dimensions[d.id] }));
  const gapRows  = [...pair.rows].sort((a, b) => b.diff - a.diff);
  const riskDims = [...pair.rows].sort((a, b) => b.diff - a.diff).slice(0, 2);
  const riskStr  = riskDims.map(r => `${r.id} (${r.av} vs ${r.bv})`).join(' and ');

  const [block, setBlock] = React.useState('joint');
  const devContent = {
    joint: {
      title: 'What you talk about together',
      subtitle: 'For a joint 30-min conversation. Facilitator optional.',
      agreements: [
        ['Decision tempo', "When one of you says 'let\'s go' and the other says 'let me think', default to a 48-hour clock. Neither of you is wrong — the clock is the contract."],
        ['Directness lane', "Both partners can be direct by name. Neither reads the other's mode as a personal statement."],
        ['Silent friction signal', "If either of you feels the other is moving at the wrong speed three times in a week, that's the signal to calendar a 20-min check-in. Not a fight. A re-sync."],
      ],
    },
    private: {
      title: 'What each of you reads alone',
      subtitle: 'Specific to your profile. Not shared with your partner.',
      agreements: [
        ["For the high-drive partner", "Your partner's deliberation is not resistance. It is the feature that prevents the company from making a reversible mistake that looks irreversible to them. Budget for it in timelines."],
        ["For the high-drive partner", "Your bondingIndex is reading as transactional. One sentence of relational framing before directive messages closes most of that gap."],
        ["For the deliberative partner", "Your partner's speed is not impulsiveness. High volatilityVector paired with high temporalOrientation means they're fast because they've already run the long-term model. Ask for the model."],
      ],
    },
    facilitator: {
      title: 'For your coach or facilitator',
      subtitle: 'Classified context — not shown to the pair.',
      agreements: [
        ['Read this first', "Both are peers; neither should default to deferring. Watch for the more directive partner's force dominating air-time even when the other is the domain owner."],
        ['Dimension to probe live', 'Feedback orientation gap: if large, when critical input comes from the lower-assertiveness partner, the higher-assertiveness one may appear to dismiss before absorbing. Slow the room down for 60 seconds.'],
        ['Do not disclose', 'Individual blind-spot codes. SD3 adminOnly block. Signature pattern labels.'],
      ],
    },
  }[block];

  return (
    <div>
      <PairComingSoonBanner />
      <div style={{ pointerEvents: 'none', userSelect: 'none' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '40px 48px 80px' }}>

      {/* Header */}
      <div className="k-label">Pair report · {isLive ? 'live scores' : 'demo'}</div>
      <h1 className="k-serif" style={{ fontSize: 44, margin: '8px 0 8px', letterSpacing: '-0.025em' }}>
        {participantA.name} × {MOCK_PARTNER.name}
      </h1>
      <p style={{ fontSize: 14, color: 'var(--k-ink-3)', marginBottom: 28 }}>
        {participantA.org} · generated {new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' })}
      </p>

      {/* Tab switcher */}
      <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--k-bg-2)', borderRadius: 999, marginBottom: 32, width: 'fit-content' }}>
        {[['cohesion', 'Cohesion'], ['development', 'Development']].map(([k, l]) => (
          <button key={k} onClick={() => setTab(k)} style={{
            padding: '7px 22px', border: 'none', borderRadius: 999, cursor: 'pointer',
            background: tab === k ? 'var(--k-surface)' : 'transparent',
            color: tab === k ? 'var(--k-ink)' : 'var(--k-ink-3)',
            fontWeight: 500, fontSize: 13,
            boxShadow: tab === k ? 'var(--sh-1)' : 'none',
          }}>{l}</button>
        ))}
      </div>

      {/* Cohesion tab */}
      {tab === 'cohesion' && (
        <>
          <div className="k-card" style={{ padding: 32, marginBottom: 28, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, alignItems: 'center' }}>
            <div>
              <div className="k-label">Overall cohesion</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 6 }}>
                <div className="k-serif" style={{ fontSize: 72, letterSpacing: '-0.03em', color: pair.cohesion >= 70 ? 'var(--k-sage-ink)' : pair.cohesion >= 45 ? 'var(--k-sun-ink)' : 'var(--k-rose-ink)' }}>{pair.cohesion}</div>
                <div style={{ fontSize: 16, color: 'var(--k-ink-4)' }}>/ 100</div>
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--k-ink-2)', marginTop: 8, lineHeight: 1.5 }}>
                {pair.cohesion >= 70 ? 'Strong complementary partnership with potential friction areas in high-gap dimensions.'
                  : pair.cohesion >= 45 ? 'Moderate compatibility with meaningful friction areas that warrant active management.'
                  : 'Significant friction areas — this pair will need structured processes to work well together.'}
              </div>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Radar data={aRadar} size={240} fill="var(--k-accent)" compareData={bRadar} compareFill="var(--k-indigo)" />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <span style={{ width: 12, height: 12, background: 'var(--k-accent)', borderRadius: 2 }} /> {participantA.name}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
                <span style={{ width: 12, height: 12, background: 'var(--k-indigo)', borderRadius: 2 }} /> {MOCK_PARTNER.name}
              </div>
              <div style={{ marginTop: 12, fontSize: 12, color: 'var(--k-ink-4)', lineHeight: 1.5 }}>
                Role: <strong style={{ color: 'var(--k-ink-2)' }}>Peer × Peer</strong>. Context: <strong style={{ color: 'var(--k-ink-2)' }}>Growth stage.</strong>
              </div>
            </div>
          </div>

          <div style={{ padding: '14px 20px', background: 'var(--k-sun-soft)', borderRadius: 12, marginBottom: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: 'var(--k-sun)' }} />
            <div style={{ fontSize: 13, color: 'var(--k-sun-ink)', lineHeight: 1.5 }}>
              <strong>Risk concentration ·</strong> You differ most on <strong>{riskStr}</strong>. Both are silent friction areas in co-founder partnerships.
            </div>
          </div>

          <div className="k-card" style={{ padding: 0, overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '180px 60px 60px 1fr 80px 80px', padding: '12px 20px', background: 'var(--k-bg-2)', borderBottom: '1px solid var(--k-line)', fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--k-ink-4)' }}>
              <div>Dimension</div>
              <div style={{ textAlign: 'right' }}>{participantA.name.split(' ')[0]}</div>
              <div style={{ textAlign: 'right' }}>{MOCK_PARTNER.name.split(' ')[0]}</div>
              <div style={{ paddingLeft: 16 }}>Visual</div>
              <div style={{ textAlign: 'right' }}>Type</div>
              <div style={{ textAlign: 'right' }}>Score</div>
            </div>
            {gapRows.map((r, i) => (
              <div key={r.id} style={{ display: 'grid', gridTemplateColumns: '180px 60px 60px 1fr 80px 80px', padding: '14px 20px', borderBottom: i < gapRows.length - 1 ? '1px solid var(--k-line)' : 'none', alignItems: 'center', fontSize: 13 }}>
                <div style={{ fontWeight: 500 }}>{r.label}</div>
                <div className="k-mono" style={{ textAlign: 'right' }}>{r.av}</div>
                <div className="k-mono" style={{ textAlign: 'right' }}>{r.bv}</div>
                <div style={{ padding: '0 16px' }}>
                  <div style={{ position: 'relative', height: 6, background: 'var(--k-bg-3)', borderRadius: 3 }}>
                    <div style={{ position: 'absolute', left: `${Math.min(r.av, r.bv)}%`, width: `${Math.abs(r.av - r.bv)}%`, height: '100%', background: r.score >= 70 ? 'var(--k-sage)' : r.score >= 45 ? 'var(--k-sun)' : 'var(--k-rose)', borderRadius: 3 }} />
                    <div style={{ position: 'absolute', left: `${r.av}%`, transform: 'translateX(-50%)', top: -3, width: 2, height: 12, background: 'var(--k-accent)' }} />
                    <div style={{ position: 'absolute', left: `${r.bv}%`, transform: 'translateX(-50%)', top: -3, width: 2, height: 12, background: 'var(--k-indigo)' }} />
                  </div>
                </div>
                <div style={{ textAlign: 'right', fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--k-ink-4)' }}>{r.type}</div>
                <div className="k-mono" style={{ textAlign: 'right', fontWeight: 600, color: r.score >= 70 ? 'var(--k-sage-ink)' : r.score >= 45 ? 'var(--k-sun-ink)' : 'var(--k-rose-ink)' }}>{Math.round(r.score)}</div>
              </div>
            ))}
          </div>
        </>
      )}

      {/* Development tab */}
      {tab === 'development' && (
        <>
          <p style={{ fontSize: 15.5, color: 'var(--k-ink-2)', marginBottom: 28, lineHeight: 1.55 }}>
            Three blocks derived from your pairwise analysis. Joint for the conversation you have together. Private for the one you have with yourself. Facilitator for your coach.
          </p>

          <div style={{ display: 'flex', gap: 4, padding: 4, background: 'var(--k-bg-2)', borderRadius: 999, marginBottom: 28, width: 'fit-content' }}>
            {[['joint', 'Joint block'], ['private', 'Private block'], ['facilitator', 'Facilitator block']].map(([k, l]) => (
              <button key={k} onClick={() => setBlock(k)} style={{
                padding: '7px 18px', border: 'none', borderRadius: 999, cursor: 'pointer',
                background: block === k ? 'var(--k-surface)' : 'transparent',
                color: block === k ? 'var(--k-ink)' : 'var(--k-ink-3)',
                fontWeight: 500, fontSize: 13,
                boxShadow: block === k ? 'var(--sh-1)' : 'none',
              }}>{l}</button>
            ))}
          </div>

          <div className="k-card" style={{ padding: '32px 36px' }}>
            <div className="k-serif" style={{ fontSize: 28, letterSpacing: '-0.02em', marginBottom: 4 }}>{devContent.title}</div>
            <div style={{ fontSize: 14, color: 'var(--k-ink-3)', marginBottom: 28 }}>{devContent.subtitle}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {devContent.agreements.map(([head, body], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', gap: 24, paddingBottom: 20, borderBottom: i < devContent.agreements.length - 1 ? '1px solid var(--k-line)' : 'none' }}>
                  <div className="k-label" style={{ color: 'var(--k-accent-ink)' }}>{head}</div>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--k-ink-2)' }}>{body}</p>
                </div>
              ))}
            </div>
          </div>
        </>
      )}
    </div>
    </div>
    </div>
  );
}

Object.assign(window, { PairInviteScreen, PairCohesionScreen, PairDevelopmentScreen, PairReportScreen, CrosswalkScreen });