import './style.css'
import { renderApp } from './components'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = renderApp()

const revealElements = document.querySelectorAll<HTMLElement>('[data-reveal]')
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

if (prefersReducedMotion || !('IntersectionObserver' in window)) {
  revealElements.forEach((element) => element.classList.add('is-visible'))
} else {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('is-visible')
          observer.unobserve(entry.target)
        }
      })
    },
    { rootMargin: '0px 0px -12% 0px', threshold: 0.14 },
  )

  revealElements.forEach((element) => observer.observe(element))
}

const requestForm = document.querySelector<HTMLFormElement>('#event-request')
const formStatus = document.querySelector<HTMLParagraphElement>('[data-form-status]')

requestForm?.addEventListener('submit', (event) => {
  event.preventDefault()

  if (formStatus) {
    formStatus.textContent =
      'Vielen Dank. Für den Versand kann später die Backend-Anbindung ergänzt werden.'
  }
})