// components/landing/CtaLink.tsx
// A primary-styled navigation CTA. Semantically a LINK (it navigates to
// /participar), not a <button>, so screen readers and keyboard users get the
// correct role. Mirrors the Button primary token styling (DESIGN.md
// button-primary) and meets the 44px tap-target gate (WCAG 2.1 AA).

import * as React from "react";
import Link from "next/link";

type Variant = "primary" | "secondary";

export interface CtaLinkProps
  extends Omit<React.ComponentProps<typeof Link>, "className"> {
  variant?: Variant;
  block?: boolean;
  className?: string;
}

const base =
  "inline-flex items-center justify-center font-body font-bold text-button rounded-xl " +
  "px-7 py-3.5 min-h-[44px] select-none " +
  "transition-[background-color,box-shadow,opacity] duration-200 " +
  "focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-2 " +
  "focus-visible:outline-steelblue";

const variants: Record<Variant, string> = {
  primary: "bg-primary text-on-primary hover:bg-primary-soft active:bg-primary",
  secondary:
    "bg-canvas text-primary border-2 border-primary hover:bg-primary hover:text-on-primary",
};

export function CtaLink({
  variant = "primary",
  block = false,
  className = "",
  ...rest
}: CtaLinkProps) {
  const cls = [base, variants[variant], block ? "w-full" : "", className]
    .filter(Boolean)
    .join(" ");
  return <Link className={cls} {...rest} />;
}