Submatter/apps/web/components/marketing/product-demo.tsx

"use client";

import { motion, useReducedMotion } from "motion/react";
import { Bot, CheckCircle2, GitBranch, Terminal } from "lucide-react";

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

const pipelineSteps = [
  { role: "architect", model: "opus", status: "done" as const },
  { role: "implementer", model: "fast", status: "active" as const },
  { role: "reviewer", model: "fast", status: "queued" as const },
];

export function ProductDemo({ className }: { className?: string }) {
  const reduceMotion = useReducedMotion();

  return (
    <div
      className={cn(
        "relative overflow-hidden rounded-md border border-[hsl(var(--hero-border))] bg-[hsl(240_6%_6%)] shadow-2xl shadow-black/40",
        className,
      )}
    >
      <div className="flex items-center gap-2 border-b border-[hsl(var(--hero-border))] px-4 py-3">
        <div className="flex gap-1.5" aria-hidden>
          <span className="size-2.5 rounded-full bg-[#FF5F57]" />
          <span className="size-2.5 rounded-full bg-[#FEBC2E]" />
          <span className="size-2.5 rounded-full bg-[#28C840]" />
        </div>
        <p className="flex-1 text-center font-mono-brand text-[11px] text-[hsl(var(--hero-muted))]">
          submatter — convoy · mcp-claim-task-tool
        </p>
      </div>

      <div className="grid gap-0 lg:grid-cols-5">
        <div className="border-b border-[hsl(var(--hero-border))] p-4 lg:col-span-2 lg:border-b-0 lg:border-r">
          <div className="mb-3 flex items-center gap-2 text-[hsl(var(--hero-muted))]">
            <Terminal className="size-3.5" aria-hidden />
            <span className="font-mono-brand text-[10px] uppercase tracking-widest">plans/</span>
          </div>
          <pre className="font-mono-brand text-[11px] leading-relaxed text-[hsl(var(--hero-foreground))]">
            <span className="text-[hsl(var(--hero-muted))]">---{"\n"}</span>
            <span className="text-[hsl(var(--agent))]">kind</span>
            <span className="text-[hsl(var(--hero-muted))]">: </span>task{"\n"}
            <span className="text-[hsl(var(--agent))]">slug</span>
            <span className="text-[hsl(var(--hero-muted))]">: </span>mcp-claim-task-tool{"\n"}
            <span className="text-[hsl(var(--agent))]">status</span>
            <span className="text-[hsl(var(--hero-muted))]">: </span>
            <span className="text-[hsl(var(--matter))]">in_progress</span>
            {"\n"}
            <span className="text-[hsl(var(--agent))]">priority</span>
            <span className="text-[hsl(var(--hero-muted))]">: </span>P1{"\n"}
            <span className="text-[hsl(var(--agent))]">model_policy</span>
            <span className="text-[hsl(var(--hero-muted))]">: </span>composer-fast{"\n"}
            <span className="text-[hsl(var(--hero-muted))]">---</span>
            <span className="marketing-cursor-blink text-[hsl(var(--matter))]">▍</span>
          </pre>
        </div>

        <div className="p-4 lg:col-span-3">
          <div className="mb-4 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <GitBranch className="size-3.5 text-[hsl(var(--hero-muted))]" aria-hidden />
              <span className="font-mono-brand text-[10px] uppercase tracking-widest text-[hsl(var(--hero-muted))]">
                Convoy pipeline
              </span>
            </div>
            <span className="inline-flex items-center gap-1.5 rounded-full border border-[hsl(var(--hero-border))] px-2 py-0.5 font-mono-brand text-[10px] text-[hsl(var(--agent))]">
              <span className="marketing-pulse-dot size-1.5 rounded-full bg-[hsl(var(--agent))]" />
              MCP live
            </span>
          </div>

          <ol className="space-y-2">
            {pipelineSteps.map((step, index) => (
              <motion.li
                key={step.role}
                className={cn(
                  "flex items-center justify-between rounded border px-3 py-2.5",
                  step.status === "active"
                    ? "border-[hsl(var(--matter)/0.45)] bg-[hsl(var(--matter)/0.08)]"
                    : "border-[hsl(var(--hero-border))] bg-[hsl(240_5%_8%)]",
                )}
                initial={reduceMotion ? false : { opacity: 0, x: 12 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.15 + index * 0.12, duration: 0.45 }}
              >
                <div className="flex items-center gap-2.5">
                  {step.status === "done" ? (
                    <CheckCircle2 className="size-3.5 text-[hsl(var(--agent))]" aria-hidden />
                  ) : (
                    <Bot
                      className={cn(
                        "size-3.5",
                        step.status === "active" ? "text-[hsl(var(--matter))]" : "text-[hsl(var(--hero-muted))]",
                      )}
                      aria-hidden
                    />
                  )}
                  <span className="font-mono-brand text-xs text-[hsl(var(--hero-foreground))]">
                    role-{step.role}
                  </span>
                </div>
                <span className="font-mono-brand text-[10px] text-[hsl(var(--hero-muted))]">{step.model}</span>
              </motion.li>
            ))}
          </ol>

          <div className="mt-4 rounded border border-dashed border-[hsl(var(--hero-border))] px-3 py-2 font-mono-brand text-[10px] text-[hsl(var(--hero-muted))]">
            claim_task · workspace_id scoped · run ar_8f2a
          </div>
        </div>
      </div>
    </div>
  );
}