// Get by ID - fastest
const header = document.getElementById("header");

// Query selector - flexible CSS selectors
const firstButton = document.querySelector(".btn-primary");
const allButtons = document.querySelectorAll("button.active");

// Live collections - auto-update
const items = document.getElementsByClassName("item");
console.log(items.length); // 5
document.body.appendChild(newItem); // Adds .item element
console.log(items.length); // 6 - auto-updated

// Closest for ancestor lookup
const card = button.closest(".card");

// Matches for filtering
if (element.matches("[data-active='true']")) {
  // Element has attribute
}

// Traditional approach
const div = document.createElement("div");
div.textContent = "Hello";
document.body.appendChild(div);

// Modern approach - multiple nodes
const container = document.querySelector("#container");
container.append("Text", document.createElement("span"), "More text");

// Document fragment for performance
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const item = document.createElement("li");
  item.textContent = `Item ${i}`;
  fragment.appendChild(item);
}
list.appendChild(fragment); // Single reflow

// Clone with deep copy
const original = document.querySelector(".template");
const copy = original.cloneNode(true);
copy.id = "new-id"; // Change duplicate ID
document.body.appendChild(copy);

// Modern insertion methods
element.before("Before"); // Insert before
element.after("After");   // Insert after
element.replaceWith("Replacement"); // Replace
element.remove(); // Remove from DOM

// Add single or multiple classes
element.classList.add("active");
element.classList.add("highlight", "bold", "large");

// Remove classes
element.classList.remove("inactive");

// Toggle class
const isActive = element.classList.toggle("active");
console.log(isActive); // true if added, false if removed

// Force toggle
element.classList.toggle("active", true);  // Always add
element.classList.toggle("active", false); // Always remove

// Check if class exists
if (element.classList.contains("active")) {
  console.log("Element is active");
}

// Replace class
element.classList.replace("old-theme", "new-theme");

// Iterate classes
for (let className of element.classList) {
  console.log(className);
}

// Direct style property (camelCase)
element.style.backgroundColor = "#ff0000";
element.style.fontSize = "16px";
element.style.marginTop = "20px";

// Set multiple styles at once
element.style.cssText = "color: blue; font-size: 14px; padding: 10px;";

// Set with priority
element.style.setProperty("color", "red", "important");

// Remove inline style
element.style.removeProperty("background-color");

// Get computed styles (read-only)
const computed = getComputedStyle(element);
console.log(computed.color); // "rgb(255, 0, 0)"
console.log(computed.fontSize); // "16px"

// Get pseudo-element styles
const beforeStyles = getComputedStyle(element, "::before");
console.log(beforeStyles.content);

// CSS Typed OM (modern)
element.attributeStyleMap.set("opacity", 0.5);
const opacity = element.attributeStyleMap.get("opacity");

// Parent navigation
const parent = element.parentElement;
const grandparent = element.parentElement.parentElement;

// Find closest ancestor with class
const container = element.closest(".container");

// Child navigation
const allChildren = parent.children; // HTMLCollection of elements
const firstChild = parent.firstElementChild;
const lastChild = parent.lastElementChild;

// Sibling navigation
const next = element.nextElementSibling;
const previous = element.previousElementSibling;

// Iterate all child elements
for (let child of parent.children) {
  console.log(child.tagName);
}

// Node type checking
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log("Element node");
} else if (node.nodeType === Node.TEXT_NODE) {
  console.log("Text node");
}

// Walk entire tree
function walkDOM(node, callback) {
  callback(node);
  for (let child of node.children) {
    walkDOM(child, callback);
  }
}

walkDOM(document.body, (element) => {
  console.log(element.tagName);
});

// Create observer
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log("Mutation type:", mutation.type);
    console.log("Target:", mutation.target);
    
    if (mutation.type === "childList") {
      console.log("Added:", mutation.addedNodes);
      console.log("Removed:", mutation.removedNodes);
    }
    
    if (mutation.type === "attributes") {
      console.log("Attribute:", mutation.attributeName);
      console.log("Old value:", mutation.oldValue);
    }
  });
});

// Configure and start observing
const config = {
  "childList": true,
  "attributes": true,
  "attributeOldValue": true,
  "subtree": true
};

observer.observe(document.body, config);

// Later: stop observing
observer.disconnect();

// Watch for specific attribute changes
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "data-status") {
      console.log("Status changed to:", mutation.target.dataset.status);
    }
  });
});

observer.observe(element, {
  "attributes": true,
  "attributeFilter": ["data-status", "class"]
});

// Detect when element is added to DOM
function whenElementAdded(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        if (node.matches && node.matches(selector)) {
          callback(node);
        }
      });
    });
  });
  
  observer.observe(document.body, {
    "childList": true,
    "subtree": true
  });
  
  return observer;
}

// Usage
const obs = whenElementAdded(".dynamic-content", (element) => {
  console.log("Dynamic content appeared:", element);
  obs.disconnect(); // Stop after first match
});

// React to DOM changes with debouncing
let timeoutId;
const debouncedObserver = new MutationObserver(() => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    console.log("DOM stable after changes");
    updateUI();
  }, 300);
});

debouncedObserver.observe(container, {
  "childList": true,
  "subtree": true
});

// Basic event listener
button.addEventListener("click", (event) => {
  console.log("Button clicked!", event);
});

// Options object - once option
button.addEventListener("click", handleClick, { "once": true });
// Automatically removed after first click

// Passive listener for scroll performance
document.addEventListener("scroll", handleScroll, { "passive": true });
// Cannot call event.preventDefault()

// Capture phase
parent.addEventListener("click", handleCapture, { "capture": true });
// Fires before child's event

// Remove event listener
const handler = (e) => console.log(e);
button.addEventListener("click", handler);
button.removeEventListener("click", handler); // Must use same function reference

// AbortController for easy removal
const controller = new AbortController();
button.addEventListener("click", handleClick, { "signal": controller.signal });
button2.addEventListener("click", handleClick2, { "signal": controller.signal });
// Remove all listeners at once
controller.abort();

// Simple custom event
const simpleEvent = new Event("userLogin", {
  "bubbles": true,
  "cancelable": true
});
element.dispatchEvent(simpleEvent);

// CustomEvent with data payload
const customEvent = new CustomEvent("dataUpdate", {
  "bubbles": true,
  "detail": {
    "userId": 123,
    "timestamp": Date.now(),
    "changes": ["name", "email"]
  }
});
element.dispatchEvent(customEvent);

// Listen for custom event
element.addEventListener("dataUpdate", (event) => {
  console.log("User ID:", event.detail.userId);
  console.log("Changes:", event.detail.changes);
});

// Dispatch with return value check
const event = new CustomEvent("beforeSave", {
  "cancelable": true,
  "detail": { "data": formData }
});
const allowed = element.dispatchEvent(event);
if (!allowed) {
  console.log("Save was prevented by listener");
}

// Simulate mouse click
const clickEvent = new MouseEvent("click", {
  "bubbles": true,
  "cancelable": true,
  "clientX": 100,
  "clientY": 200,
  "button": 0 // Left button
});
button.dispatchEvent(clickEvent);

// Simulate keyboard event
const keyEvent = new KeyboardEvent("keydown", {
  "key": "Enter",
  "code": "Enter",
  "keyCode": 13,
  "bubbles": true,
  "cancelable": true,
  "ctrlKey": false,
  "shiftKey": false
});
input.dispatchEvent(keyEvent);

// Simulate input event
const inputEvent = new InputEvent("input", {
  "bubbles": true,
  "data": "text",
  "inputType": "insertText"
});
textarea.dispatchEvent(inputEvent);

// Unified pointer handling (mouse, touch, pen)
element.addEventListener("pointerdown", (event) => {
  console.log("Pointer type:", event.pointerType); // "mouse", "touch", "pen"
  console.log("Pointer ID:", event.pointerId);
  console.log("Primary:", event.isPrimary);
  console.log("Pressure:", event.pressure);
  console.log("Position:", event.clientX, event.clientY);
  
  // Capture pointer for drag operation
  element.setPointerCapture(event.pointerId);
});

element.addEventListener("pointermove", (event) => {
  if (event.pointerType === "touch") {
    // Handle touch-specific behavior
  }
});

element.addEventListener("pointerup", (event) => {
  element.releasePointerCapture(event.pointerId);
});

// Prevent touch scrolling while drawing
canvas.addEventListener("touchstart", (event) => {
  event.preventDefault();
}, { "passive": false });

// Track multiple simultaneous touches
element.addEventListener("touchstart", (event) => {
  console.log("Active touches:", event.touches.length);
  console.log("Target touches:", event.targetTouches.length);
  console.log("Changed touches:", event.changedTouches.length);
  
  // Access individual touches
  for (let touch of event.touches) {
    console.log("Touch ID:", touch.identifier);
    console.log("Position:", touch.clientX, touch.clientY);
  }
});

// Pinch-to-zoom detection
let initialDistance = 0;
element.addEventListener("touchstart", (event) => {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    initialDistance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
  }
});

element.addEventListener("touchmove", (event) => {
  if (event.touches.length === 2) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.hypot(
      touch2.clientX - touch1.clientX,
      touch2.clientY - touch1.clientY
    );
    const scale = distance / initialDistance;
    console.log("Zoom scale:", scale);
  }
});

// Instead of attaching listener to each item
// ❌ Bad: Many listeners, doesn't work with dynamic content
document.querySelectorAll(".item").forEach((item) => {
  item.addEventListener("click", handleClick);
});

// ✅ Good: Single listener on parent
const list = document.querySelector("#list");
list.addEventListener("click", (event) => {
  // Check if clicked element matches selector
  if (event.target.matches(".item")) {
    console.log("Item clicked:", event.target);
    handleItem(event.target);
  }
  
  // Or use closest for nested elements
  const item = event.target.closest(".item");
  if (item && list.contains(item)) {
    console.log("Item found:", item);
  }
});

// Works automatically with dynamically added items
const newItem = document.createElement("div");
newItem.className = "item";
list.appendChild(newItem); // Click handler works immediately!

// Event flow: Capture → Target → Bubble
const parent = document.querySelector("#parent");
const child = document.querySelector("#child");

// Capture phase (top-down)
parent.addEventListener("click", (event) => {
  console.log("Parent - Capture phase");
  console.log("Phase:", event.eventPhase); // 1 (CAPTURING_PHASE)
}, { "capture": true });

// Target phase
child.addEventListener("click", (event) => {
  console.log("Child - Target phase");
  console.log("Phase:", event.eventPhase); // 2 (AT_TARGET)
  console.log("Target:", event.target); // child
  console.log("Current:", event.currentTarget); // child
});

// Bubble phase (bottom-up)
parent.addEventListener("click", (event) => {
  console.log("Parent - Bubble phase");
  console.log("Phase:", event.eventPhase); // 3 (BUBBLING_PHASE)
  console.log("Target:", event.target); // child (original)
  console.log("Current:", event.currentTarget); // parent
});

// Click child outputs:
// "Parent - Capture phase"
// "Child - Target phase"
// "Parent - Bubble phase"

// Multi-action delegation
document.querySelector("#toolbar").addEventListener("click", (event) => {
  const button = event.target.closest("button");
  if (!button) return;
  
  const action = button.dataset.action;
  switch(action) {
    case "save":
      handleSave();
      break;
    case "delete":
      handleDelete();
      break;
    case "edit":
      handleEdit();
      break;
  }
});

// Table row delegation
table.addEventListener("click", (event) => {
  const row = event.target.closest("tr");
  if (!row || row.parentElement.tagName === "THEAD") return;
  
  const cell = event.target.closest("td");
  const columnIndex = Array.from(row.cells).indexOf(cell);
  
  console.log("Row:", row.rowIndex);
  console.log("Column:", columnIndex);
  console.log("Data:", row.dataset.id);
});

// Form delegation
form.addEventListener("input", (event) => {
  const input = event.target;
  if (input.matches("[data-validate]")) {
    validateField(input);
  }
});

// Performance: Delegate to document for global handlers
document.addEventListener("click", (event) => {
  // Close dropdowns when clicking outside
  if (!event.target.closest(".dropdown")) {
    closeAllDropdowns();
  }
});

// Simple GET request
fetch("/api/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log("Users:", data);
  })
  .catch((error) => {
    console.error("Fetch error:", error);
  });

// Async/await pattern (preferred)
async function fetchUsers() {
  try {
    const response = await fetch("/api/users");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error:", error);
    throw error;
  }
}

// POST request with JSON
async function createUser(userData) {
  const response = await fetch("/api/users", {
    "method": "POST",
    "headers": {
      "Content-Type": "application/json"
    },
    "body": JSON.stringify(userData)
  });
  return response.json();
}

// Using Headers object
const headers = new Headers();
headers.append("Authorization", "Bearer token123");
headers.append("Content-Type", "application/json");

const response = await fetch("/api/protected", {
  "method": "GET",
  "headers": headers,
  "credentials": "include" // Send cookies
});

// Check response headers
console.log("Content-Type:", response.headers.get("content-type"));
console.log("Has header:", response.headers.has("x-custom"));

// Iterate headers
for (let [key, value] of response.headers) {
  console.log(`${key}: ${value}`);
}

// FormData for file upload
const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("description", "Profile picture");

await fetch("/api/upload", {
  "method": "POST",
  "body": formData // Content-Type auto-set to multipart/form-data
});

// Basic abort pattern
const controller = new AbortController();
const signal = controller.signal;

fetch("/api/data", { signal })
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("Fetch aborted");
    } else {
      console.error("Fetch error:", error);
    }
  });

// Abort after 5 seconds
setTimeout(() => controller.abort(), 5000);

// Abort on user action
cancelButton.addEventListener("click", () => {
  controller.abort("User cancelled");
});

// Timeout utility
function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout);
  
  return fetch(url, {
    ...options,
    "signal": controller.signal
  }).finally(() => clearTimeout(id));
}

// Usage
try {
  const response = await fetchWithTimeout("/api/slow", {}, 3000);
  const data = await response.json();
} catch (error) {
  if (error.name === "AbortError") {
    console.error("Request timed out");
  }
}

// Stream large file download with progress
async function downloadWithProgress(url) {
  const response = await fetch(url);
  const contentLength = response.headers.get("content-length");
  const total = parseInt(contentLength, 10);
  let loaded = 0;
  
  const reader = response.body.getReader();
  const chunks = [];
  
  while (true) {
    const { done, value } = await reader.read();
    
    if (done) break;
    
    chunks.push(value);
    loaded += value.length;
    const progress = (loaded / total) * 100;
    console.log(`Progress: ${progress.toFixed(2)}%`);
  }
  
  // Concatenate chunks into single Uint8Array
  const chunksAll = new Uint8Array(loaded);
  let position = 0;
  for (let chunk of chunks) {
    chunksAll.set(chunk, position);
    position += chunk.length;
  }
  
  return chunksAll;
}

// Stream text data line by line
async function streamText(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    
    const text = decoder.decode(value, { "stream": true });
    console.log("Chunk:", text);
  }
}

// Request deduplication
const requestCache = new Map();

async function fetchOnce(url) {
  if (requestCache.has(url)) {
    return requestCache.get(url);
  }
  
  const promise = fetch(url).then((r) => r.json());
  requestCache.set(url, promise);
  
  try {
    return await promise;
  } catch (error) {
    requestCache.delete(url); // Remove failed request
    throw error;
  }
}

// Retry with exponential backoff
async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok && i < maxRetries - 1) {
        throw new Error(`HTTP ${response.status}`);
      }
      return response;
    } catch (error) {
      if (i === maxRetries - 1) throw error;
      
      const delay = Math.pow(2, i) * 1000; // 1s, 2s, 4s
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
}

// Parallel requests with Promise.all
async function fetchMultiple(urls) {
  const promises = urls.map((url) => 
    fetch(url).then((r) => r.json())
  );
  return Promise.all(promises);
}

// Race condition - first to respond wins
async function fetchFastest(urls) {
  const promises = urls.map((url) => 
    fetch(url).then((r) => r.json())
  );
  return Promise.race(promises);
}

// GET request
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users", true);

xhr.onload = function() {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log("Success:", data);
  } else {
    console.error("Error:", xhr.status);
  }
};

xhr.onerror = function() {
  console.error("Network error");
};

xhr.send();

// POST request with JSON
const xhr2 = new XMLHttpRequest();
xhr2.open("POST", "/api/users", true);
xhr2.setRequestHeader("Content-Type", "application/json");

xhr2.onreadystatechange = function() {
  if (xhr2.readyState === 4) { // DONE
    if (xhr2.status === 201) {
      console.log("Created:", JSON.parse(xhr2.responseText));
    }
  }
};

xhr2.send(JSON.stringify({ "name": "John" }));

// Upload with progress
const formData = new FormData();
formData.append("file", file);

const xhr3 = new XMLHttpRequest();
xhr3.upload.addEventListener("progress", (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log(`Upload: ${percent.toFixed(2)}%`);
  }
});

xhr3.open("POST", "/api/upload", true);
xhr3.send(formData);

// Create WebSocket connection
const ws = new WebSocket("wss://example.com/socket");

// Connection opened
ws.addEventListener("open", (event) => {
  console.log("Connected to server");
  ws.send("Hello Server!");
});

// Listen for messages
ws.addEventListener("message", (event) => {
  console.log("Message from server:", event.data);
  
  // Handle different data types
  if (typeof event.data === "string") {
    const message = JSON.parse(event.data);
    handleMessage(message);
  } else if (event.data instanceof Blob) {
    // Handle binary data
    event.data.text().then((text) => console.log(text));
  }
});

// Handle errors
ws.addEventListener("error", (event) => {
  console.error("WebSocket error:", event);
});

// Connection closed
ws.addEventListener("close", (event) => {
  console.log("Connection closed:", event.code, event.reason);
  if (event.wasClean) {
    console.log("Clean close");
  } else {
    console.log("Connection died");
  }
});

// Send different data types
ws.send("Text message");
ws.send(JSON.stringify({ "type": "chat", "message": "Hello" }));
ws.send(new Blob(["binary data"]));
ws.send(new Uint8Array([1, 2, 3, 4]));

// Close connection gracefully
ws.close(1000, "Normal closure");

class WebSocketClient {
  constructor(url) {
    this.url = url;
    this.reconnectInterval = 1000;
    this.maxReconnectInterval = 30000;
    this.reconnectDecay = 1.5;
    this.connect();
  }
  
  connect() {
    this.ws = new WebSocket(this.url);
    
    this.ws.onopen = () => {
      console.log("WebSocket connected");
      this.reconnectInterval = 1000; // Reset on successful connection
    };
    
    this.ws.onmessage = (event) => {
      this.handleMessage(JSON.parse(event.data));
    };
    
    this.ws.onerror = (error) => {
      console.error("WebSocket error:", error);
    };
    
    this.ws.onclose = (event) => {
      console.log("WebSocket closed:", event.code);
      this.reconnect();
    };
  }
  
  reconnect() {
    console.log(`Reconnecting in ${this.reconnectInterval}ms...`);
    setTimeout(() => {
      this.connect();
      this.reconnectInterval = Math.min(
        this.reconnectInterval * this.reconnectDecay,
        this.maxReconnectInterval
      );
    }, this.reconnectInterval);
  }
  
  send(data) {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify(data));
    } else {
      console.warn("WebSocket not ready");
    }
  }
  
  handleMessage(data) {
    console.log("Received:", data);
  }
  
  close() {
    this.ws.close(1000, "Client closing");
  }
}

// Usage
const client = new WebSocketClient("wss://example.com/socket");
client.send({ "type": "subscribe", "channel": "updates" });

// Create EventSource connection
const eventSource = new EventSource("/api/events");

// Connection opened
eventSource.addEventListener("open", () => {
  console.log("SSE connection opened");
});

// Receive messages
eventSource.addEventListener("message", (event) => {
  console.log("Message:", event.data);
  const data = JSON.parse(event.data);
  updateUI(data);
});

// Custom named events from server
eventSource.addEventListener("notification", (event) => {
  const notification = JSON.parse(event.data);
  showNotification(notification);
});

eventSource.addEventListener("update", (event) => {
  const update = JSON.parse(event.data);
  console.log("Update received:", update);
});

// Handle errors
eventSource.addEventListener("error", (event) => {
  console.error("SSE error");
  if (eventSource.readyState === EventSource.CLOSED) {
    console.log("Connection closed");
  }
});

// Close connection when done
// eventSource.close();

// Server sends events in this format:
// event: eventName
// data: JSON data
// id: unique id (optional)
// retry: milliseconds (optional)
// (blank line)

// Node.js server example
app.get("/api/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");
  
  // Send message without event name (uses 'message' event)
  res.write("data: " + JSON.stringify({ "message": "Hello" }) + "\n\n");
  
  // Send named event
  res.write("event: notification\n");
  res.write("data: " + JSON.stringify({ "title": "New message" }) + "\n");
  res.write("id: 123\n");
  res.write("\n");
  
  // Send periodic updates
  const interval = setInterval(() => {
    res.write(`event: update\n`);
    res.write(`data: ${JSON.stringify({ "time": Date.now() })}\n\n`);
  }, 1000);
  
  req.on("close", () => {
    clearInterval(interval);
    res.end();
  });
});

// Track page unload
window.addEventListener("beforeunload", () => {
  const data = JSON.stringify({
    "event": "page_exit",
    "timestamp": Date.now(),
    "duration": performance.now()
  });
  
  const blob = new Blob([data], { "type": "application/json" });
  const queued = navigator.sendBeacon("/api/analytics", blob);
  
  if (!queued) {
    console.warn("Beacon not queued - data limit exceeded");
  }
});

// Track user actions
function trackEvent(eventName, properties) {
  const data = new URLSearchParams({
    "event": eventName,
    "timestamp": Date.now(),
    ...properties
  });
  
  navigator.sendBeacon("/api/track", data);
}

// Usage
trackEvent("button_click", { "button": "submit", "page": "/checkout" });

// Track errors
window.addEventListener("error", (event) => {
  const errorData = new FormData();
  errorData.append("message", event.message);
  errorData.append("filename", event.filename);
  errorData.append("lineno", event.lineno);
  errorData.append("colno", event.colno);
  
  navigator.sendBeacon("/api/errors", errorData);
});

// Track visibility changes
document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    const sessionData = JSON.stringify({
      "sessionId": sessionStorage.getItem("sessionId"),
      "duration": performance.now(),
      "interactionCount": getInteractionCount()
    });
    
    navigator.sendBeacon(
      "/api/session-end",
      new Blob([sessionData], { "type": "application/json" })
    );
  }
});