blockchain/apps/portal/components/marketing/dual-path-cta.tsx

import Link from "next/link";

import { ArrowRightIcon } from "@/components/icons/arrow-right";
import { cn } from "@/lib/utils";

const PATHS = [
  {
    href: "/business",
    label: "For business",
    title: "Trust without the theatre",
    body: "Confidential operations, publicly verifiable anchors. Built for partners who need proof, not buzzwords.",
    accent: "accent" as const,
  },
  {
    href: "/developers",
    label: "For developers",
    title: "Build on the hybrid path",
    body: "Docs, architecture, and a live portal to follow every private block and public anchor end to end.",
    accent: "proof" as const,
  },
] as const;

export function DualPathCta({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "grid gap-4 md:grid-cols-2 md:gap-5",
        className,
      )}
    >
      {PATHS.map((path) => (
        <Link
          key={path.href}
          href={path.href}
          className={cn(
            "group relative flex flex-col overflow-hidden rounded-2xl border border-border bg-card p-7 transition-colors sm:p-8",
            "hover:border-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
            path.accent === "accent"
              ? "hover:bg-accent-muted/40"
              : "hover:bg-proof-muted/40",
          )}
        >
          <span
            className={cn(
              "text-xs font-medium uppercase tracking-[0.16em]",
              path.accent === "accent" ? "text-accent-hover" : "text-proof",
            )}
          >
            {path.label}
          </span>
          <span className="font-display mt-3 text-2xl font-semibold tracking-tight text-foreground">
            {path.title}
          </span>
          <span className="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">
            {path.body}
          </span>
          <span
            className={cn(
              "mt-6 inline-flex items-center gap-2 text-sm font-medium",
              path.accent === "accent" ? "text-accent-hover" : "text-proof",
            )}
          >
            Enter
            <ArrowRightIcon
              size={15}
              className="transition-transform group-hover:translate-x-0.5"
            />
          </span>
          <span
            aria-hidden
            className={cn(
              "pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full opacity-30 blur-3xl",
              path.accent === "accent" ? "bg-accent" : "bg-proof",
            )}
          />
        </Link>
      ))}
    </div>
  );
}