/**
 * ThinkSchool Public Website — Shared Button Component
 * High-performance button supporting primary amber gradient, secondary glass, and ghost variants.
 */
function Button({
  children,
  href,
  onClick,
  variant = "primary",
  size = "md",
  className = "",
  isExternal = false,
  disabled = false,
  type = "button",
  iconAfter = null,
  iconBefore = null,
  ...rest
}) {
  const baseStyles =
    "inline-flex items-center justify-center font-medium font-body transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 focus-visible:ring-offset-black disabled:opacity-50 disabled:pointer-events-none select-none";

  const sizeStyles = {
    sm: "text-xs px-3.5 py-1.5 rounded-full gap-1.5",
    md: "text-sm px-5 py-2.5 rounded-full gap-2",
    lg: "text-base px-6 py-3 rounded-full gap-2.5",
  };

  const variantStyles = {
    primary:
      "bg-gradient-to-r from-amber-500 via-amber-400 to-orange-500 text-black font-semibold shadow-[0_0_25px_rgba(245,158,11,0.25)] hover:shadow-[0_0_35px_rgba(245,158,11,0.4)] hover:brightness-105 active:scale-[0.98]",
    secondary:
      "bg-zinc-900/90 text-zinc-100 hover:text-white border border-white/15 hover:border-white/30 hover:bg-zinc-800/90 backdrop-blur-sm active:scale-[0.98]",
    ghost: "text-zinc-300 hover:text-white hover:bg-white/5",
    outline:
      "border border-amber-500/40 text-amber-400 hover:text-amber-300 hover:border-amber-400 hover:bg-amber-500/10",
  };

  const combinedClasses = `${baseStyles} ${sizeStyles[size] || sizeStyles.md} ${
    variantStyles[variant] || variantStyles.primary
  } ${className}`;

  if (href) {
    return (
      <a
        href={href}
        className={combinedClasses}
        target={isExternal ? "_blank" : undefined}
        rel={isExternal ? "noopener noreferrer" : undefined}
        {...rest}
      >
        {iconBefore && <span className="shrink-0">{iconBefore}</span>}
        <span>{children}</span>
        {iconAfter && <span className="shrink-0">{iconAfter}</span>}
      </a>
    );
  }

  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      className={combinedClasses}
      {...rest}
    >
      {iconBefore && <span className="shrink-0">{iconBefore}</span>}
      <span>{children}</span>
      {iconAfter && <span className="shrink-0">{iconAfter}</span>}
    </button>
  );
}

window.Button = Button;