AsciiSpotlightBand

---
import BreakoutContainer from '../0_atoms/BreakoutContainer.astro'
import '../../styles/ascii-spotlight-footer.css'
---

<BreakoutContainer width="full" backgroundReset class="ascii-spotlight-breakout bg-surface">
  <div class="ascii-spotlight-band" data-ascii-spotlight>
    <canvas aria-hidden="true"></canvas>
  </div>
</BreakoutContainer>

<script>
  import { initAsciiSpotlight } from '../../lib/ascii-spotlight/ascii-spotlight'

  function boot(): void {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return

    const cleanups: Array<() => void> = []
    document.querySelectorAll<HTMLElement>('[data-ascii-spotlight]').forEach(host => {
      cleanups.push(initAsciiSpotlight(host))
    })

    document.addEventListener(
      'astro:before-swap',
      () => {
        cleanups.forEach(cleanup => cleanup())
        cleanups.length = 0
      },
      { once: true },
    )
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', boot, { once: true })
  } else {
    boot()
  }
</script>