import { cn } from "@/lib/utils";

const items = [
  "frontmatter",
  "subagents",
  "claim_task",
  "complete_task",
  "convoy",
  "workspace_id",
  "plans/",
  "mcp",
  "markdown-backlog",
  "human-gates",
  "model_policy",
  "role-implementer",
  "role-reviewer",
  "role-architect",
] as const;

export function MarqueeStrip({ className, variant = "dark" }: { className?: string; variant?: "dark" | "light" }) {
  const track = [...items, ...items];

  return (
    <div
      className={cn(
        "overflow-hidden border-y py-3",
        variant === "dark"
          ? "border-[hsl(var(--hero-border))] bg-[hsl(var(--hero))]"
          : "border-foreground bg-background",
        className,
      )}
      aria-hidden
    >
      <div className="marketing-marquee-track flex w-max gap-8 whitespace-nowrap px-4">
        {track.map((item, i) => (
          <span
            key={`${item}-${i}`}
            className={cn(
              "font-mono-brand text-[11px] uppercase tracking-[0.18em]",
              variant === "dark" ? "text-[hsl(var(--hero-muted))]" : "text-muted-foreground",
            )}
          >
            {item}
          </span>
        ))}
      </div>
    </div>
  );
}