/** Team grid — 9 agents + humans, the CRAiD "Office" roster */
function TeamSlide() {
  const team = [
    { n: 'Brandon', r: 'AI Project & Client Lead',       img: '../../assets/agents/brandon.png', color: '#c9922c' },
    { n: 'Doro',    r: 'Executive Assistant',            img: '../../assets/agents/doro.png',    color: '#e522e9' },
    { n: 'Carlo',   r: 'AI Research Lead',               img: '../../assets/agents/carlo.png',   color: '#f5e53a' },
    { n: 'Jason',   r: 'AI Executive Creative Director', img: '../../assets/agents/jason.png',   color: '#23e7a6' },
    { n: 'Maja',    r: 'AI Design & Consulting Lead',    img: '../../assets/agents/maja.png',    color: '#f39019' },
    { n: 'Chris',   r: 'AI Tech Lead & Development',     img: '../../assets/agents/chris.png',   color: '#1fbff0' },
    { n: 'Pace',    r: 'AI Scrum & Agile Lead',          img: '../../assets/agents/pace.png',    color: '#2fd432' },
    { n: 'Admin',   r: 'Administrator',                  img: '../../assets/agents/admin.png',   color: '#ed1a4b' },
    { n: 'Secu',    r: 'CRAiD Security Chief',           img: '../../assets/agents/secu.png',    color: '#f5a3a3' },
  ];
  return (
    <SlideBase label="12 Team">
      <SlideChrome page="12" total="14" section="Team" />
      <div style={tm.body}>
        <div style={tm.header}>
          <span style={tm.eye}>09 — Das Team</span>
          <h2 style={tm.h2}>Neun Agenten für unsere Menschen.<br /><span style={{ color: 'var(--fg-muted)' }}>Eine Crew.</span></h2>
          <p style={tm.lead}>
            Unsere Agenten sind keine Tools — sie sind Kolleg:innen mit Rolle,
            Memory und eigenem Kalender. Jede:r hat Mensch-Sparring und einen klaren Scope.
          </p>
        </div>

        <div style={tm.grid}>
          {team.map((p) => (
            <div key={p.n} style={tm.card}>
              <div style={tm.avatarWrap}>
                <img src={p.img} alt="" style={tm.avatarImg} />
              </div>
              <div style={tm.info}>
                <div style={tm.nameRow}>
                  <span style={tm.name}>{p.n}</span>
                </div>
                <div style={tm.role}>{p.r}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={tm.footer}>
          <span style={tm.fLabel}>+ 5 humans</span>
          <span style={tm.fText}>Daniel · Anna · Tim · Leni · Noa — Founder, Design, Strategy, Client Lead, Ops.</span>
        </div>
      </div>
    </SlideBase>
  );
}

const tm = {
  body: { position: 'absolute', inset: 0, padding: '88px 56px 44px', display: 'flex', flexDirection: 'column' },
  header: { marginBottom: 22, maxWidth: 820 },
  eye: { display: 'block', fontSize: 11, fontWeight: 400, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--primary)', marginBottom: 10 },
  h2: { fontSize: 34, fontWeight: 700, lineHeight: 1.1, margin: '0 0 10px', letterSpacing: '-0.01em' },
  lead: { fontSize: 13, fontWeight: 300, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0, maxWidth: 680 },

  grid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, flex: 1 },
  card: { background: '#fff', border: '1px solid var(--border)', borderRadius: 12, padding: 14, display: 'flex', alignItems: 'center', gap: 14 },
  avatarWrap: { width: 52, height: 52, borderRadius: 10, overflow: 'hidden', flexShrink: 0, background: '#2a2a2a' },
  avatarImg: { width: '100%', height: '100%', objectFit: 'cover', display: 'block' },
  info: { flex: 1, minWidth: 0 },
  nameRow: { display: 'flex', alignItems: 'center', gap: 7, marginBottom: 3 },
  name: { fontSize: 15, fontWeight: 600, color: 'var(--fg)', letterSpacing: '-0.005em' },
  role: { fontSize: 12, color: 'var(--fg-muted)', fontWeight: 400, lineHeight: 1.35 },

  footer: { marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border)', display: 'flex', gap: 18, alignItems: 'baseline' },
  fLabel: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--primary)', flexShrink: 0 },
  fText: { fontSize: 13, fontWeight: 300, color: 'var(--fg-muted)', lineHeight: 1.55 },
};

window.TeamSlide = TeamSlide;