Scroll timeline

import { ScrollTimeline } from "@/components/ui/scroll-timeline"

const history = [
  { id: "h1", date: "March 2024", title: "Founded in Dublin", body: "Three people and a spreadsheet that took a week to close the month." },
  { id: "h2", date: "October 2024", title: "First bank feed", body: "Transactions arrive every hour instead of from a CSV." },
  { id: "h3", date: "May 2025", title: "Multi-entity close", body: "Groups close every entity in one place, with eliminations." },
  { id: "h4", date: "January 2026", title: "1,000 teams", body: "Finance teams in 31 countries close with us." },
  { id: "h5", date: "October 2026", title: "Any-currency matching", body: "Payments match invoices across currencies at the day's rate." },
];

export function ScrollTimelineDemo() {
  return (
    <div className="h-[420px] w-full max-w-md overflow-y-auto rounded-[14px] p-6 shadow-[inset_0_0_0_1px_var(--border)]" tabIndex={0} role="region" aria-label="Company history">
      <p className="mb-6 text-sm text-muted-foreground">Scroll the story.</p>
      <ScrollTimeline items={history} />
      <div className="h-48" aria-hidden="true" />
    </div>
  );
}