<!-- #region HelpTooltip [C:1] [TYPE Component] [SEMANTICS ui, tooltip, help, hint] -->
<!-- @BRIEF Inline help icon (ⓘ) that shows a tooltip popup on hover/focus with descriptive text. -->
<!-- @LAYER UI -->
<!-- @UX_STATE idle -> Icon visible, tooltip hidden. -->
<!-- @UX_STATE active -> Tooltip visible on hover/focus. -->
<!-- @UX_FEEDBACK Tooltip appears above the icon with a smooth transition. -->
<!-- @UX_REACTIVITY Props -> $props({ text }) -->
<script lang="ts">
  /**
   * Help tooltip component.
   * @prop {string} text - Tooltip text content (plain text, supports both EN/RU inline).
   */
  let { text = "" } = $props();
</script>

<span
  class="group relative inline-flex items-center justify-center align-middle"
  role="button"
  tabindex="0"
  aria-label={text}
>
  <!-- Help circle icon -->
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="text-gray-400 hover:text-blue-500 cursor-help transition-colors shrink-0"
    aria-hidden="true"
  >
    <circle cx="12" cy="12" r="10" />
    <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
    <path d="M12 17h.01" />
  </svg>

  <!-- Tooltip popup -->
  <span
    class="
      invisible group-hover:visible group-focus:visible
      absolute bottom-full left-1/2 -translate-x-1/2 mb-2
      w-64 sm:w-72
      z-50
      rounded-lg border border-gray-200 bg-white px-3 py-2
      text-xs text-gray-700 shadow-lg
      opacity-0 group-hover:opacity-100 group-focus:opacity-100
      transition-opacity duration-150
      pointer-events-none
      whitespace-normal break-words
      text-left font-normal
    "
  >
    {text}
    <!-- Arrow -->
    <span
      class="
        absolute top-full left-1/2 -translate-x-1/2
        border-4 border-transparent border-t-gray-200
      "
      aria-hidden="true"
    ></span>
    <span
      class="
        absolute top-full left-1/2 -translate-x-1/2 mt-px
        border-4 border-transparent border-t-white
      "
      aria-hidden="true"
    ></span>
  </span>
</span>
<!-- #endregion HelpTooltip -->
