// Roster.jsx — the workforce: featured Orchestrator + 4 specialist bio cards.

const SPECIALISTS = [
  {
    key: 'marcus', color: 'var(--ag-marcus)', icon: 'target',
    name: 'Marcus Webb', role: 'Competitive Intelligence',
    bio: 'The adversary analyst. Marcus profiles incumbents, runs black-hat simulations, and synthesizes open-source intelligence into a picture of who you\u2019re up against — and how they\u2019ll bid.',
    skills: ['Black-hat simulation', 'Incumbent profiling', 'OSINT synthesis', 'Protest-risk assessment'],
  },
  {
    key: 'calloway', color: 'var(--ag-calloway)', icon: 'compass',
    name: 'Dr. Calloway', role: 'Technical Strategy',
    bio: 'The solution architect. Calloway maps solicitation requirements to your capabilities and finds the technical discriminators \u2014 or tells you, plainly, where the bridge doesn\u2019t exist.',
    skills: ['Requirement mapping', 'Technical discriminators', 'Solution architecture', 'Evaluation-factor fit'],
  },
  {
    key: 'sable', color: 'var(--ag-sable)', icon: 'pricing',
    name: 'Sable Torres', role: 'Pricing & Risk',
    bio: 'The numbers person. Sable models price-to-win, benchmarks labor against FPDS data, and reads the risk vectors. The question she answers: can you win this profitably?',
    skills: ['Price-to-win modeling', 'FPDS rate benchmarking', 'Wrap-rate analysis', 'T&M vs. FFP strategy'],
  },
  {
    key: 'ada', color: 'var(--ag-ada)', icon: 'layers',
    name: 'Ada Raines', role: 'Proposal Architect',
    bio: 'The compliance and structure expert. Ada builds compliant outlines, traces every requirement back to Section L/M, and architects multi-volume proposals built to score \u2014 not just to exist.',
    skills: ['Compliant outlines', 'Section L/M traceability', 'Past-performance narrative', 'Multi-volume architecture'],
  },
];

const ORCH_MODES = ['BID / NO-BID', 'PWIN SCORING', 'COMPETITIVE INTEL', 'GAP ANALYSIS', 'CAPTURE PLANNING', 'BLACK-HAT REVIEW'];

function SpecCard({ color, icon, name, role, bio, skills }) {
  const Icon = Icons[icon];
  return (
    <div className="spec-card" style={{ '--ag-c': color }}>
      <div className="agent-avatar"><Icon /></div>
      <h3>{name}</h3>
      <div className="spec-role">{role}</div>
      <p>{bio}</p>
      <div className="spec-skills">
        {skills.map(s => (
          <div className="spec-skill" key={s}>
            <svg className="tick" viewBox="0 0 24 24"><path d="M5 12l4.5 4.5L19 7" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"/></svg>
            {s}
          </div>
        ))}
      </div>
    </div>
  );
}

function Roster() {
  const Orch = Icons.orchestrator;
  return (
    <section id="workforce">
      <div className="wrap">
        <div className="roster-head reveal">
          <div>
            <SectionTag>The Workforce</SectionTag>
            <h2 className="section-title">A team, not a model<span style={{ color: 'var(--accent)' }}>.</span></h2>
          </div>
          <p className="section-desc" style={{ marginBottom: 4 }}>
            One coordinator and four specialists, each with a defined role and domain expertise.
            They operate autonomously and interact with each other to deliver intelligence no
            single agent could produce alone.
          </p>
        </div>

        {/* Featured orchestrator */}
        <div className="orch-card reveal">
          <div className="orch-left">
            <div className="orch-badge"><span className="dot"></span>MASTER COORDINATOR</div>
            <div className="agent-avatar" style={{ background: 'rgba(123,189,214,0.1)', borderColor: 'rgba(123,189,214,0.26)' }}>
              <span style={{ color: 'var(--ag-orch)' }}><Orch /></span>
            </div>
            <h3>The CI Orchestrator</h3>
            <div className="orch-role">Receives · Routes · Synthesizes</div>
            <p>
              Every analysis request lands here first. The Orchestrator runs Shipley-aligned
              methodology with Black-Hat review protocols, routes work to the right specialists,
              and synthesizes their findings into one methodology-compliant deliverable — never
              ad-hoc generation.
            </p>
          </div>
          <div className="orch-modes">
            <h4>Execution Modes</h4>
            <div className="mode-chip-grid">
              {ORCH_MODES.map(m => <span className="mode-chip" key={m}>{m}</span>)}
            </div>
          </div>
        </div>

        {/* Specialists */}
        <div className="specialist-grid reveal">
          {SPECIALISTS.map(s => <SpecCard key={s.key} {...s} />)}
        </div>
      </div>
    </section>
  );
}
window.Roster = Roster;