const audienceContent = {
      home: 'Артезианская вода 19 литров с доставкой на дом и в офис. Привозим по Гагаринскому, Ленинскому, Нахимовскому и Балаклавскому районам, помогаем с возвратной тарой и держим понятные цены без скрытых доплат.',
      office: 'Доставка воды в офис в Севастополе с регулярным графиком, безналичной оплатой и приоритетными интервалами. Подходит для команд, кафе, студий, фитнес-клубов и клиентских пространств.'
    }

    const audienceButtons = document.querySelectorAll('[data-audience]')
    const heroAudienceText = document.getElementById('heroAudienceText')
    const mobileToggle = document.getElementById('mobileToggle')
    const mobilePanel = document.getElementById('mobilePanel')
    const cartDrawer = document.getElementById('cartDrawer')
    const cartOpenButton = document.getElementById('cartOpenButton')
    const mobileCartOpenButton = document.getElementById('mobileCartOpenButton')
    const cartCloseButton = document.getElementById('cartCloseButton')
    const modalBackdrop = document.getElementById('orderModal')
    const modalCloseButton = document.getElementById('modalCloseButton')
    const checkoutButton = document.getElementById('checkoutButton')
    const orderButtons = document.querySelectorAll('[data-open-order]')
    const addToCartButtons = document.querySelectorAll('.add-to-cart')
    const faqItems = document.querySelectorAll('.faq-item')
    const cartCount = document.getElementById('cartCount')
    const mobileCartCount = document.getElementById('mobileCartCount')
    const cartItemsCount = document.getElementById('cartItemsCount')
    const cartTotal = document.getElementById('cartTotal')
    const cartList = document.getElementById('cartList')
    const orderForm = document.getElementById('orderForm')
    const contactForm = document.getElementById('contactForm')
    const orderItemsField = document.getElementById('orderItemsField')
    const orderSuccess = document.getElementById('orderSuccess')
    const contactSuccess = document.getElementById('contactSuccess')

    let cart = []

    const updateAudience = audience => {
      heroAudienceText.textContent = audienceContent[audience]
      audienceButtons.forEach(button => {
        const isActive = button.dataset.audience === audience
        button.classList.toggle('active', isActive)
        button.setAttribute('aria-selected', String(isActive))
      })
      const typeField = orderForm.elements.customerType
      typeField.value = audience === 'office' ? 'Для офиса' : 'Для дома'
    }

    const openMobileMenu = () => {
      mobilePanel.classList.add('active')
      mobileToggle.setAttribute('aria-expanded', 'true')
      document.body.classList.add('menu-open')
    }

    const closeMobileMenu = () => {
      mobilePanel.classList.remove('active')
      mobileToggle.setAttribute('aria-expanded', 'false')
      document.body.classList.remove('menu-open')
    }

    const openCart = () => {
      cartDrawer.classList.add('open')
      cartDrawer.setAttribute('aria-hidden', 'false')
      document.body.classList.add('modal-open')
    }

    const closeCart = () => {
      cartDrawer.classList.remove('open')
      cartDrawer.setAttribute('aria-hidden', 'true')
      document.body.classList.remove('modal-open')
    }

    const openModal = () => {
      orderItemsField.value = cart.length
        ? cart.map(item => `${item.name} (${item.volume}) - ${item.price} ₽`).join('\n')
        : ''
      modalBackdrop.classList.add('open')
      modalBackdrop.setAttribute('aria-hidden', 'false')
      document.body.classList.add('modal-open')
    }

    const closeModal = () => {
      modalBackdrop.classList.remove('open')
      modalBackdrop.setAttribute('aria-hidden', 'true')
      document.body.classList.remove('modal-open')
    }

    const renderCart = () => {
      const total = cart.reduce((sum, item) => sum + item.price, 0)
      const count = cart.length

      cartCount.textContent = count
      mobileCartCount.textContent = count
      cartItemsCount.textContent = count
      cartTotal.textContent = `${total} ₽`

      if (!count) {
        cartList.innerHTML = '<div class="empty-state">Корзина пока пуста. Добавьте воду 19 литров, компактные форматы или минеральную воду из каталога.</div>'
        return
      }

      cartList.innerHTML = cart.map((item, index) => `
        <div class="cart-item">
          <div>
            <strong>${item.name}</strong>
            <span>${item.volume} · ${item.price} ₽</span>
          </div>
          <button type="button" data-remove-index="${index}" aria-label="Удалить ${item.name} из корзины">Удалить</button>
        </div>
      `).join('')

      cartList.querySelectorAll('[data-remove-index]').forEach(button => {
        button.addEventListener('click', () => {
          const index = Number(button.dataset.removeIndex)
          cart.splice(index, 1)
          renderCart()
        })
      })
    }

    audienceButtons.forEach(button => {
      button.addEventListener('click', () => updateAudience(button.dataset.audience))
    })

    mobileToggle.addEventListener('click', () => {
      const isOpen = mobilePanel.classList.contains('active')
      if (isOpen) {
        closeMobileMenu()
        return
      }
      openMobileMenu()
    })

    document.querySelectorAll('.mobile-nav a').forEach(link => {
      link.addEventListener('click', closeMobileMenu)
    })

    addToCartButtons.forEach(button => {
      button.addEventListener('click', () => {
        cart.push({
          name: button.dataset.name,
          volume: button.dataset.volume,
          price: Number(button.dataset.price)
        })
        renderCart()
        openCart()
      })
    })

    cartOpenButton.addEventListener('click', openCart)
    mobileCartOpenButton.addEventListener('click', () => {
      closeMobileMenu()
      openCart()
    })
    cartCloseButton.addEventListener('click', closeCart)
    checkoutButton.addEventListener('click', () => {
      closeCart()
      openModal()
    })

    orderButtons.forEach(button => {
      button.addEventListener('click', openModal)
    })

    modalCloseButton.addEventListener('click', closeModal)

    cartDrawer.addEventListener('click', event => {
      if (event.target === cartDrawer) {
        closeCart()
      }
    })

    modalBackdrop.addEventListener('click', event => {
      if (event.target === modalBackdrop) {
        closeModal()
      }
    })

    faqItems.forEach(item => {
      const trigger = item.querySelector('.faq-question')
      trigger.addEventListener('click', () => {
        const isOpen = item.classList.contains('open')
        faqItems.forEach(entry => {
          entry.classList.remove('open')
          entry.querySelector('.faq-question').setAttribute('aria-expanded', 'false')
        })
        if (!isOpen) {
          item.classList.add('open')
          trigger.setAttribute('aria-expanded', 'true')
        }
      })
    })

    orderForm.addEventListener('submit', event => {
      event.preventDefault()
      orderSuccess.classList.add('visible')
      cart = []
      renderCart()
      setTimeout(() => {
        closeModal()
        orderForm.reset()
        orderSuccess.classList.remove('visible')
      }, 1800)
    })

    contactForm.addEventListener('submit', event => {
      event.preventDefault()
      contactSuccess.classList.add('visible')
      setTimeout(() => {
        contactForm.reset()
        contactSuccess.classList.remove('visible')
      }, 2200)
    })

    document.addEventListener('keydown', event => {
      if (event.key !== 'Escape') {
        return
      }
      closeCart()
      closeModal()
      closeMobileMenu()
    })

    renderCart()
    updateAudience('home')