import { useEffect } from 'react'

const IMAGES = [
  '/assets/img/3bd9bd608ec4dd808c60b520b1c81b01-2-2-scaled.3d1bf8f7.webp',
  '/assets/img/240320-BUENAS-58-scaled.772475f8.jpg',
  '/assets/img/240724-BUENAS-1-scaled.e85687e2.jpg',
]

const SLIDES = [
  {
    title: 'Descubra por quê a melhor combinação da culinária é Carne & Pasta',
    sub: 'Uma experiência inesquecível onde tradição e inovação se encontram em cada prato. Bem-vindo ao seu novo destino gastronômico favorito.',
  },
  {
    title: 'Sabores que contam histórias, pratos que ficam na memória',
    sub: 'Cortes nobres grelhados na brasa e massas frescas artesanais — o melhor dos dois mundos reunidos no mesmo lugar.',
  },
  {
    title: 'Tradição italiana no coração de São Bernardo do Campo',
    sub: 'Ambiente acolhedor, atendimento de primeira e uma cozinha que une o melhor da gastronomia italiana e argentina.',
  },
]

const INTERVAL = 5500

export default function HeroSlideshow() {
  useEffect(() => {
    const hero = document.querySelector('.elementor-element-25210bb')
    if (!hero || hero.querySelector('.bn-slides')) return

    // ── 1. Background slides ──────────────────────────────
    const slidesDiv = document.createElement('div')
    slidesDiv.className = 'bn-slides'
    IMAGES.forEach((src, i) => {
      const el = document.createElement('div')
      el.className = 'bn-slide' + (i === 0 ? ' bn-slide--active' : '')
      el.style.backgroundImage = `url(${src})`
      slidesDiv.appendChild(el)
    })
    hero.prepend(slidesDiv)

    // ── 2. Hide original Elementor text ───────────────────
    const origText = hero.querySelector('.elementor-element-af8563e')
    if (origText) origText.style.display = 'none'

    // ── 3. Text blocks ────────────────────────────────────
    const textWrap = document.createElement('div')
    textWrap.className = 'bn-hero-texts'
    SLIDES.forEach((s, i) => {
      const block = document.createElement('div')
      block.className = 'bn-hero-text' + (i === 0 ? ' bn-hero-text--active' : '')
      block.innerHTML = `<h1 class="bn-hero-h1">${s.title}</h1><p class="bn-hero-p">${s.sub}</p>`
      textWrap.appendChild(block)
    })

    // ── 4. Indicators ─────────────────────────────────────
    const indicatorsEl = document.createElement('div')
    indicatorsEl.className = 'bn-indicators'
    SLIDES.forEach((_, i) => {
      const btn = document.createElement('button')
      btn.className = 'bn-ind' + (i === 0 ? ' bn-ind--active' : '')
      btn.setAttribute('aria-label', `Slide ${i + 1}`)
      btn.innerHTML = `
        <span class="bn-ind-bar"><span class="bn-ind-fill"></span></span>
        <span class="bn-ind-num">${String(i + 1).padStart(2, '0')}</span>`
      indicatorsEl.appendChild(btn)
    })

    // ── 5. Bar alinhado ao content box (1170px centrado) ──
    const bar = document.createElement('div')
    bar.className = 'bn-hero-bar'
    bar.appendChild(textWrap)
    bar.appendChild(indicatorsEl)
    hero.appendChild(bar)

    // ── 5. Animation loop ─────────────────────────────────
    let current = 0
    let timer = null

    function goTo(idx) {
      slidesDiv.querySelectorAll('.bn-slide').forEach((el, i) =>
        el.classList.toggle('bn-slide--active', i === idx))
      textWrap.querySelectorAll('.bn-hero-text').forEach((el, i) =>
        el.classList.toggle('bn-hero-text--active', i === idx))
      indicatorsEl.querySelectorAll('.bn-ind').forEach((el, i) => {
        const wasActive = el.classList.contains('bn-ind--active')
        el.classList.toggle('bn-ind--active', i === idx)
        if (i === idx && !wasActive) {
          const fill = el.querySelector('.bn-ind-fill')
          fill.style.animation = 'none'
          void fill.offsetWidth
          fill.style.animation = ''
        }
      })
      current = idx
    }

    indicatorsEl.querySelectorAll('.bn-ind').forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(timer)
        goTo(i)
        timer = setInterval(() => goTo((current + 1) % SLIDES.length), INTERVAL)
      })
    })

    timer = setInterval(() => goTo((current + 1) % SLIDES.length), INTERVAL)

    return () => clearInterval(timer)
  }, [])

  return null
}
