Timeline Milestones

const milestones = [
  {
    year: "2019",
    title: "Two engineers, one script",
    description: "The internal tool that refused to stay internal.",
  },
  {
    year: "2021",
    title: "First 1,000 teams",
    description: "Zero marketing budget — all word of mouth.",
  },
  {
    year: "2023",
    title: "Seed round, kept small",
    description: "Enough to hire nine people. Not enough to lose focus.",
  },
  {
    year: "2025",
    title: "Profitability",
    description: "The quiet milestone that makes every other one durable.",
  },
  {
    year: "2026",
    title: "40,000 teams and counting",
    description: "Same product philosophy, four orders of magnitude later.",
  },
];

export default function TimelineMilestones() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-2xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Seven years, five turning points
          </h2>
        </div>

        <ol>
          {milestones.map((milestone, index) => (
            <li key={milestone.year} className="relative flex gap-6 pb-10 last:pb-0">
              {index < milestones.length - 1 && (
                <span
                  aria-hidden
                  className="absolute top-8 left-[27px] h-full w-px bg-border"
                />
              )}
              <span className="flex h-7 w-14 shrink-0 items-center justify-center rounded-full border border-border/60 bg-card font-mono text-xs tabular-nums">
                {milestone.year}
              </span>
              <div className="pt-0.5">
                <h3 className="text-sm font-medium">{milestone.title}</h3>
                <p className="mt-1 text-sm text-muted-foreground">
                  {milestone.description}
                </p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}