export function GlitchTextButton() {
  return (
    <div className="bg-[#0a0a0a] p-12 grid place-items-center">
      <style>{`
        @keyframes glitch-x {
          0%, 100% { transform: translateX(0); }
          10% { transform: translateX(-2px); }
          30% { transform: translateX(2px); }
          50% { transform: translateX(-1px); }
          70% { transform: translateX(1px); }
        }
        @keyframes glitch-clip {
          0%   { clip-path: inset(20% 0 60% 0); }
          20%  { clip-path: inset(60% 0 20% 0); }
          40%  { clip-path: inset(10% 0 80% 0); }
          60%  { clip-path: inset(70% 0 5% 0); }
          80%  { clip-path: inset(40% 0 40% 0); }
          100% { clip-path: inset(0 0 0 0); }
        }
        .glitch-btn {
          position: relative;
          color: #f4f4f5;
          isolation: isolate;
          transition: color .2s ease;
        }
        .glitch-btn::before,
        .glitch-btn::after {
          content: attr(data-text);
          position: absolute; inset: 0;
          display: grid; place-items: center;
          opacity: 0;
          pointer-events: none;
        }
        .glitch-btn::before { color: #ff003c; transform: translateX(-2px); }
        .glitch-btn::after  { color: #00f0ff; transform: translateX(2px); }
        .glitch-btn:hover { animation: glitch-x .3s steps(2) infinite; }
        .glitch-btn:hover::before,
        .glitch-btn:hover::after {
          opacity: 1;
          animation: glitch-clip .8s steps(6) infinite;
        }
        .glitch-btn:active { transform: scale(.97); }
      `}</style>
      <button
        type="button"
        data-text="// JACK_IN"
        className="glitch-btn px-7 py-3 rounded-none text-[14px] font-mono uppercase tracking-[0.18em]"
        style={{
          background: "#111",
          border: "1px solid #2a2a2a",
        }}
      >
        // JACK_IN
      </button>
    </div>
  );
}
Glitch Text Button
