<div class="demo-page">
  <div class="demo-hint">
    <p>Press <kbd>Alt</kbd> + <kbd>Tab</kbd> (or click below) to open the switcher, then <kbd>Tab</kbd> / arrow keys to cycle and <kbd>Enter</kbd> to select.</p>
    <button class="open-btn" id="open-btn">Open app switcher</button>
  </div>
  <p class="active-app">Active app: <strong id="active-app-name">Dashboard</strong></p>
</div>

<div class="switcher-overlay" id="switcher" hidden>
  <div class="switcher-panel">
    <div class="switcher-grid" id="switcher-grid"></div>
    <p class="switcher-hint">Tab to cycle &middot; Enter to open &middot; Esc to cancel</p>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; min-height: 100vh; }

.demo-page { max-width: 460px; margin: 0 auto; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.demo-hint p { font-size: 13px; color: #64748b; line-height: 1.7; }
kbd { background: #1e293b; color: #f1f5f9; border-radius: 6px; padding: 2px 7px; font-size: 12px; font-family: inherit; font-weight: 700; }
.open-btn {
  background: #6366f1; color: #fff; border: none; border-radius: 10px;
  padding: 10px 22px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.open-btn:hover { background: #4f46e5; }
.active-app { font-size: 13px; color: #475569; }
.active-app strong { color: #1e293b; }

.switcher-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15,23,42,0.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fade-in 0.15s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.switcher-panel {
  background: rgba(30,41,59,0.9); border: 1px solid rgba(148,163,184,0.25);
  border-radius: 18px; padding: 22px; max-width: 560px; width: calc(100% - 40px);
}
.switcher-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.switcher-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: 14px; border: 2px solid transparent;
  background: rgba(255,255,255,0.04); cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.switcher-card:hover { background: rgba(255,255,255,0.08); }
.switcher-card.focused { border-color: #818cf8; background: rgba(129,140,248,0.14); transform: translateY(-2px); }

.switcher-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff;
}
.switcher-name { font-size: 11.5px; font-weight: 700; color: #e2e8f0; text-align: center; }

.switcher-hint { text-align: center; font-size: 11px; color: #64748b; margin-top: 16px; }

const APPS = [
  { name: 'Dashboard', color: '#6366f1', glyph: 'DB' },
  { name: 'Inbox', color: '#f97316', glyph: 'IN' },
  { name: 'Calendar', color: '#22c55e', glyph: 'CA' },
  { name: 'Files', color: '#0ea5e9', glyph: 'FI' },
  { name: 'Analytics', color: '#e11d48', glyph: 'AN' },
  { name: 'Team', color: '#a855f7', glyph: 'TM' },
  { name: 'Settings', color: '#64748b', glyph: 'ST' },
  { name: 'Support', color: '#14b8a6', glyph: 'SU' },
];

const overlay = document.getElementById('switcher');
const grid = document.getElementById('switcher-grid');
const openBtn = document.getElementById('open-btn');
const activeNameEl = document.getElementById('active-app-name');

let cards = [];
let focusedIndex = 0;
let isOpen = false;
let activeAppName = 'Dashboard';

function buildGrid() {
  grid.innerHTML = '';
  cards = APPS.map((app, i) => {
    const card = document.createElement('div');
    card.className = 'switcher-card';
    card.tabIndex = -1;
    card.dataset.index = i;

    const icon = document.createElement('div');
    icon.className = 'switcher-icon';
    icon.style.background = app.color;
    icon.textContent = app.glyph;

    const name = document.createElement('div');
    name.className = 'switcher-name';
    name.textContent = app.name;

    card.appendChild(icon);
    card.appendChild(name);
    card.addEventListener('click', () => selectApp(i));
    card.addEventListener('mouseenter', () => setFocus(i));
    grid.appendChild(card);
    return card;
  });
}

function setFocus(i) {
  focusedIndex = (i + APPS.length) % APPS.length;
  cards.forEach((c, idx) => c.classList.toggle('focused', idx === focusedIndex));
}

function openSwitcher() {
  isOpen = true;
  overlay.hidden = false;
  const startIdx = Math.max(0, APPS.findIndex(a => a.name === activeAppName));
  setFocus((startIdx + 1) % APPS.length);
}

function closeSwitcher() {
  isOpen = false;
  overlay.hidden = true;
}

function selectApp(i) {
  activeAppName = APPS[i].name;
  activeNameEl.textContent = activeAppName;
  closeSwitcher();
}

openBtn.addEventListener('click', openSwitcher);
overlay.addEventListener('click', e => { if (e.target === overlay) closeSwitcher(); });

window.addEventListener('keydown', e => {
  if (e.altKey && e.key === 'Tab') {
    e.preventDefault();
    if (!isOpen) openSwitcher();
    else setFocus(focusedIndex + (e.shiftKey ? -1 : 1));
    return;
  }
  if (!isOpen) return;

  if (e.key === 'Tab') {
    e.preventDefault();
    setFocus(focusedIndex + (e.shiftKey ? -1 : 1));
  } else if (e.key === 'ArrowRight') {
    e.preventDefault();
    setFocus(focusedIndex + 1);
  } else if (e.key === 'ArrowLeft') {
    e.preventDefault();
    setFocus(focusedIndex - 1);
  } else if (e.key === 'ArrowDown') {
    e.preventDefault();
    setFocus(focusedIndex + 4);
  } else if (e.key === 'ArrowUp') {
    e.preventDefault();
    setFocus(focusedIndex - 4);
  } else if (e.key === 'Enter') {
    e.preventDefault();
    selectApp(focusedIndex);
  } else if (e.key === 'Escape') {
    e.preventDefault();
    closeSwitcher();
  }
});

window.addEventListener('keyup', e => {
  if (e.key === 'Alt' && isOpen) selectApp(focusedIndex);
});

buildGrid();