import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { CartProvider } from './context/CartContext'
import { LangProvider } from './context/LangContext'
import App from './App'
import './App.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <LangProvider>
      <CartProvider>
        <App />
      </CartProvider>
    </LangProvider>
  </StrictMode>
)

const revealIO = new IntersectionObserver((entries) => {
  for (const e of entries) {
    if (e.isIntersecting) {
      e.target.classList.add('visible')
      revealIO.unobserve(e.target)
    }
  }
}, { threshold: 0.06, rootMargin: '0px 0px -20px 0px' })

let mutationTimer = 0
const domObs = new MutationObserver(() => {
  cancelAnimationFrame(mutationTimer)
  mutationTimer = requestAnimationFrame(() => {
    document.querySelectorAll('.reveal:not(.visible)').forEach(el => revealIO.observe(el))
  })
})
domObs.observe(document.getElementById('root'), { childList: true, subtree: true })
document.querySelectorAll('.reveal:not(.visible)').forEach(el => revealIO.observe(el))