// Pixel Office — daytime, true top-down floor plan, with view toggle:
//   • "AGENTS"   — top-down office, multiple departments, MIB agents working
//   • "WORKFLOW" — linear funnel of how a lead flows through the system
//
// Daytime palette (sunny, like the reference image): warm wood floors,
// teal carpet hallway, light walls, painted detail. Top-down only.

const FRAME_MS = 220;

// Shared agents (used in both views)
function getAgentRoster(){ return AGENT_PRESETS; }

// =============================================================
// VIEW 1 — AGENTS (top-down floor plan, daytime)
// =============================================================
const AW = 480, AH = 280;

// Top-down rooms. Office is rectangular, walls in cream, divided into 6 rooms
// connected by a horizontal central corridor with teal carpet.
const A_ROOMS = {
  outreach:  { x:8,   y:18,  w:148, h:108, color:'#3F8FCB', label:'OUTREACH',       sub:'business dev · finds leads' },
  qualify:   { x:160, y:18,  w:152, h:108, color:'#7A5BC8', label:'QUALIFICATION',  sub:'first conversation' },
  engage:    { x:316, y:18,  w:156, h:108, color:'#C04A8D', label:'ENGAGEMENT',     sub:'pitch · landing page' },
  reviews:   { x:8,   y:158, w:148, h:114, color:'#E89A4A', label:'REVIEWS',        sub:'5★ asks · replies' },
  ops:       { x:160, y:158, w:152, h:114, color:'#3FA34D', label:'OPERATIONS',     sub:'billing · meetings' },
  breakroom: { x:316, y:158, w:156, h:114, color:'#D9A93A', label:'BREAK ROOM',     sub:'standby · coffee' },
};

// Stations — top-down x,y points within rooms
const A_STATIONS = {
  // outreach (lead-gen): two desks + door to outside
  outreach_desk1:  { x:46,  y:88,  room:'outreach' },
  outreach_desk2:  { x:106, y:88,  room:'outreach' },
  outreach_door:   { x:80,  y:108, room:'outreach' },
  // qualify (lounge with armchairs)
  qualify_chair1:  { x:200, y:90,  room:'qualify' },
  qualify_chair2:  { x:272, y:90,  room:'qualify' },
  // engage
  engage_screen:   { x:354, y:60,  room:'engage' },
  engage_desk:     { x:430, y:88,  room:'engage' },
  // reviews
  reviews_desk1:   { x:50,  y:230, room:'reviews' },
  reviews_desk2:   { x:120, y:230, room:'reviews' },
  // ops
  ops_desk1:       { x:200, y:230, room:'ops' },
  ops_desk2:       { x:272, y:230, room:'ops' },
  // breakroom
  break_couch:     { x:360, y:230, room:'breakroom' },
  break_cooler:    { x:440, y:200, room:'breakroom' },
};

// Walking corridor y
const HALLWAY_Y = 142;

// Per-agent task loops (top-down view) — each agent has a station they work at
// most of the time, occasionally moving to another or the break room.
const A_TASKS = {
  a1: [ // Vega - Outreach
    { dur:3000, target:'outreach_desk1', doing:'Sending cold email to Sarah M.' },
    { dur:1800, target:'outreach_door',  doing:'Stepping out to scout leads' },
    { dur:3200, target:'outreach_desk1', doing:'Logged 4 new leads ✓' },
    { dur:2400, target:'break_cooler',   doing:'Refilling water bottle' },
  ],
  a2: [ // Ortiz - Qualify
    { dur:3200, target:'qualify_chair1', doing:'Asking about team size' },
    { dur:2400, target:'qualify_chair1', doing:'Got it — qualified ✓' },
    { dur:3000, target:'qualify_chair2', doing:'Asking about timeline' },
    { dur:2200, target:'break_couch',    doing:'Quick break ☕', idle:true },
  ],
  a3: [ // Chen - Engage
    { dur:3000, target:'engage_screen',  doing:'Showing landing page demo' },
    { dur:2400, target:'engage_desk',    doing:'Sent the proposal' },
    { dur:3000, target:'engage_screen',  doing:'Walking through pricing' },
    { dur:2200, target:'engage_desk',    doing:'Booked demo Tue 2pm ✓' },
  ],
  a4: [ // Reyes - Reviews
    { dur:2800, target:'reviews_desk1',  doing:'Asking James K. for a review' },
    { dur:2200, target:'reviews_desk2',  doing:'Posted 5★ to Google ✓' },
    { dur:2800, target:'reviews_desk1',  doing:'Drafting thank-you to Lena' },
    { dur:2400, target:'reviews_desk2',  doing:'Lena gave you 5★' },
  ],
  a5: [ // Park - Ops
    { dur:3000, target:'ops_desk1',      doing:'Drafting invoice #1042' },
    { dur:2200, target:'ops_desk2',      doing:'Sent invoice — Stripe link ✓' },
    { dur:2800, target:'ops_desk1',      doing:'Reminder to Hwang (12d late)' },
    { dur:2400, target:'ops_desk2',      doing:'Logged $480 received' },
  ],
  a6: [ // Bauer - Floater / break
    { dur:2400, target:'break_couch',    doing:'On standby', idle:true },
    { dur:2800, target:'reviews_desk2',  doing:'Helping with overflow' },
    { dur:2400, target:'qualify_chair2', doing:'Backup qualifier' },
    { dur:2200, target:'break_cooler',   doing:'Coffee refill' },
  ],
};

function easeInOut(t){ return t < 0.5 ? 2*t*t : 1 - Math.pow(-2*t + 2, 2)/2; }
function lerp(a, b, t){ return a + (b-a)*t; }

// Plan a route from one station to another via the hallway when crossing rooms
function planRoute(from, to){
  const pts = [{ x: from.x, y: from.y }];
  if (Math.abs(from.y - to.y) > 30){
    pts.push({ x: from.x, y: HALLWAY_Y });
    pts.push({ x: to.x,   y: HALLWAY_Y });
  } else {
    pts.push({ x: to.x, y: from.y });
  }
  pts.push({ x: to.x, y: to.y });
  return pts;
}
function alongPath(pts, t){
  const segs = []; let total = 0;
  for (let i=0;i<pts.length-1;i++){
    const dx=pts[i+1].x-pts[i].x, dy=pts[i+1].y-pts[i].y;
    const L=Math.hypot(dx,dy); segs.push(L); total+=L;
  }
  if (total===0) return { x:pts[0].x, y:pts[0].y, dx:0, dy:0 };
  let d = t*total;
  for (let i=0;i<segs.length;i++){
    if (d <= segs[i] || i === segs.length-1){
      const s = segs[i] === 0 ? 0 : d/segs[i];
      const a=pts[i], b=pts[i+1];
      return { x: a.x+(b.x-a.x)*s, y: a.y+(b.y-a.y)*s, dx:b.x-a.x, dy:b.y-a.y };
    }
    d -= segs[i];
  }
  const last = pts[pts.length-1];
  return { x: last.x, y: last.y, dx:0, dy:0 };
}

function agentStateAt(idx, now){
  const id = AGENT_PRESETS[idx].id;
  const tasks = A_TASKS[id];
  const offsets = { a1:0, a2:1100, a3:600, a4:1700, a5:300, a6:2300 };
  const walkDur = 1400;
  const cycleLen = tasks.reduce((acc,t)=>acc + t.dur + walkDur, 0);
  const t = ((now + (offsets[id]||0)) % cycleLen);

  let elapsed = 0;
  for (let i=0;i<tasks.length;i++){
    const task = tasks[i];
    const prev = tasks[(i-1+tasks.length)%tasks.length];
    const total = walkDur + task.dur;
    if (t < elapsed + total){
      const localT = t - elapsed;
      const fromS = A_STATIONS[prev.target];
      const toS   = A_STATIONS[task.target];
      const route = planRoute(fromS, toS);
      if (localT < walkDur){
        const wt = easeInOut(localT/walkDur);
        const p = alongPath(route, wt);
        return { x:p.x-6, y:p.y-9, walking:true, dx:p.dx, dy:p.dy, task, agent:AGENT_PRESETS[idx] };
      }
      return { x:toS.x-6, y:toS.y-9, walking:false, dx:0, dy:0, task, agent:AGENT_PRESETS[idx] };
    }
    elapsed += total;
  }
  const last = tasks[tasks.length-1];
  const s = A_STATIONS[last.target];
  return { x:s.x-6, y:s.y-9, walking:false, dx:0, dy:0, task:last, agent:AGENT_PRESETS[idx] };
}

// =================
// Furniture (top-down, daytime palette)
// =================
function PlankFloor({ x, y, w, h, color1='#a06f3a', color2='#8a5a2a', color3='#7a4a22' }){
  return (
    <g>
      <rect x={x} y={y} width={w} height={h} fill={color1}/>
      {/* plank lines (horizontal) */}
      {Array.from({length: Math.ceil(h/8)}).map((_, i) => (
        <rect key={i} x={x} y={y + i*8} width={w} height="0.6" fill={color3} opacity=".55"/>
      ))}
      {/* random shorter plank seams (vertical) */}
      {Array.from({length: Math.ceil(w*h/120)}).map((_, i) => {
        const px = x + (i*37 % w);
        const py = y + (Math.floor(i*17/w)*8);
        return <rect key={`s-${i}`} x={px} y={py} width="0.6" height="8" fill={color3} opacity=".4"/>;
      })}
      {/* highlights */}
      {Array.from({length: Math.ceil(w/16)}).map((_, i) => (
        <rect key={`hi-${i}`} x={x + i*16 + 2} y={y + 2} width={10} height=".4" fill="#fff" opacity=".08"/>
      ))}
    </g>
  );
}
function CarpetFloor({ x, y, w, h, color='#3F8FCB' }){
  return (
    <g>
      <rect x={x} y={y} width={w} height={h} fill={color}/>
      <rect x={x} y={y} width={w} height="1" fill="#fff" opacity=".15"/>
      {/* tiny dots pattern */}
      {Array.from({length: Math.ceil(w/6) * Math.ceil(h/6)}).map((_, i) => {
        const cx = x + (i*7 % w);
        const cy = y + Math.floor(i*7/w)*6;
        return <rect key={i} x={cx} y={cy} width=".4" height=".4" fill="#fff" opacity=".22"/>;
      })}
    </g>
  );
}
function Desk({ x, y, w=24, h=12, side='top' }){
  // Top-down rectangular desk. side = which side the chair is on
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width={w} height={h} fill="#7a4a2a"/>
      <rect x="0" y="0" width={w} height="2" fill="#9a6242"/>
      <rect x="0" y={h-1} width={w} height="1" fill="#3a2010"/>
      {/* desk grain lines */}
      <rect x="0" y={h/2} width={w} height=".4" fill="#5a3520" opacity=".5"/>
    </g>
  );
}
function Monitor({ x, y, color='#3F8FCB', label }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="10" height="6" fill="#0d0820"/>
      <rect x="1" y="1" width="8" height="4" fill={color}/>
      <rect x="1" y="1" width="8" height=".6" fill="#fff" opacity=".4"/>
      {label && <text x="5" y="3.8" textAnchor="middle" fontSize="2.2" fontFamily="JetBrains Mono" fontWeight="700" fill="#fff">{label}</text>}
      <rect x="4" y="6" width="2" height="1" fill="#0d0820"/>
      <rect x="3" y="7" width="4" height=".6" fill="#5a4a6a"/>
    </g>
  );
}
function Keyboard({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="9" height="2.4" fill="#1A1A2E"/>
      <rect x=".3" y=".4" width="8.4" height="1.6" fill="#3a3a4a"/>
    </g>
  );
}
function Mug({ x, y, color='#c2333a' }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="2" height="2" fill={color}/>
      <rect x="0" y="0" width="2" height=".5" fill="#fff" opacity=".4"/>
    </g>
  );
}
function Papers({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="3" height="2.5" fill="#fff" stroke="#1f1530" strokeWidth=".2"/>
      <rect x=".4" y=".6" width="2" height=".3" fill="#1f1530"/>
      <rect x=".4" y="1.2" width="2" height=".3" fill="#1f1530"/>
    </g>
  );
}
function ChairTopDown({ x, y, color='#1A1A2E', dir='down' }){
  // small office chair viewed from above
  const swivel = (
    <g>
      <circle cx="3" cy="3" r="3" fill={color}/>
      <circle cx="3" cy="3" r="1.6" fill="#5a4a6a"/>
      <circle cx="3" cy="3" r=".6" fill="#1f1530"/>
    </g>
  );
  return <g transform={`translate(${x} ${y})`}>{swivel}</g>;
}
function Bookshelf({ x, y, w=22, vertical=false }){
  // shelves with colored book spines, top-down
  const colors = ['#c2333a','#3F8FCB','#3FA34D','#D9A93A','#7A5BC8','#C04A8D','#E89A4A','#5a3520'];
  const h = 6;
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width={w} height={h} fill="#5a3520"/>
      <rect x="0" y="0" width={w} height="1" fill="#7a4a2a"/>
      <rect x="0" y={h-1} width={w} height="1" fill="#3a2010"/>
      {Array.from({length:Math.floor(w/1.2)}).map((_, i) => (
        <rect key={i} x={.5 + i*1.2} y="1.2" width="1" height={h-2.4} fill={colors[(i*3)%colors.length]}/>
      ))}
    </g>
  );
}
function Plant({ x, y, big=false }){
  const s = big ? 1.4 : 1;
  return (
    <g transform={`translate(${x} ${y}) scale(${s})`}>
      {/* pot */}
      <rect x="2" y="6" width="6" height="3" fill="#7a4a2a"/>
      <rect x="2" y="6" width="6" height="1" fill="#9a6242"/>
      {/* leaves (top-down view) */}
      <circle cx="5" cy="4" r="4" fill="#2e7a3a"/>
      <circle cx="3.5" cy="3" r="2.4" fill="#3FA34D"/>
      <circle cx="6.5" cy="3.5" r="2.2" fill="#52b85f"/>
      <circle cx="5" cy="2" r="1.6" fill="#6acc78"/>
    </g>
  );
}
function Boxes({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="8" height="6" fill="#a06f3a"/>
      <rect x="0" y="0" width="8" height="1" fill="#7a4a2a"/>
      <rect x="3.5" y="0" width=".6" height="6" fill="#7a4a2a"/>
      <rect x="9" y="2" width="6" height="4" fill="#a06f3a"/>
      <rect x="9" y="2" width="6" height="1" fill="#7a4a2a"/>
    </g>
  );
}
function Couch({ x, y, w=24, h=10, color='#7A5BC8' }){
  return (
    <g transform={`translate(${x} ${y})`}>
      {/* backrest */}
      <rect x="0" y="0" width={w} height="3" fill={color}/>
      {/* seat */}
      <rect x="0" y="3" width={w} height={h-3} fill="#9277dc"/>
      {/* arms */}
      <rect x="0" y="0" width="2.5" height={h} fill="#5e44a0"/>
      <rect x={w-2.5} y="0" width="2.5" height={h} fill="#5e44a0"/>
      {/* cushion lines */}
      <rect x={w/3} y="3" width=".4" height={h-3} fill="#5e44a0"/>
      <rect x={2*w/3} y="3" width=".4" height={h-3} fill="#5e44a0"/>
    </g>
  );
}
function CoffeeTable({ x, y, w=18, h=8 }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width={w} height={h} fill="#5a3520"/>
      <rect x="0" y="0" width={w} height="1" fill="#7a4a2a"/>
      <Mug x={3} y={2} color="#c2333a"/>
      <Mug x={w-6} y={2} color="#3F8FCB"/>
      <Papers x={w/2-1.5} y={3.5}/>
    </g>
  );
}
function WaterCooler({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="6" width="9" height="6" fill="#e8e8ef"/>
      <rect x="0" y="6" width="9" height="1.5" fill="#fff"/>
      <rect x="2" y="0" width="5" height="6" fill="#bce6ff" opacity=".9"/>
      <rect x="2" y="0" width="5" height="1" fill="#3F8FCB"/>
      <rect x="3.5" y="11" width="2" height="1" fill="#3F8FCB"/>
    </g>
  );
}
function Fridge({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="10" height="14" fill="#e8e8ef"/>
      <rect x="0" y="0" width="10" height="1" fill="#fff"/>
      <rect x="0" y="6" width="10" height=".5" fill="#1f1530" opacity=".4"/>
      <rect x="8" y="2" width=".8" height="3" fill="#5a5a6a"/>
      <rect x="8" y="9" width=".8" height="3" fill="#5a5a6a"/>
    </g>
  );
}
function Painting({ x, y, w=18, h=10 }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width={w} height={h} fill="#7a4a2a"/>
      <rect x="1" y="1" width={w-2} height={h-2} fill="#bce6ff"/>
      <polygon points={`1,${h-1} ${w/2-1},2 ${w/2+3},${h-1}`} fill="#3a6e95"/>
      <polygon points={`${w/2},${h-1} ${w-3},3 ${w-1},${h-1}`} fill="#5a8eb5"/>
      <circle cx={w*0.75} cy="3.5" r="1.5" fill="#F2C84B"/>
    </g>
  );
}
function VendingMachine({ x, y }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="12" height="16" fill="#c2333a"/>
      <rect x="0" y="0" width="12" height="2" fill="#a02a30"/>
      <rect x="1" y="3" width="10" height="9" fill="#0d0820"/>
      {/* drink rows */}
      {[0,1,2].map(r => [0,1,2].map(c => (
        <rect key={`${r}-${c}`} x={2 + c*3.2} y={4 + r*3} width="2" height="2"
          fill={['#fff','#3F8FCB','#3FA34D','#F2C84B','#C04A8D','#E89A4A','#fff','#3F8FCB','#3FA34D'][r*3+c]}/>
      )))}
      <rect x="2" y="13" width="8" height="2" fill="#5a5a6a"/>
    </g>
  );
}
function FilingCabinet({ x, y, color='#5a6a7a' }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width="10" height="14" fill={color}/>
      <rect x="0" y="0" width="10" height="1" fill="#fff" opacity=".25"/>
      {[0,1,2].map(i => (
        <g key={i}>
          <rect x="0" y={1 + i*4.5} width="10" height="3.5" fill="none" stroke="#1f1530" strokeWidth=".4"/>
          <rect x="4" y={2.5 + i*4.5} width="2" height=".8" fill="#1f1530"/>
        </g>
      ))}
    </g>
  );
}
function Whiteboard({ x, y, w=22 }){
  return (
    <g transform={`translate(${x} ${y})`}>
      <rect x="0" y="0" width={w} height="8" fill="#fff"/>
      <rect x="0" y="0" width={w} height="1" fill="#aaa"/>
      <rect x="0" y="7" width={w} height="1" fill="#aaa"/>
      <rect x="2" y="2" width="6" height=".7" fill="#3F8FCB"/>
      <rect x="2" y="3.4" width="10" height=".7" fill="#1f1530"/>
      <rect x="2" y="4.8" width="4" height=".7" fill="#C04A8D"/>
      <rect x={w-6} y="2" width="3" height="3" fill="#3FA34D" opacity=".6"/>
    </g>
  );
}

// Per-room composition (top-down, daytime)
function OutreachRoom({ r }){
  return (
    <g>
      <PlankFloor x={r.x+2} y={r.y+12} w={r.w-4} h={r.h-14}/>
      {/* back-wall bookshelves */}
      <Bookshelf x={r.x+12} y={r.y+16} w={26}/>
      <Bookshelf x={r.x+44} y={r.y+16} w={26}/>
      <Bookshelf x={r.x+76} y={r.y+16} w={26}/>
      <Plant x={r.x+108} y={r.y+16} big/>
      {/* boxes corner */}
      <Boxes x={r.x+6} y={r.y+38}/>
      {/* desk 1 */}
      <Desk x={r.x+30} y={r.y+50} w={32} h={14}/>
      <Monitor x={r.x+34} y={r.y+44} color="#3F8FCB" label="LEADS"/>
      <Keyboard x={r.x+34} y={r.y+58}/>
      <Mug x={r.x+50} y={r.y+58} color="#c2333a"/>
      <ChairTopDown x={r.x+45} y={r.y+66} color="#1A1A2E"/>
      {/* desk 2 */}
      <Desk x={r.x+86} y={r.y+50} w={32} h={14}/>
      <Monitor x={r.x+90} y={r.y+44} color="#3FA34D" label="EMAIL"/>
      <Keyboard x={r.x+92} y={r.y+58}/>
      <Papers x={r.x+108} y={r.y+58}/>
      <ChairTopDown x={r.x+101} y={r.y+66} color="#1A1A2E"/>
      {/* exterior door (south wall, leads go out to find leads) */}
      <rect x={r.x+72} y={r.y+r.h-3} width="16" height="3" fill="#7a4a2a"/>
      <rect x={r.x+72} y={r.y+r.h-3} width="16" height="1" fill="#5a3520"/>
      <rect x={r.x+86} y={r.y+r.h-2} width="1" height="1" fill="#F2C84B"/>
    </g>
  );
}
function QualifyRoom({ r }){
  return (
    <g>
      <PlankFloor x={r.x+2} y={r.y+12} w={r.w-4} h={r.h-14}/>
      {/* back wall: paintings + plant */}
      <Painting x={r.x+18} y={r.y+18}/>
      <Painting x={r.x+50} y={r.y+18}/>
      <Painting x={r.x+82} y={r.y+18}/>
      <Plant x={r.x+118} y={r.y+18}/>
      {/* lounge with two armchairs facing a coffee table */}
      <Couch x={r.x+18}  y={r.y+76} w={24} h={12} color="#7A5BC8"/>
      <CoffeeTable x={r.x+50} y={r.y+78} w={20}/>
      <Couch x={r.x+78}  y={r.y+76} w={24} h={12} color="#7A5BC8"/>
      {/* a side table + lamp */}
      <rect x={r.x+108} y={r.y+78} width="10" height="8" fill="#5a3520"/>
      <rect x={r.x+108} y={r.y+78} width="10" height="1" fill="#7a4a2a"/>
      <rect x={r.x+111} y={r.y+74} width="4" height="4" fill="#D9A93A"/>
      {/* second consultation: small round table */}
      <circle cx={r.x+30} cy={r.y+66} r="6" fill="#5a3520"/>
      <circle cx={r.x+30} cy={r.y+66} r="6" fill="none" stroke="#7a4a2a" strokeWidth=".5"/>
      <ChairTopDown x={r.x+22} y={r.y+58} color="#5a3520"/>
      <ChairTopDown x={r.x+34} y={r.y+58} color="#5a3520"/>
    </g>
  );
}
function EngageRoom({ r }){
  return (
    <g>
      <PlankFloor x={r.x+2} y={r.y+12} w={r.w-4} h={r.h-14}/>
      {/* big screen on north wall */}
      <g transform={`translate(${r.x+18} ${r.y+18})`}>
        <rect x="0" y="0" width="50" height="20" fill="#0d0820"/>
        <rect x="2" y="2" width="46" height="16" fill="#fff"/>
        <rect x="2" y="2" width="46" height="3" fill="#E89A4A"/>
        <text x="25" y="4.4" textAnchor="middle" fontSize="2.4" fontFamily="Space Grotesk" fontWeight="700" fill="#fff">multiuniversal.com</text>
        <rect x="5" y="7" width="22" height="2" fill="#1f1530" opacity=".6"/>
        <rect x="5" y="10" width="30" height="1.4" fill="#1f1530" opacity=".4"/>
        <rect x="5" y="13" width="14" height="3" fill="#3FA34D"/>
        <text x="12" y="15.2" textAnchor="middle" fontSize="2.2" fontFamily="Space Grotesk" fontWeight="700" fill="#fff">START</text>
        <rect x="32" y="7" width="14" height="9" fill="#3F8FCB" opacity=".25"/>
        <rect x="32" y="7" width="14" height="3" fill="#3F8FCB"/>
      </g>
      <Whiteboard x={r.x+74} y={r.y+22} w={28}/>
      <Plant x={r.x+108} y={r.y+18}/>
      {/* desks */}
      <Desk x={r.x+22} y={r.y+76} w={36} h={14}/>
      <Monitor x={r.x+26} y={r.y+70} color="#C04A8D" label="PITCH"/>
      <Monitor x={r.x+42} y={r.y+70} color="#3F8FCB" label="CHAT"/>
      <Keyboard x={r.x+34} y={r.y+84}/>
      <ChairTopDown x={r.x+38} y={r.y+92} color="#1A1A2E"/>
      <Desk x={r.x+72} y={r.y+76} w={48} h={14}/>
      <Monitor x={r.x+76} y={r.y+70} color="#3FA34D" label="MAIL"/>
      <Keyboard x={r.x+88} y={r.y+84}/>
      <Mug x={r.x+102} y={r.y+85} color="#3F8FCB"/>
      <Papers x={r.x+108} y={r.y+85}/>
      <ChairTopDown x={r.x+94} y={r.y+92} color="#1A1A2E"/>
    </g>
  );
}
function ReviewsRoom({ r }){
  return (
    <g>
      <PlankFloor x={r.x+2} y={r.y+12} w={r.w-4} h={r.h-14}/>
      {/* star wall on north */}
      <rect x={r.x+12} y={r.y+18} width={56} height={14} fill="#1f1530"/>
      <rect x={r.x+12} y={r.y+18} width={56} height={2} fill="#3a2655"/>
      {[0,1,2,3,4,5].map(i => (
        <g key={i} transform={`translate(${r.x + 18 + i*8} ${r.y+22})`}>
          <rect x="2" y="0" width="1" height="1" fill="#F2C84B"/>
          <rect x="1" y="1" width="3" height="1" fill="#F2C84B"/>
          <rect x="0" y="2" width="5" height="1" fill="#F2C84B"/>
          <rect x="1" y="3" width="3" height="1" fill="#F2C84B"/>
          <rect x="0" y="4" width="2" height="1" fill="#F2C84B"/>
          <rect x="3" y="4" width="2" height="1" fill="#F2C84B"/>
        </g>
      ))}
      {/* "4.9" plaque */}
      <rect x={r.x+76} y={r.y+18} width={28} height={14} fill="#fff"/>
      <text x={r.x+90} y={r.y+27.5} textAnchor="middle" fontSize="6" fontFamily="Space Grotesk" fontWeight="700" fill="#C04A8D">4.9 ★</text>
      <Plant x={r.x+114} y={r.y+18}/>
      {/* desks */}
      <Desk x={r.x+30} y={r.y+74} w={32} h={14}/>
      <Monitor x={r.x+34} y={r.y+68} color="#C04A8D" label="ASK"/>
      <Keyboard x={r.x+38} y={r.y+82}/>
      <ChairTopDown x={r.x+44} y={r.y+90} color="#5a3520"/>
      <Desk x={r.x+72} y={r.y+74} w={36} h={14}/>
      <Monitor x={r.x+76} y={r.y+68} color="#E89A4A" label="POST"/>
      <Keyboard x={r.x+82} y={r.y+82}/>
      <Mug x={r.x+98} y={r.y+82} color="#c2333a"/>
      <ChairTopDown x={r.x+88} y={r.y+90} color="#5a3520"/>
    </g>
  );
}
function OpsRoom({ r }){
  return (
    <g>
      <PlankFloor x={r.x+2} y={r.y+12} w={r.w-4} h={r.h-14}/>
      {/* filing cabinets */}
      <FilingCabinet x={r.x+10} y={r.y+18} color="#3FA34D"/>
      <FilingCabinet x={r.x+22} y={r.y+18} color="#3FA34D"/>
      <FilingCabinet x={r.x+34} y={r.y+18} color="#3FA34D"/>
      {/* safe */}
      <g transform={`translate(${r.x+50} ${r.y+18})`}>
        <rect x="0" y="0" width="14" height="14" fill="#5a4a3a"/>
        <rect x="0" y="0" width="14" height="2" fill="#7a6a5a"/>
        <rect x="2" y="3" width="10" height="9" fill="#7a6a5a"/>
        <circle cx="9" cy="7.5" r="1.6" fill="#1f1530"/>
        <rect x="8.6" y="7.2" width=".8" height="1.6" fill="#F2C84B"/>
      </g>
      <Whiteboard x={r.x+72} y={r.y+22} w={32}/>
      <Plant x={r.x+118} y={r.y+18}/>
      {/* desks */}
      <Desk x={r.x+30} y={r.y+74} w={32} h={14}/>
      <Monitor x={r.x+34} y={r.y+68} color="#3FA34D" label="$$$"/>
      <Keyboard x={r.x+38} y={r.y+82}/>
      <Papers x={r.x+52} y={r.y+82}/>
      <ChairTopDown x={r.x+44} y={r.y+90} color="#5a3520"/>
      <Desk x={r.x+72} y={r.y+74} w={36} h={14}/>
      <Monitor x={r.x+76} y={r.y+68} color="#F2C84B" label="CAL"/>
      <Keyboard x={r.x+86} y={r.y+82}/>
      <Mug x={r.x+102} y={r.y+82} color="#3FA34D"/>
      <ChairTopDown x={r.x+88} y={r.y+90} color="#5a3520"/>
    </g>
  );
}
function BreakRoom({ r }){
  return (
    <g>
      {/* tile floor in break room (cream) */}
      <rect x={r.x+2} y={r.y+12} width={r.w-4} height={r.h-14} fill="#f0e6d6"/>
      {/* tile grout */}
      {Array.from({length: Math.ceil((r.h-14)/8)}).map((_, i) => (
        <rect key={`th-${i}`} x={r.x+2} y={r.y+12 + i*8} width={r.w-4} height=".4" fill="#d4c4a8"/>
      ))}
      {Array.from({length: Math.ceil((r.w-4)/8)}).map((_, i) => (
        <rect key={`tv-${i}`} x={r.x+2 + i*8} y={r.y+12} width=".4" height={r.h-14} fill="#d4c4a8"/>
      ))}
      {/* north wall: vending + cooler + fridge counter */}
      <VendingMachine x={r.x+12} y={r.y+18}/>
      <WaterCooler x={r.x+30} y={r.y+18}/>
      <Fridge x={r.x+52} y={r.y+18}/>
      {/* counter */}
      <rect x={r.x+66} y={r.y+18} width={r.w-78} height="14" fill="#fff"/>
      <rect x={r.x+66} y={r.y+18} width={r.w-78} height="1" fill="#d4c4a8"/>
      <rect x={r.x+76} y={r.y+22} width="4" height="6" fill="#5a5a6a"/>{/* coffee maker */}
      <rect x={r.x+76} y={r.y+22} width="4" height="2" fill="#1f1530"/>
      <Mug x={r.x+96} y={r.y+24} color="#c2333a"/>
      <Mug x={r.x+108} y={r.y+24} color="#3F8FCB"/>
      {/* couch and coffee table in middle */}
      <Couch x={r.x+18} y={r.y+74} w={36} h={12} color="#5a8eb5"/>
      <CoffeeTable x={r.x+62} y={r.y+78} w={22}/>
      <Couch x={r.x+92} y={r.y+74} w={36} h={12} color="#5a8eb5"/>
      {/* clock */}
      <circle cx={r.x+r.w/2} cy={r.y+18} r="3" fill="#fff" stroke="#1f1530" strokeWidth=".4"/>
      <rect x={r.x+r.w/2-.3} y={r.y+15.5} width=".6" height="2.5" fill="#1f1530"/>
      <rect x={r.x+r.w/2} y={r.y+18} width="2" height=".5" fill="#c2333a"/>
    </g>
  );
}

// Bubble (shared)
function Bubble({ x, y, text, color, anchor='down', stageW }){
  const t = text.length > 38 ? text.slice(0, 37) + '…' : text;
  const bw = Math.max(40, Math.min(120, t.length * 1.85 + 8));
  const px = Math.max(4, Math.min(stageW - bw - 4, x - bw/2));
  const py = anchor === 'up' ? y - 14 : y;
  return (
    <g transform={`translate(${px} ${py})`} style={{pointerEvents:'none'}}>
      <rect x="1" y="11" width={bw} height="1" fill="#000" opacity=".18"/>
      <rect x="0" y="0" width={bw} height="10" fill="#fff"/>
      <rect x="-1" y="1" width="1" height="8" fill="#fff"/>
      <rect x={bw} y="1" width="1" height="8" fill="#fff"/>
      <rect x="1" y="-1" width={bw-2} height="1" fill="#fff"/>
      <rect x="1" y="10" width={bw-2} height="1" fill="#fff"/>
      <rect x="0" y="0" width="2.5" height="10" fill={color}/>
      <rect x={Math.max(6, Math.min(bw-8, x - px - 1))} y="10" width="3" height="1" fill="#fff"/>
      <rect x={Math.max(7, Math.min(bw-7, x - px))}     y="11" width="1" height="1" fill="#fff"/>
      <text x="5" y="6.6" fontSize="3.6" fontFamily="JetBrains Mono" fontWeight="700" fill="#1f1530">{t}</text>
    </g>
  );
}

// Building stamp (room nameplate + outer wall)
function RoomNameplate({ room }){
  const r = room;
  return (
    <g>
      {/* wall (dark exterior) */}
      <rect x={r.x} y={r.y} width={r.w} height={r.h} fill="none" stroke="#3a2655" strokeWidth=".8"/>
      {/* nameplate band along top */}
      <rect x={r.x} y={r.y} width={r.w} height={12} fill={r.color}/>
      <rect x={r.x} y={r.y+12} width={r.w} height="1" fill="rgba(0,0,0,.35)"/>
      <text x={r.x+5} y={r.y+8.5} fontSize="6" fontFamily="Space Grotesk" fontWeight="700" fill="#fff" letterSpacing=".05">{r.label}</text>
      <text x={r.x+r.w-3} y={r.y+8.5} textAnchor="end" fontSize="3.5" fontFamily="JetBrains Mono" fontWeight="500" fill="rgba(255,255,255,.85)" letterSpacing=".05">· {r.sub}</text>
    </g>
  );
}

function AgentsView(){
  const [now, setNow] = React.useState(0);
  React.useEffect(() => {
    let raf, start = performance.now();
    const tick = (t) => { setNow(t - start); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const walkFrame = Math.floor(now / FRAME_MS);
  const states = AGENT_PRESETS.map((_, i) => agentStateAt(i, now));

  // bubbles for agents currently working at desks (not walking)
  const bubbleStates = states.filter(s => !s.walking).slice(0, 4);

  // hot rooms: any agent currently working there
  const hotRooms = new Set(
    states.filter(s => !s.walking).map(s => A_STATIONS[s.task.target].room)
  );

  return (
    <svg viewBox={`0 0 ${AW} ${AH}`} preserveAspectRatio="xMidYMid meet"
         shapeRendering="crispEdges"
         style={{width:'100%', height:'100%', display:'block', imageRendering:'pixelated'}}>
      {/* outdoor (daytime — sunny grass with paths) */}
      <rect x="0" y="0" width={AW} height={AH} fill="#a8d56e"/>
      {/* grass texture */}
      {Array.from({length: 80}).map((_, i) => (
        <rect key={`g-${i}`} x={(i*53)%AW} y={(i*31)%AH} width="1" height="2" fill="#7eb84e" opacity=".7"/>
      ))}
      {/* concrete sidewalk around building */}
      <rect x="2" y="14" width={AW-4} height={AH-18} fill="#cfcabd" stroke="#9c9685" strokeWidth=".4"/>
      {/* outside footpath leading from outreach door to bottom */}
      <rect x="80" y="126" width="20" height="20" fill="#cfcabd" opacity=".0"/>

      {/* roof overhang line / outer walls */}
      <rect x="6" y="18" width={AW-12} height={AH-26} fill="#1f1530"/>

      {/* corridor (teal carpet running horizontally between rows) */}
      <rect x="8" y="128" width={AW-16} height="28" fill="#3a8a8a"/>
      <CarpetFloor x="8" y="128" w={AW-16} h="28" color="#3a8a8a"/>
      {/* corridor edge trim */}
      <rect x="8" y="128" width={AW-16} height="1" fill="#5fb0b0"/>
      <rect x="8" y="155" width={AW-16} height="1" fill="#1f1530" opacity=".4"/>

      {/* ROOMS — render floors/furniture first */}
      <OutreachRoom r={A_ROOMS.outreach}/>
      <QualifyRoom  r={A_ROOMS.qualify}/>
      <EngageRoom   r={A_ROOMS.engage}/>
      <ReviewsRoom  r={A_ROOMS.reviews}/>
      <OpsRoom      r={A_ROOMS.ops}/>
      <BreakRoom    r={A_ROOMS.breakroom}/>

      {/* room walls + nameplates on top */}
      {Object.values(A_ROOMS).map((r) => <RoomNameplate key={r.label} room={r}/>)}

      {/* doors connecting each room to corridor */}
      {Object.values(A_ROOMS).map((r) => {
        const isTopRow = r.y < 100;
        const doorY = isTopRow ? r.y + r.h - 1 : r.y;
        const doorX = r.x + r.w/2 - 5;
        return (
          <g key={`door-${r.label}`}>
            {/* gap (matches corridor color) */}
            <rect x={doorX} y={doorY} width="10" height="2" fill="#3a8a8a"/>
            {/* door swing arc */}
            <path d={`M ${doorX} ${doorY + (isTopRow ? 0 : 2)} A 10 10 0 0 ${isTopRow ? 0 : 1} ${doorX + 10} ${doorY + (isTopRow ? 0 : 2)}`}
                  fill="none" stroke="rgba(255,255,255,.5)" strokeWidth=".4" strokeDasharray="1 1"/>
          </g>
        );
      })}

      {/* hot-room indicator dots */}
      {Object.values(A_ROOMS).map((r) => hotRooms.has(Object.keys(A_ROOMS).find(k => A_ROOMS[k]===r)) && (
        <g key={`hot-${r.label}`}>
          <circle cx={r.x+r.w-5} cy={r.y+6.5} r="1.6" fill="#3FA34D"/>
          <circle cx={r.x+r.w-5} cy={r.y+6.5} r="2.4" fill="none" stroke="#3FA34D" strokeWidth=".5" opacity=".6">
            <animate attributeName="r" values="2;3.4;2" dur="1.6s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values=".6;0;.6" dur="1.6s" repeatCount="indefinite"/>
          </circle>
        </g>
      ))}

      {/* potted plants in corridor corners */}
      <Plant x={12} y={130}/>
      <Plant x={AW-22} y={130}/>

      {/* AGENTS (top-down — render with vertical orientation hint via flip) */}
      {states.map((s, i) => {
        const flip = s.dx < -0.2;
        return (
          <g key={`agent-${i}`}>
            <AgentSprite
              x={s.x} y={s.y}
              frame={s.walking ? walkFrame : 0}
              hair={s.agent.hair}
              skin={s.agent.skin}
              tie={s.agent.tie}
              flip={flip}
            />
            {/* tiny name tag below feet */}
            <g transform={`translate(${s.x - 4} ${s.y + 19})`}>
              <rect x="0" y="0" width="20" height="3.6" fill="#1f1530" opacity=".82"/>
              <rect x="0" y="0" width="2" height="3.6" fill={s.agent.tie}/>
              <text x="11" y="2.7" textAnchor="middle" fontSize="2.5" fontFamily="JetBrains Mono"
                    fontWeight="700" fill="#fff" letterSpacing=".05">{s.agent.name.split(' ')[1].toUpperCase()}</text>
            </g>
          </g>
        );
      })}

      {/* bubbles (offset to avoid overlap with nameplate band) */}
      {bubbleStates.map((s, i) => {
        const inTopRow = s.y < 110;
        const by = inTopRow ? (s.y + 22) : (s.y - 14);
        return <Bubble key={`b-${i}`} x={s.x + 6} y={by} text={s.task.doing} color={s.agent.tie} stageW={AW}/>;
      })}
    </svg>
  );
}

// =============================================================
// VIEW 2 — WORKFLOW (linear funnel — daytime version)
// =============================================================
const WW = 480, WH = 220;
const W_LANE_Y = 158;

const W_ROOMS = [
  { id:'street',   x:4,   w:86,  num:'01', label:'STREET',         sub:'leads in the wild',   band:'#3FA34D' },
  { id:'recep',    x:92,  w:78,  num:'02', label:'RECEPTION',      sub:'welcome',             band:'#E89A4A' },
  { id:'qualify',  x:172, w:100, num:'03', label:'QUALIFICATION',  sub:'ask the right qs',    band:'#3F8FCB' },
  { id:'engage',   x:274, w:96,  num:'04', label:'ENGAGEMENT',     sub:'pitch · send link',   band:'#C04A8D' },
  { id:'convert',  x:372, w:104, num:'05', label:'CONVERSION',     sub:'book · view · pass',  band:'#7A5BC8' },
];

const W_STATIONS = {
  street_far:    { x: 18,  y: W_LANE_Y },
  street_mid:    { x: 50,  y: W_LANE_Y },
  street_door:   { x: 84,  y: W_LANE_Y },
  recep_desk:    { x: 130, y: W_LANE_Y },
  qualify_chair_a:{x: 198, y: W_LANE_Y },
  qualify_chair_b:{x: 246, y: W_LANE_Y },
  engage_screen: { x: 304, y: W_LANE_Y },
  engage_desk:   { x: 348, y: W_LANE_Y },
  convert_kiosk: { x: 396, y: W_LANE_Y },
  convert_meet:  { x: 432, y: W_LANE_Y },
  convert_exit:  { x: 470, y: W_LANE_Y },
};

const W_STAGE_DURATIONS = {
  spawn:1800, meet:1600, toRecep:2400, greet:1500, toQualify:2000,
  qualify:3200, toEngage:2000, engage:2800, toConvert:1800, convert:2600, exit:1800,
};
const W_STAGES = Object.keys(W_STAGE_DURATIONS);
const W_TOTAL = Object.values(W_STAGE_DURATIONS).reduce((a,b)=>a+b,0);

function leadProfile(i){
  const lead = LEAD_PRESETS[i % LEAD_PRESETS.length];
  const escortAgent = AGENT_PRESETS[i % AGENT_PRESETS.length];
  const chair = i % 2 === 0 ? 'qualify_chair_a' : 'qualify_chair_b';
  const outcomes = ['convert_kiosk','convert_meet','convert_kiosk','convert_exit'];
  const outcome = outcomes[i % outcomes.length];
  const offset = i * 4500;
  return { lead, escortAgent, chair, outcome, offset };
}
function leadStateAt(i, now){
  const prof = leadProfile(i);
  const t = ((now + prof.offset) % W_TOTAL);
  let elapsed = 0;
  for (const stage of W_STAGES){
    const dur = W_STAGE_DURATIONS[stage];
    if (t < elapsed + dur){
      const localT = (t - elapsed) / dur;
      return { stage, localT, prof };
    }
    elapsed += dur;
  }
  return { stage: 'exit', localT: 1, prof };
}
function leadPos(stage, localT, prof){
  const e = easeInOut(localT);
  switch(stage){
    case 'spawn':    return { x: lerp(-12, W_STATIONS.street_far.x, e), y: W_LANE_Y, walking:true, dx:1 };
    case 'meet':     return { x: W_STATIONS.street_far.x + 6, y: W_LANE_Y, walking:false, doing:`${prof.lead.name} — meeting Agent` };
    case 'toRecep':  return { x: lerp(W_STATIONS.street_far.x, W_STATIONS.recep_desk.x - 8, e), y: W_LANE_Y, walking:true, dx:1 };
    case 'greet':    return { x: W_STATIONS.recep_desk.x - 4, y: W_LANE_Y, walking:false, doing:'Welcome — what brings you in?' };
    case 'toQualify': {
      const target = W_STATIONS[prof.chair];
      return { x: lerp(W_STATIONS.recep_desk.x - 4, target.x - 6, e), y: W_LANE_Y, walking:true, dx:1 };
    }
    case 'qualify': {
      const target = W_STATIONS[prof.chair];
      return { x: target.x - 6, y: W_LANE_Y - 2, walking:false, sitting:true,
               doing: prof.chair === 'qualify_chair_a' ? 'Tell me about your team size' : 'What\'s your timeline?' };
    }
    case 'toEngage': {
      const from = W_STATIONS[prof.chair].x - 6;
      return { x: lerp(from, W_STATIONS.engage_screen.x - 6, e), y: W_LANE_Y, walking:true, dx:1 };
    }
    case 'engage':   return { x: W_STATIONS.engage_screen.x - 6, y: W_LANE_Y, walking:false, doing:'Showing the landing page now' };
    case 'toConvert':{
      const target = W_STATIONS[prof.outcome];
      return { x: lerp(W_STATIONS.engage_screen.x - 6, target.x - 6, e), y: W_LANE_Y, walking:true, dx:1 };
    }
    case 'convert': {
      const labels = {
        convert_kiosk:'Sent the landing page ✓',
        convert_meet: 'Booked Tue 2pm meeting ✓',
        convert_exit: 'Polite no — moving on',
      };
      return { x: W_STATIONS[prof.outcome].x - 6, y: W_LANE_Y, walking:false, doing: labels[prof.outcome] };
    }
    case 'exit': {
      const fromX = W_STATIONS[prof.outcome].x - 6;
      return { x: lerp(fromX, WW + 12, e), y: W_LANE_Y, walking:true, dx:1 };
    }
  }
}
function workflowAgentStateAt(i, now){
  const agent = AGENT_PRESETS[i];
  if (i < 4){
    const lead = leadStateAt(i, now);
    const lp = leadPos(lead.stage, lead.localT, lead.prof);
    if (!lp) return { agent, x:0, y:W_LANE_Y, walking:false };
    if (lead.stage === 'qualify') return { agent, x:lp.x+14, y:W_LANE_Y, walking:false, doing:lp.doing };
    if (lead.stage === 'spawn'){
      const e = easeInOut(lead.localT);
      const x = lerp(W_STATIONS.street_door.x, W_STATIONS.street_far.x + 10, e);
      return { agent, x, y:W_LANE_Y, walking:true, dx:-1, flip:true };
    }
    if (lead.stage === 'exit') return { agent, x: W_STATIONS[lead.prof.outcome].x + 8, y:W_LANE_Y, walking:false };
    return { agent, x:lp.x+14, y:lp.y, walking:lp.walking, dx:lp.dx, flip:false };
  }
  if (i === 4) return { agent, x: W_STATIONS.engage_desk.x - 6, y:W_LANE_Y, walking:false, doing:'Sending follow-up emails' };
  if (i === 5){
    const t = (now / 4000) % 2;
    const x = t < 1
      ? lerp(W_STATIONS.convert_kiosk.x, W_STATIONS.convert_meet.x, easeInOut(t))
      : lerp(W_STATIONS.convert_meet.x, W_STATIONS.convert_kiosk.x, easeInOut(t-1));
    return { agent, x:x-6, y:W_LANE_Y, walking:true, dx:t<1?1:-1, flip:t>=1 };
  }
  return { agent, x:0, y:W_LANE_Y, walking:false };
}

// (workflow scenes — daytime version, simpler)
function WorkflowView(){
  const [now, setNow] = React.useState(0);
  React.useEffect(() => {
    let raf, start = performance.now();
    const tick = (t) => { setNow(t - start); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const walkFrame = Math.floor(now / FRAME_MS);
  const leads = Array.from({length:4}).map((_, i) => {
    const s = leadStateAt(i, now);
    const p = leadPos(s.stage, s.localT, s.prof);
    return { i, ...s, ...p };
  });
  const agents = Array.from({length:6}).map((_, i) => workflowAgentStateAt(i, now));

  const bubbles = [];
  leads.forEach((l) => {
    if (['greet','qualify','engage','convert'].includes(l.stage) && l.doing){
      bubbles.push({ x: l.x + 6, y: W_LANE_Y - 22, text: l.doing,
        color: l.stage === 'qualify' ? '#0d0820' : l.stage === 'engage' ? '#C04A8D' : l.stage === 'convert' ? '#3FA34D' : '#E89A4A' });
    }
  });

  return (
    <svg viewBox={`0 0 ${WW} ${WH}`} preserveAspectRatio="xMidYMid meet"
         shapeRendering="crispEdges"
         style={{width:'100%', height:'100%', display:'block', imageRendering:'pixelated'}}>
      {/* daytime sky */}
      <rect x="0" y="0" width={WW} height={WH} fill="#bce6ff"/>
      <rect x="0" y="0" width={WW} height={20} fill="#a0d4f5"/>
      {/* sun */}
      <circle cx={WW-30} cy="14" r="7" fill="#F2C84B"/>
      <circle cx={WW-30} cy="14" r="9" fill="#F2C84B" opacity=".4"/>
      {/* clouds */}
      <ellipse cx="60" cy="10" rx="14" ry="3" fill="#fff" opacity=".85"/>
      <ellipse cx="180" cy="6" rx="18" ry="3.5" fill="#fff" opacity=".85"/>
      <ellipse cx="320" cy="12" rx="12" ry="3" fill="#fff" opacity=".85"/>

      {/* outside (street) — sidewalk and grass */}
      <rect x="0" y="22" width={92} height={WH-22} fill="#a8d56e"/>
      <rect x="0" y={W_LANE_Y-4} width="92" height="28" fill="#cfcabd"/>
      <rect x="0" y={W_LANE_Y+22} width="92" height="2" fill="#9c9685"/>

      {/* office building (cream walls) */}
      <rect x="92" y="22" width={WW-92} height={WH-26} fill="#f0e6d6"/>
      {/* wood floor inside office */}
      <PlankFloor x="92" y={W_LANE_Y-4} w={WW-92} h="40"/>

      {/* room dividing walls */}
      {[170,272,370].map((x,i) => (
        <rect key={i} x={x-1} y={22} width={2} height={WH-26} fill="#5a3520"/>
      ))}

      {/* stage signs */}
      {W_ROOMS.map((r, i) => (
        <g key={r.id} transform={`translate(${r.x + 4} 26)`}>
          <rect x="0" y="0" width="80" height="10" fill={r.band}/>
          <rect x="0" y="9" width="80" height="1" fill="rgba(0,0,0,.4)"/>
          <rect x="2" y="2" width="6" height="6" fill="#fff"/>
          <text x="5" y="7" textAnchor="middle" fontSize="5" fontFamily="Space Grotesk" fontWeight="700" fill={r.band}>{r.num}</text>
          <text x="11" y="7" fontSize="5" fontFamily="Space Grotesk" fontWeight="700" fill="#fff" letterSpacing=".05">{r.label}</text>
          <text x="78" y="7" textAnchor="end" fontSize="3.2" fontFamily="JetBrains Mono" fontWeight="500" fill="rgba(255,255,255,.85)">· {r.sub}</text>
        </g>
      ))}

      {/* simple per-room props */}
      {/* Reception desk */}
      <Desk x={120} y={W_LANE_Y-12} w={36} h={12}/>
      <Monitor x={126} y={W_LANE_Y-22} color="#E89A4A" label="LEADS"/>
      <Monitor x={140} y={W_LANE_Y-22} color="#3F8FCB" label="CRM"/>
      {/* Qualify lounge */}
      <Couch x={186} y={W_LANE_Y-2} w={20} h={10} color="#7A5BC8"/>
      <CoffeeTable x={210} y={W_LANE_Y} w={16}/>
      <Couch x={232} y={W_LANE_Y-2} w={20} h={10} color="#7A5BC8"/>
      <Plant x={262} y={W_LANE_Y-12}/>
      {/* Engage screen */}
      <g transform={`translate(284 38)`}>
        <rect x="0" y="0" width="80" height="36" fill="#0d0820"/>
        <rect x="2" y="2" width="76" height="32" fill="#fff"/>
        <rect x="2" y="2" width="76" height="6" fill="#E89A4A"/>
        <text x="40" y="6.6" textAnchor="middle" fontSize="3.6" fontFamily="Space Grotesk" fontWeight="700" fill="#fff">multiuniversal.com</text>
        <rect x="6"  y="11" width="34" height="3" fill="#1f1530"/>
        <rect x="6"  y="16" width="50" height="2" fill="#1f1530" opacity=".4"/>
        <rect x="6"  y="20" width="44" height="2" fill="#1f1530" opacity=".4"/>
        <rect x="6"  y="25" width="20" height="6" fill="#3FA34D"/>
        <text x="16" y="29.2" textAnchor="middle" fontSize="3.2" fontFamily="Space Grotesk" fontWeight="700" fill="#fff">START</text>
        <rect x="58" y="11" width="18" height="20" fill="#3F8FCB" opacity=".25"/>
      </g>
      <Desk x={336} y={W_LANE_Y-10} w={28} h={10}/>
      {/* Convert outcomes */}
      <g transform={`translate(384 50)`}>
        <rect x="0" y="0" width="22" height="18" fill="#0d0820"/>
        <rect x="2" y="2" width="18" height="14" fill="#fff"/>
        <rect x="2" y="2" width="18" height="3" fill="#E89A4A"/>
        <rect x="4" y="13" width="8" height="2" fill="#3FA34D"/>
        <rect x="9" y="18" width="4" height="6" fill="#5a4a6a"/>
        <text x="11" y="34" textAnchor="middle" fontSize="2.4" fontFamily="JetBrains Mono" fontWeight="700" fill="#0d0820">VIEW LANDING</text>
      </g>
      <g transform={`translate(420 56)`}>
        <rect x="0" y="0" width="18" height="14" fill="#1f1530"/>
        <rect x="1" y="1" width="16" height="4" fill="#0d0820"/>
        <rect x="2" y="2" width="6" height="2" fill="#3FA34D"/>
        {[0,1,2].map(c => [0,1,2].map(rr => (
          <rect key={`${c}-${rr}`} x={3 + c*4} y={6 + rr*2} width="3" height="1.5" fill="#5a5a6a"/>
        )))}
        <text x="9" y="22" textAnchor="middle" fontSize="2.4" fontFamily="JetBrains Mono" fontWeight="700" fill="#0d0820">BOOK A CALL</text>
      </g>
      <g transform={`translate(454 46)`}>
        <rect x="0" y="0" width="18" height="22" fill="#7a4a2a"/>
        <rect x="0" y="0" width="18" height="2" fill="#5a3520"/>
        <rect x="2" y="4" width="14" height="8" fill="#bce6ff" opacity=".6"/>
        <rect x="9" y="4" width="0.5" height="8" fill="#5a3520"/>
        <rect x="14" y="13" width="1.5" height="3" fill="#F2C84B"/>
        <text x="9" y="32" textAnchor="middle" fontSize="2.4" fontFamily="JetBrains Mono" fontWeight="700" fill="#0d0820">MEETING ROOM</text>
      </g>

      {/* exterior door from reception */}
      <rect x="92" y={W_LANE_Y-26} width="2" height="46" fill="#3a2655"/>
      <rect x="93" y={W_LANE_Y-22} width="6" height="22" fill="#bce6ff" stroke="#0d0820" strokeWidth=".4"/>

      {/* sidewalk markings street */}
      {[6,22,38,54,70].map((x,i) =>
        <rect key={i} x={x} y={W_LANE_Y+10} width="6" height="1" fill="#fff" opacity=".55"/>
      )}

      {/* agents */}
      {agents.map((a, i) => (
        <g key={`agent-${i}`}>
          <AgentSprite
            x={a.x} y={a.y - 18}
            frame={a.walking ? walkFrame : 0}
            flip={a.flip}
            hair={a.agent.hair}
            skin={a.agent.skin}
            tie={a.agent.tie}
          />
        </g>
      ))}
      {/* leads */}
      {leads.map((l) => (
        <g key={`lead-${l.i}`}>
          <LeadSprite
            x={l.x} y={l.y - 18 + (l.sitting ? 2 : 0)}
            frame={l.walking ? walkFrame : 0}
            hair={l.prof.lead.hair}
            skin={l.prof.lead.skin}
            shirt={l.prof.lead.shirt}
            accent="#1f1530"
            pants={l.prof.lead.pants}
          />
        </g>
      ))}
      {bubbles.slice(0,4).map((b, i) => (
        <Bubble key={`b-${i}`} x={b.x} y={b.y} text={b.text} color={b.color} stageW={WW}/>
      ))}
    </svg>
  );
}

// =============================================================
// HOST — view toggle + scene
// =============================================================
function PixelOffice({ height=520 }){
  const [view, setView] = React.useState('agents'); // 'agents' | 'workflow'

  const subText = view === 'agents'
    ? 'Departments at work · day shift'
    : 'A lead\'s journey · in 5 stages';

  return (
    <div style={{position:'relative', width:'100%', height, borderRadius:14, overflow:'hidden',
                 background: view === 'agents'
                   ? 'linear-gradient(180deg, #cfeaff 0%, #a8d56e 100%)'
                   : 'linear-gradient(180deg, #bce6ff 0%, #d4f2c0 100%)',
                 boxShadow:'inset 0 0 0 1px rgba(255,255,255,.15)'}}>
      {view === 'agents' ? <AgentsView/> : <WorkflowView/>}

      {/* TOP-LEFT: view toggle */}
      <div style={{
        position:'absolute', left:14, top:14,
        display:'inline-flex', padding:3, borderRadius:99,
        background:'rgba(13,8,32,.78)', border:'1px solid rgba(255,255,255,.2)',
        boxShadow:'0 4px 14px -4px rgba(0,0,0,.35)',
        fontFamily:'var(--font-mono, monospace)', fontSize:11, letterSpacing:'.06em',
      }}>
        {[
          { id:'agents',   label:'AGENTS' },
          { id:'workflow', label:'WORKFLOW' },
        ].map((v) => {
          const active = view === v.id;
          return (
            <button key={v.id}
              onClick={() => setView(v.id)}
              style={{
                padding:'6px 14px', borderRadius:99, border:'none',
                background: active ? '#fff' : 'transparent',
                color: active ? '#0d0820' : 'rgba(255,255,255,.85)',
                fontWeight: 700, letterSpacing:'.08em',
                fontFamily:'inherit', fontSize:'inherit',
                cursor:'pointer', textTransform:'uppercase',
                transition:'background .18s ease, color .18s ease',
              }}>
              {v.label}
            </button>
          );
        })}
      </div>

      {/* TOP-RIGHT: HUD */}
      <div style={{
        position:'absolute', right:14, top:14, display:'flex', gap:8, alignItems:'center',
        fontFamily:'var(--font-mono, monospace)', fontSize:11, color:'#fff',
        letterSpacing:'.06em', pointerEvents:'none'
      }}>
        <span style={{display:'inline-flex',alignItems:'center',gap:6,padding:'5px 10px',borderRadius:99,
                     background:'rgba(13,8,32,.78)', border:'1px solid rgba(255,255,255,.2)'}}>
          <span style={{width:6,height:6,borderRadius:'50%',background:'#3FA34D',boxShadow:'0 0 0 4px rgba(63,163,77,0.18)'}}/>
          {subText.toUpperCase()}
        </span>
      </div>

      {/* BOTTOM: legend (changes by view) */}
      <div style={{
        position:'absolute', left:14, right:14, bottom:12,
        display:'flex', gap:6, justifyContent:'center', flexWrap:'wrap',
        fontFamily:'var(--font-mono, monospace)', fontSize:10.5, letterSpacing:'.05em', pointerEvents:'none'
      }}>
        {view === 'agents'
          ? AGENT_PRESETS.map(a => (
              <span key={a.id} style={{
                display:'inline-flex',alignItems:'center',gap:6,padding:'4px 9px', borderRadius:99,
                background:'rgba(13,8,32,.78)',border:'1px solid rgba(255,255,255,.18)',color:'#fff', textTransform:'uppercase',
              }}>
                <span style={{width:7,height:7,borderRadius:'50%',background:a.tie}}/>
                {a.name}
              </span>
            ))
          : ([
              { dot:'#14101e', border:'#fff', label:'Agents · suit + shades' },
              { multi:['#E89A4A','#3F8FCB','#C04A8D'], label:'Leads · civilians' },
            ].map((l, i) => (
              <span key={i} style={{
                display:'inline-flex',alignItems:'center',gap:6,padding:'4px 9px', borderRadius:99,
                background:'rgba(13,8,32,.78)',border:'1px solid rgba(255,255,255,.18)',color:'#fff', textTransform:'uppercase',
              }}>
                {l.multi
                  ? <span style={{display:'inline-flex',gap:1}}>
                      {l.multi.map((c,j) => <span key={j} style={{width:4,height:8,background:c}}/>)}
                    </span>
                  : <span style={{width:8,height:8,borderRadius:2,background:l.dot,border:`1px solid ${l.border}`}}/>}
                {l.label}
              </span>
            )))
        }
      </div>
    </div>
  );
}

window.WorkflowGraph = PixelOffice;
window.PixelOffice = PixelOffice;