/* ===== TEAMS MOCK — fully self-contained =====
   Markup AND styling live in this one file. The CSS is in the <style> block
   below, scoped under the unique root class `.ptmock-home-teams`, so it needs
   nothing from home.css and can't collide with other mocks. */
function HomeTeamsMock() {
  return (
    <div dangerouslySetInnerHTML={{__html: `
<style>
  .ptmock-home-teams { background:#FCFAF8; border-radius:16px; overflow:hidden; box-shadow:0 24px 48px -30px rgba(0,0,0,.6); font-family:'Hanken Grotesk',-apple-system,system-ui,sans-serif; }
  .ptmock-home-teams .pt-mock-hdr { padding:13px 18px; border-bottom:1px solid #EEE4DC; display:flex; align-items:center; gap:9px; background:#FCFAF8; }
  .ptmock-home-teams .pt-mock-hdr-dot { width:9px; height:9px; border-radius:50%; background:#4A8C68; flex-shrink:0; }
  .ptmock-home-teams .pt-mock-hdr-dot--ac { background:#5A45DE; }
  .ptmock-home-teams .pt-mock-hdr-title { font-size:13.5px; font-weight:600; color:#6B6259; }
  .ptmock-home-teams .pt-mock-hdr-count { margin-left:auto; font-size:11.3px; font-weight:700; color:#6B6259; }
  .ptmock-home-teams .pt-teams-row { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #F1E9E2; }
  .ptmock-home-teams .pt-teams-row:last-child { border-bottom:none; }
  .ptmock-home-teams .pt-teams-name { font-size:14px; font-weight:600; flex:1; }
  .ptmock-home-teams .pt-teams-count { color:#A89E95; font-weight:500; }
  .ptmock-home-teams .pt-teams-badge { font-size:11.3px; font-weight:700; padding:4px 10px; border-radius:999px; }
  .ptmock-home-teams .pt-teams-badge--gr  { color:#2F6B47; background:#DBEBDF; }
  .ptmock-home-teams .pt-teams-badge--ac  { color:#5A45DE; background:#CEC2EF; }
  .ptmock-home-teams .pt-teams-badge--app { color:#2F6B47; background:#DBEBDF; }
  .ptmock-home-teams .pt-teams-badge--red { color:#B4452F; background:#F6E2DB; }
  .ptmock-home-teams .pt-teams-footer { padding:14px 18px; border-top:1px solid #EEE4DC; background:#F7F1EC; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .ptmock-home-teams .pt-teams-footer-lbl { font-size:10.8px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A89E95; }
  .ptmock-home-teams .pt-teams-tag { font-size:11.9px; font-weight:600; color:#5A514A; background:#FCFAF8; border:1px solid #E4DAD1; border-radius:999px; padding:4px 10px; }
</style>
<div class="ptmock-home-teams">
  <div class="pt-mock-hdr">
    <span class="pt-mock-hdr-dot pt-mock-hdr-dot--ac"></span>
    <span class="pt-mock-hdr-title">All teams · pay status</span>
    <span class="pt-mock-hdr-count">4 streams</span>
  </div>
  <div class="pt-teams-row">
    <span class="pt-teams-name">Retail AU<span class="pt-teams-count"> · 220 staff</span></span>
    <span class="pt-teams-badge pt-teams-badge--gr">On track</span>
  </div>
  <div class="pt-teams-row">
    <span class="pt-teams-name">Hospitality NZ<span class="pt-teams-count"> · 140 staff</span></span>
    <span class="pt-teams-badge pt-teams-badge--ac">In review</span>
  </div>
  <div class="pt-teams-row">
    <span class="pt-teams-name">Corporate services<span class="pt-teams-count"> · 60 staff</span></span>
    <span class="pt-teams-badge pt-teams-badge--app">Approved</span>
  </div>
  <div class="pt-teams-row">
    <span class="pt-teams-name">Manufacturing<span class="pt-teams-count"> · 310 staff</span></span>
    <span class="pt-teams-badge pt-teams-badge--red">Action needed</span>
  </div>
  <div class="pt-teams-footer">
    <span class="pt-teams-footer-lbl">Coordinated by</span>
    <span class="pt-teams-tag">Access groups</span>
    <span class="pt-teams-tag">Team rotations</span>
    <span class="pt-teams-tag">SSO</span>
  </div>
</div>
`}}/>
  );
}

window.HomeTeamsMock = HomeTeamsMock;
