# app/pages/About/index.coffee
document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss" page="About">'+stylFns['app/pages/About/index.styl']+'</style>')

module.exports =
  name: 'About'
  render: (new Function '_ctx', '_cache', renderFns['app/pages/About/index.pug'])()
  data: ->
    features: [
      {
        icon: 'architecture'
        title: 'Уникальная архитектура'
        description: 'Сочетание современного дизайна с традиционными таджикскими мотивами'
      }
      {
        icon: 'acoustics' 
        title: 'Идеальная акустика'
        description: 'Профессиональная звуковая система для незабываемых выступлений'
      }
      {
        icon: 'capacity'
        title: 'Вместительный зал'
        description: '2300 мест в амфитеатре для масштабных мероприятий'
      }
    ]
  mounted: ->
    @setupAnimations()
  methods:
    setupAnimations: ->
      # Анимация появления элементов при скролле
      observer = new IntersectionObserver (entries) ->
        entries.forEach (entry) ->
          if entry.isIntersecting
            entry.target.classList.add('animate-fade-in-up')
      ,
        threshold: 0.1
      
      # Наблюдаем за всеми карточками
      document.querySelectorAll('.bg-white, .bg-accent, .bg-primary, .bg-secondary').forEach (el) ->
        observer.observe(el)