// xp.jsx — Windows XP mode for oscomarch.com
// Renders a full XP desktop with draggable IE-style windows, taskbar, Start menu.

const { useState: xS, useEffect: xE, useRef: xR } = React;

/* ═══════════════════════════════════════════════════════
   CSS — injected once when the file loads
═══════════════════════════════════════════════════════ */

(function injectXPStyles() {
  if (document.getElementById('xp-styles')) return;
  const s = document.createElement('style');
  s.id = 'xp-styles';
  s.textContent = `
    /* Desktop — the real Bliss photo, with a gradient fallback that loads first */
    .xp-root {
      position: fixed; inset: 0;
      background:
        url('bliss.jpg') center/cover no-repeat,
        linear-gradient(180deg, #2d6cb8 0%, #4a82c8 14%, #79a7d8 32%, #b7d2e7 50%, #c8d99e 56%, #6ea744 62%, #4a8a30 100%);
      background-color: #2d6cb8;
      font-family: Tahoma, 'Trebuchet MS', Verdana, sans-serif;
      overflow: hidden;
      z-index: 1000;
      user-select: none;
      /* Authentic XP arrow cursor */
      cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M1 1 L1 21 L6 17 L9.5 25 L12 24 L8.5 16 L15 16 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") 1 1, default;
    }
    .xp-root, .xp-root * { box-sizing: border-box; }
    /* Hand cursor on clickable surfaces */
    .xp-icon, .xp-tab, .xp-start, .xp-tool-btn, .xp-tbar-btn, .xp-sm-item, .xp-sm-btn, .xp-menu-item, .xp-go-btn, .xp-ctx-item, .xp-launch-btn {
      cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='28' viewBox='0 0 24 28'%3E%3Cpath d='M7 4 L7 13 L5 13 L5 16 L4 17 L4 21 L6 23 L10 25 L18 25 L20 21 L20 14 L18 12 L17 12 L17 11 L16 11 L16 10 L14 10 L14 4 Z' fill='white' stroke='black' stroke-width='1.2' stroke-linejoin='miter'/%3E%3C/svg%3E") 7 1, pointer !important;
    }
    /* Text cursor in text inputs */
    .xp-addr-input { cursor: text !important; }
    /* Move cursor on title bars */
    .xp-tbar { cursor: move !important; }

    /* Desktop icons (left column) */
    .xp-icons {
      position: absolute; top: 14px; left: 8px;
      display: flex; flex-direction: column; gap: 6px;
      z-index: 1;
      width: 84px;
    }
    .xp-icon {
      width: 84px;
      padding: 4px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: pointer; color: white;
      border-radius: 2px;
    }
    .xp-icon-img {
      width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.55));
      line-height: 0;
      overflow: visible;
    }
    .xp-icon .label {
      font-size: 11px;
      color: #fff;
      text-shadow: 1px 1px 1px rgba(0,0,0,0.9), -1px 1px 1px rgba(0,0,0,0.9), 1px -1px 1px rgba(0,0,0,0.9), -1px -1px 1px rgba(0,0,0,0.9);
      padding: 1px 4px;
      line-height: 1.15;
      width: 100%;
      text-align: center;
      word-break: break-word;
      hyphens: auto;
    }
    .xp-icon.selected .label {
      background: #316ac5;
      text-shadow: none;
      outline: 1px dotted rgba(255,255,255,0.6);
    }
    .xp-icon:hover { background: rgba(49, 106, 197, 0.15); }

    /* ── Window ── */
    .xp-win {
      position: absolute;
      background: #ece9d8;
      border: 1px solid #0058e6;
      border-top: none;
      box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
      display: flex; flex-direction: column;
      min-width: 380px; min-height: 240px;
      border-radius: 0 0 3px 3px;
    }
    .xp-win.active .xp-tbar {
      background: linear-gradient(to bottom, #0058e6 0%, #2e87f9 8%, #2682f5 40%, #1a6dd9 88%, #084dc7 100%);
    }
    .xp-win:not(.active) .xp-tbar {
      background: linear-gradient(to bottom, #6e96d9 0%, #7eaae3 40%, #6e96d9 100%);
    }
    .xp-tbar {
      display: flex; align-items: center; gap: 6px;
      padding: 3px 4px 3px 6px;
      color: white; font-weight: bold; font-size: 12px;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.45);
      cursor: move;
      border-radius: 6px 6px 0 0;
      height: 26px; flex-shrink: 0;
    }
    .xp-tbar-icon { width: 16px; height: 16px; flex-shrink: 0; }
    .xp-tbar-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .xp-tbar-btns { display: flex; gap: 2px; flex-shrink: 0; }
    .xp-tbar-btn {
      width: 22px; height: 20px;
      border: 1px solid rgba(255,255,255,0.7);
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px; font-family: Marlett, sans-serif;
      display: flex; align-items: center; justify-content: center;
      color: white; font-weight: bold;
      padding: 0; line-height: 1;
    }
    .xp-tbar-btn.min { background: linear-gradient(to bottom, #4691f3 0%, #145ddc 100%); }
    .xp-tbar-btn.max { background: linear-gradient(to bottom, #4691f3 0%, #145ddc 100%); }
    .xp-tbar-btn.close { background: linear-gradient(to bottom, #f88176 0%, #c43028 100%); }
    .xp-tbar-btn:hover { filter: brightness(1.18); }
    .xp-tbar-btn:active { filter: brightness(0.85); }

    /* Menu bar */
    .xp-menu {
      display: flex; gap: 0;
      padding: 2px 4px;
      background: #ece9d8;
      border-bottom: 1px solid #d4d0c8;
      font-size: 12px;
      flex-shrink: 0;
    }
    .xp-menu-item { padding: 3px 8px; cursor: default; color: #1c1812; border: 1px solid transparent; }
    .xp-menu-item:hover { background: #316ac5; color: white; border: 1px solid #2a5cbf; }

    /* Toolbar */
    .xp-toolbar {
      display: flex; align-items: center; gap: 2px;
      padding: 4px 4px;
      background: linear-gradient(to bottom, #f5f4ea 0%, #e6e3d4 100%);
      border-bottom: 1px solid #d4d0c8;
      flex-shrink: 0;
    }
    .xp-tool-btn {
      padding: 4px 10px; font-size: 12px;
      background: transparent; border: 1px solid transparent;
      cursor: pointer; color: #1c1812;
      font-family: Tahoma; font-weight: normal;
      display: flex; align-items: center; gap: 4px;
    }
    .xp-tool-btn:hover:not(:disabled) { background: #e8e6da; border: 1px solid #8a98c4; }
    .xp-tool-btn:active:not(:disabled) { background: #d4d0c8; border: 1px solid #5b78b0; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.15); }
    .xp-tool-btn:disabled { color: #999; cursor: default; }

    /* Address bar */
    .xp-addr {
      display: flex; align-items: center; gap: 4px;
      padding: 4px 6px;
      background: #ece9d8;
      border-bottom: 1px solid #d4d0c8;
      font-size: 12px;
      flex-shrink: 0;
    }
    .xp-addr-lbl { padding: 0 4px; color: #2c2c2c; }
    .xp-addr-input {
      flex: 1; padding: 2px 6px; font-size: 12px;
      font-family: Tahoma;
      border: 1px solid #7f9db9;
      background: white; height: 22px;
      color: #1c1812;
    }
    .xp-go-btn {
      padding: 2px 14px; font-size: 12px;
      border: 1px solid #aca899;
      background: linear-gradient(to bottom, #f6f5e7 0%, #ece9d8 100%);
      cursor: pointer; font-family: Tahoma;
    }
    .xp-go-btn:hover { border-color: #5b78b0; }

    /* Window body (where page content renders) */
    .xp-body {
      flex: 1;
      background: white;
      overflow: auto;
      font-family: Tahoma, 'Trebuchet MS', Verdana, sans-serif;
      font-size: 13px;
      color: #000;
      padding: 18px 22px;
      line-height: 1.55;
    }
    .xp-body a { color: #0000ee !important; text-decoration: underline !important; cursor: pointer; }
    .xp-body a:visited { color: #551a8b !important; }
    .xp-body a:hover { color: #ee0000 !important; }
    .xp-body h1 { color: #003399; font-family: Tahoma; font-size: 20px; font-weight: bold; margin: 0 0 8px; }
    .xp-body h2 { color: #003399; font-family: Tahoma; font-size: 17px; font-weight: bold; margin: 0 0 6px; }
    .xp-body h3 { color: #1c1812; font-family: Tahoma; font-size: 14px; margin: 12px 0 4px; }
    .xp-body p { margin: 0 0 0.9em; }
    .xp-body hr { border: none; border-top: 1px solid #ccc; margin: 10px 0; }

    /* Override existing page component styles inside windows */
    .xp-body .topbar,
    .xp-body .colophon,
    .xp-body .theme-toggle,
    .xp-body .tweaks-panel,
    .xp-body .tweaks-toggle { display: none !important; }
    .xp-body .page { max-width: none; margin: 0; padding: 0; }
    .xp-body .home-name { font-size: 22px; color: #003399; margin-bottom: 6px; }
    .xp-body .home-tag { font-size: 13px; color: #333; margin-bottom: 16px; max-width: none; }
    .xp-body .section-title { font-size: 20px; color: #003399; }
    .xp-body .section-sub { font-size: 13px; color: #333; font-style: italic; margin-bottom: 18px; }
    .xp-body .pill {
      background: linear-gradient(to bottom, #fdfdfd 0%, #e8e8e8 100%) !important;
      border: 1px solid #7f9db9 !important;
      color: #000 !important;
      border-radius: 2px;
      font-family: Tahoma;
    }
    .xp-body .home-rule { background: #d4d0c8; margin: 12px 0 18px; }
    .xp-body .entry, .xp-body .home-writing-item, .xp-body .xp-item, .xp-body .book {
      border-bottom: 1px dotted #999;
    }
    .xp-body .home-section-label { color: #666; }
    .xp-body .home-writing-date, .xp-body .entry-date, .xp-body .xp-when {
      color: #555 !important;
    }
    .xp-body .home-writing-title, .xp-body .entry-title { color: #000 !important; }
    .xp-body .xp-role { color: #003399; }
    .xp-body .xp-where { color: #444; font-style: italic; }

    /* Status bar */
    .xp-statusbar {
      display: flex; align-items: center;
      padding: 2px 6px;
      background: #ece9d8;
      border-top: 1px solid #d4d0c8;
      font-size: 11px;
      color: #1c1812;
      height: 20px;
      flex-shrink: 0;
    }
    .xp-statusbar .left { flex: 1; }
    .xp-statusbar .right { padding-left: 12px; border-left: 1px solid #aca899; }

    /* ── Taskbar ── */
    .xp-taskbar {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 30px;
      background: linear-gradient(to bottom, #245edb 0%, #3f8cf4 8%, #245edb 14%, #245edb 92%, #1941a5 100%);
      display: flex; align-items: center;
      box-shadow: 0 -1px 0 #0c2da3 inset, 0 -2px 0 rgba(255,255,255,0.15) inset;
      z-index: 2000; /* above windows so it always stays visible */
    }
    .xp-start {
      display: flex; align-items: center; gap: 8px;
      height: 100%; padding: 0 22px 0 10px;
      background: linear-gradient(to bottom, #338a37 0%, #61c463 8%, #338a37 22%, #2a7f2e 60%, #11461e 92%, #338a37 100%);
      border-radius: 0 12px 12px 0;
      color: white; font-weight: bold; font-style: italic; font-size: 15px;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
      border: none;
      font-family: Tahoma;
    }
    .xp-start.open { filter: brightness(0.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), inset 2px 2px 4px rgba(0,0,0,0.4); }
    .xp-start-flag {
      width: 18px; height: 18px;
      object-fit: contain;
      filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.35));
    }
    .xp-tabs {
      display: flex; gap: 3px; padding: 0 6px; flex: 1; overflow-x: hidden;
      align-items: center; height: 100%;
    }
    .xp-tab {
      height: 22px; padding: 0 10px;
      display: flex; align-items: center; gap: 6px;
      background: linear-gradient(to bottom, #3f8cf4 0%, #1c5dd2 100%);
      color: white; font-size: 11px;
      border: 1px solid #1941a5;
      border-radius: 3px;
      cursor: pointer;
      min-width: 130px; max-width: 200px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
      text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
      font-family: Tahoma;
    }
    .xp-tab.active {
      background: linear-gradient(to bottom, #1941a5 0%, #2a72eb 100%);
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    }
    .xp-tab:hover:not(.active) { filter: brightness(1.12); }
    .xp-tab .ti { width: 14px; height: 14px; flex-shrink: 0; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3)); }

    .xp-tray {
      display: flex; align-items: center; gap: 8px;
      height: 100%; padding: 0 12px;
      background: linear-gradient(to bottom, #0e90d6 0%, #4cc4f3 9%, #0c8ad0 60%, #0d6dad 92%);
      box-shadow: inset 1px 0 0 rgba(0,0,0,0.2);
      color: white; font-size: 11px;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    }
    .xp-tray-icons { display: flex; gap: 6px; color: white; font-size: 12px; }

    /* ── Start menu (authentic XP Luna style) ── */
    .xp-startmenu {
      position: absolute; bottom: 30px; left: 0;
      width: 420px;
      background: white;
      border: 1px solid #0058e6;
      border-radius: 8px 8px 0 0;
      box-shadow: 2px -2px 12px rgba(0,0,0,0.5);
      display: flex; flex-direction: column;
      animation: xpUp 160ms ease;
      overflow: hidden;
      z-index: 9000; /* must always be above windows */
      color: #1c1812;
    }
    @keyframes xpUp { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    .xp-sm-head {
      background: linear-gradient(to bottom, #2982f4 0%, #0a5cd8 50%, #155bc3 100%);
      padding: 10px 14px;
      color: white; font-weight: bold;
      display: flex; align-items: center; gap: 12px;
      border-bottom: 2px solid #ed9b25;
      box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
    }
    .xp-sm-avatar {
      width: 42px; height: 42px;
      background: white;
      border: 2px solid white;
      border-radius: 4px; flex-shrink: 0;
      padding: 4px;
      object-fit: contain;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .xp-sm-username { font-size: 14px; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
    .xp-sm-status { font-size: 10px; opacity: 0.85; font-weight: normal; }

    .xp-sm-cols {
      display: flex;
      flex: 1;
    }
    .xp-sm-col {
      padding: 8px 0;
      display: flex; flex-direction: column;
    }
    .xp-sm-col.left {
      flex: 1.05;
      background: white;
      border-right: 1px solid #c8d2e0;
    }
    .xp-sm-col.right {
      flex: 1;
      background: linear-gradient(to right, #d3e5fa 0%, #cbe0f7 100%);
      padding: 8px 0;
    }
    .xp-sm-section-label {
      font-size: 10px;
      color: #777;
      padding: 4px 14px;
      font-style: italic;
      letter-spacing: 0.02em;
    }
    .xp-sm-item {
      padding: 5px 14px;
      cursor: pointer; font-size: 12px;
      display: flex; align-items: center; gap: 10px;
      color: #000;
      min-height: 28px;
    }
    .xp-sm-item:hover { background: #316ac5; color: white; }
    .xp-sm-item:hover .sm-desc { color: rgba(255,255,255,0.85); }
    .xp-sm-item.pinned { padding: 6px 14px; }
    .xp-sm-item .smi {
      width: 24px; height: 24px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .xp-sm-item .smi.sm-emoji {
      font-size: 14px;
      width: 22px; height: 22px;
      background: #ece9d8;
      border-radius: 3px;
      color: #1c1812;
      font-weight: bold;
    }
    .xp-sm-item:hover .smi.sm-emoji { color: white; background: rgba(255,255,255,0.2); }
    .sm-text { display: flex; flex-direction: column; line-height: 1.25; }
    .sm-name { font-size: 12px; font-weight: bold; }
    .sm-desc { font-size: 10px; color: #666; }
    .xp-sm-divider { height: 1px; background: #d4d0c8; margin: 4px 12px; box-shadow: 0 1px 0 white; }

    .xp-sm-foot {
      background: linear-gradient(to bottom, #2680ee 0%, #155bc3 100%);
      padding: 8px 14px;
      display: flex; justify-content: flex-end; gap: 6px;
      border-top: 2px solid #ed9b25;
    }
    .xp-sm-btn {
      padding: 6px 14px;
      background: transparent;
      border: none;
      cursor: pointer; font-size: 11px;
      color: white;
      display: flex; align-items: center; gap: 8px;
      font-family: Tahoma;
      text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
      border-radius: 3px;
    }
    .xp-sm-btn:hover { background: rgba(255,255,255,0.18); }
    .xp-sm-btn .icon {
      width: 18px; height: 18px;
      background: radial-gradient(circle at 35% 35%, #ff7d70 0%, #c43028 60%, #7a1810 100%);
      border-radius: 50%;
      position: relative;
    }
    .xp-sm-btn .icon::before {
      content: ''; position: absolute;
      left: 50%; top: 3px; width: 2px; height: 7px;
      background: white; transform: translateX(-50%);
      border-radius: 1px;
    }
    .xp-sm-btn .icon-key {
      width: 18px; height: 18px;
      background: linear-gradient(135deg, #f5f5f5 0%, #b8b8b8 100%);
      border-radius: 3px;
      position: relative;
    }
    .xp-sm-btn .icon-key::before {
      content: ''; position: absolute;
      left: 4px; top: 4px; width: 10px; height: 10px;
      border: 2px solid #1c1812; border-radius: 50%;
    }

    /* Welcome popup */
    .xp-welcome {
      position: absolute; bottom: 38px; right: 10px;
      width: 280px; padding: 10px 28px 10px 36px;
      background: linear-gradient(to bottom, #ffffd0 0%, #fef89a 100%);
      border: 1px solid #888;
      border-radius: 4px;
      box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
      font-size: 11px; color: #1c1812;
      animation: xpFade 600ms ease;
      z-index: 5;
      line-height: 1.4;
    }
    .xp-welcome::before {
      content: 'i'; position: absolute; top: 10px; left: 10px;
      width: 18px; height: 18px;
      background: linear-gradient(to bottom, #4488ff 0%, #1a4fbf 100%);
      color: white; border-radius: 50%;
      font-family: Georgia, serif; font-style: italic; font-weight: bold;
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
    }
    .xp-welcome strong { display: block; margin-bottom: 4px; color: #1c1812; font-size: 12px; }
    .xp-welcome .x {
      position: absolute; top: 4px; right: 5px;
      cursor: pointer; color: #555;
      width: 14px; height: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: bold;
    }
    .xp-welcome .x:hover { color: #c43028; }
    @keyframes xpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

    /* Bottom-right corner watermark — Microsoft Windows XP branding */
    .xp-watermark {
      position: absolute;
      right: 14px;
      bottom: 42px;
      display: flex; align-items: center; gap: 10px;
      color: white;
      font-family: Tahoma, sans-serif;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
      pointer-events: none;
      z-index: 2;
      opacity: 0.85;
    }
    .xp-watermark img { width: 44px; height: 44px; filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.6)); }
    .xp-watermark .wm-text { line-height: 1.3; }
    .xp-watermark .wm-tag { font-size: 16px; font-weight: bold; }
    .xp-watermark .wm-sub { font-size: 11px; font-style: italic; opacity: 0.9; }

    /* Right-click context menu */
    .xp-ctx {
      position: fixed;
      background: linear-gradient(to right, #ece9d8 0%, #ece9d8 24px, #f5f4ea 24px);
      border: 1px solid #707070;
      box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
      padding: 2px;
      font-family: Tahoma;
      font-size: 11px;
      z-index: 5000;
      min-width: 180px;
      color: #1c1812;
    }
    .xp-ctx-item {
      padding: 4px 22px 4px 32px;
      cursor: pointer;
      color: #1c1812;
      position: relative;
      white-space: nowrap;
    }
    .xp-ctx-item:hover { background: #316ac5; color: white; }
    .xp-ctx-item.disabled { color: #999; cursor: default; }
    .xp-ctx-item.disabled:hover { background: transparent; color: #999; }
    .xp-ctx-item.bold { font-weight: bold; }
    .xp-ctx-item .acc { float: right; opacity: 0.7; margin-left: 24px; }
    .xp-ctx-item.has-arrow::after {
      content: '▶'; position: absolute; right: 6px; top: 4px; font-size: 8px; color: #777;
    }
    .xp-ctx-item:hover.has-arrow::after { color: white; }
    .xp-ctx-sep { height: 1px; background: #c0c0c0; margin: 3px 1px 3px 28px; box-shadow: 0 1px 0 white; }

    /* BSOD overlay */
    .xp-bsod {
      position: fixed; inset: 0;
      background: #0a3286;
      color: white;
      font-family: 'Lucida Console', 'Courier New', monospace;
      font-size: 14px;
      padding: 80px 60px;
      z-index: 9999;
      line-height: 1.5;
      animation: bsodFlash 0.1s;
    }
    @keyframes bsodFlash { from { background: white; } to { background: #0a3286; } }
    .xp-bsod h1 { font-size: 18px; background: white; color: #0a3286; padding: 0 8px; display: inline-block; margin-bottom: 20px; font-weight: bold; }
    .xp-bsod p { margin-bottom: 14px; }
    .xp-bsod .blink { animation: blink 1s steps(2) infinite; }
    @keyframes blink { 50% { opacity: 0; } }

    /* Matrix rain */
    .xp-matrix {
      position: fixed; inset: 0;
      background: black;
      z-index: 9999;
      overflow: hidden;
    }
    .xp-matrix canvas { display: block; }
    .xp-matrix-hint {
      position: absolute; bottom: 20px; right: 20px;
      color: #0f0; font-family: monospace; font-size: 12px;
      text-shadow: 0 0 5px #0f0;
      opacity: 0.7;
    }

    /* Snow particles */
    .xp-snow {
      position: fixed; inset: 0;
      pointer-events: none;
      z-index: 200;
      overflow: hidden;
    }
    .xp-snowflake {
      position: absolute;
      color: white;
      font-size: 12px;
      text-shadow: 0 0 3px rgba(255,255,255,0.7);
      animation: snowFall linear infinite;
    }
    @keyframes snowFall {
      0% { transform: translateY(-20px) translateX(0); opacity: 0; }
      10% { opacity: 0.9; }
      90% { opacity: 0.9; }
      100% { transform: translateY(110vh) translateX(40px); opacity: 0; }
    }

    /* Properties dialog */
    .xp-props-dialog {
      position: fixed;
      width: 400px;
      background: #ece9d8;
      border: 1px solid #0058e6;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
      z-index: 4000;
      font-family: Tahoma;
      font-size: 11px;
      border-radius: 0 0 3px 3px;
      color: #1c1812;
    }
    .xp-props-body { padding: 14px 18px; color: #1c1812; }
    .xp-props-body p { margin-bottom: 8px; line-height: 1.5; color: #1c1812; }
    .xp-props-body b { color: #000; }
    .xp-props-tabs { display: flex; gap: 0; padding: 6px 8px 0; border-bottom: 1px solid #aca899; background: #ece9d8; }
    .xp-props-tab {
      padding: 4px 10px; background: #f5f4ea; border: 1px solid #aca899;
      border-bottom: none; margin-right: 1px; font-size: 11px; cursor: pointer;
    }
    .xp-props-tab.on { background: white; border-bottom: 1px solid white; margin-bottom: -1px; }
    .xp-props-actions { padding: 8px 14px; display: flex; gap: 6px; justify-content: flex-end; border-top: 1px solid #aca899; background: #ece9d8; }
    .xp-props-actions button {
      padding: 4px 16px; font-size: 11px; font-family: Tahoma;
      background: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%);
      border: 1px solid #003c74; border-radius: 3px; cursor: pointer; min-width: 70px;
    }

    /* Run dialog */
    .xp-run-dialog {
      position: fixed; left: 50%; top: 38%; transform: translateX(-50%);
      width: 420px;
      background: #ece9d8;
      border: 1px solid #0058e6;
      box-shadow: 3px 3px 12px rgba(0,0,0,0.4);
      z-index: 4000;
      font-family: Tahoma;
      font-size: 11px;
    }
    .xp-run-body { padding: 16px 18px; color: #1c1812; }
    .xp-run-body p { font-size: 11px; line-height: 1.5; margin-bottom: 10px; color: #1c1812; }
    .xp-run-row { display: flex; gap: 8px; align-items: center; }
    .xp-run-row label { font-size: 11px; padding: 0 4px; color: #1c1812; }
    .xp-run-row input {
      flex: 1; padding: 3px 6px; font-family: Tahoma; font-size: 11px;
      border: 1px solid #7f9db9; background: white;
      color: #1c1812;
    }
    .xp-run-dialog { color: #1c1812; }

    /* XP launcher in normal mode — bottom-right corner, looks like the XP watermark */
    .xp-launch-btn {
      position: fixed;
      right: 18px;
      bottom: 16px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 6px 10px 6px 8px;
      border-radius: 4px;
      transition: background 0.18s, transform 0.15s, opacity 0.18s;
      z-index: 99;
      display: flex; align-items: center; gap: 8px;
      line-height: 0;
      opacity: 0.55;
    }
    .xp-launch-btn:hover {
      background: var(--bg-soft);
      opacity: 1;
      transform: translateY(-1px);
    }
    .xp-launch-btn img {
      width: 22px; height: 22px;
      display: block;
      image-rendering: -webkit-optimize-contrast;
    }
    .xp-launch-btn .xp-launch-lbl {
      font-family: Verdana, sans-serif;
      display: flex; flex-direction: column;
      align-items: flex-start;
      line-height: 1.1;
      color: var(--ink-faint);
    }
    .xp-launch-btn .xp-launch-tag { font-size: 9px; font-weight: bold; }
    .xp-launch-btn .xp-launch-sub { font-size: 9px; font-style: italic; opacity: 0.85; }
    .xp-launch-btn:hover .xp-launch-lbl { color: var(--accent); }
    @media (max-width: 540px) {
      .xp-launch-btn { right: 12px; bottom: 12px; }
    }
  `;
  document.head.appendChild(s);
})();

/* ═══════════════════════════════════════════════════════
   AUTHENTIC XP-STYLE SVG ICONS
   Hand-crafted to closely match the real Luna icon set.
═══════════════════════════════════════════════════════ */

// All icons accept { size = 32 } and render a viewBox 0 0 32 32 SVG.

function MyComputerSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="mc-frame" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#f5ecd6" />
          <stop offset="1" stopColor="#a39476" />
        </linearGradient>
        <linearGradient id="mc-screen" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5da8dd" />
          <stop offset="0.55" stopColor="#3b7fc1" />
          <stop offset="1" stopColor="#1f5994" />
        </linearGradient>
        <linearGradient id="mc-stand" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#d9cba6" />
          <stop offset="1" stopColor="#897962" />
        </linearGradient>
      </defs>
      {/* Stand base */}
      <path d="M9 27 L23 27 L21 24 L11 24 Z" fill="url(#mc-stand)" stroke="#4d3e26" strokeWidth="0.5" />
      <rect x="14" y="20" width="4" height="4" fill="#b0a079" stroke="#4d3e26" strokeWidth="0.5" />
      {/* Monitor frame */}
      <rect x="3" y="3" width="26" height="19" rx="1.5" fill="url(#mc-frame)" stroke="#4d3e26" strokeWidth="0.8" />
      {/* Screen */}
      <rect x="5" y="5" width="22" height="15" rx="0.5" fill="url(#mc-screen)" />
      {/* Sky/hill on screen (mini bliss) */}
      <path d="M5 14 Q11 11 17 13 T27 14 L27 20 L5 20 Z" fill="#6da94a" opacity="0.85" />
      <ellipse cx="9" cy="8" rx="2.2" ry="0.8" fill="white" opacity="0.5" />
      <ellipse cx="19" cy="9" rx="3" ry="0.6" fill="white" opacity="0.4" />
      {/* Power light */}
      <circle cx="26" cy="20.5" r="0.5" fill="#4dd449" />
    </svg>
  );
}

function MyDocumentsSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="md-folder" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffe48a" />
          <stop offset="0.5" stopColor="#f8c449" />
          <stop offset="1" stopColor="#cd9024" />
        </linearGradient>
        <linearGradient id="md-tab" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffe48a" />
          <stop offset="1" stopColor="#ddae3b" />
        </linearGradient>
      </defs>
      {/* Folder back tab */}
      <path d="M3 9 L13 9 L15 11 L29 11 L29 13 L3 13 Z" fill="url(#md-tab)" stroke="#7a5210" strokeWidth="0.6" />
      {/* Paper sticking out */}
      <rect x="9" y="6" width="14" height="10" fill="white" stroke="#6b6b6b" strokeWidth="0.4" />
      <line x1="11" y1="9" x2="21" y2="9" stroke="#aaa" strokeWidth="0.3" />
      <line x1="11" y1="11" x2="21" y2="11" stroke="#aaa" strokeWidth="0.3" />
      <line x1="11" y1="13" x2="18" y2="13" stroke="#aaa" strokeWidth="0.3" />
      {/* Folder body */}
      <path d="M3 12 L29 12 L29 27 L3 27 Z" fill="url(#md-folder)" stroke="#7a5210" strokeWidth="0.6" strokeLinejoin="round" />
      {/* Highlight on folder */}
      <path d="M4 13 L28 13" stroke="#fff4c0" strokeWidth="0.5" opacity="0.7" />
    </svg>
  );
}

function FolderSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="f-folder" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffe48a" />
          <stop offset="0.5" stopColor="#f8c449" />
          <stop offset="1" stopColor="#cd9024" />
        </linearGradient>
      </defs>
      <path d="M3 9 L13 9 L15 11 L29 11 L29 13 L3 13 Z" fill="#e4ae3b" stroke="#7a5210" strokeWidth="0.6" />
      <path d="M3 12 L29 12 L29 27 L3 27 Z" fill="url(#f-folder)" stroke="#7a5210" strokeWidth="0.6" strokeLinejoin="round" />
      <path d="M4 13 L28 13" stroke="#fff4c0" strokeWidth="0.5" opacity="0.7" />
    </svg>
  );
}

function BriefcaseSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="bc-body" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#9c6e2c" />
          <stop offset="0.5" stopColor="#7b521b" />
          <stop offset="1" stopColor="#4f3410" />
        </linearGradient>
        <linearGradient id="bc-handle" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#6b4818" />
          <stop offset="1" stopColor="#3f2a0a" />
        </linearGradient>
      </defs>
      {/* Handle */}
      <path d="M11 7 Q11 4 16 4 Q21 4 21 7" fill="none" stroke="url(#bc-handle)" strokeWidth="2.2" strokeLinecap="round" />
      {/* Body */}
      <rect x="3" y="9" width="26" height="17" rx="1.5" fill="url(#bc-body)" stroke="#3a230a" strokeWidth="0.6" />
      {/* Top edge highlight */}
      <line x1="4" y1="10" x2="28" y2="10" stroke="#c79c5c" strokeWidth="0.5" opacity="0.8" />
      {/* Lock */}
      <rect x="14.5" y="13" width="3" height="3" fill="#ffce42" stroke="#a37100" strokeWidth="0.4" />
      <rect x="15.5" y="14" width="1" height="1.5" fill="#a37100" />
      {/* Hinge line */}
      <line x1="3.5" y1="17" x2="28.5" y2="17" stroke="#2a1808" strokeWidth="0.4" />
    </svg>
  );
}

function MortarboardSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="mb-cap" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3a3a3a" />
          <stop offset="1" stopColor="#1c1c1c" />
        </linearGradient>
      </defs>
      {/* Hat band */}
      <rect x="8" y="16" width="16" height="6" rx="0.5" fill="url(#mb-cap)" stroke="#000" strokeWidth="0.5" />
      <ellipse cx="16" cy="22" rx="8" ry="2" fill="#1c1c1c" stroke="#000" strokeWidth="0.4" />
      {/* Mortarboard top (diamond) */}
      <polygon points="16,7 29,14 16,21 3,14" fill="url(#mb-cap)" stroke="#000" strokeWidth="0.6" />
      {/* Tassel button */}
      <circle cx="16" cy="14" r="1" fill="#d4a020" stroke="#7a5210" strokeWidth="0.3" />
      {/* Tassel strings */}
      <path d="M16 14 Q22 14 24 18 L24 22" stroke="#d4a020" strokeWidth="0.6" fill="none" />
      <path d="M24 22 L23 26 M24 22 L25 26 M24 22 L24 27" stroke="#d4a020" strokeWidth="0.6" />
    </svg>
  );
}

function BooksSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="bk1" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#d63333" /><stop offset="1" stopColor="#8a1a1a" />
        </linearGradient>
        <linearGradient id="bk2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#2c8a3d" /><stop offset="1" stopColor="#175e25" />
        </linearGradient>
        <linearGradient id="bk3" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3072c2" /><stop offset="1" stopColor="#194e8e" />
        </linearGradient>
      </defs>
      {/* Book 1: red, leaning */}
      <g transform="translate(0,0) rotate(-8 10 17)">
        <rect x="6" y="6" width="6" height="22" fill="url(#bk1)" stroke="#5a0a0a" strokeWidth="0.5" />
        <rect x="6.5" y="6" width="0.6" height="22" fill="#ffd9a0" opacity="0.7" />
        <line x1="6" y1="10" x2="12" y2="10" stroke="#5a0a0a" strokeWidth="0.4" />
        <line x1="6" y1="24" x2="12" y2="24" stroke="#5a0a0a" strokeWidth="0.4" />
      </g>
      {/* Book 2: green */}
      <rect x="12" y="6" width="6" height="22" fill="url(#bk2)" stroke="#0d3b18" strokeWidth="0.5" />
      <rect x="12.5" y="6" width="0.6" height="22" fill="#ffd9a0" opacity="0.7" />
      <line x1="12" y1="10" x2="18" y2="10" stroke="#0d3b18" strokeWidth="0.4" />
      <line x1="12" y1="24" x2="18" y2="24" stroke="#0d3b18" strokeWidth="0.4" />
      {/* Book 3: blue, leaning other way */}
      <g transform="rotate(7 22 17)">
        <rect x="19" y="6" width="6" height="22" fill="url(#bk3)" stroke="#0a2a55" strokeWidth="0.5" />
        <rect x="19.5" y="6" width="0.6" height="22" fill="#ffd9a0" opacity="0.7" />
        <line x1="19" y1="10" x2="25" y2="10" stroke="#0a2a55" strokeWidth="0.4" />
        <line x1="19" y1="24" x2="25" y2="24" stroke="#0a2a55" strokeWidth="0.4" />
      </g>
    </svg>
  );
}

function NotepadSVG({ size = 32 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }} shapeRendering="geometricPrecision">
      <defs>
        <linearGradient id="np-paper" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#ffffff" />
          <stop offset="1" stopColor="#ece4d0" />
        </linearGradient>
      </defs>
      {/* Drop shadow */}
      <rect x="6" y="3" width="20" height="26" rx="0.5" fill="rgba(0,0,0,0.18)" transform="translate(1,1)" />
      {/* Paper */}
      <rect x="6" y="3" width="20" height="26" rx="0.5" fill="url(#np-paper)" stroke="#7e7e7e" strokeWidth="0.5" />
      {/* Top blue header */}
      <rect x="6" y="3" width="20" height="4" fill="#1b6fd7" stroke="#1851a1" strokeWidth="0.4" />
      <text x="16" y="6.2" fontSize="2.6" fontFamily="Tahoma" fill="white" textAnchor="middle" fontWeight="bold">contact.txt</text>
      {/* Lines */}
      {[10, 13, 16, 19, 22, 25].map(y => (
        <line key={y} x1="8" y1={y} x2="24" y2={y} stroke="#5b85b8" strokeWidth="0.3" opacity="0.55" />
      ))}
      {/* Red margin line */}
      <line x1="10" y1="8" x2="10" y2="28" stroke="#d63333" strokeWidth="0.3" opacity="0.6" />
    </svg>
  );
}

function IEGlobeSVG({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" style={{ display: 'block' }}>
      <defs>
        <radialGradient id="ie-globe" cx="0.35" cy="0.35">
          <stop offset="0" stopColor="#a3d3f3" />
          <stop offset="0.6" stopColor="#3d7fbc" />
          <stop offset="1" stopColor="#1f4d80" />
        </radialGradient>
      </defs>
      {/* Globe */}
      <circle cx="16" cy="16" r="13" fill="url(#ie-globe)" stroke="#13345b" strokeWidth="0.8" />
      {/* Latitude lines */}
      <ellipse cx="16" cy="16" rx="13" ry="5" fill="none" stroke="#ffffff" strokeWidth="0.4" opacity="0.5" />
      <ellipse cx="16" cy="16" rx="5" ry="13" fill="none" stroke="#ffffff" strokeWidth="0.4" opacity="0.5" />
      {/* Italic e */}
      <text x="16" y="22" fontSize="22" fontFamily="Georgia, serif" fontStyle="italic" fontWeight="bold" fill="#ffd24a" textAnchor="middle" stroke="#a37100" strokeWidth="0.4">e</text>
      {/* Orbit ring */}
      <ellipse cx="16" cy="16" rx="14" ry="4" fill="none" stroke="#ffd24a" strokeWidth="1.1" opacity="0.85" transform="rotate(-22 16 16)" />
    </svg>
  );
}

/* ═══════════════════════════════════════════════════════
   PIXEL ART HELPERS (kept for taskbar/start fallbacks)
═══════════════════════════════════════════════════════ */

function xpPx({ cols, pixels, size = 2 }) {
  return React.createElement('div', {
    className: 'xp-pixels',
    style: {
      display: 'inline-grid',
      gridTemplateColumns: `repeat(${cols}, ${size}px)`,
      imageRendering: 'pixelated',
      flexShrink: 0,
      lineHeight: 0,
    }
  }, pixels.map((c, i) => React.createElement('div', {
    key: i,
    style: { width: size, height: size, background: c || 'transparent' }
  })));
}
const _T = 'transparent';

// Title-bar icon — use the new clean SVG
function IETitleIcon() { return <IEGlobeSVG size={16} />; }

// Legacy pixel art (kept for compatibility, no longer used in main UI)
function IETitleIconOld() {
  const B = '#003399'; const W = '#fff'; const Y = '#fbcb1a'; const G = '#1a8f4a';
  return xpPx({ cols: 16, size: 1, pixels: [
    _T,_T,_T,_T,_T,_T,B,B,B,B,_T,_T,_T,_T,_T,_T,
    _T,_T,_T,_T,B,B,Y,Y,Y,Y,B,B,_T,_T,_T,_T,
    _T,_T,_T,B,Y,Y,Y,Y,Y,Y,Y,Y,B,_T,_T,_T,
    _T,_T,B,Y,Y,G,Y,Y,Y,Y,G,Y,Y,B,_T,_T,
    _T,B,Y,Y,Y,G,G,Y,Y,G,G,Y,Y,Y,B,_T,
    _T,B,Y,Y,Y,Y,G,G,G,G,Y,Y,Y,Y,B,_T,
    B,Y,Y,Y,Y,Y,Y,G,G,Y,Y,Y,Y,Y,Y,B,
    B,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,B,
    B,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,Y,B,
    B,Y,Y,Y,Y,Y,G,G,Y,Y,Y,Y,Y,Y,Y,B,
    _T,B,Y,Y,Y,G,G,G,G,Y,Y,Y,Y,Y,B,_T,
    _T,B,Y,Y,G,G,Y,Y,G,G,Y,Y,Y,Y,B,_T,
    _T,_T,B,Y,Y,G,Y,Y,Y,Y,G,Y,Y,B,_T,_T,
    _T,_T,_T,B,Y,Y,Y,Y,Y,Y,Y,Y,B,_T,_T,_T,
    _T,_T,_T,_T,B,B,Y,Y,Y,Y,B,B,_T,_T,_T,_T,
    _T,_T,_T,_T,_T,_T,B,B,B,B,_T,_T,_T,_T,_T,_T,
  ]});
}

// 32×32 folder icon (yellow XP folder)
function XPFolder({ size = 2 }) {
  const D = '#a06408'; const Y = '#fbcb1a'; const L = '#fde98a'; const O = '#e29f1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Back tab
    for (let x = 2; x < 14; x++) set(x, 6, D);
    for (let x = 14; x < 17; x++) set(x, 6, D);
    for (let x = 17; x < 22; x++) set(x, 7, D);
    for (let x = 22; x < 30; x++) set(x, 8, D);
    for (let y = 7; y < 11; y++) for (let x = 2; x < 14; x++) set(x, y, L);
    for (let y = 8; y < 11; y++) for (let x = 14; x < 30; x++) set(x, y, L);
    // Folder body
    for (let x = 2; x < 30; x++) set(x, 11, D);
    for (let y = 11; y < 26; y++) { set(2, y, D); set(29, y, D); }
    for (let x = 2; x < 30; x++) set(x, 25, D);
    for (let y = 12; y < 25; y++) for (let x = 3; x < 29; x++) set(x, y, Y);
    // Shading: top highlight, bottom shadow
    for (let x = 3; x < 29; x++) set(x, 12, L);
    for (let x = 3; x < 29; x++) set(x, 24, O);
    return a;
  })() });
}

// 32×32 "My Computer" monitor icon
function XPMonitor({ size = 2 }) {
  const G = '#9a9a9a'; const D = '#5a5a5a'; const S = '#3a6fc4'; const L = '#7fb8ff'; const B = '#1c1812'; const W = '#dcdcdc';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Monitor outer
    for (let x = 3; x < 29; x++) { set(x, 3, D); set(x, 21, D); }
    for (let y = 3; y < 22; y++) { set(3, y, D); set(28, y, D); }
    for (let y = 4; y < 21; y++) for (let x = 4; x < 28; x++) set(x, y, G);
    // Screen
    for (let y = 5; y < 20; y++) for (let x = 5; x < 27; x++) set(x, y, S);
    // Screen highlight
    for (let x = 5; x < 27; x++) set(x, 5, L);
    // Stand
    for (let x = 13; x < 19; x++) { set(x, 22, D); set(x, 23, D); }
    for (let x = 10; x < 22; x++) { set(x, 24, D); set(x, 25, G); set(x, 26, D); }
    return a;
  })() });
}

// 32×32 notepad icon
function XPNotepad({ size = 2 }) {
  const D = '#5c5c5c'; const W = '#fff'; const B = '#003399'; const Y = '#fbcb1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    for (let y = 3; y < 28; y++) for (let x = 5; x < 25; x++) set(x, y, W);
    for (let x = 5; x < 25; x++) { set(x, 3, D); set(x, 27, D); }
    for (let y = 3; y < 28; y++) { set(5, y, D); set(24, y, D); }
    // Spiral binding
    for (let y = 4; y < 27; y += 3) { set(7, y, D); set(8, y, D); }
    // Lines
    for (let y = 8; y < 26; y += 3) for (let x = 10; x < 23; x++) set(x, y, '#7090c8');
    return a;
  })() });
}

// 32×32 briefcase
function XPBriefcase({ size = 2 }) {
  const D = '#4a2e08'; const B = '#7a4f10'; const Y = '#c08828'; const M = '#9a6c1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Handle
    for (let x = 12; x < 20; x++) { set(x, 5, D); set(x, 6, D); }
    set(11, 6, D); set(20, 6, D);
    set(12, 7, D); set(19, 7, D);
    // Body
    for (let y = 9; y < 25; y++) for (let x = 4; x < 28; x++) set(x, y, B);
    for (let x = 4; x < 28; x++) { set(x, 9, D); set(x, 24, D); }
    for (let y = 9; y < 25; y++) { set(4, y, D); set(27, y, D); }
    // Latch
    for (let x = 14; x < 18; x++) { set(x, 14, Y); set(x, 15, M); }
    return a;
  })() });
}

// 32×32 book (for reading logs)
function XPBook({ size = 2 }) {
  const R = '#a83026'; const D = '#5a1810'; const W = '#fff'; const L = '#e8a896'; const Y = '#fbcb1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Book body
    for (let y = 5; y < 27; y++) for (let x = 4; x < 28; x++) set(x, y, R);
    for (let x = 4; x < 28; x++) { set(x, 5, D); set(x, 26, D); }
    for (let y = 5; y < 27; y++) { set(4, y, D); set(27, y, D); }
    // Pages (inside)
    for (let y = 7; y < 25; y++) for (let x = 6; x < 26; x++) set(x, y, W);
    // Center binding
    for (let y = 5; y < 27; y++) { set(15, y, D); set(16, y, D); }
    // Lines on pages
    for (let y = 9; y < 24; y += 3) {
      for (let x = 7; x < 15; x++) set(x, y, '#aaa');
      for (let x = 17; x < 25; x++) set(x, y, '#aaa');
    }
    // Bookmark
    for (let y = 5; y < 22; y++) set(20, y, Y);
    set(20, 22, Y); set(19, 22, Y); set(21, 22, Y);
    return a;
  })() });
}

// 32×32 mortarboard
function XPCap({ size = 2 }) {
  const D = '#1c1812'; const B = '#3a3a3a'; const Y = '#fbcb1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Mortarboard top — diamond
    for (let y = 6; y < 14; y++) {
      const w = y < 10 ? (y - 5) * 3 : (14 - y) * 3 + 8;
      const xs = 16 - w / 2;
      for (let x = Math.floor(xs); x < Math.floor(xs + w); x++) set(x, y, D);
    }
    // Hat band
    for (let y = 14; y < 18; y++) for (let x = 9; x < 23; x++) set(x, y, B);
    // Tassel
    for (let y = 8; y < 18; y++) set(25, y, Y);
    set(24, 17, Y); set(26, 17, Y); set(25, 19, Y); set(25, 20, Y); set(25, 21, Y);
    return a;
  })() });
}

// 32×32 envelope
function XPMail({ size = 2 }) {
  const D = '#5a5a5a'; const W = '#fff'; const Y = '#fbcb1a';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Envelope
    for (let y = 8; y < 25; y++) for (let x = 4; x < 28; x++) set(x, y, W);
    for (let x = 4; x < 28; x++) { set(x, 8, D); set(x, 24, D); }
    for (let y = 8; y < 25; y++) { set(4, y, D); set(27, y, D); }
    // Flap (V shape)
    for (let i = 0; i < 12; i++) {
      set(4 + i, 8 + i, D);
      set(27 - i, 8 + i, D);
    }
    return a;
  })() });
}

// 32×32 globe / IE icon
function XPIE({ size = 2 }) {
  const B = '#003399'; const Y = '#fbcb1a'; const G = '#1a8f4a'; const W = '#fff';
  return xpPx({ cols: 32, size, pixels: (() => {
    const a = Array(32 * 32).fill(_T);
    const set = (x, y, c) => { if (x>=0&&x<32&&y>=0&&y<32) a[y*32+x] = c; };
    // Globe (circle)
    const cx = 16, cy = 16, r = 11;
    for (let y = 0; y < 32; y++) for (let x = 0; x < 32; x++) {
      const dx = x - cx, dy = y - cy, d = Math.sqrt(dx*dx + dy*dy);
      if (d < r - 1) set(x, y, Y);
      else if (d < r) set(x, y, B);
    }
    // Continents (rough)
    [[12,10],[13,10],[14,10],[13,11],[14,11],[15,11],[20,12],[21,12],[14,16],[15,16],[16,16],[17,16],[20,18],[21,18],[12,20],[13,20],[18,21],[19,21],[20,21]].forEach(([x,y]) => set(x, y, G));
    // The italic "e"
    for (let y = 10; y < 22; y++) set(16, y, B);
    set(14, 11, B); set(15, 10, B); set(17, 10, B); set(18, 10, B);
    set(14, 15, B); set(15, 15, B); set(17, 15, B); set(18, 15, B);
    set(14, 21, B); set(15, 22, B); set(17, 22, B); set(18, 22, B);
    return a;
  })() });
}

/* ═══════════════════════════════════════════════════════
   XP WINDOW
═══════════════════════════════════════════════════════ */

function XPWindow({ win, isActive, onActivate, onClose, onMinimize, onMove, children }) {
  const dragState = xR(null);

  const onTbarMouseDown = (e) => {
    if (e.target.closest('.xp-tbar-btn')) return;
    onActivate();
    dragState.current = { startX: e.clientX, startY: e.clientY, origX: win.x, origY: win.y };
    e.preventDefault();
  };

  xE(() => {
    const onMove2 = (e) => {
      if (!dragState.current) return;
      const dx = e.clientX - dragState.current.startX;
      const dy = e.clientY - dragState.current.startY;
      const newX = Math.max(-200, Math.min(window.innerWidth - 100, dragState.current.origX + dx));
      const newY = Math.max(0, Math.min(window.innerHeight - 80, dragState.current.origY + dy));
      onMove(newX, newY);
    };
    const onUp = () => { dragState.current = null; };
    window.addEventListener('mousemove', onMove2);
    window.addEventListener('mouseup', onUp);
    return () => {
      window.removeEventListener('mousemove', onMove2);
      window.removeEventListener('mouseup', onUp);
    };
  }, [onMove]);

  const addr = win.section === 'about'
    ? `My Computer`
    : win.section === 'youtube'
      ? `https://www.youtube.com/watch?v=${YT_VIDEO_ID}`
      : `https://oscomarch.com/#/${win.section}${win.slug ? `/${win.slug}` : ''}`;

  return (
    <div className={`xp-win ${isActive ? 'active' : ''}`}
      style={{ left: win.x, top: win.y, width: win.w, height: win.h, zIndex: win.z }}
      onMouseDown={onActivate}>
      <div className="xp-tbar" onMouseDown={onTbarMouseDown} onDoubleClick={onMinimize}>
        <div className="xp-tbar-icon">{win.icon || <IETitleIcon />}</div>
        <div className="xp-tbar-text">{win.title}</div>
        <div className="xp-tbar-btns">
          <button className="xp-tbar-btn min" onClick={onMinimize} title="Minimize">_</button>
          <button className="xp-tbar-btn max" title="Maximize">▢</button>
          <button className="xp-tbar-btn close" onClick={onClose} title="Close">✕</button>
        </div>
      </div>
      <div className="xp-menu">
        {['File', 'Edit', 'View', 'Favorites', 'Tools', 'Help'].map(m =>
          <div key={m} className="xp-menu-item">{m}</div>
        )}
      </div>
      <div className="xp-toolbar">
        <button className="xp-tool-btn" disabled>← Back</button>
        <button className="xp-tool-btn" disabled>Forward →</button>
        <button className="xp-tool-btn">⟲ Refresh</button>
      </div>
      <div className="xp-addr">
        <span className="xp-addr-lbl">Address</span>
        <input className="xp-addr-input" value={addr} readOnly />
        <button className="xp-go-btn">Go</button>
      </div>
      <div className="xp-body" key={win.section + (win.slug || '')}>
        {children}
      </div>
      <div className="xp-statusbar">
        <div className="left">Done</div>
        <div className="right">🌐 Internet</div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   DESKTOP ICON
═══════════════════════════════════════════════════════ */

function XPDesktopIcon({ section, selected, onSelect, onOpen }) {
  return (
    <div className={`xp-icon ${selected ? 'selected' : ''}`}
      onClick={(e) => { e.stopPropagation(); onSelect(); }}
      onDoubleClick={(e) => { e.stopPropagation(); onOpen(); }}>
      <div className="xp-icon-img">{section.iconNode}</div>
      <div className="label">{section.deskLabel}</div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   START MENU
═══════════════════════════════════════════════════════ */

function XPStartMenu({ sections, onLaunch, onShutdown, onRun, onLogoff }) {
  // Render a small icon by cloning with size=22 (works for the new SVG icons)
  const smallIcon = (node) => React.cloneElement(node, { size: 22 });
  // Section by id helper
  const sec = (id) => sections.find(s => s.id === id);
  return (
    <div className="xp-startmenu" onMouseDown={e => e.stopPropagation()}>
      <div className="xp-sm-head">
        <img className="xp-sm-avatar" src="xp-logo.png" alt="" />
        <div>
          <div className="xp-sm-username">Oscar</div>
          <div className="xp-sm-status">Founders associate</div>
        </div>
      </div>
      <div className="xp-sm-cols">
        {/* Left column — pinned + most-used */}
        <div className="xp-sm-col left">
          <div className="xp-sm-section-label">Pinned</div>
          <div className="xp-sm-item pinned" onClick={() => onLaunch('writings')}>
            <div className="smi">{smallIcon(sec('writings').iconNode)}</div>
            <div className="sm-text">
              <div className="sm-name">My Documents</div>
              <div className="sm-desc">Writings &amp; essays</div>
            </div>
          </div>
          <div className="xp-sm-item pinned" onClick={() => onLaunch('youtube')}>
            <div className="smi"><IEGlobeSVG size={22} /></div>
            <div className="sm-text">
              <div className="sm-name">Internet Explorer</div>
              <div className="sm-desc">Browse the web</div>
            </div>
          </div>

          <div className="xp-sm-divider" />

          <div className="xp-sm-section-label">All Programs</div>
          {['work', 'projects', 'academics', 'logs', 'contact'].map(id => (
            <div key={id} className="xp-sm-item" onClick={() => onLaunch(id)}>
              <div className="smi">{smallIcon(sec(id).iconNode)}</div>
              <div className="sm-name">{sec(id).deskLabel}</div>
            </div>
          ))}
        </div>

        {/* Right column — system + links */}
        <div className="xp-sm-col right">
          <div className="xp-sm-item" onClick={() => onLaunch('about')}>
            <div className="smi">{smallIcon(sec('about').iconNode)}</div>
            <div className="sm-name">My Computer</div>
          </div>
          <div className="xp-sm-item" onClick={() => onLaunch('writings')}>
            <div className="smi">{smallIcon(sec('writings').iconNode)}</div>
            <div className="sm-name">My Documents</div>
          </div>

          <div className="xp-sm-divider" />

          <div className="xp-sm-item" onClick={() => window.open('https://github.com/oscomarch', '_blank')}>
            <div className="smi sm-emoji">⌥</div>
            <div className="sm-name">GitHub</div>
          </div>
          <div className="xp-sm-item" onClick={() => window.open('https://www.linkedin.com/in/oscarmarchand/', '_blank')}>
            <div className="smi sm-emoji">in</div>
            <div className="sm-name">LinkedIn</div>
          </div>
          <div className="xp-sm-item" onClick={() => window.open('mailto:oscomarch@gmail.com', '_blank')}>
            <div className="smi sm-emoji">✉</div>
            <div className="sm-name">Email Oscar</div>
          </div>

          <div className="xp-sm-divider" />

          <div className="xp-sm-item" onClick={onRun}>
            <div className="smi sm-emoji">▶</div>
            <div className="sm-name">Run…</div>
          </div>
        </div>
      </div>
      <div className="xp-sm-foot">
        <button className="xp-sm-btn logoff" onClick={onLogoff}>
          <span className="icon-key" />
          Log Off
        </button>
        <button className="xp-sm-btn" onClick={onShutdown}>
          <span className="icon" />
          Turn Off Computer
        </button>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   TASKBAR
═══════════════════════════════════════════════════════ */

function XPTaskbar({ windows, activeId, onTabClick, onStart, startOpen }) {
  const [now, setNow] = xS(new Date());
  xE(() => {
    const id = setInterval(() => setNow(new Date()), 30000);
    return () => clearInterval(id);
  }, []);
  const time = now.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
  return (
    <div className="xp-taskbar" onMouseDown={e => e.stopPropagation()}>
      <button className={`xp-start ${startOpen ? 'open' : ''}`} onClick={onStart}>
        <img className="xp-start-flag" src="xp-logo.png" alt="" />
        start
      </button>
      <div className="xp-tabs">
        {windows.map(w => (
          <div key={w.id}
            className={`xp-tab ${w.id === activeId && !w.minimized ? 'active' : ''}`}
            onClick={() => onTabClick(w.id)}>
            <div className="ti">{React.cloneElement(w.icon || <IETitleIcon />, {})}</div>
            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis' }}>{w.title}</span>
          </div>
        ))}
      </div>
      <div className="xp-tray">
        <div className="xp-tray-icons"><span>🔊</span></div>
        <div>{time}</div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   WELCOME POPUP
═══════════════════════════════════════════════════════ */

function XPWelcome({ onClose }) {
  return (
    <div className="xp-welcome">
      <div className="x" onClick={onClose}>×</div>
      <strong>Welcome to Windows XP</strong>
      Your tour started 25 years ago. Double-click an icon to explore. Click the Start button to turn it off.
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   OLD YOUTUBE PAGE — embedded inside the IE window
   Recreates the 2006-era YouTube layout with our video.
═══════════════════════════════════════════════════════ */

const YT_VIDEO_ID = 'fdXQucDOed8';

function OldYouTubePage() {
  const [playing, setPlaying] = xS(false);
  const [rating, setRating] = xS(5);

  // Override the .xp-body padding so we can render edge-to-edge
  const pageStyle = {
    margin: '-18px -22px',
    fontFamily: "Arial, 'Lucida Grande', Verdana, sans-serif",
    color: '#000',
    fontSize: 12,
    minHeight: 'calc(100% + 36px)',
    background: '#fff',
  };

  return (
    <div style={pageStyle} className="yt2006">
      <style>{`
        .yt2006 a { color: #00477b; text-decoration: underline; cursor: pointer; }
        .yt2006 a:hover { color: #cc0000; }
        .yt2006 .yt-top { background: #fff; border-bottom: 2px solid #cc0000; padding: 6px 12px; }
        .yt2006 .yt-logo { display: inline-flex; align-items: center; gap: 0; font-family: 'Trebuchet MS', Arial; font-weight: bold; font-size: 30px; line-height: 1; color: #1c1812; vertical-align: middle; }
        .yt2006 .yt-logo .tube { background: #cc0000; color: white; padding: 1px 6px 2px; border-radius: 5px; margin-left: 0; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); }
        .yt2006 .yt-tag { font-style: italic; font-size: 10px; color: #666; margin-left: 6px; vertical-align: bottom; }
        .yt2006 .yt-search { display: inline-block; margin-left: 18px; }
        .yt2006 .yt-search input { padding: 3px 5px; border: 1px solid #888; width: 240px; font-size: 12px; font-family: Arial; vertical-align: middle; }
        .yt2006 .yt-search button { padding: 3px 12px; margin-left: 4px; background: linear-gradient(to bottom, #f2f2f2 0%, #d4d4d4 100%); border: 1px solid #999; font-size: 12px; cursor: pointer; vertical-align: middle; font-family: Arial; }
        .yt2006 .yt-auth { float: right; font-size: 11px; padding-top: 14px; }
        .yt2006 .yt-tabs { background: #cc0000; padding: 0 12px; display: flex; gap: 0; }
        .yt2006 .yt-tabs a { display: inline-block; padding: 4px 14px; font-size: 11px; color: white; text-decoration: none; font-weight: bold; }
        .yt2006 .yt-tabs a.on { background: white; color: #cc0000; }
        .yt2006 .yt-body { display: flex; gap: 18px; padding: 16px; background: #fff; }
        .yt2006 .yt-main { flex: 2.2; min-width: 0; }
        .yt2006 .yt-side { flex: 1; min-width: 200px; }
        .yt2006 .yt-title { font-size: 18px; color: #c00; font-weight: bold; margin-bottom: 6px; font-family: Arial; }
        .yt2006 .yt-by { font-size: 11px; color: #444; margin-bottom: 10px; }
        .yt2006 .yt-player { position: relative; width: 100%; padding-bottom: 75%; background: #000; border: 1px solid #333; }
        .yt2006 .yt-poster {
          position: absolute; inset: 0;
          background-size: cover; background-position: center;
          border: none; cursor: pointer; padding: 0;
        }
        .yt2006 .yt-play {
          position: absolute; left: 50%; top: 50%;
          transform: translate(-50%, -50%);
          width: 70px; height: 50px;
          background: rgba(20,20,20,0.78);
          border-radius: 10px;
          display: flex; align-items: center; justify-content: center;
          transition: background 150ms;
        }
        .yt2006 .yt-poster:hover .yt-play { background: #cc0000; }
        .yt2006 .yt-play::after {
          content: '';
          width: 0; height: 0;
          border-left: 20px solid white;
          border-top: 12px solid transparent;
          border-bottom: 12px solid transparent;
          margin-left: 6px;
        }
        .yt2006 .yt-meta {
          display: flex; gap: 16px;
          padding: 8px 0;
          font-size: 11px; color: #444;
          border-bottom: 1px solid #ccc;
        }
        .yt2006 .yt-rating {
          color: #f0a818; letter-spacing: 1px;
          font-size: 14px; line-height: 1;
        }
        .yt2006 .yt-rate-link { font-size: 11px; color: #00477b; margin-left: 4px; }
        .yt2006 .yt-actions { padding: 6px 0; display: flex; gap: 14px; font-size: 11px; border-bottom: 1px solid #ccc; }
        .yt2006 .yt-section-head {
          background: linear-gradient(to bottom, #f0f0f0, #d8d8d8);
          padding: 4px 8px; font-size: 12px; font-weight: bold;
          border: 1px solid #aaa; margin-top: 14px;
        }
        .yt2006 .yt-section-body { padding: 8px; border: 1px solid #aaa; border-top: none; font-size: 11px; line-height: 1.5; }
        .yt2006 .yt-related { background: #f4f4f4; border: 1px solid #aaa; }
        .yt2006 .yt-related-head { background: linear-gradient(to bottom, #f0f0f0, #d8d8d8); padding: 4px 8px; font-size: 12px; font-weight: bold; border-bottom: 1px solid #aaa; }
        .yt2006 .yt-related-item { padding: 8px; display: flex; gap: 6px; border-bottom: 1px dotted #ccc; }
        .yt2006 .yt-related-thumb { width: 60px; height: 45px; background: #ddd; border: 1px solid #999; flex-shrink: 0; }
        .yt2006 .yt-related-text { font-size: 11px; line-height: 1.3; }
        .yt2006 .yt-related-text a { font-weight: bold; }
        .yt2006 .yt-comment { padding: 8px; border-bottom: 1px solid #eee; font-size: 11px; }
        .yt2006 .yt-comment-author { font-weight: bold; color: #0066aa; }
        .yt2006 .yt-comment-time { color: #888; font-size: 10px; margin-left: 6px; }
      `}</style>

      {/* ── Top bar ── */}
      <div className="yt-top">
        <span className="yt-logo">You<span className="tube">Tube</span></span>
        <span className="yt-tag">Broadcast Yourself™</span>
        <div className="yt-search">
          <input defaultValue="music videos" />
          <button>Search</button>
          <a style={{ fontSize: 11, marginLeft: 8 }}>Advanced</a>
        </div>
        <div className="yt-auth">
          <a>Sign Up</a> <span style={{ color: '#999' }}>|</span> <a>Log In</a> <span style={{ color: '#999' }}>|</span> <a>Help</a>
        </div>
      </div>

      {/* ── Tabs ── */}
      <div className="yt-tabs">
        <a>Home</a><a className="on">Videos</a><a>Channels</a><a>Community</a><a>Upload</a>
      </div>

      {/* ── Body ── */}
      <div className="yt-body">
        {/* Main column */}
        <div className="yt-main">
          <div className="yt-title">Jeff Buckley - Lover, You Should've Come Over</div>
          <div className="yt-by">From: <a>jeffbuckleyVEVO</a> · Added: August 16, 2009 · Category: Music</div>

          {/* Player */}
          <div className="yt-player">
            {playing
              ? <iframe
                  src={`https://www.youtube.com/embed/${YT_VIDEO_ID}?autoplay=1&rel=0`}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                  allow="autoplay; encrypted-media; picture-in-picture"
                  allowFullScreen
                  title="YouTube video"
                />
              : <button
                  className="yt-poster"
                  style={{ backgroundImage: `url('https://img.youtube.com/vi/${YT_VIDEO_ID}/hqdefault.jpg')` }}
                  onClick={() => setPlaying(true)}>
                  <div className="yt-play" />
                </button>
            }
          </div>

          {/* Meta row */}
          <div className="yt-meta">
            <span>Views: <b>4,827</b></span>
            <span className="yt-rating">★★★★★ <span className="yt-rate-link">({rating}.0)</span></span>
            <span>Rate this video:
              {[1,2,3,4,5].map(n => (
                <a key={n} onClick={() => setRating(n)} style={{ marginLeft: 3 }}>{n}</a>
              ))}
            </span>
          </div>

          {/* Actions */}
          <div className="yt-actions">
            <a>★ Favorite</a><a>+ Add to Playlist</a><a>Share</a><a>Flag</a><a>MP3 Download</a>
          </div>

          {/* Description box */}
          <div className="yt-section-head">Description</div>
          <div className="yt-section-body">
            From the album <i>Grace</i> (1994).<br />
            © Columbia Records / Sony Music Entertainment.
          </div>

          {/* Comments */}
          <div className="yt-section-head">Comments (3)</div>
          <div className="yt-section-body" style={{ padding: 0 }}>
            <div className="yt-comment">
              <span className="yt-comment-author">xXxMusicLuvr2006xXx</span>
              <span className="yt-comment-time">5 hours ago</span>
              <div style={{ marginTop: 3 }}>this voice is unreal</div>
            </div>
            <div className="yt-comment">
              <span className="yt-comment-author">notarobot1337</span>
              <span className="yt-comment-time">2 days ago</span>
              <div style={{ marginTop: 3 }}>who's listening to this in 2026?</div>
            </div>
            <div className="yt-comment">
              <span className="yt-comment-author">grace_94</span>
              <span className="yt-comment-time">1 week ago</span>
              <div style={{ marginTop: 3 }}>3:42 is what music is for</div>
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="yt-side">
          <div className="yt-related">
            <div className="yt-related-head">Related Videos</div>
            {[
              { t: 'Jeff Buckley - Hallelujah', a: 'jeffbuckleyVEVO' },
              { t: 'Jeff Buckley - Last Goodbye', a: 'jeffbuckleyVEVO' },
              { t: 'Jeff Buckley - Grace (live)', a: 'old.tube' },
              { t: 'Jeff Buckley - Lilac Wine', a: 'jeffbuckleyVEVO' },
            ].map((v, i) => (
              <div key={i} className="yt-related-item">
                <div className="yt-related-thumb" style={{ background: `url('https://img.youtube.com/vi/${YT_VIDEO_ID}/default.jpg') center/cover` }} />
                <div className="yt-related-text">
                  <a>{v.t}</a>
                  <div style={{ color: '#666', marginTop: 2 }}>from: {v.a}</div>
                  <div style={{ color: '#999', fontSize: 10 }}>★★★★★ · 2,193 views</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12, fontSize: 10, color: '#888' }}>
            © 2006 YouTube, LLC · This page rendered in Internet Explorer 6.0
          </div>
        </div>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   RIGHT-CLICK CONTEXT MENU
═══════════════════════════════════════════════════════ */

function XPContextMenu({ x, y, items, onClose }) {
  const ref = xR(null);

  xE(() => {
    const onClick = (e) => {
      if (!ref.current?.contains(e.target)) onClose();
    };
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    setTimeout(() => document.addEventListener('mousedown', onClick), 10);
    document.addEventListener('keydown', onEsc);
    return () => {
      document.removeEventListener('mousedown', onClick);
      document.removeEventListener('keydown', onEsc);
    };
  }, [onClose]);

  // Position the menu so it never goes off-screen
  const adjustedX = Math.min(x, window.innerWidth - 200);
  const adjustedY = Math.min(y, window.innerHeight - items.length * 22 - 8);

  return (
    <div ref={ref} className="xp-ctx" style={{ left: adjustedX, top: adjustedY }}
         onContextMenu={e => e.preventDefault()}>
      {items.map((item, i) =>
        item.sep
          ? <div key={i} className="xp-ctx-sep" />
          : (
            <div key={i}
              className={`xp-ctx-item ${item.bold ? 'bold' : ''} ${item.disabled ? 'disabled' : ''} ${item.hasArrow ? 'has-arrow' : ''}`}
              onClick={() => {
                if (item.disabled) return;
                if (item.onClick) item.onClick();
                onClose();
              }}
            >
              {item.label}
              {item.accel && <span className="acc">{item.accel}</span>}
            </div>
          )
      )}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   BSOD (Blue Screen of Death) easter egg
═══════════════════════════════════════════════════════ */

function XPBSOD({ onDismiss }) {
  xE(() => {
    const onKey = () => onDismiss();
    const onClick = () => onDismiss();
    setTimeout(() => {
      document.addEventListener('keydown', onKey);
      document.addEventListener('click', onClick);
    }, 1500);
    return () => {
      document.removeEventListener('keydown', onKey);
      document.removeEventListener('click', onClick);
    };
  }, [onDismiss]);

  return (
    <div className="xp-bsod">
      <h1>A problem has been detected and Windows has been shut down to prevent damage to your computer.</h1>
      <p>OSCAR_HAS_TOO_MUCH_FUN_WITH_CSS</p>
      <p>If this is the first time you've seen this Stop error screen, restart your computer. If this screen appears again, follow these steps:</p>
      <p>Check to make sure that your sense of humor is enabled. If new, ask the developer for hints.</p>
      <p>Disable any anti-nostalgia software or BIOS settings recently changed.</p>
      <p>Technical information:</p>
      <p>*** STOP: 0x000000FF (0x2026, 0x0010, 0x0000, 0x0001)</p>
      <p style={{ marginTop: 32 }}>Beginning dump of physical memory ▓▓▓▓▓▓▓▓░░ 80%</p>
      <p>Physical memory dump complete.</p>
      <p>Contact your system administrator or technical support group for further assistance.</p>
      <p className="blink" style={{ marginTop: 24 }}>Press any key to continue _</p>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   MATRIX RAIN easter egg
═══════════════════════════════════════════════════════ */

function XPMatrix({ onDismiss }) {
  const canvasRef = xR(null);

  xE(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789@#$%&*+=<>?'.split('');
    const fontSize = 14;
    const cols = Math.floor(canvas.width / fontSize);
    const drops = Array(cols).fill(1);

    let rafId;
    const draw = () => {
      ctx.fillStyle = 'rgba(0,0,0,0.06)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#0F0';
      ctx.font = fontSize + 'px monospace';
      for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) drops[i] = 0;
        drops[i]++;
      }
      rafId = requestAnimationFrame(draw);
    };
    draw();

    const onKey = (e) => { if (e.key === 'Escape') onDismiss(); };
    const onClick = () => onDismiss();
    document.addEventListener('keydown', onKey);
    setTimeout(() => document.addEventListener('click', onClick), 500);
    const timeout = setTimeout(onDismiss, 12000);

    return () => {
      cancelAnimationFrame(rafId);
      document.removeEventListener('keydown', onKey);
      document.removeEventListener('click', onClick);
      clearTimeout(timeout);
    };
  }, [onDismiss]);

  return (
    <div className="xp-matrix">
      <canvas ref={canvasRef} />
      <div className="xp-matrix-hint">Wake up, Neo… (click or press Esc to exit)</div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   SNOW easter egg (Konami code inside XP)
═══════════════════════════════════════════════════════ */

function XPSnow({ onDismiss }) {
  const flakes = xR(null);
  if (!flakes.current) {
    flakes.current = Array.from({ length: 80 }, (_, i) => ({
      id: i,
      left: Math.random() * 100,
      delay: Math.random() * 8,
      duration: 6 + Math.random() * 8,
      char: ['❄', '❅', '❆', '*', '·'][Math.floor(Math.random() * 5)],
      size: 8 + Math.random() * 14,
    }));
  }
  xE(() => {
    const t = setTimeout(onDismiss, 15000);
    return () => clearTimeout(t);
  }, [onDismiss]);
  return (
    <div className="xp-snow">
      {flakes.current.map(f => (
        <div key={f.id} className="xp-snowflake" style={{
          left: f.left + '%',
          fontSize: f.size + 'px',
          animationDuration: f.duration + 's',
          animationDelay: f.delay + 's',
        }}>{f.char}</div>
      ))}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   PROPERTIES DIALOG (fake Display Properties)
═══════════════════════════════════════════════════════ */

function XPPropsDialog({ title, body, onClose }) {
  return (
    <div className="xp-win xp-props-dialog"
      style={{ left: '50%', top: '30%', transform: 'translate(-50%, 0)', minWidth: 0, minHeight: 0, height: 'auto' }}
      onMouseDown={e => e.stopPropagation()}>
      <div className="xp-tbar" style={{ cursor: 'default' }}>
        <div className="xp-tbar-icon"><IETitleIcon /></div>
        <div className="xp-tbar-text">{title}</div>
        <div className="xp-tbar-btns">
          <button className="xp-tbar-btn close" onClick={onClose}>✕</button>
        </div>
      </div>
      <div className="xp-props-body">{body}</div>
      <div className="xp-props-actions">
        <button onClick={onClose}>OK</button>
        <button onClick={onClose}>Cancel</button>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   RUN DIALOG
═══════════════════════════════════════════════════════ */

function XPRunDialog({ onRun, onClose }) {
  const [cmd, setCmd] = xS('');
  const inputRef = xR(null);
  xE(() => inputRef.current?.focus(), []);
  const submit = () => { onRun(cmd.trim().toLowerCase()); };
  return (
    <div className="xp-win xp-run-dialog" onMouseDown={e => e.stopPropagation()}>
      <div className="xp-tbar" style={{ cursor: 'default' }}>
        <div className="xp-tbar-icon"><IETitleIcon /></div>
        <div className="xp-tbar-text">Run</div>
        <div className="xp-tbar-btns">
          <button className="xp-tbar-btn close" onClick={onClose}>✕</button>
        </div>
      </div>
      <div className="xp-run-body">
        <p>Type the name of a program, folder, document, or Internet resource, and Windows will open it for you.</p>
        <div className="xp-run-row">
          <label>Open:</label>
          <input ref={inputRef} type="text" value={cmd}
            onChange={e => setCmd(e.target.value)}
            onKeyDown={e => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') onClose(); }}
            placeholder="try: matrix · bsod · snow · notepad · calc · doom · about"
          />
        </div>
        <p style={{ marginTop: 16, fontSize: 10, color: '#888' }}>Hint: try "matrix", "bsod", or "snow".</p>
      </div>
      <div className="xp-props-actions">
        <button onClick={submit}>OK</button>
        <button onClick={onClose}>Cancel</button>
      </div>
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   DESKTOP — main component
═══════════════════════════════════════════════════════ */

function XPDesktop({ onExit }) {
  // Section catalog — desktop icons at 36px, taskbar/menu icons at 18px
  const sections = [
    { id: 'about',     deskLabel: 'My Computer',       title: 'My Computer',                                  iconNode: <MyComputerSVG  size={36} />, smallIcon: <MyComputerSVG  size={18} /> },
    { id: 'writings',  deskLabel: 'My Documents',      title: 'My Documents — Internet Explorer',             iconNode: <MyDocumentsSVG size={36} />, smallIcon: <MyDocumentsSVG size={18} /> },
    { id: 'youtube',   deskLabel: 'Internet Explorer', title: 'YouTube · Broadcast Yourself — Internet Explorer', iconNode: <IEGlobeSVG     size={36} />, smallIcon: <IEGlobeSVG     size={18} /> },
    { id: 'work',      deskLabel: 'Work',              title: 'Work — Internet Explorer',                     iconNode: <BriefcaseSVG   size={36} />, smallIcon: <BriefcaseSVG   size={18} /> },
    { id: 'projects',  deskLabel: 'Projects',          title: 'Projects — Internet Explorer',                 iconNode: <FolderSVG      size={36} />, smallIcon: <FolderSVG      size={18} /> },
    { id: 'academics', deskLabel: 'Academics',         title: 'Academics — Internet Explorer',                iconNode: <MortarboardSVG size={36} />, smallIcon: <MortarboardSVG size={18} /> },
    { id: 'logs',      deskLabel: 'Reading Logs',      title: 'Reading Logs — Internet Explorer',             iconNode: <BooksSVG       size={36} />, smallIcon: <BooksSVG       size={18} /> },
    { id: 'contact',   deskLabel: 'Contact.txt',       title: 'Contact.txt — Notepad',                        iconNode: <NotepadSVG     size={36} />, smallIcon: <NotepadSVG     size={18} /> },
  ];

  const [openWins, setOpenWins] = xS([]);
  const [activeId, setActiveId] = xS(null);
  const [selectedIcon, setSelectedIcon] = xS(null);
  const [startOpen, setStartOpen] = xS(false);
  const [showWelcome, setShowWelcome] = xS(true);

  // Easter eggs + dialogs
  const [ctx, setCtx] = xS(null); // { x, y, items }
  const [bsod, setBsod] = xS(false);
  const [matrix, setMatrix] = xS(false);
  const [snow, setSnow] = xS(false);
  const [props, setProps] = xS(null); // { title, body }
  const [runDialog, setRunDialog] = xS(false);

  const zRef = xR(100);

  // Open My Documents on first load
  xE(() => { openWindow('writings'); /* eslint-disable-next-line */ }, []);

  // Auto-dismiss welcome after 10s
  xE(() => {
    if (!showWelcome) return;
    const t = setTimeout(() => setShowWelcome(false), 10000);
    return () => clearTimeout(t);
  }, [showWelcome]);

  // ── Easter egg keyboard listener: type "matrix", "bsod", "snow", "doom" ──
  xE(() => {
    let buf = '';
    const triggers = {
      matrix: () => setMatrix(true),
      bsod:   () => setBsod(true),
      snow:   () => setSnow(true),
      hello:  () => setShowWelcome(true),
    };
    const onKey = (e) => {
      // Skip if typing in a text field (so users can type in real inputs)
      const tag = (e.target.tagName || '').toLowerCase();
      if (tag === 'input' || tag === 'textarea') return;
      if (e.key.length !== 1) return;
      buf = (buf + e.key.toLowerCase()).slice(-12);
      for (const [word, fn] of Object.entries(triggers)) {
        if (buf.endsWith(word)) { fn(); buf = ''; return; }
      }
    };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  // ── Konami code inside XP triggers snow ──
  xE(() => {
    const code = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'];
    let i = 0;
    const onKey = (e) => {
      const k = e.key.length === 1 ? e.key.toLowerCase() : e.key;
      if (k === code[i]) { i++; if (i === code.length) { i = 0; setSnow(true); } }
      else { i = (k === code[0]) ? 1 : 0; }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // ── Run dialog handler ──
  const handleRun = (cmd) => {
    setRunDialog(false);
    const c = cmd.trim().toLowerCase();
    if (c === 'matrix') setMatrix(true);
    else if (c === 'bsod' || c === 'crash') setBsod(true);
    else if (c === 'snow' || c === 'winter') setSnow(true);
    else if (c === 'notepad' || c === 'contact') openWindow('contact');
    else if (c === 'iexplore' || c === 'youtube' || c === 'song') openWindow('youtube');
    else if (c === 'writings' || c === 'docs') openWindow('writings');
    else if (c === 'about' || c === 'mycomputer') openWindow('about');
    else if (c === 'doom') setProps({
      title: 'DOOM.EXE',
      body: <>
        <p style={{ fontFamily: 'monospace' }}>C:\&gt; doom.exe</p>
        <p style={{ fontFamily: 'monospace' }}>Bad command or file name.</p>
        <p style={{ fontFamily: 'monospace' }}>(Try installing DOS first.)</p>
      </>,
    });
    else if (c === 'calc') setProps({
      title: 'Calculator',
      body: <p style={{ fontFamily: 'monospace', fontSize: 14, textAlign: 'right', background: '#eef', padding: '8px', border: '1px inset #aaa' }}>0.</p>,
    });
    else if (c) setProps({
      title: 'Run',
      body: <p>Windows cannot find <b>{c}</b>. Make sure you typed the name correctly, and then try again.</p>,
    });
  };

  function openWindow(id, extra = {}) {
    const section = sections.find(s => s.id === id);
    if (!section) return;
    setOpenWins(prev => {
      const existing = prev.find(w => w.id === id);
      if (existing) {
        return prev.map(w => w.id === id ? { ...w, minimized: false, z: ++zRef.current } : w);
      }
      const offset = (prev.filter(w => !w.minimized).length) * 28;
      return [...prev, {
        id, section: section.id, title: section.title,
        icon: section.smallIcon,
        x: 90 + offset, y: 28 + offset,
        w: Math.min(900, window.innerWidth - 60),
        h: Math.min(580, window.innerHeight - 90),
        z: ++zRef.current,
        minimized: false,
        ...extra,
      }];
    });
    setActiveId(id);
  }

  function closeWindow(id) {
    setOpenWins(prev => prev.filter(w => w.id !== id));
    setActiveId(curr => curr === id ? null : curr);
  }

  function minimizeWindow(id) {
    setOpenWins(prev => prev.map(w => w.id === id ? { ...w, minimized: true } : w));
    setActiveId(curr => curr === id ? null : curr);
  }

  function moveWindow(id, x, y) {
    setOpenWins(prev => prev.map(w => w.id === id ? { ...w, x, y } : w));
  }

  function activateWindow(id) {
    setActiveId(id);
    setOpenWins(prev => prev.map(w => w.id === id ? { ...w, z: ++zRef.current, minimized: false } : w));
  }

  function onTaskbarClick(id) {
    const w = openWins.find(x => x.id === id);
    if (!w) return;
    if (w.minimized) activateWindow(id);
    else if (id === activeId) minimizeWindow(id);
    else activateWindow(id);
  }

  // Render the content for a window — reuses existing pages.jsx components
  function renderContent(win) {
    const sectionId = win.section;
    const navigate = (page, params = {}) => {
      // In XP, "navigation" means opening a new window
      if (page === 'home') openWindow('about');
      else if (page === 'writing') openWindow('writings'); // for now just go to writings index
      else openWindow(page);
    };
    const pixelProps = { ink: '#000', accent: '#003399' };

    if (sectionId === 'about') {
      return (
        <div>
          <h1>{SITE.name}</h1>
          <p style={{ color: '#444' }}>{SITE.tag}</p>
          <hr />
          <p>Welcome to my site, browsed authentically through Internet Explorer 6.</p>
          <p>Open the other icons on the desktop to explore writings, work, projects, academics, and reading logs.</p>
          <p>This XP mode is an easter egg. To go back to the modern site, click <b>start</b> → <b>Turn Off Computer</b>.</p>
          <hr />
          <p style={{ fontSize: 11, color: '#666' }}>Built with React, the same Verdana you remember, and a serious amount of nostalgia.</p>
        </div>
      );
    }
    if (sectionId === 'youtube')   return <OldYouTubePage />;
    if (sectionId === 'writings')  return <Writings  navigate={navigate} />;
    if (sectionId === 'work')      return <Work />;
    if (sectionId === 'projects')  return <Projects />;
    if (sectionId === 'academics') return <Academics />;
    if (sectionId === 'logs')      return <Logs />;
    if (sectionId === 'contact') {
      return (
        <pre style={{ fontFamily: '"Lucida Console", monospace', fontSize: 13, whiteSpace: 'pre-wrap' }}>
{`Contact.txt
─────────────────────────────────────

email     ${SITE.email}
github    github.com/oscomarch
linkedin  linkedin.com/in/oscarmarchand

If you're working on something interesting,
say hi. Cold emails welcome.

Saved: ${new Date().toLocaleString()}`}
        </pre>
      );
    }
    return <div>Coming soon…</div>;
  }

  // ── Right-click menu builders ──
  function desktopMenu(x, y) {
    return [
      { label: 'Arrange Icons By', hasArrow: true, disabled: true },
      { label: 'Refresh', onClick: () => { /* small visual blink */ document.querySelector('.xp-root').style.opacity = '0.7'; setTimeout(() => document.querySelector('.xp-root').style.opacity = '1', 100); } },
      { sep: true },
      { label: 'Paste', disabled: true },
      { label: 'Paste Shortcut', disabled: true },
      { sep: true },
      { label: 'New', hasArrow: true, disabled: true },
      { sep: true },
      { label: 'Properties', bold: true, onClick: () => setProps({
        title: 'Display Properties',
        body: <>
          <p><b>Background:</b> Bliss (Charles O'Rear, 1996)</p>
          <p><b>Theme:</b> Windows XP (Luna)</p>
          <p><b>Screen Resolution:</b> {window.innerWidth} × {window.innerHeight} pixels</p>
          <p><b>Color Quality:</b> Highest (32 bit)</p>
          <p><b>Refresh Rate:</b> 60 Hz (a guess)</p>
          <p style={{ marginTop: 12, fontStyle: 'italic', color: '#666' }}>Settings are read-only in this build of Windows XP.</p>
        </>,
      }) },
    ];
  }
  function iconMenu(iconId) {
    return [
      { label: 'Open', bold: true, onClick: () => openWindow(iconId) },
      { label: 'Explore', onClick: () => openWindow(iconId) },
      { label: 'Search', disabled: true },
      { sep: true },
      { label: 'Send To', hasArrow: true, disabled: true },
      { sep: true },
      { label: 'Cut', accel: 'Ctrl+X', disabled: true },
      { label: 'Copy', accel: 'Ctrl+C', disabled: true },
      { sep: true },
      { label: 'Create Shortcut', disabled: true },
      { label: 'Delete', disabled: true },
      { label: 'Rename', disabled: true },
      { sep: true },
      { label: 'Properties', onClick: () => {
        const s = sections.find(x => x.id === iconId);
        setProps({
          title: `${s.deskLabel} Properties`,
          body: <>
            <p><b>Type:</b> {iconId === 'contact' ? 'Text Document' : 'Web Page Shortcut'}</p>
            <p><b>Location:</b> https://oscomarch.com/#/{iconId}</p>
            <p><b>Size:</b> 13 bytes (it's just hash routing)</p>
            <p><b>Created:</b> 2026</p>
            <p><b>Modified:</b> Whenever Oscar feels like it</p>
          </>,
        });
      }},
    ];
  }
  function startBtnMenu() {
    return [
      { label: 'Open', bold: true, onClick: () => setStartOpen(true) },
      { label: 'Explore', disabled: true },
      { label: 'Search', disabled: true },
      { sep: true },
      { label: 'Properties', onClick: () => setProps({
        title: 'Taskbar and Start Menu Properties',
        body: <p>Sorry, this is read-only. The start button stays exactly where it is. (1995–2014)</p>,
      })},
    ];
  }
  function trayMenu() {
    return [
      { label: 'Adjust Date/Time', onClick: () => setProps({
        title: 'Date and Time',
        body: <p>The current time is <b>{new Date().toLocaleTimeString()}</b>.<br />The current year is, somehow, {new Date().getFullYear()}.</p>,
      }) },
      { label: 'Customize Notifications', disabled: true },
      { sep: true },
      { label: 'Show the Desktop', onClick: () => {
        setOpenWins(prev => prev.map(w => ({ ...w, minimized: true })));
        setActiveId(null);
      } },
    ];
  }

  // Main right-click dispatcher
  const onContextMenu = (e) => {
    e.preventDefault();
    const el = e.target;
    const icon = el.closest('.xp-icon');
    if (icon) {
      // Find which icon this is
      const idx = Array.from(document.querySelectorAll('.xp-icons .xp-icon')).indexOf(icon);
      const section = sections[idx];
      if (section) { setCtx({ x: e.clientX, y: e.clientY, items: iconMenu(section.id) }); return; }
    }
    if (el.closest('.xp-start')) { setCtx({ x: e.clientX, y: e.clientY, items: startBtnMenu() }); return; }
    if (el.closest('.xp-tray'))  { setCtx({ x: e.clientX, y: e.clientY, items: trayMenu() }); return; }
    // Default: desktop menu (also when right-clicking on the taskbar empty area)
    setCtx({ x: e.clientX, y: e.clientY, items: desktopMenu(e.clientX, e.clientY) });
  };

  return (
    <div
      className="xp-root"
      onMouseDown={() => { setStartOpen(false); setSelectedIcon(null); }}
      onContextMenu={onContextMenu}
    >
      {/* Desktop icons */}
      <div className="xp-icons">
        {sections.map((s) => (
          <XPDesktopIcon
            key={s.id}
            section={s}
            selected={selectedIcon === s.id}
            onSelect={() => setSelectedIcon(s.id)}
            onOpen={() => openWindow(s.id)}
          />
        ))}
      </div>

      {/* Open windows */}
      {openWins.filter(w => !w.minimized).map(w => (
        <XPWindow
          key={w.id} win={w}
          isActive={w.id === activeId}
          onActivate={() => activateWindow(w.id)}
          onClose={() => closeWindow(w.id)}
          onMinimize={() => minimizeWindow(w.id)}
          onMove={(x, y) => moveWindow(w.id, x, y)}
        >
          {renderContent(w)}
        </XPWindow>
      ))}

      {/* Welcome popup */}
      {showWelcome && <XPWelcome onClose={() => setShowWelcome(false)} />}

      {/* Start menu */}
      {startOpen && (
        <XPStartMenu
          sections={sections}
          onLaunch={(id) => { openWindow(id); setStartOpen(false); }}
          onShutdown={() => { setStartOpen(false); onExit(); }}
          onLogoff={() => {
            // Close all windows but stay in XP
            setStartOpen(false);
            setOpenWins([]);
            setActiveId(null);
            setShowWelcome(true);
          }}
          onRun={() => { setStartOpen(false); setRunDialog(true); }}
        />
      )}

      {/* Bottom-right Windows XP watermark */}
      <div className="xp-watermark">
        <img src="xp-logo.png" alt="" />
        <div className="wm-text">
          <div className="wm-tag">Microsoft</div>
          <div className="wm-sub">Windows<sup style={{ fontSize: '60%' }}>XP</sup></div>
        </div>
      </div>

      {/* Taskbar */}
      <XPTaskbar
        windows={openWins}
        activeId={activeId}
        onTabClick={onTaskbarClick}
        onStart={(e) => { if (e) e.stopPropagation(); setStartOpen(o => !o); }}
        startOpen={startOpen}
      />

      {/* Right-click context menu */}
      {ctx && <XPContextMenu x={ctx.x} y={ctx.y} items={ctx.items} onClose={() => setCtx(null)} />}

      {/* Properties / Run dialogs */}
      {props && <XPPropsDialog title={props.title} body={props.body} onClose={() => setProps(null)} />}
      {runDialog && <XPRunDialog onRun={handleRun} onClose={() => setRunDialog(false)} />}

      {/* Easter egg overlays */}
      {snow && <XPSnow onDismiss={() => setSnow(false)} />}
      {matrix && <XPMatrix onDismiss={() => setMatrix(false)} />}
      {bsod && <XPBSOD onDismiss={() => setBsod(false)} />}
    </div>
  );
}

/* ═══════════════════════════════════════════════════════
   XP LAUNCH BUTTON — small pixel art Windows logo
   shown next to the candle in normal mode
═══════════════════════════════════════════════════════ */

function XPLaunchButton({ onClick }) {
  return (
    <button className="xp-launch-btn" onClick={onClick} title="Launch Windows XP mode">
      <img src="xp-logo.png" alt="" />
      <span className="xp-launch-lbl">
        <span className="xp-launch-tag">Microsoft</span>
        <span className="xp-launch-sub">Windows XP</span>
      </span>
    </button>
  );
}

/* ═══════════════════════════════════════════════════════
   EXPORTS
═══════════════════════════════════════════════════════ */

Object.assign(window, { XPDesktop, XPLaunchButton });