<script lang="ts">
  let hovered = $state(false);
  let isTapped = $state(false);
  let tapMode = $state(false);

  function handleMouseEnter() {
    if (!tapMode) {
      hovered = true;
    }
  }

  function handleMouseLeave() {
    hovered = false;
  }

  function handleTap() {
    tapMode = true;
    isTapped = !isTapped;
  }

  function handleKeydown(event: KeyboardEvent) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      handleTap();
    }
  }

  let showExpanded = $derived(tapMode ? isTapped : hovered);
</script>

<div
  class="title-container relative flex justify-center cursor-text"
  onmouseenter={handleMouseEnter}
  onmouseleave={handleMouseLeave}
  onclick={handleTap}
  onkeydown={handleKeydown}
  role="button"
  tabindex="0"
>
  <!-- BIBDLE (collapsed state) -->
  <span
    class="title-word absolute inset-0 text-center transition-all duration-500 ease-in-out"
    class:opacity-0={showExpanded}
    class:opacity-100={!showExpanded}
  >
    BIBDLE
  </span>

  <!-- BIBLE DAILY (expanded state) -->
  <div
    class="title-expanded absolute inset-0 items-center justify-center transition-all duration-500 ease-in-out"
    class:opacity-0={!showExpanded}
    class:opacity-100={showExpanded}
  >
    <span
      class="transition-all duration-500 ease-in-out"
      class:translate-x-0={!showExpanded}
      class:-translate-x-4={showExpanded}>BIBLE</span
    >
    <span
      class="transition-all duration-500 ease-in-out"
      class:translate-x-0={!showExpanded}
      class:translate-x-4={showExpanded}>DAILY</span
    >
  </div>
</div>

<style>
  .title-container {
    min-height: 1.5em;
    width: 100%;
  }

  .title-word,
  .title-expanded {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-right: -0.3em; /* Compensate for letter-spacing to center properly */
  }

  .title-expanded span {
    display: inline-block;
  }
</style>
