<template>
  <div class="absolute inset-0 overflow-hidden bg-slate-900">
    <!-- Lottie animation -->
    <ClientOnly>
      <DotLottieVue
        src="/animations/supply-chain.lottie"
        autoplay
        loop
        :layout="{ fit: 'cover', align: [0.5, 0.5] }"
        class="absolute top-0 left-0 w-full"
        :style="{
          height: '100vh',
          opacity: 1 - collapseProgress * 0.7,
          transform: `scale(${1 + collapseProgress * 0.1})`
        }"
      />
    </ClientOnly>

    <!-- Overlay for text readability - only when hero starts collapsing -->
    <div
      v-if="collapseProgress > 0.5"
      class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70"
      :style="{ opacity: (collapseProgress - 0.5) * 2 }"
    />
  </div>
</template>

<script setup lang="ts">
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'

defineProps<{
  collapseProgress: number
}>()
</script>
