// Button.jsx — Sharp-cornered pink CTA pill w/ black arrow-box affordance.
const Button = ({ children = "Contact", size = "md", href, onClick, variant = "pink", target, rel }) => {
  const cls = `pc-btn pc-btn-${size} pc-btn-${variant}`;
  return (
    <a href={href} onClick={onClick} className={cls} target={target} rel={rel}>
      <span>{children}</span>
      <span className="pc-btn-arrow" aria-hidden="true">
        <svg width="15" height="15" viewBox="0 0 15 15">
          <rect width="15" height="15" fill="currentColor"/>
          <path d="M4.5 10L10 4.5 M5 4.5H10V9.5" stroke="var(--pc-btn-arrow-accent)" strokeWidth="1.6" fill="none"/>
        </svg>
      </span>
    </a>
  );
};

// Small outbound-arrow box used on card corners.
const OutboundArrow = ({ size = 49, accent = "#F0A0FF" }) => (
  <svg width={size} height={size} viewBox="0 0 49 49" style={{ display: "block" }}>
    <rect width="49" height="49" fill="#000"/>
    <path d="M18 31L31 18M20 18H31V29" stroke={accent} strokeWidth="2.5" fill="none"/>
  </svg>
);

window.Button = Button;
window.OutboundArrow = OutboundArrow;