/**
 * Refined gold WhatsApp link.
 *
 * Use 3 surfaces:
 *  - <WhatsAppLink href={...} display="+CC XX XXX XXXX" ariaLabel="..." inline />  (footer row)
 *  - <WhatsAppIconButton href={...} ariaLabel="..." />                              (nav)
 *  - <WhatsAppLink href={...} display={...} ariaLabel={...} />                      (contact card)
 *
 * URL format expected: https://api.whatsapp.com/send/?phone=COUNTRYCODE+DIGITS&text&type=phone_number&app_absent=0
 * Phone in URL = digits only (no + or spaces). Display string = formatted "+CC XX XXX XXXX".
 *
 * lucide-react has no WhatsApp glyph → use this inline SVG.
 */
import type { SVGProps } from "react";

export function WhatsAppIcon({ className, ...rest }: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden
      className={className}
      {...rest}
    >
      <path d="M19.11 4.86A9.94 9.94 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.33 4.95L2 22l5.27-1.38a9.93 9.93 0 0 0 4.76 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.84-7.06ZM12.04 20.15c-1.5 0-2.96-.4-4.24-1.17l-.3-.18-3.13.82.83-3.05-.2-.31a8.21 8.21 0 0 1-1.26-4.35c0-4.53 3.69-8.22 8.22-8.22 2.2 0 4.27.86 5.82 2.41a8.16 8.16 0 0 1 2.41 5.81c0 4.53-3.69 8.24-8.15 8.24Zm4.72-6.16c-.26-.13-1.53-.75-1.76-.83-.24-.09-.41-.13-.58.13-.17.26-.66.83-.81 1-.15.17-.3.2-.55.07-.26-.13-1.1-.41-2.1-1.29-.78-.69-1.3-1.55-1.45-1.81-.15-.26-.02-.4.11-.53.11-.11.26-.3.39-.45.13-.15.17-.26.26-.43.09-.17.04-.32-.02-.45-.07-.13-.58-1.4-.79-1.92-.21-.5-.42-.43-.58-.44-.15-.01-.32-.01-.49-.01-.17 0-.45.06-.69.32-.24.26-.9.88-.9 2.15 0 1.27.92 2.5 1.05 2.67.13.17 1.82 2.78 4.42 3.9.62.27 1.1.43 1.48.55.62.2 1.18.17 1.63.1.5-.07 1.53-.62 1.74-1.23.21-.6.21-1.12.15-1.23-.06-.11-.23-.18-.49-.31Z" />
    </svg>
  );
}

type LinkProps = {
  href: string;
  display: string;
  ariaLabel: string;
  inline?: boolean; // true = footer row; false = larger contact-card row
};

export function WhatsAppLink({ href, display, ariaLabel, inline }: LinkProps) {
  if (inline) {
    return (
      <a
        href={href}
        target="_blank"
        rel="noopener noreferrer"
        aria-label={ariaLabel}
        className="flex items-center gap-3 text-sm text-mist hover:text-gold-light"
      >
        <WhatsAppIcon className="size-4" />
        WhatsApp · {display}
      </a>
    );
  }
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={ariaLabel}
      className="group flex items-center gap-3 rounded-xl border border-bone/8 bg-bone/[0.03] p-3.5 transition-colors duration-500 hover:border-gold/30"
    >
      <span className="grid size-9 shrink-0 place-items-center rounded-full border border-gold/30 bg-gold/[0.08] text-gold-light shadow-[0_0_14px_-4px_rgba(212,164,55,0.6)]">
        <WhatsAppIcon className="size-4" />
      </span>
      <span className="text-bone group-hover:text-gold-light">
        WhatsApp · {display}
      </span>
    </a>
  );
}

type ButtonProps = {
  href: string;
  ariaLabel: string;
  className?: string;
};

export function WhatsAppIconButton({ href, ariaLabel, className }: ButtonProps) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={ariaLabel}
      className={`group grid size-10 place-items-center rounded-full border border-bone/15 text-bone transition-all duration-500 hover:border-gold/40 hover:text-gold-light hover:shadow-[0_0_22px_-6px_rgba(212,164,55,0.6)] hover:scale-[1.04] ${className ?? ""}`}
    >
      <WhatsAppIcon className="size-[18px]" />
    </a>
  );
}
