import { revealProps } from "@/components/ui/reveal";
import { cn } from "@/lib/cn";

interface Layer {
  name: string;
  question: string;
  description: string;
}

/** Three reporting layers drawn as a narrowing stack: outcome on top, diagnostics underneath. */
export function LayerStack({ layers }: { layers: Layer[] }) {
  return (
    <ol className="space-y-3">
      {layers.map((layer, index) => {
        return (
          <li
            key={layer.name}
            data-reveal=""
            className={cn(
              "grid gap-4 rounded-lg border p-6 sm:grid-cols-[4rem_1fr] sm:p-7 lg:grid-cols-[4rem_1fr_1.1fr] lg:items-center",
              index === 0 ? "border-ink bg-ink text-paper" : index === 1 ? "border-line-strong/50 bg-surface" : "border-line bg-transparent",
            )}
            style={{ marginInline: `${index * 3}%`, ...revealProps(index * 90).style }}
          >
            <span className={cn("font-mono text-data uppercase tracking-[0.08em]", index === 0 ? "text-signal-bright" : "text-muted")}>
              Layer {index + 1}
            </span>
            <div>
              <p className="text-title">{layer.name}</p>
              <p className={cn("mt-1 text-sm", index === 0 ? "text-night-muted" : "text-muted")}>{layer.question}</p>
            </div>
            <p className={cn("text-[0.9375rem] sm:col-start-2 lg:col-start-3", index === 0 ? "text-paper/85" : "text-ink-soft")}>{layer.description}</p>
          </li>
        );
      })}
    </ol>
  );
}