<section class="workspace" data-view="plan" aria-labelledby="workspace-title">
  <header class="workspace__header">
    <div>
      <p class="eyebrow">Produktteam</p>
      <h1 id="workspace-title">Launch-plan</h1>
    </div>

    <div class="view-switcher" aria-label="Skift visning">
      <button type="button" class="is-active" data-view="plan" aria-pressed="true">Plan</button>
      <button type="button" data-view="priority" aria-pressed="false">Prioritet</button>
      <button type="button" data-view="focus" aria-pressed="false">Fokus</button>
    </div>
  </header>

  <p class="workspace__status" aria-live="polite">
    Plan viser hele teamets arbejde i den rækkefølge, det skal leveres.
  </p>

  <div class="project-board" aria-label="Projektkort">
    <article class="project-card is-focus" id="checkout">
      <p class="project-card__meta">Kritisk sti</p>
      <h2>Checkout flow</h2>
      <p>Reducer frafald i betaling og gør fejlbeskeder mere tydelige.</p>
      <div class="project-card__footer">
        <span>8 dage</span>
        <span class="tag tag--risk">Risiko</span>
      </div>
    </article>

    <article class="project-card" id="search">
      <p class="project-card__meta">Discovery</p>
      <h2>Smart søgning</h2>
      <p>Vis hurtige forslag, seneste søgninger og bedre tomme resultater.</p>
      <div class="project-card__footer">
        <span>5 dage</span>
        <span class="tag">UX</span>
      </div>
    </article>

    <article class="project-card is-focus" id="pricing">
      <p class="project-card__meta">Beslutning</p>
      <h2>Pris-side</h2>
      <p>Flyt sammenligning, social proof og primær CTA tættere på hinanden.</p>
      <div class="project-card__footer">
        <span>3 dage</span>
        <span class="tag tag--ready">Klar</span>
      </div>
    </article>

    <article class="project-card" id="onboarding">
      <p class="project-card__meta">Aktivering</p>
      <h2>Onboarding</h2>
      <p>Fjern trin, der ikke skaber værdi før brugerens første succes.</p>
      <div class="project-card__footer">
        <span>6 dage</span>
        <span class="tag">Flow</span>
      </div>
    </article>

    <article class="project-card" id="insights">
      <p class="project-card__meta">Data</p>
      <h2>Insights</h2>
      <p>Gør de vigtigste signaler synlige uden at åbne en rapport.</p>
      <div class="project-card__footer">
        <span>4 dage</span>
        <span class="tag">Beta</span>
      </div>
    </article>
  </div>
</section>

const workspace = document.querySelector(".workspace");
const status = document.querySelector(".workspace__status");
const buttons = document.querySelectorAll("[data-view]");
let isTransitioning = false;

const copy = {
  plan: "Plan viser hele teamets arbejde i den rækkefølge, det skal leveres.",
  priority: "Prioritet flytter de vigtigste kort frem uden at miste sammenhængen.",
  focus: "Fokus skjuler støj og lader de kritiske kort vokse ind i pladsen.",
};

function applyView(view) {
  workspace.dataset.view = view;
  status.textContent = copy[view];
  buttons.forEach((button) => {
    const active = button.dataset.view === view;
    button.classList.toggle("is-active", active);
    button.setAttribute("aria-pressed", String(active));
  });
}

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    const view = button.dataset.view;
    if (!view || view === workspace.dataset.view || isTransitioning) return;

    const update = () => applyView(view);

    if (!document.startViewTransition) {
      update();
      return;
    }

    isTransitioning = true;
    workspace.setAttribute("aria-busy", "true");
    try {
      const transition = document.startViewTransition(update);
      Promise.resolve(transition.finished)
        .finally(() => {
          isTransitioning = false;
          workspace.removeAttribute("aria-busy");
        })
        .catch(() => {});
    } catch (error) {
      isTransitioning = false;
      workspace.removeAttribute("aria-busy");
      throw error;
    }
  });
});