const STEPS = [
  {
    n: "01",
    title: "Private execution",
    body: "Transactions run on a permissioned layer — fast finality, controlled access, confidential data where it belongs.",
  },
  {
    n: "02",
    title: "Commitment",
    body: "A relayer posts cryptographic commitments: state roots that prove what happened without exposing private detail.",
  },
  {
    n: "03",
    title: "Public anchor",
    body: "The public chain holds the proof. Anyone can verify the anchor; only permitted parties see the private payload.",
  },
] as const;

export function HybridJourney() {
  return (
    <div>
      <div className="mb-10 h-px w-full journey-line opacity-70" aria-hidden />
      <ol className="grid gap-8 md:grid-cols-3 md:gap-6">
        {STEPS.map((step, i) => (
          <li key={step.n} className="relative">
            <p className="font-mono text-xs tabular-nums tracking-wider text-muted-foreground">
              {step.n}
            </p>
            <h3 className="font-display mt-3 text-xl font-semibold tracking-tight">
              {step.title}
            </h3>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              {step.body}
            </p>
            {i < STEPS.length - 1 ? (
              <span
                aria-hidden
                className="absolute -right-3 top-8 hidden h-px w-6 journey-line md:block"
              />
            ) : null}
          </li>
        ))}
      </ol>
    </div>
  );
}