Stacked Timeline

// Stacked timeline: overlapping rows (year, milestone, number) that lift
// and take a colour on hover. Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Milestone = { year: string; text: string };

type Props = {
  heading?: string;
  milestones?: Milestone[];
};

const DEFAULT_MILESTONES: Milestone[] = [
  { year: "2012", text: "Maison Élara opens on Rue de la Paix with 40 covers." },
  { year: "2014", text: "First Michelin star. The menu turns fully seasonal." },
  { year: "2016", text: "A private dining room opens; farm partners reach 20." },
  { year: "2018", text: "Second star, and Chef Antoine is named Restaurateur of the Year." },
  { year: "2021", text: "Third star. The dining room grows to 80 covers." },
  { year: "2024", text: "Élara at Home launches, with weekend cooking classes." },
];

// Listed in full so Tailwind keeps every class
const HOVER = ["hover:bg-red-300", "hover:bg-blue-300", "hover:bg-green-300", "hover:bg-yellow-300", "hover:bg-purple-300", "hover:bg-pink-300"];

export default function StackedTimeline({ heading = "Twelve years in the making", milestones = DEFAULT_MILESTONES }: Props) {
  return (
    <section className="bg-white px-5 pb-24 font-['Bricolage_Grotesque',ui-sans-serif,system-ui,sans-serif] antialiased md:px-10">
      <div className="mx-auto max-w-7xl">
        <div className="mx-auto max-w-3xl py-24 text-center md:pt-32">
          <h2 className="text-[clamp(40px,6vw,64px)] font-bold leading-[1.05] tracking-tight text-stone-950">{heading}</h2>
        </div>

        <ol className="flex flex-col">
          {milestones.map((m, i) => (
            <li
              key={m.year}
              className={`relative -mt-4 flex items-center justify-between gap-6 border-t-2 border-[#0F4729] bg-white py-8 transition-all duration-300 ease-out first:mt-0 hover:-translate-y-6 md:gap-20 ${HOVER[i % HOVER.length]}`}
            >
              <span className="text-2xl font-bold text-[#0F4729] md:text-3xl">{m.year}</span>
              <p className="w-full text-xl font-bold text-[#0F4729] md:text-3xl">{m.text}</p>
              <span className="text-2xl font-bold text-[#0F4729] md:text-3xl">{i + 1}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}