export function MarqueeTextButton() {
  return (
    <div className="bg-[#FAFAF8] p-12 grid place-items-center">
      <style>{`
        @keyframes marquee-slide {
          to { transform: translateX(-50%); }
        }
        .marq-btn {
          position: relative;
          overflow: hidden;
          background: #111;
          color: #FAFAF8;
          transition: background .25s ease;
        }
        .marq-track {
          display: inline-flex;
          gap: 24px;
          white-space: nowrap;
          will-change: transform;
        }
        .marq-btn:hover { background: #f8d44b; color: #111; }
        .marq-btn:hover .marq-track {
          animation: marquee-slide 4s linear infinite;
        }
        .marq-btn:active { transform: scale(.98); }
      `}</style>
      <button
        type="button"
        className="marq-btn px-8 py-3 rounded-none text-[13px] font-mono uppercase tracking-[0.2em]"
        style={{ width: 280 }}
      >
        <span className="marq-track">
          <span>Sold out · Sold out · Sold out ·</span>
          <span aria-hidden>Sold out · Sold out · Sold out ·</span>
        </span>
      </button>
    </div>
  );
}
Marquee Text Button
