(function () {
  "use strict";

  const filters = document.querySelectorAll("[data-filter]");
  const cards = document.querySelectorAll("[data-tags]");

  filters.forEach((btn) => {
    btn.addEventListener("click", () => {
      filters.forEach((b) => b.setAttribute("data-active", "false"));
      btn.setAttribute("data-active", "true");
      const value = btn.dataset.filter;
      cards.forEach((card) => {
        const tags = card.dataset.tags.split(",");
        const show = value === "todos" || tags.includes(value);
        card.style.display = show ? "" : "none";
      });
    });
  });

  const backdrop = document.getElementById("case-modal");
  const modalBody = document.getElementById("case-modal-body");
  document.querySelectorAll("[data-case-trigger]").forEach((card) => {
    card.addEventListener("click", () => {
      modalBody.innerHTML = `
        <p class="eyebrow">${card.dataset.caseTag || ""}</p>
        <h3>${card.dataset.caseTitle}</h3>
        <p style="margin-top:0.8rem;"><strong>Contexto:</strong> ${card.dataset.caseContext}</p>
        <p style="margin-top:0.6rem;"><strong>Problema:</strong> ${card.dataset.caseProblem}</p>
        <p style="margin-top:0.6rem;"><strong>Solución:</strong> ${card.dataset.caseSolution}</p>
        <div class="tags" style="margin-top:1rem;">${(card.dataset.tags || "")
          .split(",")
          .map((t) => `<span class="pill">${t}</span>`)
          .join("")}</div>
        <p style="margin-top:1rem; font-size:0.85rem; color:var(--text-soft);">* Caso de referencia (placeholder) — se reemplaza por proyectos reales del portfolio.</p>
      `;
      backdrop.classList.add("open");
    });
  });

  backdrop?.addEventListener("click", (e) => {
    if (e.target === backdrop || e.target.closest("[data-modal-close]")) {
      backdrop.classList.remove("open");
    }
  });
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") backdrop?.classList.remove("open");
  });
})();