async function readJsonResponse(response) {
  if (!response.ok) {
    throw new Error(`Request failed with ${response.status}`);
  }

  const contentType = response.headers.get("content-type") || "";
  const isJson =
    contentType.includes("application/json") || contentType.includes("+json");

  if (!isJson) {
    throw new TypeError("Expected a JSON response");
  }

  return response.json();
}

async function fetchJson(url) {
  const response = await fetch(url, {
    headers: { Accept: "application/json" },
  });

  return readJsonResponse(response);
}

const output = document.querySelector("#profile-output");

try {
  const profile = await fetchJson("profile.json");
  output.textContent = `${profile.name} (${profile.role})`;
} catch (error) {
  output.textContent = `Could not load profile: ${error.message}`;
}