Numbered Process Steps

// "How it works": heading and intro, then four numbered steps in a hairline grid.
// Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Step = { title: string; text?: string };

type Props = {
  heading?: string[];
  intro?: string;
  steps?: Step[];
};

const DEFAULT_STEPS: Step[] = [
  { title: "A conversation", text: "Tell us who is travelling, when and what you love. We listen first." },
  { title: "A proposal", text: "Within a day: three yachts, a draft itinerary and a clear, all-in estimate." },
  { title: "The details", text: "Menus, wines, toys and transfers, arranged with your captain and chef." },
  { title: "The voyage", text: "Step aboard. We stay on call throughout, and long after you are home." },
];

export default function NumberedProcessSteps({
  heading = ["From first call", "to first swim"],
  intro = "Four simple steps, with one person looking after you from start to finish.",
  steps = DEFAULT_STEPS,
}: Props) {
  return (
    <section className="bg-[#f4f4f3] py-24 font-['Helvetica_Neue',Helvetica,Arial,sans-serif] text-[#0d1114] antialiased md:py-36">
      <div className="mx-auto max-w-[100rem] px-4 md:px-8 lg:px-12">
        <div className="grid gap-8 md:gap-12 lg:grid-cols-12 lg:items-end">
          <h2 className="text-[clamp(2.25rem,4.5vw,4.75rem)] font-normal leading-none tracking-[-0.035em] lg:col-span-7">
            {heading.map((line, i) => (
              <span key={i} className="block">
                {line}
              </span>
            ))}
          </h2>
          {intro && (
            <p className="text-base leading-relaxed text-[#0d1114]/60 md:text-lg lg:col-span-4 lg:col-start-9 lg:pb-3">{intro}</p>
          )}
        </div>

        <ol className="mt-16 grid gap-px bg-[#0d1114]/10 sm:grid-cols-2 md:mt-24 lg:grid-cols-4">
          {steps.map((s, i) => (
            <li key={s.title} className="flex min-h-80 flex-col justify-between gap-12 bg-[#f4f4f3] p-8 md:p-10">
              <span className="text-7xl text-[#a98a5a]">{String(i + 1).padStart(2, "0")}</span>
              <div>
                <h3 className="text-3xl font-normal">{s.title}</h3>
                {s.text && <p className="mt-4 text-sm leading-relaxed text-[#0d1114]/60">{s.text}</p>}
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}