<script setup lang="ts">
export interface Milestone {
  date: string
  title: string
  description: string
  icon: string
}

interface Props {
  milestone: Milestone
  index: number
  isLeft: boolean
}

const props = defineProps<Props>()

const itemRef = ref<HTMLElement | null>(null)
const reducedMotion = useReducedMotion()

const { isVisible } = useIntersectionObserver(itemRef, {
  threshold: 0.2,
  rootMargin: '-50px',
})

const shouldAnimate = computed(() => !reducedMotion.value)
</script>

<template>
  <div
    ref="itemRef"
    class="timeline-item relative flex"
    :class="isLeft ? 'md:flex-row-reverse' : 'md:flex-row'"
  >
    <!-- Contenu de l'étape -->
    <div
      class="timeline-content w-full md:w-1/2 pl-10 md:px-8"
      :class="[
        shouldAnimate && isVisible ? 'animate-in' : '',
        shouldAnimate && !isVisible ? 'opacity-0 translate-y-4' : '',
      ]"
    >
      <div
        class="relative rounded-xl border border-sky-dark/50 bg-sky-dark/30 p-6 shadow-lg backdrop-blur-sm transition-all hover:border-sky-500/30 hover:shadow-sky-500/5"
      >
        <!-- Icône -->
        <div class="mb-3 text-4xl">
          {{ milestone.icon }}
        </div>

        <!-- Date badge -->
        <span class="mb-3 inline-block rounded-full bg-sky-500/20 px-3 py-1 text-sm font-medium text-sky-400">
          {{ milestone.date }}
        </span>

        <!-- Titre -->
        <h3 class="mb-2 text-xl font-bold text-white">
          {{ milestone.title }}
        </h3>

        <!-- Description -->
        <p class="font-narrative leading-relaxed text-gray-400">
          {{ milestone.description }}
        </p>
      </div>
    </div>

    <!-- Point sur la ligne -->
    <div class="timeline-dot absolute left-0 top-8 z-10 md:left-1/2 md:-translate-x-1/2">
      <div
        class="h-4 w-4 rounded-full ring-4 ring-sky-darker transition-all"
        :class="isVisible ? 'bg-sky-400 scale-110' : 'bg-sky-dark'"
      />
    </div>

    <!-- Espace pour le côté vide (desktop) -->
    <div class="hidden w-1/2 md:block" />
  </div>
</template>

<style scoped>
.animate-in {
  animation: fadeSlideUp 0.6s ease-out forwards;
}

@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline-content {
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-in {
    animation: none;
  }
}
</style>
