"use client";
import { CopilotKitMark } from "@/components/copilotkit-mark";
import { getRuntimeConfig } from "@/lib/runtime-config.client";
// Icons inlined as SVG so this component avoids a lucide-react dep
// (shell-docs deliberately keeps icon usage minimal — see mdx-registry's
// emoji fallbacks for the broader icon-set decision).
function ArrowRight({ className }: { className?: string }) {
return (
);
}
function Info({ className }: { className?: string }) {
return (
);
}
export type OpsPlatformCTAVariant = "tile" | "inline" | "card" | "info";
export interface OpsPlatformCTAProps {
/** Visual style: tile = full-width hero, inline = mid-page callout, card = footer */
variant?: OpsPlatformCTAVariant;
/** Headline shown to the user */
title: string;
/** Body copy under the headline */
body?: string;
/** Stable identifier for analytics, e.g. "docs:langgraph/quickstart:whats-next".
* Flows through to the destination URL as `utm_content` so dashboard-side
* analytics can attribute the click. Shell-docs does not yet ship a
* client-side PostHog capture; UTM is the source of truth here. */
surface: string;
/** Optional override for the link label. Defaults to "Get Intelligence free" */
ctaLabel?: string;
/** Optional className override for the outermost element */
className?: string;
}
function buildHref(surface: string): string {
// Signup URL is read at render time from the runtime config injected
// by the root layout — see signup-link.tsx and lib/runtime-config.ts
// for the full plumbing rationale. Keeps a single artifact retargetable
// across Railway envs without rebuild.
const signupUrl = getRuntimeConfig().intelligenceSignupUrl;
const url = new URL(signupUrl);
url.searchParams.set("utm_source", "docs");
url.searchParams.set("utm_medium", "cta");
url.searchParams.set("utm_campaign", "intelligence");
url.searchParams.set("utm_content", surface);
return url.toString();
}
export function OpsPlatformCTA({
variant = "card",
title,
body,
surface,
ctaLabel = "Get Intelligence free",
className,
}: OpsPlatformCTAProps) {
const href = buildHref(surface);
if (variant === "info") {
return (
);
}
if (variant === "inline") {
// Compact sibling of the `card` variant. Same visual language — light
// bordered surface, an accent left-edge stripe as the brand signature, the
// CopilotKit kite as the authored stamp, and a real text-link CTA in
// `--accent`.
return (
{/* 2px accent stripe — the structural brand signature. */}
);
}
// variant === "card" (default)
//
// Professional inline docs CTA — Vercel/Linear/Stripe energy, not a marketing
// splash. Light bordered surface (`--bg-surface`), a 2px accent left-edge
// stripe as the brand signature, the CopilotKit kite as the authored stamp
// in the corner, typography-led structure, and a real text-link CTA in
// `--accent`. The whole tile is the anchor; the CTA text is the visible
// click target.
//
// Why this design and not a filled-accent slab:
// - The flat-purple-block + white-pill pattern is the AI-template cliché
// the user has flagged twice as "vibe coded".
// - Real product docs CTAs (Vercel sign-up nudges, Stripe console prompts,
// Linear billing callouts) are mostly monochrome and typography-led, with
// a single accent touchpoint.
// - The kite reads as authored brand, far more credibly than a generic
// sparkle icon.
// - The accent stripe is the same structural cue Linear uses on important
// inline notices — restrained but unmistakable.
//
return (
{/* 2px accent stripe — the structural brand signature. Positioned via the
parent's relative + overflow-hidden so the stripe sits flush against
the rounded corners without bleeding past them. */}