---
import clsx from 'clsx';
import Check from '@/assets/icons/check.svg?react';
import { AnimatedBars } from './AnimatedBars';

const milestones = [
  {
    date: 'Oct 2025',
    title: 'Tech Preview',
    description: 'Kick the tires, and light the fires',
    completed: true,
  },
  {
    date: 'Mar 2026',
    title: 'Beta',
    description: 'Close to stable. Experimental adoption in real projects',
    completed: true,
  },
  {
    date: 'Mid 2026',
    title: 'GA',
    description: 'Stable APIs. Feature parity w/ Media Chrome, Vidstack, Plyr.',
    completed: false,
  },
  {
    date: 'End of 2026',
    title: 'Core Feature Parity',
    description: 'Video.js core/contrib plugins migrated',
    completed: false,
  },
];
---

<section class="mx-auto w-full max-w-305 px-5">
  <header
    class="mb-12 border-y border-faded-black py-4 dark:border-manila-light"
  >
    <h2
      class="text-center font-display text-h2 text-faded-black uppercase dark:text-manila-light"
    >
      Roadmap
    </h2>
  </header>

  <div class="relative mb-20 h-full lg:mb-30">
    <div class="relative grid gap-15 md:grid-cols-4 md:gap-8 lg:gap-12">
      {
        milestones.map((milestone) => (
          <div class="relative flex gap-12 text-left md:flex-col md:items-center md:gap-0 md:text-center">
            <p class="relative z-10 hidden pb-4 font-display text-h4 text-faded-black uppercase md:block dark:text-manila-light">
              {milestone.date}
            </p>
            <div class="relative flex w-auto justify-center py-0.5 md:w-full">
              <div
                class={clsx(
                  "relative z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-manila-light dark:bg-faded-black",
                  milestone.completed ? "border-orange" : "border-manila-dark",
                )}
              >
                {milestone.completed && (
                  <span class="contents text-orange">
                    <Check width={"1.03rem"} />
                  </span>
                )}
              </div>
            </div>
            <div>
              <p class="relative z-10 block font-display text-h3 text-faded-black uppercase md:hidden dark:text-manila-light">
                {milestone.date}
              </p>
              <h3 class="font-display text-h3 leading-none text-orange uppercase md:mt-5 md:px-1 lg:text-h2">
                {milestone.title}
              </h3>
              <p class="mt-2.5 max-w-55 text-p2 text-warm-gray md:mx-auto dark:text-manila-light">
                {milestone.description}
              </p>
            </div>
          </div>
        ))
      }
      <AnimatedBars
        className="absolute left-0 mt-9 hidden w-full md:block"
        client:idle
      >
        <div
          class="absolute top-0 left-0 z-0 data-bar h-8 w-full brightness-50 dark:brightness-100"
        >
        </div>
        <div
          class="absolute top-0 left-0 z-2 data-bar h-8 bg-manila-light data-bar-orange dark:bg-faded-black"
          style="max-width: 37.5%"
        >
        </div>
        <div
          class="absolute top-0 left-0 z-3 h-10 w-50 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
        >
        </div>
        <div
          class="absolute top-0 right-0 z-4 h-10 w-50 bg-linear-to-r from-transparent to-manila-light dark:to-faded-black"
        >
        </div>
      </AnimatedBars>
      <AnimatedBars
        className="absolute top-0 left-0 mt-0 block h-full w-10 md:hidden"
        client:idle
      >
        <div
          class="absolute top-0 left-0 z-0 h-8 horizontal-bars w-full brightness-50 dark:brightness-100"
        >
        </div>
        <div
          class="absolute top-0 left-0 z-2 h-10 horizontal-bars bg-manila-light horizontal-bars-orange dark:bg-faded-black"
          style="max-height: 30%"
        >
        </div>
        <div
          class="absolute right-0 bottom-0 z-4 h-50 w-10 bg-linear-to-b from-transparent to-manila-light dark:to-faded-black"
        >
        </div>
        <div
          class="absolute top-0 right-0 z-4 h-20 w-10 bg-linear-to-b from-manila-light to-transparent dark:from-faded-black"
        >
        </div>
      </AnimatedBars>
    </div>
  </div>
</section>
