AI Benchmark Timeline

"use client";

import React from "react";
import { Milestone, Flag, Target } from "lucide-react";

export default function AIBenchmarkTimeline() {
    const events = [
        { year: "2023", label: "v1.0 Basic Reasoning", score: "42.4", color: "bg-zinc-200" },
        { year: "2024", label: "v2.0 Vector Search", score: "68.2", color: "bg-blue-100" },
        { year: "2025", label: "v3.0 Multi-Modal", score: "89.1", color: "bg-violet-100" },
        { year: "NOW", label: "v4.0 Super Alignment", score: "99.4", color: "bg-emerald-100 ring-2 ring-emerald-500/20" },
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-lg mx-auto">
            <div className="flex items-center justify-between mb-10">
                <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 uppercase tracking-widest flex items-center gap-2">
                    <Milestone className="h-4 w-4 text-blue-500" />
                    Benchmark Evolution
                </h3>
                <span className="text-[10px] font-black text-zinc-400">ARC-AGI SCALE</span>
            </div>

            <div className="space-y-8 relative before:absolute before:left-3 before:top-2 before:bottom-2 before:w-0.5 before:bg-zinc-100 dark:before:bg-zinc-800">
                {events.map((ev, i) => (
                    <div key={ev.year} className="flex gap-6 relative">
                        <div className={`h-6 w-6 rounded-full border-4 border-white dark:border-zinc-950 shrink-0 z-10 flex items-center justify-center ${ev.year === "NOW" ? "bg-emerald-500 text-white" : "bg-zinc-200 dark:bg-zinc-800"
                            }`}>
                            {ev.year === "NOW" ? <Flag className="h-2.5 w-2.5" /> : <div className="h-1.5 w-1.5 rounded-full bg-zinc-400" />}
                        </div>
                        <div className="flex-1 pb-2">
                            <div className="flex items-center justify-between mb-1.5">
                                <span className="text-[11px] font-black text-zinc-400">{ev.year}</span>
                                <span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${ev.year === "NOW" ? "text-emerald-600 bg-emerald-50 shadow-sm" : "text-zinc-500 bg-zinc-50"
                                    }`}>
                                    {ev.score}
                                </span>
                            </div>
                            <div className={`p-4 rounded-xl border border-zinc-100 dark:border-zinc-800/50 ${ev.year === "NOW" ? "bg-zinc-50 dark:bg-zinc-900 border-l-4 border-l-emerald-500" : "bg-white dark:bg-zinc-950"
                                }`}>
                                <p className="text-xs font-bold text-zinc-900 dark:text-zinc-100 leading-none">{ev.label}</p>
                                <div className="mt-3 flex items-center gap-1 opacity-50">
                                    <Target className="h-3 w-3" />
                                    <span className="text-[9px] font-bold text-zinc-500 uppercase tracking-widest">Target Met successfully</span>
                                </div>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}