function toggleTab(event, tabName) {
  hideAllTabs(event)

  const button =
    event.target.tagName === "BUTTON"
      ? event.target
      : event.target.closest("button")
  // const buttonTop = button.offsetTop
  const icon = button.querySelector(".more-less-icon")
  const article = document.querySelector("#" + tabName)

  icon.textContent = icon.textContent === "+" ? "-" : "+"
  button.classList.toggle("open")
  article.classList.toggle("hidden")
}

function hideAllTabs(event) {
  const tabContainer = event.target.closest("toggle")
  const buttons = document.querySelectorAll(".toggle-btn")
  const articles = document.querySelectorAll(".tab")

  buttons.forEach((btn) => {
    btn.classList.remove("open")
    btn.querySelector(".more-less-icon").textContent = "+"
  })
  articles.forEach((article) => {
    article.classList.add("hidden")
  })
}

document.addEventListener("DOMContentLoaded", () => {
  function toggleLogoState() {
    const scrollY = window.scrollY || window.pageYOffset

    if (scrollY > 10) {
      document.querySelector("#header").classList.add("minimized")
    } else {
      document.querySelector("#header").classList.remove("minimized")
    }
  }

  window.addEventListener("scroll", () => {
    toggleLogoState()
  })
})