interface ComplementWorkflowDiagramProps {
  competitorName: string;
  appName: string;
  workflowNote: string;
}

export function ComplementWorkflowDiagram({
  competitorName,
  appName,
  workflowNote,
}: ComplementWorkflowDiagramProps) {
  return (
    <div className="mx-auto max-w-2xl py-4">
      <div
        role="img"
        aria-label={`Workflow diagram: ${competitorName} handles on-page SEO, then ${appName} adds traffic analysis and AI content`}
        className="flex items-center justify-center gap-4"
      >
        {/* Box 1: Partner tool */}
        <div className="flex min-w-0 flex-1 flex-col items-center rounded-xl border border-border bg-muted/50 p-4 text-center">
          <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            You already have
          </span>
          <span className="mt-1 text-lg font-bold text-foreground">{competitorName}</span>
          <span className="mt-1 text-sm text-muted-foreground">On-page SEO</span>
        </div>

        {/* Arrow */}
        <div className="shrink-0 text-muted-foreground" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 32 32"
            fill="none"
          >
            <path
              d="M6 16h20M20 10l6 6-6 6"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          <span className="mt-1 block text-center text-xs text-muted-foreground">+ add</span>
        </div>

        {/* Box 2: RankWiz */}
        <div className="flex min-w-0 flex-1 flex-col items-center rounded-xl border border-primary/40 bg-primary/5 p-4 text-center">
          <span className="text-xs font-semibold uppercase tracking-widest text-primary">
            Add
          </span>
          <span className="mt-1 text-lg font-bold text-foreground">{appName}</span>
          <span className="mt-1 text-sm text-muted-foreground">
            Traffic analysis + AI + ROI
          </span>
        </div>
      </div>

      <p className="mt-4 text-center text-sm text-muted-foreground">{workflowNote}</p>
    </div>
  );
}