export function GlitchText() {
  return (
    <div className="grid min-h-[240px] place-items-center bg-[#0B0B0F] p-16">
      <div className="text-center">
        <div
          className="glitch relative inline-block text-[40px] font-bold uppercase leading-none tracking-[-0.02em] text-[#FAFAF8] sm:text-[64px]"
          style={{ fontFamily: "Arial, Helvetica, sans-serif" }}
          data-text="GLITCH"
        >
          GLITCH
        </div>
        <div className="mt-5 font-mono text-[10px] uppercase tracking-[0.2em] text-[#FAFAF8]/45">
          system error // recovered
        </div>
      </div>

      <style>{`
        .glitch::before,
        .glitch::after {
          content: attr(data-text);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          overflow: hidden;
        }
        .glitch::before {
          color: #f43f5e;
          animation: glitch-a 2.4s infinite steps(2, end);
          clip-path: inset(0 0 55% 0);
        }
        .glitch::after {
          color: #06b6d4;
          animation: glitch-b 2.4s infinite steps(2, end);
          clip-path: inset(55% 0 0 0);
        }
        @keyframes glitch-a {
          0%, 80%, 100% { transform: translate(0, 0); opacity: 0; }
          82% { transform: translate(-3px, -2px); opacity: 1; }
          86% { transform: translate(2px, 1px); opacity: 1; }
          90% { transform: translate(-2px, 2px); opacity: 1; }
          94% { transform: translate(0, 0); opacity: 0; }
        }
        @keyframes glitch-b {
          0%, 80%, 100% { transform: translate(0, 0); opacity: 0; }
          82% { transform: translate(3px, 2px); opacity: 1; }
          86% { transform: translate(-2px, -1px); opacity: 1; }
          90% { transform: translate(2px, -2px); opacity: 1; }
          94% { transform: translate(0, 0); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
          .glitch::before, .glitch::after { animation: none; opacity: 0; }
        }
      `}</style>
    </div>
  );
}
Glitch Text
