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 border bg-[hsl(0_0%_6%)]", className)}>
      <div className="flex items-center justify-between border-b border-[hsl(var(--hero-border))] px-4 py-3">
        <div className="flex gap-2 font-mono-brand text-[10px] uppercase tracking-widest text-[hsl(var(--hero-muted))]">
          <Terminal className="size-3.5" aria-hidden />
          <span>workspace · convoy</span>
        </div>
        <span className="inline-flex items-center gap-2 font-mono-brand text-[10px] text-[hsl(var(--agent))]">
          <span className="marketing-pulse-dot size-1.5 bg-[hsl(var(--agent))]" />
          mcp connected
        </span>
      </div>

      <div className="grid lg:grid-cols-2">
        <div className="border-b border-[hsl(var(--hero-border))] p-5 lg:border-b-0 lg:border-r">
          <p className="mb-3 font-mono-brand text-[10px] text-[hsl(var(--hero-muted))]">plans/…/Task-*.md</p>
          <pre className="font-mono-brand text-[12px] leading-[1.7] 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))]">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-5">
          <div className="mb-4 flex items-center gap-2 font-mono-brand text-[10px] uppercase tracking-widest text-[hsl(var(--hero-muted))]">
            <GitBranch className="size-3.5" aria-hidden />
            convoy pipeline
          </div>
          <ol className="space-y-2">
            {pipelineSteps.map((step, index) => (
              <motion.li
                key={step.role}
                className={cn(
                  "flex items-center justify-between border px-3 py-2.5",
                  step.status === "active"
                    ? "border-[hsl(var(--matter))] bg-[hsl(var(--matter)/0.07)]"
                    : "border-[hsl(var(--hero-border))]",
                )}
                initial={reduceMotion ? false : { opacity: 0, x: 16 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.2 + index * 0.1, duration: 0.4 }}
              >
                <div className="flex items-center gap-2">
                  {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">role-{step.role}</span>
                </div>
                <span className="font-mono-brand text-[10px] text-[hsl(var(--hero-muted))]">{step.model}</span>
              </motion.li>
            ))}
          </ol>
        </div>
      </div>
    </div>
  );
}