Frosted nav CTA

function ArrowUpRight({ size = 13 }: { size?: number }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden
      focusable="false"
    >
      <path d="M4.75 11.25 11.25 4.75" />
      <path d="M5.75 4.75h5.5v5.5" />
    </svg>
  );
}

/**
 * Frosted nav CTA.
 *
 * The pill itself is glass: a 60%-opacity panel fill over `backdrop-blur`, so
 * whatever sits behind it — video, imagery, a scrolling page — stays legible
 * through the button instead of being covered by it. That is the whole point;
 * on a flat background the effect is invisible and the component looks plain.
 *
 * The arrow well inverts the pill rather than echoing it: solid ink on a
 * translucent body, so the one opaque element is the thing you click. It
 * drifts up-and-right on hover to telegraph "this leaves the page".
 */
export function PillCta({
  children,
  href = "#",
}: {
  children: React.ReactNode;
  href?: string;
}) {
  // The focus ring is declared on the element rather than inherited from a
  // page-level `:focus-visible` rule, so the pill keeps its keyboard
  // affordance when installed on its own into a project that has no such rule.
  return (
    <a
      href={href}
      className="group inline-flex shrink-0 items-center gap-2.5 rounded-full border border-iq-hairline-strong bg-iq-panel/60 py-1.5 pl-5 pr-1.5 text-iq-small font-medium text-iq-ink backdrop-blur transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-current active:scale-[0.98]"
    >
      {children}
      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-iq-ink text-iq-canvas transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover:-translate-y-0.5 group-hover:translate-x-0.5">
        <ArrowUpRight size={13} />
      </span>
    </a>
  );
}