// Stages / Execution Plan — full experience.

function StagesSection({ pdata }) {
  const exec = pdata.execution;
  const [aiOpen, setAiOpen] = React.useState(false);
  const [openMission, setOpenMission] = React.useState(null);
  const [demoReady, setDemoReady] = React.useState(false); // toggles Ready state for the completion demo
  const [demoUnlocked, setDemoUnlocked] = React.useState(false);
  const cur = pdata.stages.find(s => s.status === 'now');

  return (
    <div className="sw2" data-screen-label="StageWorkspace">
      {/* 1. Estimate strip (unchanged; kept for scannable context) */}
      <EstimateStrip exec={exec} onGenerate={() => setAiOpen(true)} />

      {/* AI suggestion panel */}
      {aiOpen && <AISuggestionPanel exec={exec} onClose={() => setAiOpen(false)} />}

      {/* 2. Stage workspace v2 — mission-oriented */}
      {cur && (
        <StageWorkspaceV2
          pdata={pdata}
          cur={cur}
          demoReady={demoReady}
          demoUnlocked={demoUnlocked}
          onToggleReady={() => setDemoReady(v => !v)}
          onComplete={() => setDemoUnlocked(true)}
          onOpenMission={(m) => setOpenMission(m)}
        />
      )}

      {/* Mission drawer */}
      {openMission && (
        <MissionDrawer mission={openMission} onClose={() => setOpenMission(null)} pdata={pdata} stageN={cur?.n} />
      )}

      {/* 3. Next stage preview + unlock state */}
      <NextStageCard pdata={pdata} unlocked={demoUnlocked} />

      {/* 4. All stages compact list */}
      <AllStagesList pdata={pdata} />

      {/* 5. Full journey card kept below for reference */}
      <JourneyCard pdata={pdata} />
    </div>
  );
}

// -----------------------------------------------------------------
// StageWorkspaceV2 — the mission-centric current stage experience.
// -----------------------------------------------------------------
function StageWorkspaceV2({ pdata, cur, demoReady, demoUnlocked, onToggleReady, onComplete, onOpenMission }) {
  const missions = cur.missions || [];
  const readiness = window.stageReadiness ? window.stageReadiness(cur) : { ready: false, remaining: {}, percent: 0, totalReqs: 0, doneReqs: 0 };
  const ready = demoUnlocked || demoReady || readiness.ready;

  // Aggregate priorities across missions:
  //   - "Complete these" = required checklist items not yet done (top 4)
  //   - "Waiting on approval" = missions in review or with approval pending
  //   - "Blocked" = tasks / checklist items or missions in blocked state
  const requiredPending = [];
  const approvals = [];
  const blocked = [];

  missions.forEach(m => {
    (m.checklist || []).forEach(c => {
      if (c.required && !c.done) requiredPending.push({ ...c, mission: m });
    });
    if (m.status === 'review' || m.approval === 'pending') {
      approvals.push({ text: m.title || m.key, mission: m });
    }
    if (m.status === 'blocked') {
      blocked.push({ text: m.title || m.key, mission: m });
    }
  });

  // Required deliverables status (for the requirements panel + completion)
  const reqDelivs = [];
  const optDelivs = [];
  missions.forEach(m => {
    (m.deliverables || []).forEach(d => {
      const item = { ...d, mission: m };
      if (d.required) reqDelivs.push(item); else optDelivs.push(item);
    });
  });

  // For the demo: if user hits "mark scope sign-off", the state can flip
  const stages = (pdata.stages || []).map(s => ({ n: s.n, name: s.name, status: s.status }));
  const nextStage = pdata.stages.find(s => s.n === cur.n + 1);

  return (
    <>
      {/* --- Stage head: journey + you-are-here + ready pill --- */}
      <div className="sw2-head">
        <div className="sw2-head-top">
          <div>
            <div className="sw2-here">You are here</div>
            <div className="sw2-title">
              {cur.name}
              <span className="num">Stage {String(cur.n).padStart(2, '0')} of {pdata.stages.length}</span>
            </div>
            <p className="sw2-goal">{cur.goal}</p>
          </div>
          <div className="sw2-hdr-right">
            <div className={`ready-pill ${ready ? 'ready' : 'not-ready'}`}>
              {ready ? (
                <>
                  <span className="glyph"><Icon name="check" size={11} strokeWidth={3} /></span>
                  <span>Ready to complete</span>
                </>
              ) : (
                <>
                  <span style={{ fontSize: 11 }}>{readiness.doneReqs}/{readiness.totalReqs} requirements</span>
                </>
              )}
            </div>
            <DonutStack percent={readiness.percent} size={56} thickness={6} tone={ready ? 'green' : 'blue'} />
          </div>
        </div>
        <div className="sw2-journey">
          <HorizontalStages stages={stages} dense={true} active={cur.n} />
        </div>
      </div>

      {/* --- Priorities row --- */}
      <div className="sw2-priorities">
        <div className="sw2-prio tone-blue">
          <div className="sw2-prio-eyebrow"><Icon name="check" size={11} strokeWidth={2} /> Complete these <span className="n">{requiredPending.length}</span></div>
          {requiredPending.length === 0 ? (
            <div className="sw2-prio-empty">All required checklist items are done.</div>
          ) : (
            <div className="sw2-prio-list">
              {requiredPending.slice(0, 3).map((c, i) => (
                <div className="sw2-prio-item" key={i} onClick={() => onOpenMission(c.mission)} style={{ cursor: 'pointer' }}>
                  <span className="b">{c.text}</span>
                  <span className="m">{c.due || (window.MYGENI_MISSIONS[c.mission.key]?.short)}</span>
                </div>
              ))}
              {requiredPending.length > 3 && (
                <div className="sw2-prio-item"><span className="b" style={{ color: 'var(--text-tertiary)', fontWeight: 500 }}>+ {requiredPending.length - 3} more</span></div>
              )}
            </div>
          )}
        </div>
        <div className="sw2-prio tone-yellow">
          <div className="sw2-prio-eyebrow"><Icon name="clock" size={11} strokeWidth={2} /> Waiting on approval <span className="n">{approvals.length}</span></div>
          {approvals.length === 0 ? (
            <div className="sw2-prio-empty">Nothing waiting on sign-off.</div>
          ) : (
            <div className="sw2-prio-list">
              {approvals.slice(0, 3).map((a, i) => (
                <div className="sw2-prio-item" key={i} onClick={() => onOpenMission(a.mission)} style={{ cursor: 'pointer' }}>
                  <span className="b">{a.text}</span>
                  <span className="m">Review</span>
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="sw2-prio tone-red">
          <div className="sw2-prio-eyebrow"><Icon name="block" size={11} strokeWidth={2} /> Blocked <span className="n">{blocked.length}</span></div>
          {blocked.length === 0 ? (
            <div className="sw2-prio-empty">No blockers — everything is progressing.</div>
          ) : (
            <div className="sw2-prio-list">
              {blocked.slice(0, 3).map((b, i) => (
                <div className="sw2-prio-item" key={i}>
                  <span className="b">{b.text}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* --- Mission grid --- */}
      <div>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', margin: '4px 4px 12px', padding: '0 2px' }}>
          <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, letterSpacing: '-0.015em', color: 'var(--text-primary)' }}>
            Missions <span style={{ fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500, marginLeft: 8 }}>{missions.length} · click to open</span>
          </h3>
          <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>Only the missions relevant to this stage are shown.</span>
        </div>
        <div className="sw2-mission-grid">
          {missions.map(m => (
            <MissionCard key={m.id} mission={m} onOpen={() => onOpenMission(m)} pdata={pdata} stageN={cur.n} />
          ))}
        </div>
      </div>

      {/* --- Commercial context (only if a related contract exists) --- */}
      {(missions.find(m => m.commercial) || pdata.contract) && (
        <div className="sw2-commercial">
          <div>
            <div className="eyebrow">Commercial · connected to this stage</div>
            <div className="ttl">Founding partner engagement · GS-2026-041</div>
            <div className="sub">Wave 2 beta start on Oct 02 triggers a 30% milestone payment.</div>
          </div>
          <div>
            <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, color: 'var(--text-tertiary)' }}>Milestone due</div>
            <div className="mono" style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', marginTop: 3 }}>Oct 02 · $54K</div>
            <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>Depends on scope + design sign-off</div>
          </div>
          <a href={`#/projects/${pdata.id}/commercial`} className="btn btn-white btn-sm">
            <Icon name="wallet" size={13} strokeWidth={1.75} />
            <span>Open Commercial</span>
          </a>
        </div>
      )}

      {/* --- Stage requirements + completion --- */}
      <div className="sw2-req">
        <div className="sw2-req-head">
          <h3>Requirements for completing this stage</h3>
          <button
            onClick={onToggleReady}
            style={{ fontSize: 11, letterSpacing: '-0.02em', color: 'var(--text-tertiary)', padding: '4px 8px', borderRadius: 6 }}
            title="Demo: toggle the completion readiness state"
          >
            {demoReady ? 'Reset demo' : 'Mark all as done (demo)'}
          </button>
        </div>
        <div className="sw2-req-body">
          <div className="sw2-req-lists">
            <div className="sw2-req-group">
              <h4><Icon name="check" size={12} strokeWidth={2}/> Required checklist ({requiredPending.length === 0 || demoReady ? 'all done' : `${requiredPending.length} remaining`})</h4>
              <div className="sw2-req-list">
                {missions.flatMap(m => (m.checklist || []).filter(c => c.required).map((c, i) => (
                  <div className={`sw2-req-row ${(c.done || demoReady) ? 'done' : 'pending'}`} key={`${m.id}-${c.id || i}`} onClick={() => onOpenMission(m)} style={{ cursor: 'pointer' }}>
                    <div className="mark">{(c.done || demoReady) && <Icon name="check" size={11} strokeWidth={3} />}</div>
                    <div className="t">{c.text}</div>
                    <div className="m">{window.MYGENI_MISSIONS[m.key]?.short}</div>
                  </div>
                )))}
              </div>
            </div>
            <div className="sw2-req-group">
              <h4><Icon name="fileText" size={12} strokeWidth={2}/> Required deliverables ({reqDelivs.filter(d => (d.status === 'done' || d.status === 'approved') || demoReady).length}/{reqDelivs.length} done)</h4>
              <div className="sw2-req-list">
                {reqDelivs.map((d, i) => {
                  const isDone = demoReady || d.status === 'done' || d.status === 'approved';
                  return (
                    <div className={`sw2-req-row ${isDone ? 'done' : 'pending'}`} key={i} onClick={() => onOpenMission(d.mission)} style={{ cursor: 'pointer' }}>
                      <div className="mark">{isDone && <Icon name="check" size={11} strokeWidth={3} />}</div>
                      <div className="t">{d.name}</div>
                      <div className="m">{d.type}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
          <div>
            <div className="sw2-req-group">
              <h4><Icon name="link" size={12} strokeWidth={2}/> Dependencies</h4>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {cur.dependencies.length === 0 ? (
                  <div style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>No stage dependencies.</div>
                ) : cur.dependencies.map((d, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', borderRadius: 10, background: 'var(--bg-app)' }}>
                    <div style={{ width: 20, height: 20, borderRadius: 6, background: 'var(--success-solid)', color: 'white', display: 'grid', placeItems: 'center', flex: 'none' }}>
                      <Icon name="check" size={11} strokeWidth={2.5}/>
                    </div>
                    <div style={{ fontSize: 12.5, letterSpacing: '-0.015em', color: 'var(--text-primary)', fontWeight: 500 }}>{d}</div>
                    <div style={{ marginLeft: 'auto', fontSize: 10.5, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>Complete</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="sw2-req-group" style={{ marginTop: 16 }}>
              <h4><Icon name="target" size={12} strokeWidth={2}/> Approval</h4>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderRadius: 10, background: 'var(--bg-app)' }}>
                <div style={{ width: 20, height: 20, borderRadius: 6, background: demoReady ? 'var(--success-solid)' : 'transparent', color: 'white', display: 'grid', placeItems: 'center', flex: 'none', border: demoReady ? 'none' : '1.5px solid var(--stroke-subtle)' }}>
                  {demoReady && <Icon name="check" size={11} strokeWidth={2.5}/>}
                </div>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--text-primary)', letterSpacing: '-0.015em' }}>Sign-off from Alireza Izadi</div>
                  <div style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', marginTop: 2 }}>Product owner · required for stage completion</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Completion action */}
        <div className={`sw2-complete ${demoUnlocked ? 'complete' : (ready ? 'ready' : 'not-ready')}`} style={{ marginTop: 18 }}>
          <div className="sw2-complete-glyph">
            <Icon name={demoUnlocked ? 'circleCheck' : (ready ? 'check' : 'lock')} size={22} strokeWidth={2}/>
          </div>
          <div className="sw2-complete-text">
            {demoUnlocked ? (
              <>
                <div className="t">Stage complete — Development Foundation unlocked</div>
                <div className="s">The team can now start Stage {String((nextStage?.n) || (cur.n + 1)).padStart(2, '0')}.</div>
              </>
            ) : ready ? (
              <>
                <div className="t">Ready to complete this stage</div>
                <div className="s">All required items are done. Completing the stage will move the project to Stage {String((nextStage?.n) || (cur.n + 1)).padStart(2, '0')} · {nextStage?.name || 'Next'}.</div>
              </>
            ) : (
              <>
                <div className="t">Not ready to complete yet</div>
                <div className="s">{requiredPending.length} checklist item{requiredPending.length === 1 ? '' : 's'} and 1 approval remaining. Optional items don't block completion.</div>
              </>
            )}
          </div>
          {!demoUnlocked && (
            <button className="btn-complete" onClick={ready ? onComplete : undefined} disabled={!ready}>
              <Icon name="check" size={13} strokeWidth={2.5}/>
              <span>Complete stage</span>
            </button>
          )}
        </div>
      </div>
    </>
  );
}

// -----------------------------------------------------------------
// MissionCard — a single mission tile in the stage's mission grid.
// -----------------------------------------------------------------
function MissionCard({ mission, onOpen, pdata, stageN }) {
  const meta = window.MYGENI_MISSIONS[mission.key] || {};
  const tone = window.MYGENI_MISSION_TONES[meta.tone] || window.MYGENI_MISSION_TONES.blue;
  const statusMeta = window.MYGENI_MISSION_STATUS[mission.status] || { label: mission.status, tone: 'gray' };

  const checklistDone  = (mission.checklist   || []).filter(c => c.done).length;
  const checklistTotal = (mission.checklist   || []).length;
  const delivDone      = (mission.deliverables|| []).filter(d => d.status === 'done' || d.status === 'approved').length;
  const delivTotal     = (mission.deliverables|| []).length;

  // Phase 12 — cross-section link count. Reads canonical items,
  // never duplicates them.
  const linkedCount = React.useMemo(() => {
    if (!pdata) return 0;
    const research  = window.linkedResearch?.(pdata, mission.key, stageN) || [];
    const design    = window.linkedDesign?.(pdata, mission.key, stageN);
    const dev       = window.linkedDev?.(pdata, mission.key, stageN)      || [];
    const docs      = window.linkedDocuments?.(pdata, mission.key, stageN)|| [];
    const designC   = (design?.screens?.length || 0) + (design?.flows?.length || 0);
    return research.length + designC + dev.length + docs.length;
  }, [pdata, mission.key, stageN]);

  const isBlocked = mission.status === 'blocked';
  const hasAttention = (mission.checklist || []).some(c => c.required && !c.done);

  return (
    <div className={`mission-card ${isBlocked ? 'blocked' : ''}`} onClick={onOpen} role="button" tabIndex={0}
         onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(); } }}>
      <div className="mission-head">
        <div className="mission-icon" style={{ background: tone.bg, color: tone.fg }}>
          <Icon name={meta.icon || 'features'} size={18} strokeWidth={1.75} />
        </div>
        <div className="mission-title-block">
          <div className="mission-title">{mission.title || meta.label}</div>
          <div className="mission-owner"><Avatar name={mission.owner} size="xs" /> {mission.owner}</div>
        </div>
        <div className="mission-status">
          <Label tone={statusMeta.tone} dot size="sm">{statusMeta.label}</Label>
        </div>
      </div>

      <div className="mission-progress">
        <div className="p-bar">
          <div className="p-fill" style={{ width: `${mission.progress}%`, background: tone.fg }} />
        </div>
        <span className="p-num">{mission.progress}%</span>
      </div>

      <div className="mission-stats">
        <div className={`mission-stat ${hasAttention ? 'attention' : ''}`}>
          <div className="lbl">Checklist</div>
          <div className="val">{checklistDone}<span className="tot">/{checklistTotal}</span></div>
        </div>
        <div className="mission-stat">
          <div className="lbl">Deliverables</div>
          <div className="val">{delivDone}<span className="tot">/{delivTotal}</span></div>
        </div>
        <div className="mission-stat">
          <div className="lbl">Linked</div>
          <div className="val">{linkedCount}</div>
        </div>
      </div>
    </div>
  );
}

// ---------- 1. Estimate strip ----------
function EstimateStrip({ exec, onGenerate }) {
  const total = exec.totalWeeksHi; // draw dots up to upper estimate
  // Elapsed weeks map to done dots; current week is "now"; rest upcoming.
  const dots = Array.from({ length: total }).map((_, i) => {
    const wk = i + 1;
    if (wk < exec.elapsedWeeks) return 'done';
    if (wk === exec.elapsedWeeks) return 'now';
    return 'upcoming';
  });

  return (
    <div className="est-strip">
      <div className="lead">
        <div className="num">
          Estimated <span className="approx">·</span> {exec.estimate}
        </div>
        <div className="sub">Started {exec.startedOn} · Target launch {exec.targetLaunch}</div>
      </div>

      <div className="est-dots" aria-label="Week timeline">
        {dots.map((s, i) => <i key={i} className={s} title={`Week ${i+1}`} />)}
      </div>

      <div className="est-metrics">
        <div className="est-metric">
          <span className="k">Currently</span>
          <span className="v">Week {exec.elapsedWeeks} of {exec.totalWeeksLo}–{exec.totalWeeksHi}</span>
        </div>
        <div className="est-metric">
          <span className="k">Stages complete</span>
          <span className="v">{exec.completedCount} / 7</span>
        </div>
        <div className="est-metric">
          <span className="k">Overall progress</span>
          <span className="v">{exec.overallProgress}%</span>
        </div>
      </div>

      <div className="est-actions">
        <button className="btn btn-ai btn-sm" onClick={onGenerate}>
          <span className="btn-ai-spark"><Icon name="spark" size={14} strokeWidth={1.75} /></span>
          <span>Generate stages</span>
        </button>
        <button className="btn btn-primary btn-sm">
          <Icon name="plus" size={14} strokeWidth={2} />
          <span>New stage</span>
        </button>
      </div>
    </div>
  );
}

// ---------- 2. Journey ----------
function JourneyCard({ pdata }) {
  const stages = pdata.stages;
  const N = stages.length;
  const currentIdx = stages.findIndex(s => s.status === 'now');
  // Fill line ends at midway between current and next node (visually shows "in the middle of current stage")
  const stagesFrac = (currentIdx + 0.5) / (N - 1);
  const fillPct = Math.min(1, Math.max(0, stagesFrac)) * 100;

  return (
    <div className="journey-card">
      <div className="journey-card-head">
        <span className="t">
          <Icon name="route" size={18} strokeWidth={1.75} style={{ color: 'var(--primary-01)' }} />
          Project journey
        </span>
        <span className="r">
          <span className="legend">
            <span className="lg"><i style={{ background: 'linear-gradient(180deg,#10B372,var(--success-solid))' }} /> Completed</span>
            <span className="lg"><i style={{ background: 'linear-gradient(180deg,#5AA0FF,var(--primary-01))' }} /> Current</span>
            <span className="lg"><i style={{ background: 'var(--shade-08)' }} /> Upcoming</span>
            <span className="lg"><i style={{ background: 'linear-gradient(180deg,#FF6A55,var(--danger-solid))', transform: 'rotate(45deg)' }} /> Blocked</span>
          </span>
          <button className="btn btn-white btn-sm" style={{ height: 30, padding: '0 12px' }}>
            <Icon name="edit" size={13} strokeWidth={1.75} />
            <span>Customize stages</span>
          </button>
        </span>
      </div>

      <div className="journey-canvas">
        <div className="base" />
        <div className="fill" style={{ width: `calc((100% - 80px) * ${fillPct / 100})` }} />

        {/* Milestone diamonds on the connectors */}
        <div className="j-milestones">
          {pdata.execution.milestones.map((m, i) => {
            // Position: between stage `m.after` and `m.after + 1`
            const stageStep = 1 / (N - 1);
            const between = ((m.after - 1) + 0.5) * stageStep;
            return (
              <div className={`j-mile ${m.state}`} key={i} style={{ left: `${between * 100}%`, top: 4 }}>
                <div className="j-mile-dot" />
                <div className="j-mile-label">{m.label} · {m.date}</div>
              </div>
            );
          })}
        </div>

        <div className="journey-stages">
          {stages.map((s) => (
            <div key={s.n} className="j-stage">
              <div className="up">
                <span className={`num ${s.status}`}>Stage {String(s.n).padStart(2, '0')}</span>
                <span className={`name ${s.status}`}>{s.name}</span>
                <span className="dur">{s.duration}</span>
              </div>
              <div className={`j-node ${s.status}`}>
                {s.status === 'done' && <Icon name="check" size={18} strokeWidth={2.5} />}
                {s.status === 'now'  && <span style={{ width: 10, height: 10, background: 'white', borderRadius: 50, boxShadow: '0 0 0 3px rgba(255,255,255,0.35)' }} />}
                {s.status === 'upcoming' && <span style={{ width: 6, height: 6, background: 'var(--shade-08)', borderRadius: 50 }} />}
                {s.status === 'blocked' && <Icon name="circleAlert" size={16} strokeWidth={2} />}
                {s.status === 'now' && (
                  <div className="j-here">
                    <span className="pulse" />
                    You are here
                  </div>
                )}
              </div>
              <div className="down">
                <span className="date">{s.start} → {s.end}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ---------- 3. AI Suggestion panel ----------
function AISuggestionPanel({ exec, onClose }) {
  return (
    <div className="ai-panel">
      <div className="ai-panel-head">
        <div className="glyph"><Icon name="spark" size={16} strokeWidth={1.75} /></div>
        <div>
          <div className="title">Suggested stage plan</div>
          <div className="ai-panel-sub">{exec.aiSuggestion.source}. You can edit, accept, or dismiss each stage below.</div>
        </div>
        <button className="close-btn" onClick={onClose} aria-label="Close"><Icon name="x" size={16} strokeWidth={2} /></button>
      </div>

      <div className="ai-suggestions">
        {exec.aiSuggestion.stages.map((s, i) => (
          <div className="ai-sugg" key={i}>
            <span className="ord">{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div className="name">{s.name}</div>
              <div className="why">{s.why}</div>
            </div>
            <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
              <span className="dur">{s.duration}</span>
              <button className="btn btn-white btn-sm" style={{ height: 30, padding: '0 10px' }}>
                <Icon name="edit" size={13} strokeWidth={1.75} />
              </button>
            </div>
          </div>
        ))}
      </div>

      <div className="ai-panel-actions">
        <button className="btn btn-primary btn-sm"><Icon name="check" size={14} strokeWidth={2} /><span>Apply all</span></button>
        <button className="btn btn-white btn-sm">Discard</button>
        <span className="note">Suggestions are drafts — nothing changes until you apply.</span>
      </div>
    </div>
  );
}

// ---------- 4. Current stage ----------
function CurrentStageBlock({ pdata, cur }) {
  const exec = pdata.execution;
  const totalDeliv = exec.currentStageDeliverables.length;
  const doneDeliv = exec.currentStageDeliverables.filter(d => d.done).length;
  const ready = doneDeliv === totalDeliv;

  // Actual progress = provided overall stage % from data (or infer)
  const stageProgress = 62;

  return (
    <div className="cur-shell">
      <div className="cur-main">
        {/* Hero */}
        <div className="cur-hero">
          <div className="head">
            <span className="stage-num">Stage {String(cur.n).padStart(2, '0')}</span>
            <h2>{cur.name}</h2>
            <span className="day-of">Day 6 of 14</span>
            <div className="actions" style={{ marginLeft: 'auto' }}>
              <button className={`btn-complete-stage ${ready ? '' : 'disabled'}`} title={ready ? 'All deliverables complete' : `${totalDeliv - doneDeliv} deliverables and design sign-off remain`}>
                <Icon name="check" size={14} strokeWidth={2.5} />
                <span>Complete stage</span>
              </button>
            </div>
          </div>

          <span className="goal-label">Goal</span>
          <p className="goal">{cur.goal}</p>
          <p className="desc">{cur.desc}</p>

          <div className="prog-row">
            <span className="n">{stageProgress}%</span>
            <div className="bar" style={{ flex: 1 }}>
              <ProgressBar value={stageProgress} tone="blue" />
            </div>
            <span className="sub">{doneDeliv} of {totalDeliv} deliverables · sign-off pending</span>
          </div>
        </div>

        {/* Deliverables */}
        <div>
          <div className="deliv-head">
            <h3><Icon name="check" size={16} strokeWidth={2} style={{ color: 'var(--primary-01)' }} /> Deliverables</h3>
            <span className="progress-note">{doneDeliv} of {totalDeliv} complete · required to move to Stage {String(cur.n + 1).padStart(2, '0')}</span>
          </div>
          <div className="deliv-grid">
            {exec.currentStageDeliverables.map((d) => <DeliverableCard key={d.id} d={d} />)}
          </div>
        </div>

        {/* Tasks */}
        <div className="tasks-card">
          <div className="tasks-head">
            <h4><Icon name="check" size={15} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} /> Tasks in this stage <span style={{ marginLeft: 6, fontSize: 12, color: 'var(--text-tertiary)', fontWeight: 500 }}>{exec.currentStageTasks.length} · lightweight — see Work for the full list</span></h4>
            <a className="link" href="#/work">Open in Work →</a>
          </div>
          {exec.currentStageTasks.map((t, i) => (
            <div className={`task-row${t.tone === 'gray' && t.status !== 'To do' ? ' done' : ''}${t.status === 'Blocked' ? ' blocked' : ''}`} key={i}>
              <div className="cb" />
              <div className="t-title">{t.title}</div>
              <div className="t-owner"><Avatar name={t.owner} size="xs" /> {t.owner.split(' ')[0]}</div>
              <div className="t-due">{t.due}</div>
              <div className="t-status"><Label tone={t.tone} dot size="sm">{t.status}</Label></div>
            </div>
          ))}
        </div>
      </div>

      {/* SIDE */}
      <div className="cur-side">
        <div className="meta-card">
          <div className="meta-head">
            <h4>Stage details</h4>
          </div>
          <div className="meta-grid">
            <div>
              <div className="k">Owner</div>
              <div className="v" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Avatar name={cur.owner} size="xs" />
                {cur.owner}
              </div>
            </div>
            <div>
              <div className="k">Team</div>
              <div className="v"><AvatarStack names={pdata.team.map(t => t.name)} max={4} size="xs" /></div>
            </div>
            <div>
              <div className="k">Start</div>
              <div className="v">{cur.start}</div>
              <div className="v-sub">On time</div>
            </div>
            <div>
              <div className="k">Target</div>
              <div className="v">{cur.end}</div>
              <div className="v-sub">10 days away</div>
            </div>
            <div>
              <div className="k">Estimated</div>
              <div className="v">{cur.duration}</div>
              <div className="v-sub">Solid work + reviews</div>
            </div>
            <div>
              <div className="k">Actual progress</div>
              <div className="v tabular">{stageProgress}%</div>
              <div className="v-sub">Day 6 of 14</div>
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <div className="k">Dependencies</div>
              <div className="v" style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {cur.dependencies.length === 0 && <span style={{ fontSize: 12, color: 'var(--text-tertiary)' }}>None</span>}
                {cur.dependencies.map((d, i) => (
                  <span className="dep-chip" key={i}><Icon name="link" size={11} strokeWidth={2} /> {d}</span>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Blockers */}
        <div className="meta-card">
          <div className="meta-head">
            <h4><Icon name="circleAlert" size={14} strokeWidth={1.75} style={{ color: 'var(--warning-solid)' }} /> Risks &amp; blockers</h4>
            <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>{exec.currentStageBlockers.length}</span>
          </div>
          {exec.currentStageBlockers.length === 0 ? (
            <div style={{ fontSize: 12, color: 'var(--text-tertiary)', letterSpacing: '-0.02em', padding: '6px 0' }}>
              No open blockers — this stage is progressing without impediment.
            </div>
          ) : (
            exec.currentStageBlockers.map((b, i) => (
              <div className="blocker-item" key={i}>
                <div className={`b-dot ${b.severity}`} />
                <div>
                  <div className="b-title">{b.title}</div>
                  <div className="b-note">{b.note}</div>
                  <div className="b-owner">Owner · {b.owner}</div>
                </div>
              </div>
            ))
          )}
        </div>

        {/* Related items */}
        <div className="meta-card">
          <div className="meta-head">
            <h4><Icon name="link" size={14} strokeWidth={1.75} /> Related items</h4>
          </div>

          <RelatedGroup label="Features"    icon="features"   items={exec.currentStageRelated.features}   href={`#/projects/${pdata.id}/features`} />
          <RelatedGroup label="Research"    icon="flask"      items={exec.currentStageRelated.research}   href={`#/projects/${pdata.id}/rd`} />
          <RelatedGroup label="Decisions"   icon="decisions"  items={exec.currentStageRelated.decisions}  href={`#/projects/${pdata.id}/overview`} />
          <RelatedGroup label="UI / Design" icon="palette"    items={exec.currentStageRelated.design}     href={`#/projects/${pdata.id}/ui-design`} />
          <RelatedGroup label="Documents"   icon="files"      items={exec.currentStageRelated.documents}  href={`#/projects/${pdata.id}/documents`} />
          <RelatedGroup label="Contracts"   icon="contracts"  items={exec.currentStageRelated.contracts}  href={`#/projects/${pdata.id}/contracts`} />
        </div>
      </div>
    </div>
  );
}

function RelatedGroup({ label, icon, items, href }) {
  if (!items || items.length === 0) return null;
  return (
    <div className="related-group">
      <div className="g-label"><Icon name={icon} size={11} strokeWidth={2} /> {label}</div>
      <div className="related-chips">
        {items.slice(0, 3).map((it, i) => (
          <a className="rc" key={i} href={href}>
            <span className="truncate" style={{ maxWidth: 200 }}>{it.title}</span>
          </a>
        ))}
        {items.length > 3 && (
          <a className="rc" href={href} style={{ color: 'var(--text-tertiary)' }}>+{items.length - 3}</a>
        )}
      </div>
    </div>
  );
}

// Deliverable card
function DeliverableCard({ d }) {
  return (
    <div className={`deliv-card${d.done ? ' done' : ''}`}>
      <div className={`deliv-visual ${d.preview}`}>
        <span className="deliv-tag">{d.type}</span>
        {d.done && (
          <div className="deliv-checkmark"><Icon name="check" size={14} strokeWidth={2.5} /></div>
        )}
        <DeliverableMock kind={d.preview} />
      </div>
      <div className="deliv-meta">
        <div className="deliv-name">{d.name}</div>
        <div className="deliv-row">
          <Label tone={d.tone} dot size="sm">{d.status}</Label>
          <span className="due">{d.due}</span>
        </div>
        <div className="deliv-row">
          <span className="owner"><Avatar name={d.owner} size="xs" />{d.owner}</span>
        </div>
      </div>
    </div>
  );
}

function DeliverableMock({ kind }) {
  if (kind === 'doc') {
    return (
      <svg viewBox="0 0 260 120" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <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="72%" height="4" y="48" fill="rgba(16,16,16,0.10)" rx="2" />
          <rect width="86%" height="4" y="60" fill="rgba(16,16,16,0.10)" rx="2" />
          <rect width="52%" height="4" y="70" fill="rgba(16,16,16,0.10)" rx="2" />
        </g>
      </svg>
    );
  }
  if (kind === 'frames') {
    return (
      <div style={{ position: 'absolute', inset: 0, padding: 12, display: 'flex', gap: 8 }}>
        {[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.24)', 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>
    );
  }
  if (kind === 'summary') {
    return (
      <svg viewBox="0 0 260 120" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <rect x="20" y="18" width="220" height="52" rx="10" fill="white" stroke="rgba(0,166,86,0.25)" strokeWidth="1.5" />
        <rect x="30" y="28" width="54" height="7" rx="2" fill="rgba(0,166,86,0.35)" />
        <rect x="30" y="42" width="190" height="4" rx="1.5" fill="rgba(16,16,16,0.18)" />
        <rect x="30" y="50" width="170" height="4" rx="1.5" fill="rgba(16,16,16,0.18)" />
        <rect x="30" y="58" width="130" height="4" rx="1.5" fill="rgba(16,16,16,0.18)" />
        <rect x="20" y="78" width="130" height="24" rx="6" fill="white" stroke="rgba(16,16,16,0.08)" strokeWidth="1.5" />
        <rect x="28" y="86" width="60" height="7" rx="2" fill="rgba(16,16,16,0.35)" />
        <rect x="160" y="78" width="80" height="24" rx="6" fill="rgba(0,166,86,0.10)" stroke="rgba(0,166,86,0.20)" strokeWidth="1.5" />
      </svg>
    );
  }
  if (kind === 'mobile') {
    return (
      <svg viewBox="0 0 260 120" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <rect x="105" y="10" width="50" height="100" rx="10" fill="white" stroke="rgba(16,16,16,0.15)" strokeWidth="1.5" />
        <rect x="112" y="18" width="36" height="4" rx="2" fill="rgba(16,16,16,0.12)" />
        <rect x="112" y="28" width="26" height="7" rx="2" fill="rgba(16,16,16,0.32)" />
        <rect x="112" y="44" width="36" height="20" rx="4" fill="rgba(177,229,252,0.55)" />
        <rect x="116" y="52" width="24" height="4" rx="1.5" fill="rgba(16,16,16,0.32)" />
        <rect x="112" y="68" width="36" height="10" rx="3" fill="rgba(16,16,16,0.04)" />
        <rect x="112" y="82" width="36" height="10" rx="3" fill="rgba(16,16,16,0.04)" />
        <rect x="112" y="96" width="36" height="10" rx="3" fill="rgba(16,16,16,0.04)" />
      </svg>
    );
  }
  if (kind === 'palette') {
    return (
      <div style={{ position: 'absolute', inset: 0, padding: 16, display: 'flex', gap: 8, alignItems: 'center' }}>
        {[
          ['#FDFDFD', 'Surface'],
          ['#F1F1F1', 'Base'],
          ['#2A85FF', 'Primary'],
          ['#00A656', 'Success'],
          ['#FF9D34', 'Warn'],
          ['#F52495', 'Accent'],
        ].map(([c, k], i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4, alignItems: 'center' }}>
            <div style={{ width: 22, height: 44, borderRadius: 6, background: c, boxShadow: 'inset 0 0 0 1px rgba(16,16,16,0.05)' }} />
            <span style={{ fontSize: 8, letterSpacing: '-0.02em', color: 'var(--text-tertiary)' }}>{k}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === 'audit') {
    return (
      <svg viewBox="0 0 260 120" width="100%" height="100%" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
        <g transform="translate(22 18)">
          {['A11y checklist', 'Contrast', 'Focus states', 'Keyboard', 'Screen reader'].map((_, i) => (
            <g key={i} transform={`translate(0 ${i * 15})`}>
              <rect width="12" height="12" y="-1" rx="3" fill="white" stroke="rgba(16,16,16,0.15)" strokeWidth="1.2"/>
              <rect x="18" width="180" height="4" y="3" fill="rgba(16,16,16,0.20)" rx="1.5"/>
              <rect x="18" width="120" height="3" y="10" fill="rgba(16,16,16,0.08)" rx="1"/>
            </g>
          ))}
        </g>
        <g transform="translate(210 24)" opacity="0.72">
          <circle r="12" fill="rgba(239,157,14,0.14)"/>
          <path d="M0 -6 v6 M0 4 v0.5" stroke="var(--warning-solid)" strokeWidth="2" strokeLinecap="round"/>
        </g>
      </svg>
    );
  }
  return null;
}

// ---------- 5. Next stage ----------
function NextStageCard({ pdata, unlocked }) {
  const cur = pdata.stages.find(s => s.status === 'now');
  const next = pdata.stages.find(s => s.n === cur.n + 1);
  if (!next) return null;

  // Simple unlock micro-motion when unlocked === true
  if (unlocked) {
    return (
      <div className="next-unlock unlocked">
        <div className="next-unlock-icon"><Icon name="unlock" size={22} strokeWidth={1.75}/></div>
        <div>
          <div className="t">
            Stage unlocked
            <span className="chip">You may begin</span>
          </div>
          <div className="n">Stage {String(next.n).padStart(2, '0')} · {next.name}</div>
          <div className="m">{next.duration} · owner {next.owner} · {next.start} → {next.end}</div>
        </div>
        <a href={`#/projects/${pdata.id}/plan`} className="btn btn-primary btn-sm" style={{ background: 'var(--primary-01)', color: 'white' }}>
          <Icon name="arrowRight" size={13} strokeWidth={2}/>
          <span>Start stage</span>
        </a>
      </div>
    );
  }

  return (
    <a className="next-stage" href={`#/projects/${pdata.id}/plan`}>
      <div className="lead">
        <div className="arrow-glyph"><Icon name="arrowRight" size={18} strokeWidth={2} /></div>
        <div className="lead-block">
          <span className="stage-num">Stage {String(next.n).padStart(2, '0')}</span>
          <div className="k" style={{ marginTop: 6 }}>Up next</div>
          <h3>{next.name}</h3>
        </div>
      </div>
      <div className="body">
        <div className="col">
          <div className="k">Starts after</div>
          <div className="v">UI / UX approval</div>
          <div className="v-sub">Product &amp; design sign-off</div>
          <div style={{ marginTop: 10 }}>
            <div className="k">Estimated</div>
            <div className="v">{next.duration}</div>
            <div className="v-sub">Owner · {next.owner}</div>
          </div>
        </div>
        <div className="col">
          <div className="k">Key outputs</div>
          <div className="outputs">
            {next.deliverables.map((d, i) => (
              <span className="rc" key={i}>
                <Icon name="check" size={11} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
                {d}
              </span>
            ))}
          </div>
        </div>
      </div>
      <div className="tail">
        <AvatarStack names={pdata.team.slice(0, 3).map(t => t.name)} max={3} size="sm" />
        <span style={{ fontSize: 11, color: 'var(--text-tertiary)', letterSpacing: '-0.02em' }}>
          {next.start} → {next.end}
        </span>
      </div>
    </a>
  );
}

// ---------- 6. All stages compact ----------
function AllStagesList({ pdata }) {
  return (
    <div className="all-stages-card">
      <div className="all-stages-head">
        <h3>All stages</h3>
        <span className="sub">Compact view · click a row to jump to that stage</span>
      </div>
      {pdata.stages.map((s) => (
        <div key={s.n} className={`ss-row ${s.status}`}>
          <div className={`ss-node ${s.status}`}>
            {s.status === 'done' ? <Icon name="check" size={14} strokeWidth={2.5} /> : String(s.n).padStart(2, '0')}
          </div>
          <div className="ss-name">
            <div className="n">{s.name}</div>
            <div className="g">{s.goal}</div>
          </div>
          <div className="ss-cell">
            {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 className="ss-cell"><b>{s.duration}</b></div>
          <div className="ss-cell">
            <b>{s.start}</b> → {s.end}
          </div>
          <div className="ss-owner"><Avatar name={s.owner} size="xs" />{s.owner.split(' ')[0]}</div>
          <Icon name="chevronRight" size={14} strokeWidth={2} style={{ color: 'var(--text-tertiary)' }} />
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { StagesSection });