// The remaining 8 project sections: structural skeletons with real content.

// =========================================================
// FEATURES — kanban-lite
// =========================================================
function FeaturesSection({ pdata }) {
  const columns = [
    { key: 'Discovery', tone: 'blue' },
    { key: 'UI/UX',     tone: 'purple' },
    { key: 'Building',  tone: 'yellow' },
    { key: 'Review',    tone: 'blue' },
    { key: 'Shipped',   tone: 'green' },
  ];
  const buckets = columns.map(c => ({
    ...c,
    items: pdata.features.filter(f => f.stage === c.key),
  }));

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Features</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2 }}>
            {pdata.features.length} features across 5 stages · Owners: {pdata.team.slice(0, 3).map(t => t.name.split(' ')[0]).join(', ')}
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="kanban" size={14} strokeWidth={1.75}/> Board</button>
          <button className="btn btn-white btn-sm"><Icon name="list"   size={14} strokeWidth={1.75}/> List</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New feature</button>
        </div>
      </div>

      <div className="kb-grid" style={{ marginTop: 8 }}>
        {buckets.map((col) => (
          <div className="kb-col" key={col.key}>
            <div className="kb-col-head">
              <span className="name">
                <span style={{ width: 6, height: 6, borderRadius: 3, background: statusToneDot(col.tone) }} />
                {col.key}
                <span className="cnt">{col.items.length}</span>
              </span>
            </div>
            <div className="kb-cards">
              {col.items.map((f) => (
                <div className="kb-card" key={f.id}>
                  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                    <span className={`kb-priority ${f.priority}`}>{f.priority}</span>
                    <Label tone={f.tone === 'red' ? 'red' : f.tone === 'yellow' ? 'yellow' : f.tone === 'green' ? 'green' : f.tone === 'purple' ? 'purple' : 'blue'} dot size="sm">{f.status}</Label>
                  </div>
                  <div className="kb-title" style={{ marginTop: 8 }}>{f.title}</div>
                  <ProgressBar value={f.progress} tone={f.tone === 'red' ? 'red' : f.tone === 'green' ? 'green' : f.tone === 'yellow' ? 'warn' : f.tone === 'purple' ? 'purple' : 'blue'} />
                  <div className="kb-links">
                    {f.links.research > 0 && <span className="kb-linkchip"><Icon name="flask" size={10} strokeWidth={2}/> R:{f.links.research}</span>}
                    {f.links.decision > 0 && <span className="kb-linkchip"><Icon name="decisions" size={10} strokeWidth={2}/> D:{f.links.decision}</span>}
                    {f.links.design > 0   && <span className="kb-linkchip"><Icon name="palette" size={10} strokeWidth={2}/> UI:{f.links.design}</span>}
                  </div>
                  <div className="kb-foot">
                    <div className="kb-owner">
                      <Avatar name={f.owner} size="xs" />
                      <span className="truncate" style={{ maxWidth: 90 }}>{f.owner.split(' ')[0]}</span>
                    </div>
                    <span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 700, letterSpacing: '-0.02em' }}>{f.progress}%</span>
                  </div>
                </div>
              ))}
              {col.items.length === 0 && (
                <div style={{ padding: 20, textAlign: 'center', fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>
                  No features here
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
function statusToneDot(tone) {
  return {
    red: 'var(--danger-solid)',
    green: 'var(--success-solid)',
    yellow: 'var(--warning-solid)',
    blue: 'var(--primary-01)',
    purple: 'var(--primary-04)',
  }[tone] || 'var(--text-tertiary)';
}

// =========================================================
// BUSINESS PLAN — document-style
// =========================================================
function BusinessPlanSection({ pdata }) {
  const b = pdata.business;
  return (
    <div className="bp-shell">
      <nav className="bp-toc" aria-label="Business plan sections">
        <a className="active" href="#opportunity">Opportunity</a>
        <a href="#customer">Target customer</a>
        <a href="#value">Value proposition</a>
        <a href="#model">Business model</a>
        <a href="#pricing">Pricing</a>
        <a href="#competitors">Competitors</a>
        <a href="#gtm">Go-to-market</a>
        <a href="#assumptions">Key assumptions</a>
        <a href="#metrics">Success metrics</a>
      </nav>
      <div className="bp-body">
        <h2>Business plan</h2>
        <p className="lead">My Geni v2 · Product Operating System · living document</p>

        <div className="bp-section" id="opportunity">
          <h3>Opportunity</h3>
          <p>{b.opportunity}</p>
        </div>

        <div className="bp-section" id="customer">
          <h3>Target customer</h3>
          <p>{b.customer}</p>
        </div>

        <div className="bp-section" id="value">
          <h3>Value proposition</h3>
          <p>{b.value}</p>
        </div>

        <div className="bp-section" id="model">
          <h3>Business model</h3>
          <p>{b.model}</p>
        </div>

        <div className="bp-section" id="pricing">
          <h3>Pricing assumptions</h3>
          <div className="bp-pricing">
            {b.pricing.map((p, i) => (
              <div className="p" key={i}>
                <div className="p-tier">{p.tier}</div>
                <div className="p-price">{p.price}</div>
                <div className="p-note">{p.note}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="bp-section" id="competitors">
          <h3>Competitors</h3>
          <div className="bp-competitors">
            {b.competitors.map((c, i) => (
              <div className="comp" key={i}>
                <div className="name">{c.name}</div>
                <div className="focus">{c.focus}</div>
                <div className="band">{c.band}</div>
                <div className="weakness">{c.weakness}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="bp-section" id="gtm">
          <h3>Go-to-market notes</h3>
          <p>{b.gtm}</p>
        </div>

        <div className="bp-section" id="assumptions">
          <h3>Key assumptions</h3>
          <ul>
            {b.assumptions.map((a, i) => <li key={i}>{a}</li>)}
          </ul>
        </div>

        <div className="bp-section" id="metrics">
          <h3>Success metrics</h3>
          <div className="bp-metrics">
            {b.metrics.map((m, i) => (
              <div className="bp-metric" key={i}>
                <div className="m-name">{m.name}</div>
                <div className="m-from">{m.from}</div>
                <div className="m-arrow">→ {m.to}</div>
                <div className="m-when">{m.when}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// =========================================================
// R&D — visual gallery
// =========================================================
function RDSection({ pdata }) {
  const [tab, setTab] = React.useState('all');
  const filtered = pdata.research.filter(r => tab === 'all' || r.type === tab);
  const cnt = (k) => k === 'all' ? pdata.research.length : pdata.research.filter(r => r.type === k).length;

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>R&amp;D</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2 }}>
            {pdata.research.length} findings · {pdata.research.filter(r => r.pinned).length} pinned insights connect back to features & decisions.
          </div>
        </div>
        <div style={{ marginLeft: 'auto' }}>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New research</button>
        </div>
      </div>

      <div className="rd-filter">
        <Tabs
          value={tab}
          onChange={setTab}
          items={[
            { key: 'all',        label: 'All',         count: cnt('all') },
            { key: 'user',       label: 'Users',       count: cnt('user'),       tone: 'green' },
            { key: 'market',     label: 'Market',      count: cnt('market'),     tone: 'green' },
            { key: 'competitor', label: 'Competitor',  count: cnt('competitor') },
            { key: 'technical',  label: 'Technical',   count: cnt('technical'),  tone: 'blue' },
            { key: 'experiment', label: 'Experiments', count: cnt('experiment'), tone: 'purple' },
            { key: 'insight',    label: 'Insights',    count: cnt('insight') },
          ]}
        />
      </div>

      <div className="rd-grid" style={{ marginTop: 12 }}>
        {filtered.map((r) => (
          <div className="rd-card" key={r.id}>
            <div className={`rd-visual ${r.type}`}>
              {r.pinned && <span className="rd-pin"><Icon name="pin" size={16} strokeWidth={1.75} /></span>}
              <span className="rd-badge">{r.type}</span>
              {r.preview === 'quote' && (
                <div className="rd-quote">
                  <div className="qtext">{r.quote}</div>
                  <div className="qby">{r.quoteBy}</div>
                </div>
              )}
              {r.preview === 'chart' && (
                <svg viewBox="0 0 260 132" width="100%" height="100%" preserveAspectRatio="none">
                  {[33,66,99].map(y => (<line key={y} x1="14" y1={y} x2="246" y2={y} stroke="rgba(16,16,16,0.05)" strokeWidth="1"/>))}
                  {[42,58,50,74,66,92,80,102,88,116,104,124].map((h, i) => (
                    <rect key={i} x={18 + i*19} y={120 - h} width="11" height={h} rx="3" fill="rgba(42,133,255,0.18)" />
                  ))}
                  <path d="M23 84 L42 70 L61 76 L80 52 L99 60 L118 34 L137 44 L156 20 L175 28 L194 8 L213 18 L232 6" stroke="var(--success-solid)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              )}
              {r.preview === 'doc' && (
                <svg viewBox="0 0 260 132" width="100%" height="100%" preserveAspectRatio="none">
                  <g transform="translate(22 18)">
                    <rect width="60%" height="7" y="0" fill="rgba(16,16,16,0.28)" rx="3" />
                    <rect width="46%" height="4" y="14" fill="rgba(16,16,16,0.14)" rx="2" />
                    <rect width="88%" height="4" y="28" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="82%" height="4" y="38" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="76%" height="4" y="48" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="86%" height="4" y="62" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="60%" height="4" y="72" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="90%" height="4" y="86" fill="rgba(16,16,16,0.10)" rx="2" />
                    <rect width="52%" height="4" y="96" fill="rgba(16,16,16,0.10)" rx="2" />
                  </g>
                </svg>
              )}
              {r.preview === 'diagram' && (
                <svg viewBox="0 0 260 132" width="100%" height="100%" preserveAspectRatio="none">
                  <rect x="18" y="28" width="66" height="28" rx="8" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.5" />
                  <rect x="102" y="10" width="66" height="28" rx="8" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.5" />
                  <rect x="102" y="52" width="66" height="28" rx="8" fill="#2A85FF" stroke="rgba(42,133,255,0.55)" strokeWidth="1.5" />
                  <rect x="102" y="94" width="66" height="28" rx="8" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.5" />
                  <rect x="186" y="52" width="60" height="28" rx="8" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.5" />
                  <path d="M84 42 L102 24" stroke="rgba(16,16,16,0.28)" strokeWidth="1.5" fill="none" />
                  <path d="M84 42 L102 66" stroke="#2A85FF" strokeWidth="1.75" fill="none" />
                  <path d="M84 42 L102 108" stroke="rgba(16,16,16,0.28)" strokeWidth="1.5" fill="none" />
                  <path d="M168 66 L186 66" stroke="#2A85FF" strokeWidth="1.75" fill="none" />
                </svg>
              )}
              {r.preview === 'frames' && (
                <div style={{ padding: 12, display: 'flex', gap: 8, height: '100%' }}>
                  {[0,1,2].map(i => (
                    <div key={i} style={{
                      flex: 1, background: 'white', border: '1.5px solid rgba(16,16,16,0.08)',
                      borderRadius: 8, padding: 6, display: 'flex', flexDirection: 'column', gap: 3,
                      boxShadow: '0 2px 4px rgba(16,16,16,0.04)',
                    }}>
                      <div style={{ height: 4, width: '65%', background: 'rgba(16,16,16,0.22)', borderRadius: 2 }} />
                      <div style={{ height: 3, width: '92%', background: 'rgba(16,16,16,0.10)', borderRadius: 2 }} />
                      <div style={{
                        flex: 1,
                        background: i === 1 ? 'linear-gradient(180deg,#E9F1FF,#D6E4FF)' : 'rgba(16,16,16,0.04)',
                        borderRadius: 4, marginTop: 3,
                      }} />
                    </div>
                  ))}
                </div>
              )}
              {r.preview === 'insight' && (
                <div className="rd-insight-card-body">
                  {r.insight}
                </div>
              )}
            </div>
            <div className="rd-meta">
              <div className="rd-title">{r.title}</div>
              <div className="rd-sub"><Avatar name={r.by} size="xs" /> {r.by} · {r.date}</div>
              {r.insight && r.preview !== 'insight' && (
                <div className="rd-insight">{r.insight}</div>
              )}
              {/* Related-to context — links to canonical stage/mission/feature. */}
              {r.links && <RelatedTo links={r.links} pdata={pdata} />}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =========================================================
// UI / DESIGN — visual gallery
// =========================================================
function UIDesignSection({ pdata }) {
  const d = pdata.design;
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>UI / Design</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2, maxWidth: '78ch' }}>
            {d.direction}
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="grid" size={14} strokeWidth={1.75}/> Assets</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> Import from Figma</button>
        </div>
      </div>

      {/* Screens */}
      <div className="dg-section-head" style={{ marginTop: 16 }}>
        <div className="ov-section-head" style={{ paddingBottom: 4 }}>
          <h3>Screens</h3>
          <a className="link">All frames</a>
        </div>
      </div>
      <div className="dg-screens">
        {d.screens.map((s) => {
          const stateChip = s.links?.state ? {
            'approved':    { tone: 'green',  label: 'Approved'    },
            'in-review':   { tone: 'blue',   label: 'In review'   },
            'in-progress': { tone: 'blue',   label: 'In progress' },
            'blocked':     { tone: 'red',    label: 'Blocked'     },
          }[s.links.state] : null;
          return (
            <div className="dg-screen" key={s.id}>
              <div className={`dg-visual ${s.tone}`}>
                <ScreenMock kind={s.kind} />
              </div>
              <div className="dg-meta">
                <span className="dg-title truncate">{s.title}</span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  {stateChip && <Label tone={stateChip.tone} dot size="sm">{stateChip.label}</Label>}
                  <span className="dg-version">{s.stage}</span>
                </div>
              </div>
              {s.links && <RelatedTo links={s.links} pdata={pdata} compact />}
            </div>
          );
        })}
      </div>

      {/* Flows + Assets in 2-col */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 16, marginTop: 20 }}>
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 8 }}>
            <h3>User flows</h3>
            <a className="link">See all</a>
          </div>
          <div className="dg-flow-list">
            {d.flows.map((f) => (
              <div className="dg-flow" key={f.id}>
                <div className="dg-flow-glyph"><Icon name="route" size={18} strokeWidth={1.75} /></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="n truncate">{f.title}</div>
                  <div className="m">{f.steps} steps · updated {f.updated}</div>
                </div>
                <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }}/>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="ov-section-head" style={{ paddingBottom: 8 }}>
            <h3>Design assets</h3>
            <a className="link">Library</a>
          </div>
          <div className="dg-flow-list">
            {d.assets.map((a, i) => (
              <div className="dg-asset" key={i}>
                <div className="dg-asset-visual">
                  <AssetPreview kind={a.kind} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="a-title truncate">{a.title}</div>
                  <div className="a-sub">{a.count != null ? `${a.count} items` : 'Reference'}</div>
                </div>
                <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }}/>
              </div>
            ))}
            <div className="dg-asset" style={{ background: 'transparent', boxShadow: 'none', border: '1.5px dashed var(--stroke-subtle)' }}>
              <div className="dg-asset-visual" style={{ background: 'var(--bg-surface)' }}>
                <Icon name="plus" size={18} strokeWidth={2} />
              </div>
              <div style={{ flex: 1 }}>
                <div className="a-title">Add asset</div>
                <div className="a-sub">Icon set, palette, motion ref…</div>
              </div>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 12, color: 'var(--text-secondary)', letterSpacing: '-0.02em', padding: '10px 14px', borderRadius: 10, background: 'var(--bg-app)' }}>
            <b style={{ color: 'var(--text-primary)', fontWeight: 700 }}>Motion:</b> {d.motion}
          </div>
        </div>
      </div>
    </div>
  );
}

// Screen mocks — small custom SVG representations of what the design is.
function ScreenMock({ kind }) {
  if (kind === 'list') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="14" y="14" width="232" height="30" rx="8" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.2"/>
        <rect x="22" y="24" width="80" height="6" rx="2" fill="rgba(16,16,16,0.30)"/>
        <rect x="200" y="22" width="40" height="10" rx="5" fill="#2A85FF" opacity="0.15"/>
        {[54, 82, 110, 138, 166].map((y, i) => (
          <g key={i}>
            <rect x="14" y={y} width="232" height="24" rx="8" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
            <circle cx="30" cy={y+12} r="7" fill={['#B5E4CA','#B1E5FC','#CABDFF','#FFBC99','#FFD88D'][i]}/>
            <rect x="46" y={y+7} width="70" height="4" rx="2" fill="rgba(16,16,16,0.22)"/>
            <rect x="46" y={y+15} width="90" height="3" rx="1" fill="rgba(16,16,16,0.10)"/>
            <rect x="160" y={y+9} width="50" height="6" rx="3" fill={i < 2 ? 'rgba(0,166,86,0.20)' : 'rgba(239,157,14,0.20)'}/>
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'detail') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="14" y="14" width="232" height="12" rx="4" fill="rgba(16,16,16,0.28)"/>
        <rect x="14" y="32" width="140" height="6" rx="2" fill="rgba(16,16,16,0.14)"/>
        {[54, 84, 114].map((y, i) => (
          <g key={i}>
            <rect x="14" y={y} width="232" height="22" rx="6" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.2"/>
            <rect x="22" y={y+8} width="60" height="6" rx="2" fill="rgba(16,16,16,0.22)"/>
            <rect x="88" y={y+8} width="120" height="6" rx="2" fill="rgba(42,133,255,0.20)"/>
          </g>
        ))}
        <rect x="14" y="148" width="232" height="36" rx="10" fill="white" stroke="rgba(16,16,16,0.10)" strokeWidth="1.2"/>
        <rect x="22" y="160" width="90" height="12" rx="3" fill="rgba(42,133,255,0.35)"/>
        <rect x="118" y="164" width="60" height="6" rx="2" fill="rgba(16,16,16,0.14)"/>
      </svg>
    );
  }
  if (kind === 'summary') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="14" y="14" width="232" height="86" rx="12" fill="white" stroke="rgba(0,166,86,0.30)" strokeWidth="1.5"/>
        <rect x="22" y="24" width="56" height="8" rx="3" fill="rgba(0,166,86,0.35)"/>
        <rect x="22" y="42" width="200" height="5" rx="2" fill="rgba(16,16,16,0.20)"/>
        <rect x="22" y="52" width="190" height="5" rx="2" fill="rgba(16,16,16,0.20)"/>
        <rect x="22" y="62" width="170" height="5" rx="2" fill="rgba(16,16,16,0.20)"/>
        <rect x="22" y="72" width="140" height="5" rx="2" fill="rgba(16,16,16,0.20)"/>
        <rect x="14" y="110" width="232" height="34" rx="8" fill="rgba(0,166,86,0.06)" stroke="rgba(0,166,86,0.20)" strokeWidth="1.2"/>
        <rect x="22" y="120" width="70" height="6" rx="2" fill="rgba(0,166,86,0.55)"/>
        <rect x="22" y="132" width="180" height="4" rx="2" fill="rgba(16,16,16,0.18)"/>
        <rect x="14" y="154" width="140" height="30" rx="6" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
        <rect x="22" y="164" width="60" height="8" rx="2" fill="rgba(16,16,16,0.35)"/>
      </svg>
    );
  }
  if (kind === 'mobile') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="88" y="12" width="84" height="176" rx="16" fill="white" stroke="rgba(16,16,16,0.15)" strokeWidth="1.5"/>
        <rect x="94" y="22" width="72" height="4" rx="2" fill="rgba(16,16,16,0.12)"/>
        <rect x="94" y="34" width="42" height="8" rx="2" fill="rgba(16,16,16,0.32)"/>
        <rect x="94" y="52" width="72" height="30" rx="6" fill="rgba(202,189,255,0.35)"/>
        <rect x="100" y="60" width="46" height="5" rx="2" fill="rgba(16,16,16,0.35)"/>
        <rect x="100" y="70" width="60" height="4" rx="2" fill="rgba(16,16,16,0.18)"/>
        {[88, 108, 128, 148].map((y, i) => (
          <g key={i}>
            <rect x="94" y={y} width="72" height="14" rx="4" fill="rgba(16,16,16,0.04)"/>
            <rect x="100" y={y+4} width="40" height="4" rx="2" fill="rgba(16,16,16,0.24)"/>
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'messaging') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="14" y="14" width="90" height="170" rx="10" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
        {[24, 44, 64, 84, 104].map((y, i) => (
          <g key={i}>
            <circle cx="26" cy={y+8} r="6" fill={['#B5E4CA','#B1E5FC','#CABDFF','#FFBC99','#FFD88D'][i]}/>
            <rect x="38" y={y+3} width="52" height="4" rx="1.5" fill="rgba(16,16,16,0.22)"/>
            <rect x="38" y={y+11} width="42" height="3" rx="1.5" fill="rgba(16,16,16,0.10)"/>
          </g>
        ))}
        <rect x="112" y="14" width="134" height="170" rx="10" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
        <rect x="120" y="28" width="80" height="24" rx="12" fill="rgba(202,189,255,0.35)"/>
        <rect x="128" y="34" width="60" height="4" rx="1.5" fill="rgba(16,16,16,0.35)"/>
        <rect x="128" y="42" width="46" height="4" rx="1.5" fill="rgba(16,16,16,0.18)"/>
        <rect x="150" y="62" width="88" height="24" rx="12" fill="rgba(42,133,255,0.20)"/>
        <rect x="158" y="68" width="72" height="4" rx="1.5" fill="rgba(16,16,16,0.35)"/>
        <rect x="158" y="76" width="52" height="4" rx="1.5" fill="rgba(16,16,16,0.18)"/>
        <rect x="120" y="152" width="118" height="20" rx="10" fill="rgba(16,16,16,0.04)"/>
      </svg>
    );
  }
  if (kind === 'settings') {
    return (
      <svg viewBox="0 0 260 200" width="100%" height="100%" preserveAspectRatio="none">
        <rect x="14" y="14" width="74" height="170" rx="10" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
        {[24, 44, 64, 84, 104].map((y, i) => (
          <rect key={i} x="22" y={y} width="58" height="14" rx="4" fill={i === 2 ? 'rgba(42,133,255,0.10)' : 'transparent'}/>
        ))}
        <rect x="96" y="14" width="150" height="170" rx="10" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.2"/>
        <rect x="106" y="26" width="80" height="6" rx="2" fill="rgba(16,16,16,0.32)"/>
        {[44, 64, 84, 104, 124].map((y, i) => (
          <g key={i}>
            <rect x="106" y={y} width="130" height="14" rx="6" fill="rgba(16,16,16,0.04)"/>
            <rect x="112" y={y+4} width="50" height="5" rx="2" fill="rgba(16,16,16,0.22)"/>
            <circle cx="228" cy={y+7} r="5" fill={i % 2 ? 'rgba(0,166,86,0.30)' : 'rgba(16,16,16,0.15)'}/>
          </g>
        ))}
      </svg>
    );
  }
  return null;
}

function AssetPreview({ kind }) {
  if (kind === 'icons') {
    return (
      <svg viewBox="0 0 88 62" width="100%" height="100%">
        {[[16,20],[32,20],[48,20],[64,20],[16,36],[32,36],[48,36],[64,36]].map(([x,y], i) => (
          <g key={i}>
            <rect x={x-6} y={y-6} width="12" height="12" rx="3" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1"/>
            <path d={['M-3 0h6','M0 -3v6','M-3 -3l6 6','M-3 3l6-6'][i%4]} transform={`translate(${x} ${y})`} stroke="var(--text-secondary)" strokeWidth="1" strokeLinecap="round"/>
          </g>
        ))}
      </svg>
    );
  }
  if (kind === 'illustration') {
    return (
      <svg viewBox="0 0 88 62" width="100%" height="100%">
        <circle cx="44" cy="34" r="20" fill="rgba(202,189,255,0.35)"/>
        <rect x="30" y="20" width="20" height="26" rx="4" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1"/>
        <rect x="52" y="30" width="14" height="18" rx="3" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1"/>
      </svg>
    );
  }
  if (kind === 'type') {
    return (
      <svg viewBox="0 0 88 62" width="100%" height="100%">
        <text x="12" y="30" fontFamily="Inter" fontWeight="700" fontSize="22" fill="var(--text-primary)">Aa</text>
        <text x="42" y="30" fontFamily="Georgia" fontWeight="400" fontSize="22" fontStyle="italic" fill="var(--text-secondary)">Ee</text>
        <rect x="12" y="40" width="64" height="3" rx="1" fill="var(--stroke-stroke2)"/>
        <rect x="12" y="48" width="42" height="3" rx="1" fill="var(--stroke-stroke2)"/>
      </svg>
    );
  }
  if (kind === 'palette') {
    return (
      <svg viewBox="0 0 88 62" width="100%" height="100%">
        {['#FDFDFD','#F1F1F1','#2A85FF','#00A656','#FF9D34','#F52495'].map((c, i) => (
          <rect key={i} x={4 + i*14} y={12} width={12} height={38} rx={4} fill={c} stroke="var(--stroke-subtle)" strokeWidth="1"/>
        ))}
      </svg>
    );
  }
  return null;
}

// =========================================================
// DEVELOPMENT — technical brief
// =========================================================
function DevelopmentSection({ pdata }) {
  const d = pdata.dev;
  const areaIcons = { Frontend: 'palette', Backend: 'terminal', Database: 'grid', Hosting: 'cloud' };
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Development</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2, maxWidth: '78ch' }}>
            {d.architectureNote}
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="externalLink" size={14} strokeWidth={1.75}/> Runbook</button>
          <button className="btn btn-white btn-sm"><Icon name="externalLink" size={14} strokeWidth={1.75}/> GitHub</button>
        </div>
      </div>

      {/* Stack */}
      <div className="ov-section-head" style={{ marginTop: 16, paddingBottom: 4 }}>
        <h3>Tech stack</h3>
      </div>
      <div className="dv-grid">
        {d.stack.map((s) => (
          <div className="dv-card" key={s.area}>
            <div className="dv-head">
              <div className="glyph"><Icon name={areaIcons[s.area] || 'grid'} size={16} strokeWidth={1.75} /></div>
              <h4>{s.area}</h4>
            </div>
            <div className="dv-tech-list">
              {s.items.map((t, i) => (
                <div className="dv-tech" key={i}>
                  <span className="name">{t.name}</span>
                  {t.tag && <span className="tag">{t.tag}</span>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* Environments + services */}
      <div className="dv-grid" style={{ marginTop: 16 }}>
        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="cloud" size={16} strokeWidth={1.75}/></div>
            <h4>Environments</h4>
          </div>
          <div className="dv-list">
            {d.environments.map((e, i) => (
              <div className="dv-list-row" key={i}>
                <div className="env-glyph"><Icon name="cloud" size={14} strokeWidth={1.75}/></div>
                <div>
                  <div className="env-name">{e.name}</div>
                  <div className="env-url">{e.url}</div>
                </div>
                <div className="env-owner">{e.owner}</div>
                <span style={{ fontSize: 11, color: 'var(--text-tertiary)', maxWidth: 160, textAlign: 'right', letterSpacing: '-0.02em' }} className="truncate">{e.notes}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="gears" size={16} strokeWidth={1.75}/></div>
            <h4>Services &amp; accounts <span style={{ fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500, marginLeft: 6 }}>· no credentials stored</span></h4>
          </div>
          <div className="dv-list">
            {d.services.map((s, i) => {
              const stateChip = s.links?.state ? {
                'ready':       { tone: 'green', label: 'Ready'       },
                'in-progress': { tone: 'blue',  label: 'In progress' },
                'not-started': { tone: 'gray',  label: 'Not started' },
                'blocked':     { tone: 'red',   label: 'Blocked'     },
              }[s.links.state] : null;
              return (
                <div className="dv-list-row dv-service-row" key={i}>
                  <div className="env-glyph"><Icon name="gears" size={14} strokeWidth={1.75}/></div>
                  <div style={{ minWidth: 0 }}>
                    <div className="env-name">{s.name}</div>
                    <div className="env-url" style={{ fontFamily: 'inherit' }}>{s.kind}</div>
                    {s.links && <RelatedTo links={s.links} pdata={pdata} compact />}
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    {stateChip && <Label tone={stateChip.tone} dot size="sm">{stateChip.label}</Label>}
                    <Avatar name={s.owner} size="xs" />
                    <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', whiteSpace: 'nowrap' }}>{s.owner}</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* Auth + Security */}
      <div className="dv-grid" style={{ marginTop: 16 }}>
        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="keys" size={16} strokeWidth={1.75}/></div>
            <h4>Authentication</h4>
          </div>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)', letterSpacing: '-0.015em', lineHeight: 1.55 }}>{d.auth}</p>
        </div>
        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="shield" size={16} strokeWidth={1.75}/></div>
            <h4>Security</h4>
          </div>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)', letterSpacing: '-0.015em', lineHeight: 1.55 }}>{d.security}</p>
        </div>
      </div>

      {/* APIs + integrations */}
      <div className="dv-grid" style={{ marginTop: 16 }}>
        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="externalLink" size={16} strokeWidth={1.75}/></div>
            <h4>APIs</h4>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {d.apis.map((a, i) => <span key={i} className="rd-conn" style={{ padding: '5px 10px' }}>{a}</span>)}
          </div>
        </div>
        <div className="dv-card">
          <div className="dv-head">
            <div className="glyph"><Icon name="link" size={16} strokeWidth={1.75}/></div>
            <h4>Integrations</h4>
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {d.integrations.map((a, i) => <span key={i} className="rd-conn" style={{ padding: '5px 10px' }}>{a}</span>)}
          </div>
        </div>
      </div>

      {/* Technical decisions */}
      <div className="dv-card" style={{ marginTop: 16 }}>
        <div className="dv-head">
          <div className="glyph"><Icon name="check" size={16} strokeWidth={2}/></div>
          <h4>Technical decisions</h4>
        </div>
        <div className="dv-decisions">
          {d.techDecisions.map((td, i) => (
            <div className="dv-decision" key={i}>
              <div className="d-dot" />
              <div>
                <div className="d-title">{td.title}</div>
                <div className="d-why">{td.why}</div>
              </div>
              <div className="d-meta">
                {td.by}<br />{td.when}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* System architecture note */}
      <div className="arch-card" style={{ marginTop: 16 }}>
        <div className="dv-head">
          <div className="glyph"><Icon name="layers2" size={16} strokeWidth={1.75}/></div>
          <h4>System architecture</h4>
        </div>
        <SystemArchDiagram />
        <div className="arch-note">
          Two runtime services keep operations calm: <b>web</b> (Fastify) and <b>jobs</b>. Search &amp; vector-index calls fan out from the API service; a small Python <b>ai-summary</b> service is the only non-Node component and runs on the same fleet.
        </div>
      </div>
    </div>
  );
}

function SystemArchDiagram() {
  return (
    <svg viewBox="0 0 640 180" width="100%" height="180" style={{ marginTop: 4 }}>
      {/* backdrop */}
      <rect x="0" y="0" width="640" height="180" rx="14" fill="#F9F9F9"/>
      {/* Client */}
      <rect x="24" y="70" width="96" height="42" rx="10" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1.5"/>
      <text x="72" y="88" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--text-primary)">Client</text>
      <text x="72" y="102" textAnchor="middle" fontSize="10" fontFamily="Inter" fill="var(--text-tertiary)">Web · Tablet</text>
      {/* API */}
      <rect x="180" y="70" width="120" height="42" rx="10" fill="#2A85FF" stroke="rgba(42,133,255,0.6)" strokeWidth="1.5"/>
      <text x="240" y="88" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="700" fill="white">API · web</text>
      <text x="240" y="102" textAnchor="middle" fontSize="10" fontFamily="Inter" fill="rgba(255,255,255,0.85)">Fastify · Node 20</text>
      {/* Jobs */}
      <rect x="180" y="24" width="120" height="34" rx="10" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1.5"/>
      <text x="240" y="45" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--text-primary)">Jobs · BullMQ</text>
      {/* AI summary */}
      <rect x="180" y="124" width="120" height="34" rx="10" fill="rgba(202,189,255,0.4)" stroke="rgba(127,95,255,0.35)" strokeWidth="1.5"/>
      <text x="240" y="145" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--primary-04)">ai-summary · Python</text>
      {/* Postgres */}
      <rect x="360" y="46" width="120" height="34" rx="10" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1.5"/>
      <text x="420" y="67" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--text-primary)">Postgres 16 · Neon</text>
      {/* Redis */}
      <rect x="360" y="90" width="120" height="34" rx="10" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1.5"/>
      <text x="420" y="111" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--text-primary)">Redis · cache + queues</text>
      {/* S3 */}
      <rect x="360" y="134" width="120" height="34" rx="10" fill="white" stroke="var(--stroke-stroke2)" strokeWidth="1.5"/>
      <text x="420" y="155" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="600" fill="var(--text-primary)">S3 · docs</text>
      {/* Search index */}
      <rect x="530" y="70" width="94" height="42" rx="10" fill="white" stroke="rgba(0,166,86,0.35)" strokeWidth="1.5"/>
      <text x="577" y="88" textAnchor="middle" fontSize="12" fontFamily="Inter" fontWeight="700" fill="var(--success-solid)">Search idx</text>
      <text x="577" y="102" textAnchor="middle" fontSize="10" fontFamily="Inter" fill="var(--text-tertiary)">pgvector</text>
      {/* Arrows */}
      <path d="M120 91 H180" stroke="var(--text-primary)" strokeWidth="1.5" fill="none"/>
      <path d="M240 70 V58" stroke="var(--text-tertiary)" strokeWidth="1.5" strokeDasharray="4 4" fill="none"/>
      <path d="M240 112 V124" stroke="var(--text-tertiary)" strokeWidth="1.5" strokeDasharray="4 4" fill="none"/>
      <path d="M300 87 H360 M300 96 H360 M300 105 H360" stroke="var(--text-tertiary)" strokeWidth="1" fill="none"/>
      <path d="M300 91 H360" stroke="var(--primary-01)" strokeWidth="1.5" fill="none"/>
      <path d="M480 91 H530" stroke="var(--success-solid)" strokeWidth="1.5" fill="none"/>
      {/* triangle heads */}
      <path d="M178 91 l-6 -3 v6 z" fill="var(--text-primary)"/>
      <path d="M358 91 l-6 -3 v6 z" fill="var(--primary-01)"/>
      <path d="M528 91 l-6 -3 v6 z" fill="var(--success-solid)"/>
    </svg>
  );
}

// =========================================================
// CONTRACTS (inside a project)
// =========================================================
function ProjectContractsSection({ pdata, data }) {
  const linked = data.contracts.filter(c => c.project === pdata.id);
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Contracts</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2 }}>
            {linked.length} contract{linked.length === 1 ? '' : 's'} connected to this project.
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="paperclip" size={14} strokeWidth={1.75}/> Attach existing</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New contract</button>
        </div>
      </div>

      {linked.length === 0 ? (
        <Card>
          <EmptyState
            illustration={<ContractReminderIllus size={140} />}
            title="No contracts linked yet"
            body="Attach an existing contract from the Contracts library, or create a new one for this project."
            action={<button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New contract</button>}
          />
        </Card>
      ) : (
        <Card>
          <div style={{ padding: 4 }}>
            {linked.map((c) => (
              <React.Fragment key={c.id}>
                <div className="contract-row" onClick={() => location.hash = '#/contracts'} style={{ cursor: 'pointer' }}>
                  <div className="c-lead">
                    <div className="c-kind"><Icon name="contracts" size={18} strokeWidth={1.75} /></div>
                    <div style={{ minWidth: 0 }}>
                      <div className="c-title">{c.title}</div>
                      <div className="c-meta">
                        <span className="c-id">{c.id}</span>
                        <ClientChip client={data.clients[c.client]} />
                      </div>
                    </div>
                  </div>
                  <div>
                    <Label tone={c.tone} dot size="sm">{c.status}</Label>
                    {c.reminder && (
                      <div style={{ marginTop: 6 }}>
                        <span className={`reminder-chip ${c.reminder}`}>
                          {c.reminder === 'expiring' && <Icon name="clock" size={11} strokeWidth={2}/>}
                          {c.expiresIn.replace('Expires in ', '').replace('Renews in ', '')}
                        </span>
                      </div>
                    )}
                  </div>
                  <div className="c-value">{c.value}</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--text-tertiary)', fontSize: 12 }}>
                    <Icon name="paperclip" size={14} strokeWidth={1.75}/>
                    <span>{c.files} file{c.files === 1 ? '' : 's'}</span>
                  </div>
                  <div className="c-dates">
                    <div><b>{c.start.split(',')[0]}</b> → {c.end}</div>
                    <div style={{ marginTop: 2 }}>{c.expiresIn}</div>
                  </div>
                  <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }}/>
                </div>

                {/* Stage links — subtle secondary strip when the contract
                    ties into specific project stages. Non-duplicating. */}
                {c.stageLinks && c.stageLinks.length > 0 && (
                  <div className="c-stage-links">
                    <span className="c-stage-links-lbl">Ties into stages</span>
                    {c.stageLinks.map((sl, i) => {
                      const stage = (pdata.stages || []).find(s => s.n === sl.stage);
                      return (
                        <a
                          key={i}
                          href={`#/projects/${pdata.id}/plan`}
                          className="c-stage-link"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <span className="c-sl-stage">S{String(sl.stage).padStart(2,'0')}</span>
                          <span className="c-sl-label">{sl.label}</span>
                          {sl.amount && <span className="c-sl-amt mono">{sl.amount}</span>}
                          <span className="c-sl-date">{sl.date}</span>
                        </a>
                      );
                    })}
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>
        </Card>
      )}

      {/* Key contract milestones — simple representation */}
      {linked.length > 0 && (
        <div style={{ marginTop: 16 }}>
          <div className="ov-section-head">
            <h3>Contract milestones</h3>
          </div>
          <Card>
            <div style={{ padding: 8 }}>
              <div className="dv-decisions">
                <div className="dv-decision">
                  <div className="d-dot" style={{ background: 'var(--success-solid)' }}/>
                  <div>
                    <div className="d-title">Kickoff &amp; SOW signed</div>
                    <div className="d-why">Illustrative — executed by both parties; kickoff meeting held with the founding partner team.</div>
                  </div>
                  <div className="d-meta">Jan 12, 2026</div>
                </div>
                <div className="dv-decision">
                  <div className="d-dot" style={{ background: 'var(--success-solid)' }}/>
                  <div>
                    <div className="d-title">Wave 1 acceptance</div>
                    <div className="d-why">Wave 1 UAT signed; first design-partner team confirmed.</div>
                  </div>
                  <div className="d-meta">Jul 03, 2026</div>
                </div>
                <div className="dv-decision">
                  <div className="d-dot" style={{ background: 'var(--primary-01)' }}/>
                  <div>
                    <div className="d-title">Wave 2 beta start (contractual)</div>
                    <div className="d-why">Contractual beta start requires readiness by Oct 02. Tracked as our target milestone.</div>
                  </div>
                  <div className="d-meta">Oct 02, 2026</div>
                </div>
                <div className="dv-decision">
                  <div className="d-dot" style={{ background: 'var(--text-tertiary)' }}/>
                  <div>
                    <div className="d-title">Renewal window opens</div>
                    <div className="d-why">Notify the founding partner 60 days before renewal to align on Wave 3.</div>
                  </div>
                  <div className="d-meta">Nov 12, 2026</div>
                </div>
              </div>
            </div>
          </Card>
        </div>
      )}
    </div>
  );
}

// =========================================================
// DOCUMENTS
// =========================================================
function DocumentsSection({ pdata }) {
  const [tab, setTab] = React.useState('all');
  const filters = ['All', 'Specs', 'Research', 'Design', 'Contracts', 'Data', 'Notes'];
  const filterKey = tab.toLowerCase();
  const docs = pdata.documents.filter(d => filterKey === 'all' || d.kind.toLowerCase() === filterKey);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Documents</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2 }}>
            {pdata.documents.length} documents across research, design, contracts, and technical.
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="paperclip" size={14} strokeWidth={1.75}/> Upload</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New document</button>
        </div>
      </div>

      <div className="filter-bar" style={{ marginBottom: 8 }}>
        <Tabs
          value={tab}
          onChange={setTab}
          items={filters.map(f => ({ key: f, label: f, count: f === 'All' ? pdata.documents.length : pdata.documents.filter(d => d.kind === f).length }))}
        />
        <div className="filter-spacer" />
        <Input placeholder="Search documents…" leadIcon={<Icon name="search" size={16} strokeWidth={1.75}/>} style={{ minWidth: 220, flex: '0 1 280px' }}/>
      </div>

      <div className="docs-grid">
        {docs.map((d, i) => (
          <div className="docs-card" key={d.id || i}>
            <div className="docs-visual">
              <DocVisual kind={d.preview} />
              <span className="doc-badge">{d.kind}</span>
            </div>
            <div className="docs-meta">
              <div className="docs-title">{d.title}</div>
              <div className="docs-sub">
                <span>{d.size}</span>
                <span>·</span>
                <span>updated {d.updated}</span>
              </div>
              {d.links
                ? <RelatedTo links={d.links} pdata={pdata} compact />
                : <span className="docs-rel-chip">
                    <Icon name="link" size={10} strokeWidth={2}/>
                    {d.rel}
                  </span>}
            </div>
          </div>
        ))}
      </div>

      {docs.length === 0 && (
        <Card style={{ marginTop: 12 }}>
          <EmptyState
            illustration={<EmptyDocIllus size={140} />}
            title={`No ${tab.toLowerCase()} documents yet`}
            body="Upload or create documents and they'll appear here."
            action={<button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> New document</button>}
          />
        </Card>
      )}
    </div>
  );
}

// =========================================================
// STAGES — vertical timeline hero
// =========================================================
function StagesSection({ pdata }) {
  const [selected, setSelected] = React.useState(pdata.currentStage);
  const sel = pdata.stages.find(s => s.n === selected);

  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.015em' }}>Stages</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', letterSpacing: '-0.015em', marginTop: 2 }}>
            {pdata.stages.length} stages · Currently on <b style={{ color: 'var(--text-primary)' }}>{sel.name}</b>
          </div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-white btn-sm"><Icon name="edit" size={14} strokeWidth={1.75}/> Rename stages</button>
          <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/> Add stage</button>
        </div>
      </div>

      <div className="stages-shell">
        <div className="stages-rail">
          {pdata.stages.map((s) => (
            <div
              key={s.n}
              className={`stages-rail-item ${s.status}${selected === s.n ? ' active' : ''}`}
              onClick={() => setSelected(s.n)}
            >
              <div className="r-num">
                {s.status === 'done' ? <Icon name="check" size={14} strokeWidth={2.5}/> : String(s.n).padStart(2, '0')}
              </div>
              <div>
                <div className="r-name">{s.name}</div>
                <div className="r-sub">{s.duration} · {s.owner}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="stages-body">
          {pdata.stages.map((s) => (
            <div key={s.n} className={`stage-card ${s.status}`}>
              <div className="stage-head">
                <span className={`stage-num ${s.status}`}>Stage {String(s.n).padStart(2, '0')}</span>
                <h3 className="stage-title">{s.name}</h3>
                <div className="stage-status">
                  {s.status === 'done'     && <Label tone="green" dot size="sm">Completed</Label>}
                  {s.status === 'now'      && <Label tone="blue"  dot size="sm">In progress</Label>}
                  {s.status === 'upcoming' && <Label tone="gray"  dot size="sm">Upcoming</Label>}
                </div>
              </div>
              {s.status !== 'upcoming' || selected === s.n ? (
                <>
                  <p className="stage-goal">{s.goal}</p>
                  <p className="stage-desc">{s.desc}</p>
                  {s.deliverables && (
                    <div className="stage-deliverables">
                      {s.deliverables.map((d, i) => (
                        <div className="stage-deliv" key={i}>
                          <Icon name={s.status === 'done' ? 'check' : 'circleAlert'} size={14} strokeWidth={2}/>
                          <span>{d}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  <div className="stage-meta">
                    <div className="m"><Icon name="clock" size={13} strokeWidth={1.75}/> <span><b>{s.duration}</b> duration</span></div>
                    <div className="m"><Icon name="person" size={13} strokeWidth={1.75}/> <span>Owner <b>{s.owner}</b></span></div>
                    <div className="m"><Icon name="calendar" size={13} strokeWidth={1.75}/> <span><b>{s.start}</b> → <b>{s.end}</b></span></div>
                    <div className="m"><Icon name="check" size={13} strokeWidth={2}/> <span><b>{s.tasks}</b> tasks</span></div>
                    {s.dependencies.length > 0 && (
                      <div className="m"><Icon name="link" size={13} strokeWidth={1.75}/> <span>Depends on <b>{s.dependencies.join(', ')}</b></span></div>
                    )}
                  </div>
                </>
              ) : (
                <div style={{ display: 'flex', gap: 20, alignItems: 'center', marginTop: 4 }}>
                  <div style={{ fontSize: 13, color: 'var(--text-tertiary)', letterSpacing: '-0.015em' }}>
                    {s.duration} · {s.owner} · {s.start} → {s.end}
                  </div>
                  <button className="link" style={{ fontSize: 12, color: 'var(--text-secondary)', padding: '4px 8px', borderRadius: 8 }} onClick={() => setSelected(s.n)}>Expand</button>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// StagesSection intentionally NOT exported — lives in project-stages.jsx.
// FeaturesSection intentionally NOT exported — lives in project-features.jsx.
Object.assign(window, {
  BusinessPlanSection, RDSection, UIDesignSection,
  DevelopmentSection, ProjectContractsSection, DocumentsSection,
});