---
import { getLocale, getUI } from '~/utils/i18n'
import Video from './Video.astro'

const locale = getLocale(Astro)

const {
  routes: {
    index: { features },
  },
} = getUI(locale)

interface Props {
  titles?: string[]
}

const { titles } = Astro.props

const featureList = [
  {
    key: 'workspaces',
    title: features.featureTabs.workspaces.title,
    description: features.featureTabs.workspaces.description,
    video: 'workspaces',
  },
  {
    key: 'compact-mode',
    title: features.featureTabs.compactMode.title,
    description: features.featureTabs.compactMode.description,
    video: 'compact-mode',
  },
  {
    key: 'glance',
    title: features.featureTabs.glance.title,
    description: features.featureTabs.glance.description,
    video: 'glance',
  },
  {
    key: 'split-view',
    title: features.featureTabs.splitView.title,
    description: features.featureTabs.splitView.description,
    video: 'split-views',
  },
]
---

<section
  id="features"
  class="relative flex w-full flex-col items-center gap-8 py-8 text-center sm:gap-12 sm:py-12 xl:gap-24 xl:py-36"
>
  <!-- Section Header -->
  <div class="flex w-full flex-col items-center gap-4 sm:gap-6">
    <h2 class="text-3xl sm:text-4xl md:text-6xl">
      {
        (titles || features.titles).map(title => {
          switch (title) {
            case '\n':
              return <br class="hidden md:block" />
            default:
              return (
                <b
                  class="font-bold"
                  style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
                >
                  {title}
                </b>
              )
          }
        })
      }
    </h2>
    <p
      class="max-w-4xl text-base sm:text-lg"
      style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
    >
      <span class="opacity-80">{features.description}</span>
    </p>
  </div>

  <!-- Features Layout -->
  <div id="showcase" class="flex w-full flex-col gap-12 sm:gap-16 xl:gap-36">
    {
      featureList.map((feature, index) => (
        <div class="flex w-full flex-col items-center gap-6 xl:gap-12">
          <div class="flex flex-col items-center gap-4">
            <h3 class="text-3xl font-bold opacity-0 blur-sm sm:text-4xl xl:text-5xl">
              {feature.title}
            </h3>
            <p
              class="max-w-3xl text-center text-base leading-relaxed sm:text-lg"
              style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
            >
              <span class="opacity-80">{feature.description}</span>
            </p>
          </div>
          <Video
            class="w-full rounded-xl object-cover shadow-lg"
            style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
            name={feature.video}
            autoplay
            loop
            muted
            playsinline
            preload="none"
          />
        </div>
      ))
    }
  </div>
</section>

<script>
  import { animate, onScroll, stagger } from 'animejs'

  function initAnimations() {
    const debug = false

    const elements = document.querySelectorAll('#features h2 b, #features > div > p')
    const showcase = document.getElementById('showcase') as HTMLElement

    animate(elements, {
      opacity: { from: 0.001, to: 1 },
      translateY: { from: 20, to: 0 },
      filter: { from: 'blur(4px)', to: 'blur(0px)' },
      duration: 300,
      delay: stagger(150),
      ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
      autoplay: onScroll({
        target: '#features',
        debug,
      }),
    })

    for (const element of showcase.children) {
      const target = element.querySelectorAll('p, h3, video')
      animate(target, {
        opacity: { from: 0.001, to: 1 },
        translateY: { from: 20, to: 0 },
        filter: { from: 'blur(4px)', to: 'blur(0px)' },
        duration: 300,
        delay: stagger(150),
        ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
        autoplay: onScroll({
          enter: { container: 'top+=500' },
          target: element,
          debug,
        }),
      })
    }
  }
  initAnimations()
</script>
