export function ChromePlateButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{
        background:
          "linear-gradient(180deg, #111 0%, #2a2a2e 100%)",
      }}
    >
      <style>{`
        .chrome-btn {
          background:
            linear-gradient(180deg,
              #f8f9fb 0%,
              #c8ccd2 18%,
              #6e747c 50%,
              #2a2d33 50%,
              #5a6068 82%,
              #d6d9de 100%);
          color: #f8f9fb;
          text-shadow:
            0 1px 0 rgba(0,0,0,0.6),
            0 -1px 0 rgba(255,255,255,0.2);
          border: 1px solid #1a1c20;
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.8),
            inset 0 -1px 0 rgba(0,0,0,0.6),
            0 8px 18px -6px rgba(0,0,0,0.6);
          transition: transform .2s ease, filter .2s ease;
          position: relative;
          overflow: hidden;
        }
        .chrome-btn::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(120deg,
            transparent 30%,
            rgba(255,255,255,0.45) 50%,
            transparent 70%);
          transform: translateX(-120%);
          transition: transform .7s ease;
          pointer-events: none;
        }
        .chrome-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
        .chrome-btn:hover::after { transform: translateX(120%); }
        .chrome-btn:active { transform: translateY(1px); }
      `}</style>
      <button
        type="button"
        className="chrome-btn px-9 py-3.5 rounded-md text-[14px] font-bold uppercase tracking-[0.14em]"
      >
        Power on
      </button>
    </div>
  );
}
Chrome Plate Button
