3D Elevated Button

export function ElevatedButton({ children, variant = 'blue', ...props }) {
  const variants = {
    blue: 'bg-blue-600 shadow-[0_6px_0_0_#1e40af] hover:shadow-[0_4px_0_0_#1e40af] active:shadow-[0_2px_0_0_#1e40af]',
    purple: 'bg-blue-600 shadow-[0_6px_0_0_#6b21a8] hover:shadow-[0_4px_0_0_#6b21a8] active:shadow-[0_2px_0_0_#6b21a8]',
    green: 'bg-blue-600 shadow-[0_6px_0_0_#15803d] hover:shadow-[0_4px_0_0_#15803d] active:shadow-[0_2px_0_0_#15803d]',
    red: 'bg-blue-600 shadow-[0_6px_0_0_#b91c1c] hover:shadow-[0_4px_0_0_#b91c1c] active:shadow-[0_2px_0_0_#b91c1c]',
  };

  return (
    <button 
      className={`px-8 py-4 text-white font-bold rounded-lg transition-all duration-150 hover:translate-y-0.5 active:translate-y-1 ${variants[variant]}`}
      {...props}
    >
      {children}
    </button>
  );
}

/* ── Live preview accent: "blue" (variant prop + Tailwind above) ── */