/* Candidate detail panel — collapsible sections built on the Greydigi DS. */
const { useState } = React;
const DG = window.GreydigiComponents;
const { Avatar: GAvatar, Badge: GBadge, Button: GButton, Tag: GTag, DecisionBanner: GDecisionBanner, SkillBar: GSkillBar, Card: GCard } = DG;

const TONE_COLOR = { proceed: 'var(--gd-success)', caution: 'var(--gd-warning)', reject: 'var(--gd-error)' };
const TONE_TINT = { proceed: 'rgba(43,182,115,.09)', caution: 'rgba(232,163,61,.10)', reject: 'rgba(210,59,59,.08)' };
const TONE_ICON = { proceed: 'proceed', caution: 'caution', reject: 'reject' };
const RISK_COLOR = { Low: 'var(--gd-success)', Medium: 'var(--gd-warning)', High: 'var(--gd-error)', Critical: '#7a1f1f' };
const STATUS_VARIANT = { matched: 'success', partial: 'warning', missing: 'neutral' };
const STATUS_LABEL = { matched: 'Matched', partial: 'Partial', missing: 'Missing' };

function scoreBand(v) { return v >= 88 ? 'var(--gd-success)' : v >= 75 ? 'var(--gd-coral)' : v >= 55 ? 'var(--gd-warning)' : 'var(--gd-error)'; }

/* ---------- Collapsible section ---------- */
function Section({ title, icon, meta, open, onToggle, children }) {
  return (
    <section className="sec" data-open={open}>
      <button className="sec-head" onClick={onToggle}>
        <Icon name="chevronRight" size={15} className="sec-chev" />
        <span className="sec-ico"><Icon name={icon} size={16} /></span>
        <h3 className="sec-title">{title}</h3>
        {meta != null && <span className="sec-meta">{meta}</span>}
      </button>
      <div className="sec-bodywrap"><div className="sec-body">{children}</div></div>
    </section>
  );
}

/* ---------- Circular score ---------- */
function CircularScore({ value, label, color, suffix = '' }) {
  const r = 26, c = 2 * Math.PI * r;
  const col = color || scoreBand(value);
  const dash = (clampN(value, 0, 100) / 100) * c;
  return (
    <div className="ring-card">
      <div className="ring-wrap">
        <svg width="64" height="64" viewBox="0 0 64 64">
          <circle cx="32" cy="32" r={r} fill="none" stroke="var(--gd-n200)" strokeWidth="6" />
          <circle cx="32" cy="32" r={r} fill="none" stroke={col} strokeWidth="6" strokeLinecap="round"
            strokeDasharray={`${dash} ${c}`} transform="rotate(-90 32 32)" style={{ transition: 'stroke-dasharray .6s cubic-bezier(.22,.61,.36,1)' }} />
        </svg>
        <span className="ring-val" style={{ color: col }}>{value}{suffix}</span>
      </div>
      <span className="ring-label">{label}</span>
    </div>
  );
}
function clampN(n, lo, hi) { return Math.max(lo, Math.min(hi, n)); }

/* ---------- AI recommendation ---------- */
function AIRecommendation({ d }) {
  const tone = d.rec.tone;
  return (
    <div className="airec" style={{ background: TONE_TINT[tone], borderColor: TONE_COLOR[tone] }}>
      <div className="airec-top">
        <div className="airec-verdict">
          <span className="airec-icon" style={{ color: TONE_COLOR[tone] }}><Icon name={TONE_ICON[tone]} size={22} /></span>
          <div>
            <div className="airec-label" style={{ color: TONE_COLOR[tone] }}>{d.rec.label}</div>
            <div className="airec-verb">{d.rec.verb}</div>
          </div>
        </div>
        <CircularScore value={d.confidence} label="AI confidence" color={TONE_COLOR[tone]} suffix="%" />
      </div>
      <p className="airec-reason">{d.reasoning}</p>
      <div className="airec-cols">
        <div>
          <div className="mini-label">Top strengths</div>
          <div className="tag-wrap">{d.strengthsDetail.slice(0, 4).map((s) => <GTag key={s.title} label={s.title} variant="strength" />)}</div>
        </div>
        <div>
          <div className="mini-label">Top concerns</div>
          <div className="tag-wrap">{d.concernsDetail.slice(0, 4).map((s) => <GTag key={s.title} label={s.title} variant="gap" />)}</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Qualification match ---------- */
function QualRow({ q }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="qual" data-open={open}>
      <button className="qual-head" onClick={() => setOpen((v) => !v)}>
        <Icon name="chevronRight" size={13} className="qual-chev" />
        <span className="qual-name">{q.name}</span>
        <GBadge label={STATUS_LABEL[q.status]} variant={STATUS_VARIANT[q.status]} />
      </button>
      <div className="qual-bodywrap"><div className="qual-body">
        <div className="qual-conf"><GSkillBar name="Match confidence" percentage={q.confidence} variant={q.status} /></div>
        <p className="qual-ev">{q.evidence}</p>
        <div className="qual-src"><Icon name="search" size={12} /> {q.source}</div>
      </div></div>
    </div>
  );
}
function QualGroup({ title, items }) {
  const matched = items.filter((q) => q.status === 'matched').length;
  return (
    <div className="qual-group">
      <div className="qual-group-head">
        <span className="qual-group-title">{title}</span>
        <span className="qual-group-count">{matched}/{items.length} matched</span>
      </div>
      <div className="qual-list">{items.map((q) => <QualRow key={q.name} q={q} />)}</div>
    </div>
  );
}

/* ---------- Timeline ---------- */
function Timeline({ items }) {
  return (
    <div className="tl">
      {items.map((e, i) => (
        <div key={i} className="tl-item" data-type={e.type}>
          <div className="tl-marker">
            <span className="tl-dot" style={{ background: e.type === 'gap' ? 'var(--gd-warning)' : e.type === 'promotion' ? 'var(--gd-coral)' : 'var(--gd-n400)' }}>
              {e.type === 'promotion' && <Icon name="trending" size={11} />}
              {e.type === 'gap' && <Icon name="caution" size={11} />}
            </span>
            {i < items.length - 1 && <span className="tl-line" />}
          </div>
          <div className="tl-content">
            <div className="tl-row1">
              <span className="tl-role">{e.role}</span>
              {e.type === 'promotion' && <GBadge label="Promotion" variant="coral" />}
              {e.type === 'gap' && <GBadge label="Gap detected" variant="warning" />}
            </div>
            <div className="tl-meta">{e.company ? `${e.company} · ` : ''}{e.period} · {e.duration}</div>
            <div className="tl-note">{e.note}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Project card ---------- */
function ProjectCard({ p }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="proj" data-open={open}>
      <button className="proj-head" onClick={() => setOpen((v) => !v)}>
        <div className="proj-id">
          <span className="proj-name">{p.name}</span>
          <span className="proj-role">{p.role}</span>
        </div>
        <Icon name="chevronRight" size={15} className="proj-chev" />
      </button>
      <div className="proj-bodywrap"><div className="proj-body">
        <p className="proj-summary">{p.summary}</p>
        <div className="tag-wrap">{p.tags.map((t) => <GTag key={t} label={t} variant="strength" />)}</div>
        <div className="proj-impact"><Icon name="trending" size={13} /> {p.impact}</div>
      </div></div>
    </div>
  );
}

/* ---------- Risk meter ---------- */
const RISK_ORDER = ['Low', 'Medium', 'High', 'Critical'];
function RiskMeter({ risk }) {
  const idx = RISK_ORDER.indexOf(risk.level);
  return (
    <div className="risk">
      <div className="risk-top">
        <div className="risk-level" style={{ color: RISK_COLOR[risk.level] }}>
          <Icon name="shield" size={18} /> {risk.level} risk
        </div>
        <span className="risk-score">{risk.score}<span className="risk-score-tot">/100</span></span>
      </div>
      <div className="risk-track">
        {RISK_ORDER.map((lv, i) => (
          <div key={lv} className="risk-seg" style={{ background: i <= idx ? RISK_COLOR[risk.level] : 'var(--gd-n200)' }} />
        ))}
      </div>
      <div className="risk-scale">
        {RISK_ORDER.map((lv, i) => (
          <span key={lv} className="risk-scale-label" data-active={i === idx} style={i === idx ? { color: RISK_COLOR[risk.level] } : null}>{lv}</span>
        ))}
      </div>
      <p className="risk-reason">{risk.reasoning}</p>
      <div className="risk-factors">
        {risk.factors.map((f) => (
          <div key={f.label} className="risk-factor">
            <span className="risk-factor-dot" style={{ background: RISK_COLOR[f.level] }} />
            <span className="risk-factor-label">{f.label}</span>
            <span className="risk-factor-note">{f.note}</span>
            <GBadge label={f.level} variant={f.level === 'Low' ? 'success' : f.level === 'Medium' ? 'warning' : 'error'} />
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------- Evidence explorer ---------- */
function EvidenceItem({ e }) {
  const col = e.confidence >= 85 ? 'var(--gd-success)' : e.confidence >= 60 ? 'var(--gd-coral)' : 'var(--gd-error)';
  return (
    <div className="ev">
      <div className="ev-top">
        <span className="ev-claim">{e.claim}</span>
        <span className="ev-conf" style={{ color: col }}>{e.confidence}%</span>
      </div>
      <div className="ev-bar"><span style={{ width: `${e.confidence}%`, background: col }} /></div>
      <blockquote className="ev-excerpt">{e.excerpt}</blockquote>
      <div className="ev-src"><Icon name="search" size={12} /> {e.source}</div>
    </div>
  );
}

/* ---------- Strength / concern list ---------- */
function PointList({ items, tone }) {
  return (
    <div className="points">
      {items.map((it) => (
        <div key={it.title} className="point">
          <span className="point-ico" style={{ color: tone === 'good' ? 'var(--gd-success)' : 'var(--gd-warning)' }}>
            <Icon name={tone === 'good' ? 'check' : 'caution'} size={15} />
          </span>
          <div>
            <div className="point-title">{it.title}</div>
            <div className="point-detail">{it.detail}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ---------- Contact popover ---------- */
function contactInfo(person) {
  const parts = person.name.toLowerCase().split(' ');
  const handle = parts.join('.');
  const email = `${handle}@${(person.company || 'mail').toLowerCase().replace(/[^a-z]/g, '') || 'mail'}.com`;
  const linkedin = `linkedin.com/in/${parts.join('-')}`;
  const phone = '+1 (555) 0' + String(100 + (person.name.length * 7) % 900) + '-' + String(1000 + (person.years * 137) % 9000);
  return { email, linkedin, phone };
}
function ContactButton({ person }) {
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState('');
  const [pos, setPos] = useState(null);
  const btnRef = React.useRef(null);
  const c = contactInfo(person);
  const copy = (key, val) => { try { navigator.clipboard && navigator.clipboard.writeText(val); } catch (e) {} setCopied(key); setTimeout(() => setCopied(''), 1400); };
  const place = () => {
    const el = btnRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const width = 300;
    let left = r.left;
    if (left + width > window.innerWidth - 12) left = window.innerWidth - width - 12;
    setPos({ left, top: r.bottom + 6 });
  };
  const toggle = () => { if (!open) place(); setOpen((v) => !v); };
  React.useEffect(() => {
    if (!open) return;
    const onScroll = () => place();
    window.addEventListener('scroll', onScroll, true);
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll, true); window.removeEventListener('resize', onScroll); };
  }, [open]);
  return (
    <div className="contact-wrap">
      <button ref={btnRef} className="contact-btn" onClick={toggle}>
        <Icon name="mail" size={15} /> Contact
        <Icon name="chevronDown" size={13} style={{ transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
      </button>
      {open && pos && (
        <>
          <div className="menu-overlay" style={{ zIndex: 310 }} onMouseDown={() => setOpen(false)} />
          <div className="contact-pop" style={{ left: pos.left, top: pos.top }}>
            <div className="contact-name">{person.name}</div>
            <a className="contact-row" href={`mailto:${c.email}`}>
              <span className="contact-ico" style={{ background: '#ea433514', color: '#ea4335' }}><Icon name="mail" size={15} /></span>
              <span className="contact-text"><span className="contact-k">Email</span><span className="contact-v">{c.email}</span></span>
              <button className="contact-copy" onClick={(e) => { e.preventDefault(); copy('email', c.email); }}>{copied === 'email' ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}</button>
            </a>
            <a className="contact-row" href={`https://${c.linkedin}`} target="_blank" rel="noreferrer">
              <span className="contact-ico" style={{ background: '#0a66c214', color: '#0a66c2' }}><Icon name="link" size={15} /></span>
              <span className="contact-text"><span className="contact-k">LinkedIn</span><span className="contact-v">{c.linkedin}</span></span>
              <button className="contact-copy" onClick={(e) => { e.preventDefault(); copy('li', c.linkedin); }}>{copied === 'li' ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}</button>
            </a>
            <a className="contact-row" href={`tel:${c.phone.replace(/[^+\d]/g, '')}`}>
              <span className="contact-ico" style={{ background: '#2bb67314', color: '#1f8a5b' }}><Icon name="phone" size={15} /></span>
              <span className="contact-text"><span className="contact-k">Phone</span><span className="contact-v">{c.phone}</span></span>
              <button className="contact-copy" onClick={(e) => { e.preventDefault(); copy('ph', c.phone); }}>{copied === 'ph' ? <Icon name="check" size={14} /> : <Icon name="copy" size={14} />}</button>
            </a>
          </div>
        </>
      )}
    </div>
  );
}

/* ---------- Overview action buttons (functional) ---------- */
const PIPE_STAGES_OV = ['Applied', 'AI Screen', 'Interview', 'Offer', 'Hired', 'Rejected'];
const SLOTS = [
  { date: '2026-06-26', day: 'Today · Jun 26', label: '3:30 PM', start: '15:30', end: '16:15', mode: 'Video' },
  { date: '2026-06-27', day: 'Tomorrow · Jun 27', label: '10:00 AM', start: '10:00', end: '10:45', mode: 'Video' },
  { date: '2026-06-29', day: 'Mon · Jun 29', label: '2:00 PM', start: '14:00', end: '14:45', mode: 'Onsite' },
];
function defaultStageFor(p) {
  if (p.decision === 'rejected') return 'Rejected';
  if (p.decision === 'shortlisted') return p.ats >= 88 ? 'Interview' : 'AI Screen';
  return 'AI Screen';
}
function OverviewActions({ person, onToast, onReject, onSchedule, onGoInterviews }) {
  const [stage, setStage] = useState(defaultStageFor(person));
  const [menu, setMenu] = useState(null); // 'stage' | 'schedule' | 'reject'
  const [rejected, setRejected] = useState(person.decision === 'rejected');

  // reset when candidate changes
  React.useEffect(() => { setStage(defaultStageFor(person)); setRejected(person.decision === 'rejected'); setMenu(null); }, [person.id]);

  // fixed-positioned popover anchored to its trigger (escapes the section's overflow:hidden)
  const [menuPos, setMenuPos] = useState(null);
  const openMenu = (name, e) => {
    if (menu === name) { setMenu(null); return; }
    const r = e.currentTarget.getBoundingClientRect();
    const w = 264;
    let left = r.left;
    if (left + w > window.innerWidth - 12) left = window.innerWidth - w - 12;
    setMenuPos({ left, top: r.bottom + 6 });
    setMenu(name);
  };
  const menuStyle = menuPos ? { left: menuPos.left, top: menuPos.top } : null;

  const downloadResume = () => {
    const c = contactInfo(person);
    const lines = [
      person.name.toUpperCase(),
      person.headline + ' · ' + person.company,
      person.location + ' · ' + person.years + ' years experience',
      c.email + ' · ' + c.linkedin,
      '',
      '— AI SCREENING SUMMARY —',
      'ATS score: ' + person.ats + '/100',
      'Required-skills match: ' + person.skills_pct + '%',
      'Recommendation: ' + REC_LABEL[person.decision].label,
      'Risk level: ' + person.risk,
      '',
      'TOP SKILLS',
      ...person.skillbars.map((s) => '  • ' + s.name + ' — ' + s.percentage + '% (' + s.variant + ')'),
      '',
      'STRENGTHS: ' + person.strengths.join(', '),
      'WATCH AREAS: ' + person.gaps.join(', '),
      '',
      'Generated by Greydigi AI Recruiting',
    ];
    const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = person.name.replace(/\s+/g, '_') + '_Resume.txt';
    document.body.appendChild(a); a.click(); document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(url), 1000);
    onToast('check', 'Resume downloaded — ' + person.name.split(' ')[0]);
  };

  const moveStage = (s) => {
    if (s === 'Rejected') { doReject(); return; }
    if (s === 'Interview') { const slot = SLOTS[0]; onSchedule && onSchedule(slot); setStage('Interview'); setMenu(null); onToast('calendar', 'Moved to Interview · ' + slot.day + ' ' + slot.label + ' booked'); return; }
    setStage(s); setMenu(null); onToast('pipeline', 'Moved to ' + s + ' stage');
  };
  const schedule = (slot) => { onSchedule && onSchedule(slot); setMenu(null); setStage('Interview'); onToast('calendar', 'Interview scheduled · ' + slot.day + ', ' + slot.label); };
  const doReject = () => { setRejected(true); setStage('Rejected'); setMenu(null); onReject && onReject(); onToast('reject', person.name.split(' ')[0] + ' moved to Rejected'); };

  return (
    <div className="ov-actions">
      {/* Move Stage */}
      <div className="ov-actwrap">
        <button className="ov-btn primary" onClick={(e) => openMenu('stage', e)}>
          <Icon name="pipeline" size={15} /> Move Stage
          <span className="ov-stagepill">{stage}</span>
          <Icon name="chevronDown" size={13} style={{ transform: menu === 'stage' ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
        </button>
        {menu === 'stage' && (
          <>
            <div className="menu-overlay" onMouseDown={() => setMenu(null)} />
            <div className="menu ov-menu" style={menuStyle}>
              <div className="ov-menu-label">Move candidate to</div>
              {PIPE_STAGES_OV.map((s) => (
                <button key={s} className={'menu-item' + (s === stage ? ' active' : '') + (s === 'Rejected' ? ' danger' : '')} onClick={() => moveStage(s)}>
                  <span>{s}</span>{s === stage && <Icon name="check" size={14} />}
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Contact (existing) */}
      <ContactButton person={person} />

      {/* Schedule Interview */}
      <div className="ov-actwrap">
        <button className="ov-btn" onClick={(e) => openMenu('schedule', e)}>
          <Icon name="calendar" size={15} /> Schedule Interview
        </button>
        {menu === 'schedule' && (
          <>
            <div className="menu-overlay" onMouseDown={() => setMenu(null)} />
            <div className="menu ov-menu ov-menu-wide" style={menuStyle}>
              <div className="ov-menu-label">Pick a slot</div>
              {SLOTS.map((s, i) => (
                <button key={i} className="slot-item" onClick={() => schedule(s)}>
                  <span className="slot-ico"><Icon name="video" size={14} /></span>
                  <span className="slot-text"><span className="slot-day">{s.day}</span><span className="slot-time">{s.label} · {s.mode}</span></span>
                  <Icon name="chevronRight" size={14} className="i-faint" />
                </button>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Download Resume */}
      <button className="ov-btn" onClick={downloadResume}>
        <Icon name="download" size={15} /> Download Resume
      </button>

      {/* Reject */}
      <div className="ov-actwrap">
        <button className={'ov-btn' + (rejected ? ' is-rejected' : '')} onClick={(e) => rejected ? onToast('reject', 'Already rejected') : openMenu('reject', e)}>
          <Icon name={rejected ? 'reject' : 'x'} size={15} /> {rejected ? 'Rejected' : 'Reject'}
        </button>
        {menu === 'reject' && (
          <>
            <div className="menu-overlay" onMouseDown={() => setMenu(null)} />
            <div className="menu ov-menu ov-menu-wide" style={menuStyle}>
              <div className="ov-confirm-title">Reject {person.name.split(' ')[0]}?</div>
              <div className="ov-confirm-text">They'll be moved to the Rejected stage and notified by email.</div>
              <div className="ov-confirm-foot">
                <button className="ov-confirm-cancel" onClick={() => setMenu(null)}>Cancel</button>
                <button className="ov-confirm-go" onClick={doReject}><Icon name="reject" size={14} /> Reject</button>
              </div>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

/* ---------- Detail panel ---------- */
const SECTION_ORDER = ['overview', 'recommendation', 'scores', 'qualification', 'skills', 'timeline', 'projects', 'leadership', 'strengths', 'concerns', 'risk', 'evidence'];

function DetailPanel({ person, onCompare, onReject, onSchedule, onGoInterviews }) {
  const [openMap, setOpenMap] = useState(() => {
    const m = {}; SECTION_ORDER.forEach((s) => { m[s] = true; }); return m;
  });
  const [toast, setToast] = useState(null);
  const showToast = (icon, text) => { setToast({ icon, text, key: Date.now() }); };
  React.useEffect(() => {
    if (!toast) return;
    const t = setTimeout(() => setToast(null), 2600);
    return () => clearTimeout(t);
  }, [toast]);
  const toggle = (id) => setOpenMap((m) => ({ ...m, [id]: !m[id] }));
  const allOpen = SECTION_ORDER.every((s) => openMap[s]);
  const setAll = (v) => { const m = {}; SECTION_ORDER.forEach((s) => { m[s] = v; }); setOpenMap(m); };

  if (!person) {
    return (
      <section className="detail">
        <div className="detail-empty"><div className="card">
          <div className="ring"><Icon name="userSearch" size={24} /></div>
          <h2>Select a candidate</h2>
          <p>Choose someone from the list to see their AI scorecard, qualification match, timeline, and evidence.</p>
        </div></div>
      </section>
    );
  }

  const d = getDetail(person);
  const sec = (id, props, body) => (
    <Section open={openMap[id]} onToggle={() => toggle(id)} {...props}>{body}</Section>
  );

  return (
    <section className="detail">
      <div className="detail-bar">
        <div className="detail-bar-id">
          <GAvatar initials={person.initials} size="sm" color="charcoal" />
          <span className="detail-bar-name">{person.name}</span>
          <GBadge label={d.rec.label} variant={person.decision === 'shortlisted' ? 'success' : person.decision === 'borderline' ? 'warning' : 'error'} />
        </div>
        <div className="detail-bar-actions">
          <button className="detail-compare" onClick={() => onCompare && onCompare()}>
            <Icon name="analytics" size={14} />
            Compare
          </button>
          <button className="collapse-all" onClick={() => setAll(!allOpen)}>
            <Icon name={allOpen ? 'chevronDown' : 'chevronRight'} size={14} />
            {allOpen ? 'Collapse all' : 'Expand all'}
          </button>
        </div>
      </div>

      <div className="detail-scroll">
        <div className="detail-stack">

          {sec('overview', { title: 'Overview', icon: 'users' },
            <div className="ov">
              <GAvatar initials={person.initials} size="lg" color="charcoal" />
              <div className="ov-id">
                <h2 className="ov-name">{person.name}</h2>
                <div className="ov-headline">{person.headline}</div>
                <div className="ov-meta">
                  <span><Icon name="building" size={13} /> {person.company}</span>
                  <span><Icon name="mapPin" size={13} /> {person.location}</span>
                  <span><Icon name="clock" size={13} /> {person.years} yrs</span>
                </div>
              </div>
              <OverviewActions person={person} onToast={showToast} onReject={onReject} onSchedule={onSchedule} onGoInterviews={onGoInterviews} />
            </div>
          )}

          {sec('recommendation', { title: 'AI Recommendation', icon: 'sparkles', meta: <GBadge label={`${d.confidence}% confident`} variant="neutral" /> },
            <AIRecommendation d={d} />
          )}

          {sec('scores', { title: 'Score Dashboard', icon: 'analytics' },
            <div className="ring-grid">
              {Object.keys(SCORE_LABELS).map((k) => (
                <CircularScore key={k} value={d.scores[k]} label={SCORE_LABELS[k]} />
              ))}
            </div>
          )}

          {sec('qualification', { title: 'Qualification Match', icon: 'check' },
            <div className="qual-groups">
              <QualGroup title="Required" items={d.quals.required} />
              <QualGroup title="Preferred" items={d.quals.preferred} />
              <QualGroup title="Nice to have" items={d.quals.nice} />
            </div>
          )}

          {sec('skills', { title: 'Skills', icon: 'sliders' },
            <div className="skill-groups">
              {d.skillGroups.map((g) => (
                <div key={g.category} className="skill-group">
                  <div className="mini-label">{g.category}</div>
                  <div className="tag-wrap">{g.items.map((s) => <GBadge key={s} label={s} variant={g.variant} />)}</div>
                </div>
              ))}
            </div>
          )}

          {sec('timeline', { title: 'Career Timeline', icon: 'calendar' }, <Timeline items={d.timeline} />)}

          {sec('projects', { title: 'Projects', icon: 'briefcase', meta: `${d.projects.length}` },
            <div className="proj-list">{d.projects.map((p) => <ProjectCard key={p.name} p={p} />)}</div>
          )}

          {sec('leadership', { title: 'Leadership', icon: 'users' },
            <div className="lead-grid">
              {d.leadership.map((l) => (
                <div key={l.title} className="lead-card">
                  <div className="lead-title">{l.title}</div>
                  <div className="lead-detail">{l.detail}</div>
                </div>
              ))}
            </div>
          )}

          {sec('strengths', { title: 'Strengths', icon: 'check' }, <PointList items={d.strengthsDetail} tone="good" />)}
          {sec('concerns', { title: 'Concerns', icon: 'caution' }, <PointList items={d.concernsDetail} tone="warn" />)}
          {sec('risk', { title: 'Risk Assessment', icon: 'shield' }, <RiskMeter risk={d.risk} />)}

          {sec('evidence', { title: 'Evidence Explorer', icon: 'userSearch', meta: `${d.evidence.length} claims` },
            <div className="ev-list">{d.evidence.map((e, i) => <EvidenceItem key={i} e={e} />)}</div>
          )}

        </div>
      </div>

      {toast && (
        <div className="ov-toast" key={toast.key}>
          <span className="ov-toast-ico"><Icon name={toast.icon} size={16} /></span>
          {toast.text}
        </div>
      )}
    </section>
  );
}

window.DetailPanel = DetailPanel;