window.OfficeGame = function OfficeGame() {
  const canvasRef = React.useRef(null);
  const stateRef = React.useRef(null);
  const [tasks, setTasks] = React.useState(0);
  const [coffee, setCoffee] = React.useState(0);
  const [years, setYears] = React.useState(47);
  const [bestEver, setBestEver] = React.useState(0);
  const [achievement, setAchievement] = React.useState(null);
  const [showCtaBanner, setShowCtaBanner] = React.useState(false);

  // Milestones — each unlocks as the task count climbs.
  // Some are hidden Easter eggs at culturally significant numbers.
  const MILESTONES = React.useMemo(() => [
    { at: 10, label: 'Made the morning batch.' },
    { at: 25, label: "Made today's quota." },
    { at: 50, label: "Made this week's quota." },
    { at: 100, label: 'Promoted to senior filer.' },
    { at: 200, label: "Made the monthly quota. Brenda's jealous." },
    { at: 500, label: 'Now a regional manager.' },
    { at: 1000, label: "Wait — you've been clicking for an hour?" },
    { at: 1997, label: 'Welcome to 1997. Things were simpler. (And slower.)' },
    { at: 2000, label: "OK seriously, just hire stitch_ already.", cta: true },
    { at: 2024, label: "Y2K never happened. AI did." },
    { at: 5000, label: "Touch grass. Or hire stitch_. Either way." },
    { at: 9999, label: "Maximum filing. The cabinets are full. Go outside." },
  ], []);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;

    const W = canvas.width;
    const H = canvas.height;

    const NAMES = ['BRENDA', 'RON', 'LINDA', 'PHIL', 'DIANE', 'GREG'];
    const SHIRTS = ['#7B4F2F', '#3F5F8F', '#5C3D5C', '#9C6B30', '#3F6B5C', '#8B3A3A'];
    const HAIRS = ['#3a2a1a', '#1a1a1a', '#5a3a1a', '#3a3a3a', '#a06a3a', '#2a1a0a'];
    const PHRASES = [
      "Where's the Henderson file?",
      'Did anyone reset the printer?',
      'Has anyone seen my stapler?',
      'Susan, did you get my email?',
      "I'm out of toner.",
      "I'll bring it up at the meeting.",
      'Reply-all incoming.',
      'Cc-ing the team.',
      'Has anyone seen the Q3 binder?',
      'TPS reports are due.',
      "I'll just print one more time.",
      'The new computer system is broken.',
      'Did Ed approve this yet?',
      'Out of office.',
      "I'm at lunch.",
      'I need this in triplicate.',
      'Sorry, on a call.',
      'Faxing legal.',
      "Where's the backup disk?",
      "Has anyone seen Brenda's mug?",
      'Going to the break room.',
      'My computer is frozen.',
      'Is the network down again?',
    ];

    // Rare Easter-egg phrases — 5% chance to pull from this list instead.
    const RARE_PHRASES = [
      "Has anyone seen my flair?",
      "Did I do that?",
      "I was told there'd be donuts.",
      "PC LOAD LETTER. Again.",
      "Did Greg actually file the Henderson?",
      "Susan got promoted to senior nothing.",
      "The printer is sentient. I've made peace with this.",
      "Has anyone seen my Swingline?",
      "Y2K compliance training is mandatory.",
      "I dreamed about spreadsheets last night.",
      "We're not going to make our quota. Just so you know.",
      "Brenda's mug is haunted.",
    ];

    // Layout — 800x500 canvas, plenty of room
    const desks = [
      { x: 120, y: 180 }, { x: 360, y: 180 }, { x: 600, y: 180 },
      { x: 120, y: 300 }, { x: 360, y: 300 }, { x: 600, y: 300 },
    ];
    const cabinets = [
      { x: 60, y: 36 }, { x: 180, y: 36 }, { x: 300, y: 36 }, { x: 420, y: 36 }, { x: 540, y: 36 }, { x: 660, y: 36 },
      { x: 60, y: 440 }, { x: 180, y: 440 }, { x: 300, y: 440 }, { x: 420, y: 440 }, { x: 540, y: 440 }, { x: 660, y: 440 },
    ];
    const printer = { x: 730, y: 120 };
    const coffee_machine = { x: 16, y: 120 };
    const water_cooler = { x: 16, y: 350 };

    const workers = NAMES.map((name, i) => ({
      name,
      shirt: SHIRTS[i],
      hair: HAIRS[i],
      home: { x: desks[i].x + 24, y: desks[i].y + 60 },
      x: desks[i].x + 24,
      y: desks[i].y + 60,
      tx: desks[i].x + 24,
      ty: desks[i].y + 60,
      state: 'idle',
      stateTimer: Math.random() * 80,
      holding: false,
      bobOffset: 0,
      facing: 1,
      speech: null,
      speechTimer: 0,
      boostUntil: 0,
    }));

    stateRef.current = {
      workers, desks, cabinets, printer, coffee_machine, water_cooler,
      completedCount: 0, coffeeCount: 0, frame: 0,
      printerBroken: false, printerBrokenSince: 0,
      agentFlash: 0,
    };

    // Console greeting for the curious dev
    /* eslint-disable no-console */
    console.log(
      '%c stitch_ pre-ai office™ ',
      'background:#0a0a0a;color:#ff4520;font-weight:700;font-size:14px;padding:4px 8px;'
    );
    console.log(
      '%cTry the Konami code. ↑↑↓↓←→←→BA',
      'color:#7fc97a;font-family:monospace;font-size:12px;'
    );
    console.log(
      '%cSource code is happy to be read. Hire stitch_ to write more like it: https://getstitchwork.com/#contact',
      'color:#a39472;font-family:monospace;font-size:11px;'
    );
    /* eslint-enable no-console */

    function setTarget(w, x, y) {
      w.tx = x;
      w.ty = y;
      w.facing = x > w.x ? 1 : -1;
      w.state = 'walking';
    }

    function pickDestination(w) {
      const r = Math.random();
      if (w.holding) {
        const c = cabinets[Math.floor(Math.random() * cabinets.length)];
        return { x: c.x + 12, y: c.y + 36 };
      }
      if (r < 0.35) {
        const c = cabinets[Math.floor(Math.random() * cabinets.length)];
        return { x: c.x + 12, y: c.y + 36, pickup: true };
      }
      if (r < 0.55) return { x: printer.x + 8, y: printer.y + 32, pickup: true };
      if (r < 0.7) return { x: coffee_machine.x + 12, y: coffee_machine.y + 36, coffee: true };
      if (r < 0.85) return { x: water_cooler.x + 12, y: water_cooler.y + 36 };
      const d = w.home;
      return { x: d.x + (Math.random() - 0.5) * 16, y: d.y + (Math.random() - 0.5) * 8 };
    }

    function tick() {
      const s = stateRef.current;
      s.frame++;
      const now = Date.now();
      for (const w of s.workers) {
        const boosted = w.boostUntil > now;
        const moveSpeed = boosted ? 2.7 : 0.9;
        if (w.state === 'walking') {
          const dx = w.tx - w.x;
          const dy = w.ty - w.y;
          const dist = Math.sqrt(dx * dx + dy * dy);
          if (dist < (boosted ? 3 : 1.2)) {
            w.x = w.tx;
            w.y = w.ty;
            w.state = 'arrived';
          } else {
            w.x += (dx / dist) * moveSpeed;
            w.y += (dy / dist) * moveSpeed;
            w.bobOffset = Math.sin(s.frame * (boosted ? 0.45 : 0.18)) * 1;
          }
        } else if (w.state === 'arrived') {
          if (w.holding) {
            w.holding = false;
            s.completedCount++;
          } else if (w._pickupNext) {
            w.holding = true;
          }
          if (w._coffeeNext) {
            s.coffeeCount++;
          }
          w._pickupNext = false;
          w._coffeeNext = false;
          w.state = 'idle';
          // Boosted workers skip the rest break
          w.stateTimer = boosted ? 0 : 30 + Math.random() * 90;
        } else if (w.state === 'idle') {
          w.stateTimer--;
          w.bobOffset = 0;
          if (w.stateTimer <= 0) {
            // Boosted workers always pick a productive destination (cabinet or pickup)
            const dest = boosted
              ? (w.holding
                  ? { x: cabinets[Math.floor(Math.random() * cabinets.length)].x + 12, y: cabinets[Math.floor(Math.random() * cabinets.length)].y + 36 }
                  : { x: cabinets[Math.floor(Math.random() * cabinets.length)].x + 12, y: cabinets[Math.floor(Math.random() * cabinets.length)].y + 36, pickup: true })
              : pickDestination(w);
            w._pickupNext = !!dest.pickup;
            w._coffeeNext = !!dest.coffee;
            setTarget(w, dest.x, dest.y);
          }
        }

        if (w.speechTimer > 0) {
          w.speechTimer--;
          if (w.speechTimer === 0) w.speech = null;
        }
        if (Math.random() < 0.0009 && w.speechTimer <= 0) {
          // 5% chance of pulling from the rare Easter-egg list
          const list = Math.random() < 0.05 ? RARE_PHRASES : PHRASES;
          w.speech = list[Math.floor(Math.random() * list.length)];
          w.speechTimer = 200;
        }
      }

      // Random printer breakdown — happens occasionally, recovers after 5s.
      if (!s.printerBroken && Math.random() < 0.0006) {
        s.printerBroken = true;
        s.printerBrokenSince = s.frame;
      }
      if (s.printerBroken && s.frame - s.printerBrokenSince > 300) {
        s.printerBroken = false;
      }

      // Decrement agent flash overlay
      if (s.agentFlash > 0) s.agentFlash--;
    }

    function drawWorker(w) {
      const x = Math.round(w.x);
      const y = Math.round(w.y + (w.state === 'walking' ? w.bobOffset : 0));
      const boosted = w.boostUntil > Date.now();
      // Boost glow
      if (boosted) {
        const pulse = 0.5 + 0.3 * Math.sin(stateRef.current.frame * 0.4);
        ctx.fillStyle = `rgba(255, 69, 32, ${pulse})`;
        ctx.fillRect(x - 10, y + 4, 20, 4);
        // Speed lines
        ctx.fillStyle = 'rgba(255, 69, 32, 0.7)';
        ctx.fillRect(x - 14 + (w.facing > 0 ? -4 : 8), y - 8, 4, 2);
        ctx.fillRect(x - 12 + (w.facing > 0 ? -4 : 8), y - 4, 6, 2);
      }
      // Body (shirt)
      ctx.fillStyle = w.shirt;
      ctx.fillRect(x - 6, y - 14, 12, 14);
      // Pants
      ctx.fillStyle = '#2a2a2a';
      ctx.fillRect(x - 6, y, 12, 6);
      // Head
      ctx.fillStyle = '#f3d2a5';
      ctx.fillRect(x - 4, y - 22, 8, 8);
      // Hair top
      ctx.fillStyle = w.hair;
      ctx.fillRect(x - 4, y - 22, 8, 2);
      ctx.fillRect(x - 4, y - 20, 2, 2);
      ctx.fillRect(x + 2, y - 20, 2, 2);
      // Paper
      if (w.holding) {
        ctx.fillStyle = '#fff';
        const px = x + (w.facing > 0 ? 6 : -12);
        ctx.fillRect(px, y - 8, 6, 8);
        ctx.fillStyle = '#999';
        ctx.fillRect(px, y - 8, 6, 2);
      }
    }

    function drawDesk(d) {
      // Desk top
      ctx.fillStyle = '#8B6F47';
      ctx.fillRect(d.x, d.y, 64, 28);
      ctx.fillStyle = '#5a4530';
      ctx.fillRect(d.x, d.y, 64, 2);
      ctx.fillRect(d.x, d.y + 26, 64, 2);
      // CRT monitor
      ctx.fillStyle = '#cccccc';
      ctx.fillRect(d.x + 8, d.y - 16, 20, 18);
      ctx.fillStyle = '#3a5a3a';
      ctx.fillRect(d.x + 10, d.y - 14, 16, 12);
      ctx.fillStyle = '#88aa88';
      ctx.fillRect(d.x + 12, d.y - 12, 2, 2);
      ctx.fillRect(d.x + 16, d.y - 12, 8, 2);
      // Paper stack
      ctx.fillStyle = '#fff';
      ctx.fillRect(d.x + 36, d.y + 6, 16, 12);
      ctx.fillStyle = '#ddd';
      ctx.fillRect(d.x + 36, d.y + 6, 16, 2);
      ctx.fillRect(d.x + 36, d.y + 10, 16, 2);
      ctx.fillRect(d.x + 36, d.y + 14, 16, 2);
    }

    function drawCabinet(c) {
      ctx.fillStyle = '#9a9a9a';
      ctx.fillRect(c.x, c.y, 44, 36);
      ctx.fillStyle = '#666';
      ctx.fillRect(c.x, c.y, 44, 2);
      ctx.fillRect(c.x, c.y + 34, 44, 2);
      ctx.fillRect(c.x, c.y, 2, 36);
      ctx.fillRect(c.x + 42, c.y, 2, 36);
      // Drawer separators
      ctx.fillStyle = '#777';
      ctx.fillRect(c.x + 2, c.y + 10, 40, 2);
      ctx.fillRect(c.x + 2, c.y + 22, 40, 2);
      // Handles
      ctx.fillStyle = '#444';
      ctx.fillRect(c.x + 18, c.y + 4, 8, 2);
      ctx.fillRect(c.x + 18, c.y + 16, 8, 2);
      ctx.fillRect(c.x + 18, c.y + 28, 8, 2);
    }

    function drawPrinter() {
      const broken = stateRef.current.printerBroken;
      ctx.fillStyle = '#dcdcdc';
      ctx.fillRect(printer.x, printer.y, 44, 28);
      ctx.fillStyle = '#888';
      ctx.fillRect(printer.x, printer.y + 8, 44, 2);
      // Output paper — crumpled when broken
      ctx.fillStyle = broken ? '#f5d2c0' : '#fff';
      ctx.fillRect(printer.x + 4, printer.y + 16, 36, 12);
      // Status light — solid red when broken, blink when ok
      ctx.fillStyle = broken ? '#ff0000' : (Math.floor(stateRef.current.frame / 30) % 2) ? '#ff5500' : '#660000';
      ctx.fillRect(printer.x + 36, printer.y + 2, 4, 4);
      // Error overlay when broken
      if (broken) {
        ctx.font = 'bold 8px "JetBrains Mono", ui-monospace, monospace';
        const tw = ctx.measureText('PC LOAD LETTER').width;
        ctx.fillStyle = '#000';
        ctx.fillRect(printer.x - 4, printer.y - 14, tw + 8, 12);
        ctx.fillStyle = '#ff0000';
        ctx.textAlign = 'start';
        ctx.textBaseline = 'middle';
        ctx.fillText('PC LOAD LETTER', printer.x, printer.y - 8);
        ctx.textBaseline = 'alphabetic';
      }
    }

    function drawCoffee() {
      ctx.fillStyle = '#3a2a1a';
      ctx.fillRect(coffee_machine.x, coffee_machine.y, 28, 36);
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(coffee_machine.x + 6, coffee_machine.y + 8, 16, 12);
      ctx.fillStyle = '#aa6633';
      ctx.fillRect(coffee_machine.x + 8, coffee_machine.y + 10, 12, 8);
      // Drip light
      ctx.fillStyle = (Math.floor(stateRef.current.frame / 45) % 2) ? '#ff3300' : '#440000';
      ctx.fillRect(coffee_machine.x + 22, coffee_machine.y + 2, 2, 2);
    }

    function drawWaterCooler() {
      ctx.fillStyle = '#bcd9e6';
      ctx.fillRect(water_cooler.x + 4, water_cooler.y, 20, 20);
      ctx.fillStyle = '#5588aa';
      ctx.fillRect(water_cooler.x + 8, water_cooler.y + 4, 12, 12);
      ctx.fillStyle = '#888';
      ctx.fillRect(water_cooler.x, water_cooler.y + 20, 28, 16);
      ctx.fillStyle = '#444';
      ctx.fillRect(water_cooler.x + 12, water_cooler.y + 24, 4, 2);
    }

    function drawSpeech(w) {
      if (!w.speech || w.speechTimer <= 0) return;
      const x = Math.round(w.x);
      const y = Math.round(w.y - 28);
      ctx.font = '12px "JetBrains Mono", ui-monospace, monospace';
      const tw = ctx.measureText(w.speech).width;
      const bw = Math.ceil(tw + 16);
      const bh = 22;
      const bx = x - Math.floor(bw / 2);
      const by = y - bh;
      // Bubble
      ctx.fillStyle = '#fff';
      ctx.fillRect(bx, by, bw, bh);
      ctx.strokeStyle = '#222';
      ctx.lineWidth = 2;
      ctx.strokeRect(bx, by, bw, bh);
      // Tail
      ctx.fillStyle = '#fff';
      ctx.fillRect(x - 3, by + bh, 6, 2);
      ctx.fillStyle = '#222';
      ctx.fillRect(x - 3, by + bh + 2, 2, 2);
      ctx.fillRect(x + 1, by + bh + 2, 2, 2);
      ctx.fillRect(x - 1, by + bh + 4, 2, 2);
      // Text
      ctx.fillStyle = '#222';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(w.speech, x, by + bh / 2 + 1);
      ctx.textAlign = 'start';
      ctx.textBaseline = 'alphabetic';
      ctx.lineWidth = 1;
    }

    function drawNameTag(w) {
      ctx.font = '10px "JetBrains Mono", ui-monospace, monospace';
      ctx.fillStyle = '#222';
      ctx.textAlign = 'center';
      ctx.fillText(w.name, Math.round(w.x), Math.round(w.y) + 18);
      ctx.textAlign = 'start';
    }

    function drawSign(x, y, text, color = '#aa3322') {
      ctx.font = 'bold 10px "JetBrains Mono", ui-monospace, monospace';
      const tw = ctx.measureText(text).width;
      ctx.fillStyle = color;
      ctx.fillRect(x, y, tw + 12, 16);
      ctx.fillStyle = '#fff';
      ctx.textAlign = 'start';
      ctx.textBaseline = 'middle';
      ctx.fillText(text, x + 6, y + 9);
      ctx.textBaseline = 'alphabetic';
    }

    function draw() {
      const s = stateRef.current;
      // Floor
      ctx.fillStyle = '#e8d8b0';
      ctx.fillRect(0, 0, W, H);
      // Walls
      ctx.fillStyle = '#d8c8a0';
      ctx.fillRect(0, 0, W, 28);
      ctx.fillRect(0, H - 24, W, 24);
      // Subtle floor tiles
      ctx.strokeStyle = 'rgba(0,0,0,0.05)';
      ctx.lineWidth = 1;
      for (let x = 0; x <= W; x += 40) {
        ctx.beginPath();
        ctx.moveTo(x + 0.5, 28);
        ctx.lineTo(x + 0.5, H - 24);
        ctx.stroke();
      }
      for (let y = 28; y <= H - 24; y += 40) {
        ctx.beginPath();
        ctx.moveTo(0, y + 0.5);
        ctx.lineTo(W, y + 0.5);
        ctx.stroke();
      }

      // Furniture
      for (const c of s.cabinets) drawCabinet(c);
      drawCoffee();
      drawWaterCooler();
      for (const d of s.desks) drawDesk(d);
      drawPrinter();

      // Signs
      drawSign(16, 8, 'BREAK ROOM');
      drawSign(W - 130, 8, 'PRINTING');
      drawSign(W - 110, H - 22, 'FILING');

      // Workers — sort by y for depth
      const sortedWorkers = [...s.workers].sort((a, b) => a.y - b.y);
      for (const w of sortedWorkers) drawWorker(w);
      for (const w of sortedWorkers) drawNameTag(w);
      for (const w of sortedWorkers) drawSpeech(w);

      // Konami / agent flash overlay
      if (s.agentFlash > 0) {
        const t = s.agentFlash / 60;
        ctx.fillStyle = `rgba(255, 69, 32, ${0.45 * t})`;
        ctx.fillRect(0, 0, W, H);
        ctx.font = 'bold 32px "JetBrains Mono", ui-monospace, monospace';
        ctx.fillStyle = `rgba(255, 255, 255, ${t})`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText('stitch_agent visited.', W / 2, H / 2 - 16);
        ctx.font = '14px "JetBrains Mono", ui-monospace, monospace';
        ctx.fillText('+50 TASKS FILED IN 0.4 SECONDS.', W / 2, H / 2 + 16);
        ctx.textAlign = 'start';
        ctx.textBaseline = 'alphabetic';
      }
    }

    let raf;
    function loop() {
      tick();
      draw();
      raf = requestAnimationFrame(loop);
    }
    loop();

    // Restore best from localStorage
    let storedBest = 0;
    try {
      storedBest = parseInt(localStorage.getItem('stitch_office_best') || '0', 10) || 0;
    } catch (_) {}
    setBestEver(storedBest);

    let lastMilestoneAt = 0;
    const syncId = setInterval(() => {
      const s = stateRef.current;
      setTasks(s.completedCount);
      setCoffee(s.coffeeCount);
      const target = 4847392;
      const remaining = target - s.completedCount;
      const tasksPerYear = Math.max(1, s.completedCount / Math.max(0.001, s.frame / (60 * 60 * 60 * 24)));
      const yrs = Math.min(99, Math.max(1, Math.round(remaining / Math.max(1, tasksPerYear))));
      setYears(yrs > 99 ? 99 : yrs);

      // Best ever
      if (s.completedCount > storedBest) {
        storedBest = s.completedCount;
        try { localStorage.setItem('stitch_office_best', String(storedBest)); } catch (_) {}
        setBestEver(storedBest);
      }

      // Milestone checks
      let unlocked = null;
      for (const m of MILESTONES) {
        if (s.completedCount >= m.at && m.at > lastMilestoneAt) {
          unlocked = m;
        }
      }
      if (unlocked) {
        lastMilestoneAt = unlocked.at;
        setAchievement({ at: unlocked.at, label: unlocked.label });
        if (unlocked.cta) setShowCtaBanner(true);
      }
    }, 300);

    function onClick(e) {
      const rect = canvas.getBoundingClientRect();
      const sx = (e.clientX - rect.left) * (W / rect.width);
      const sy = (e.clientY - rect.top) * (H / rect.height);
      const s = stateRef.current;
      let best = null;
      let bestDist = 24;
      for (const w of s.workers) {
        const dx = sx - w.x;
        const dy = sy - w.y;
        const d = Math.sqrt(dx * dx + dy * dy);
        if (d < bestDist) {
          bestDist = d;
          best = w;
        }
      }
      if (best) {
        best.boostUntil = Date.now() + 3000;
        // 40% chance to also speak — don't spam bubbles on every click
        if (Math.random() < 0.4) {
          best.speech = PHRASES[Math.floor(Math.random() * PHRASES.length)];
          best.speechTimer = 200;
        }
      }
    }
    canvas.addEventListener('click', onClick);

    // Konami code — summon stitch_agent for a +50 task instant burst
    const KONAMI = ['arrowup', 'arrowup', 'arrowdown', 'arrowdown', 'arrowleft', 'arrowright', 'arrowleft', 'arrowright', 'b', 'a'];
    let konamiPos = 0;
    function onKey(e) {
      const key = e.key.toLowerCase();
      if (key === KONAMI[konamiPos]) {
        konamiPos++;
        if (konamiPos === KONAMI.length) {
          konamiPos = 0;
          stateRef.current.completedCount += 50;
          stateRef.current.agentFlash = 60;
        }
      } else {
        konamiPos = key === KONAMI[0] ? 1 : 0;
      }
    }
    window.addEventListener('keydown', onKey);

    return () => {
      cancelAnimationFrame(raf);
      clearInterval(syncId);
      canvas.removeEventListener('click', onClick);
      window.removeEventListener('keydown', onKey);
    };
  }, []);

  return (
    <div style={{
      minHeight: '100vh',
      background: '#1a1a1a',
      color: '#e8d8b0',
      fontFamily: 'var(--font-mono)',
      padding: '24px 16px 64px',
    }}>
      <div style={{
        maxWidth: 920, margin: '0 auto 24px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        gap: 16, flexWrap: 'wrap',
        fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase',
        color: '#a39472',
      }}>
        <a href="/" style={{ color: '#e8d8b0' }}>← stitch_</a>
        <span>STITCH HRMS / FILING DEPT / TERMINAL 3</span>
        <span>EST. 1997</span>
      </div>

      <div style={{
        maxWidth: 920, margin: '0 auto',
        padding: '20px 20px 28px',
        background: '#3a342c',
        borderRadius: 18,
        boxShadow: 'inset 0 0 24px rgba(0,0,0,0.6), 0 12px 48px rgba(0,0,0,0.5)',
        position: 'relative',
      }}>
        <div style={{
          padding: 8,
          background: '#0a0a0a',
          borderRadius: 6,
          position: 'relative',
        }}>
          <canvas
            ref={canvasRef}
            width={800}
            height={500}
            style={{
              display: 'block',
              width: '100%',
              height: 'auto',
              background: '#e8d8b0',
              cursor: 'crosshair',
            }}
          />
          <div style={{
            position: 'absolute', inset: 8,
            pointerEvents: 'none',
            background: 'repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 4px)',
            mixBlendMode: 'multiply',
          }}></div>
        </div>
        <div style={{
          position: 'absolute', bottom: 6, right: 16,
          display: 'flex', gap: 8,
        }}>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#222', border: '1px solid #555' }}></div>
          <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#222', border: '1px solid #555' }}></div>
        </div>
      </div>

      <div style={{
        maxWidth: 920, margin: '24px auto',
        padding: '20px 24px',
        background: '#000',
        border: '1px solid #2a2a2a',
        color: '#7fc97a',
        fontSize: 13, lineHeight: 1.8,
      }}>
        <div style={{ color: '#a39472', marginBottom: 8 }}>{'>'} STATUS REPORT — REFRESHED EVERY 300MS</div>
        <div>TASKS FILED ............ {String(tasks).padStart(7)} / 4,847,392</div>
        <div>BEST EVER (LOCAL) ...... {String(bestEver).padStart(7)} {tasks > 0 && tasks === bestEver ? <span style={{ color: '#ffaa00' }}>// NEW PERSONAL BEST</span> : null}</div>
        <div>COFFEE CONSUMED ........ {String(coffee).padStart(7)} CUPS</div>
        <div>EST. TIME TO INBOX ZERO  {String(years).padStart(7)} YEARS</div>
        <div>AGENTS ON STAFF ........ {String(0).padStart(7)} <span style={{ color: '#ff7755' }}>// VACANCY</span></div>
        {achievement && (
          <div style={{ marginTop: 8, color: '#ffaa00' }}>
            {'>'} ACHIEVEMENT @ {achievement.at} TASKS — {achievement.label}
          </div>
        )}
        <div style={{ marginTop: 8, color: '#a39472', fontSize: 12 }}>
          {'>'} CLICK A WORKER FOR A 3-SECOND <span style={{ color: '#ff7755' }}>SPEED BOOST</span>. RACK UP TASKS. BEAT YOUR BEST.
        </div>
      </div>

      {showCtaBanner && (
        <div style={{
          maxWidth: 920, margin: '0 auto 16px',
          padding: '16px 24px',
          background: '#ff4520',
          color: '#fff',
          fontFamily: 'var(--font-sans)',
          fontSize: 15, fontWeight: 500,
          textAlign: 'center',
        }}>
          You really hit 2,000? OK that's enough. <a href="/#contact" style={{ color: '#fff', textDecoration: 'underline' }}>Hire stitch_ →</a>
        </div>
      )}

      <div style={{
        maxWidth: 920, margin: '32px auto 0',
        padding: 32,
        background: '#e8d8b0',
        color: '#1a1a1a',
        textAlign: 'center',
      }}>
        <h2 style={{
          fontFamily: 'var(--font-sans)',
          fontSize: 32, fontWeight: 800, lineHeight: 1.05,
          letterSpacing: '-0.025em', margin: '0 0 12px',
        }}>
          Skip {years} years of filing.
        </h2>
        <p style={{
          fontFamily: 'var(--font-sans)',
          fontSize: 16, color: '#525252', margin: '0 0 24px',
          maxWidth: 500, marginLeft: 'auto', marginRight: 'auto',
        }}>
          Brenda, Ron, Linda, Phil, Diane, and Greg can have their afternoons back. Six weeks, agents in production, automations in their hands.
        </p>
        <a href="/#contact" style={{
          fontFamily: 'var(--font-sans)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '0 32px', height: 56,
          background: '#0a0a0a', color: '#fff',
          textDecoration: 'none', fontWeight: 500, fontSize: 16,
        }}>
          Hire stitch_ instead
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>
      </div>

      <div style={{
        maxWidth: 920, margin: '48px auto 0',
        textAlign: 'center', fontSize: 11, color: '#5a5040', letterSpacing: '0.06em',
      }}>
        STITCH HRMS PRO 4.7 © 1997 STITCH SOFTWARE INC.<br />
        AS SEEN ON A CRT NEAR YOU.
      </div>
    </div>
  );
};