<!-- Lightbox -->
<script src="https://cdn.jsdelivr.net/npm/lightbox3@1.1.0/dist/lightbox3.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightbox3@1.1.0/dist/lightbox3.min.css">

<script>
(() => {
  const ALT_PREFIX = 'lb:'

  const isLbImg = (img) => {
    if (!img || img.tagName !== 'IMG') return false
    return (img.getAttribute('alt') || '').startsWith(ALT_PREFIX)
  }

  const findLbImg = (node) => {
    const img = node?.closest?.('img')
    return isLbImg(img) ? img : null
  }

  const getLightboxCtor = () => {
    const w = window
    if (!w) return null
    if (w.Lightbox && typeof w.Lightbox.init === 'function') return w.Lightbox
    if (w.Lightbox3 && w.Lightbox3.Lightbox && typeof w.Lightbox3.Lightbox.init === 'function') {
      return w.Lightbox3.Lightbox
    }
    return null
  }

  const getLightbox = () => {
    const ctor = getLightboxCtor()
    if (!ctor) return null
    if (!window.__lb3Singleton) window.__lb3Singleton = ctor.init()
    return window.__lb3Singleton
  }

  const getImgSrc = (img) => {
    if (!img) return ''
    return img.currentSrc || img.src || img.getAttribute('src') || ''
  }

  document.addEventListener(
    'click',
    (e) => {
      const img = findLbImg(e.target)
      if (!img) return

      const lb = getLightbox()
      const src = getImgSrc(img)
      if (!lb || !src) return

      e.preventDefault()
      e.stopPropagation()
      lb.open(src, img)
    },
    true
  )

  const hintCursor = () => {
    document.querySelectorAll(`img[alt^="${ALT_PREFIX}"]`).forEach((img) => {
      img.style.cursor = 'zoom-in'
    })
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', hintCursor, { once: true })
  } else {
    hintCursor()
  }
})()

</script>