function ProjectDetail({ project: p, extraLeft }) {
  const fmtMoney = (n) => `$${n.toLocaleString('en-US')}`;
  const delta = p.actualToDate - p.budgetedToDate;
  const overHours = Math.round((p.actualHours / p.budgetHours) * p.fee) - p.fee * (p.budgetedToDate / 100);

  // Insights crafted per health
  const insights = {
    red: {
      wins: [
        "Cash testing (Binder B) completed 8 hours under budget — strong prep by R. Tran.",
        "Client responsiveness on Suralink is 2.1 days avg, above firm median of 3.4."
      ],
      risks: [
        "Grants testing is 78% over budget — second confirmation round triggered by late award letters.",
        "Binder E has 7 unresolved review notes older than 5 days — flag for manager touch."
      ],
      optimize: [
        "Reassign M. Singh's Binder D receivables work to R. Tran to free senior capacity.",
        "Consider scope amendment letter to recoup ~$3.2K of grants overrun as OOS."
      ]
    },
    yellow: {
      wins: ["Planning kickoff completed on Day 2 — ahead of typical 5-day window."],
      risks: ["Client portal activity tracking 50% below expected at Day 7 — low engagement signal."],
      optimize: ["Schedule a working session with CFO before reminder cadence fires on Friday."]
    },
    green: {
      wins: [
        "On budget through current phase with positive variance on efficiency.",
        "All review notes closed within 48 hours this week."
      ],
      risks: ["Binder C awaiting client response on 2 open items — monitor."],
      optimize: ["Pull forward Binder D workstream — team has ~14 hours of senior capacity this week."]
    }
  }[p.health];

  const statusClass = (s) => ({
    "Complete": "complete",
    "Behind": "behind",
    "In review": "review",
    "In progress": "progress",
    "Not started": "notstarted"
  }[s] || "progress");

  return (
    <div className="detail-grid">
      <div style={{display:'flex', flexDirection:'column', gap: 20, minWidth: 0}}>
        <div className="card">
          <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
            <div>
              <div className="k">Binder · Real‑time sign‑off progress</div>
              <h4 style={{marginTop: 4}}>Work paper completion</h4>
            </div>
            <div style={{textAlign:'right'}}>
              <div style={{fontFamily:'Instrument Serif, serif', fontSize: 28, lineHeight: 1, color:'var(--ink)'}}>{p.binderPct}%</div>
              <div style={{fontSize: 10.5, color:'var(--mute)', letterSpacing:'0.08em', textTransform:'uppercase', marginTop: 4}}>Signed off</div>
            </div>
          </div>
          <div>
            {p.binders.map(b => {
              const pct = Math.round((b.signed / b.wps) * 100);
              return (
                <div key={b.id} className="binder-row">
                  <div className="binder-id">{b.id}</div>
                  <div className="binder-nm">{b.name}</div>
                  <div className="binder-prog-bar"><span style={{width:`${pct}%`}}/></div>
                  <div className="binder-count">{b.signed}/{b.wps}</div>
                  <div className={`binder-status ${statusClass(b.status)}`}>{b.status}</div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="card">
          <div className="k">Insights · {p.client.split(' ')[0]}</div>
          <h4>What we're doing well, and what to fix</h4>
          <div className="insights">
            <div className="insight win">
              <div className="ihdr"><span className="dotg"/>Going well</div>
              {insights.wins.map((t,i) => <p key={i} className="it">{t}</p>)}
            </div>
            <div className="insight risk">
              <div className="ihdr"><span className="dotg"/>Needs attention</div>
              {insights.risks.map((t,i) => <p key={i} className="it">{t}</p>)}
            </div>
          </div>
          <div style={{marginTop: 6}}>
            <div className="k" style={{color:'var(--ink-3)', marginBottom: 8}}>Optimizations</div>
            {insights.optimize.map((t,i) => (
              <div key={i} style={{display:'flex', gap: 10, padding:'8px 0', borderBottom:'1px solid var(--line-2)', fontSize: 13, color:'var(--ink)'}}>
                <span style={{fontFamily:'Instrument Serif, serif', color:'var(--accent)', fontSize: 16, lineHeight: 1.2}}>{String(i+1).padStart(2,'0')}</span>
                <span style={{flex: 1, lineHeight: 1.5}}>{t}</span>
                <button className="filter-chip" style={{flexShrink: 0}}>Apply</button>
              </div>
            ))}
          </div>
        </div>
        {extraLeft}
      </div>

      <div style={{display:'flex', flexDirection:'column', gap: 20, minWidth: 0}}>
        <div className="card">
          <div className="k">P&L · Practice CS sync</div>
          <h4>Budget vs. actual</h4>
          <div className="pnl-bar" style={{marginTop: 4}}>
            <div className="pnl-nums">
              <span>Hours burned</span>
              <span style={{color: p.health === 'red' ? '#C94A2A' : 'var(--ink)'}}>
                {p.actualToDate}% <span style={{color:'var(--mute)', fontSize: 10}}>vs. {p.budgetedToDate}% expected</span>
              </span>
            </div>
            <div className="pnl-track" style={{height: 10}}>
              <div className="pnl-expected" style={{ left: `${p.budgetedToDate}%`, height: 16, top: -3 }}/>
              <div className={`pnl-fill ${p.health}`} style={{ width: `${p.actualToDate}%` }}/>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12, marginTop: 8}}>
            <div>
              <div style={{fontSize: 10.5, letterSpacing:'0.12em', color:'var(--mute)', textTransform:'uppercase'}}>Fee</div>
              <div style={{fontFamily:'Instrument Serif, serif', fontSize: 26, color:'var(--ink)', lineHeight: 1.1}}>{fmtMoney(p.fee)}</div>
            </div>
            <div>
              <div style={{fontSize: 10.5, letterSpacing:'0.12em', color:'var(--mute)', textTransform:'uppercase'}}>Billed</div>
              <div style={{fontFamily:'Instrument Serif, serif', fontSize: 26, color:'var(--ink)', lineHeight: 1.1}}>{fmtMoney(p.billed)}</div>
            </div>
            <div>
              <div style={{fontSize: 10.5, letterSpacing:'0.12em', color:'var(--mute)', textTransform:'uppercase'}}>Hours</div>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 15, color:'var(--ink-2)', marginTop: 4}}>{p.actualHours} / {p.budgetHours}</div>
            </div>
            <div>
              <div style={{fontSize: 10.5, letterSpacing:'0.12em', color:'var(--mute)', textTransform:'uppercase'}}>Variance</div>
              <div style={{fontFamily:'JetBrains Mono, monospace', fontSize: 15, color: p.health === 'red' ? '#C94A2A' : p.health === 'green' ? '#4E8A4E' : '#A07A14', marginTop: 4}}>
                {delta > 0 ? '+' : ''}{delta}% · {delta > 0 ? '-' : '+'}${Math.abs(Math.round(overHours)).toLocaleString()}
              </div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="k">Suralink · Client portal</div>
          <h4>Document requests</h4>
          <div style={{display:'flex', alignItems:'baseline', gap: 8}}>
            <div style={{fontFamily:'Instrument Serif, serif', fontSize: 40, lineHeight: 1}}>{p.suralinkPct}%</div>
            <div style={{fontSize: 12, color: 'var(--mute)'}}>fulfilled</div>
          </div>
          <div className="pnl-track" style={{height: 8}}>
            <div className={`pnl-fill ${p.suralinkPct >= 70 ? 'green' : p.suralinkPct >= 30 ? 'yellow' : 'red'}`} style={{ width: `${p.suralinkPct}%` }}/>
          </div>
          <div style={{fontSize: 12, color: 'var(--ink-3)', lineHeight: 1.5}}>
            Client upload activity · last request received 18 hours ago. {p.suralinkPct < 70 ? 'Reminders scheduled to fire automatically.' : 'Pipeline healthy.'}
          </div>
        </div>

        <div className="card">
          <div className="k">Engagement team</div>
          <h4>{p.team.length} assigned</h4>
          <div>
            {p.team.map(t => (
              <div key={t.initials} className="team-row">
                <div className="av">{t.initials}</div>
                <div>
                  <div className="nm">{t.name}</div>
                  <div className="rl">{t.role}</div>
                </div>
                <div style={{flex: 1}}/>
                <div className="hr">{t.hours}h</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProjectDetail });