"use client";

import { timeline } from "@/lib/status";
import { motion, useReducedMotion } from "framer-motion";
import { ProgressPill } from "./ProgressPill";

const statusPill = (status: (typeof timeline)[number]["status"]) => {
  switch (status) {
    case "current":
      return <ProgressPill label="Nuværende baseline" variant="brand" pulse />;
    case "superseded":
      return <ProgressPill label="Erstattet" variant="amber" />;
    default:
      return <ProgressPill label="Leveret" variant="muted" />;
  }
};

export function BuildTimeline() {
  const reduce = useReducedMotion();

  return (
    <section className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
      <h2 className="text-2xl font-bold text-nexus-navy">Hvor langt er vi?</h2>
      <p className="mt-2 text-nexus-muted">Build-historik fra platform foundation til build 91.</p>
      <ol className="relative mt-10 space-y-6 border-l-2 border-[#A855F7]/25 pl-6">
        {timeline.map((item, i) => {
          const content = (
            <li key={item.build} className="relative">
              <span
                aria-hidden
                className="absolute -left-[1.6rem] top-1 h-4 w-4 rounded-full border-2 border-white bg-gradient-to-br from-[#9333EA] to-[#06B6D4] shadow"
              />
              <div className="glass rounded-2xl p-5">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-mono text-sm font-semibold text-nexus-navy">
                    Build {item.build}
                  </span>
                  <span className="text-xs text-nexus-muted">{item.version}</span>
                  {statusPill(item.status)}
                </div>
                <h3 className="mt-2 font-semibold text-nexus-navy">{item.title}</h3>
                <p className="mt-1 text-sm text-nexus-muted">{item.description}</p>
              </div>
            </li>
          );

          if (reduce) return content;

          return (
            <motion.div
              key={item.build}
              initial={{ opacity: 0, x: -12 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "-40px" }}
              transition={{ duration: 0.4, delay: i * 0.05 }}
            >
              {content}
            </motion.div>
          );
        })}
      </ol>
    </section>
  );
}
