export function BrassEmbossedButton() {
  return (
    <div
      className="p-12 grid place-items-center"
      style={{
        background:
          "radial-gradient(circle at 50% 30%, #2a221a 0%, #110d09 100%)",
      }}
    >
      <style>{`
        .brass-btn {
          background:
            linear-gradient(180deg,
              #fde6a0 0%,
              #d6a64a 30%,
              #b67d29 55%,
              #835211 100%);
          color: #3a1f02;
          border: 1px solid #5a3608;
          font-family: var(--font-instrument-serif), serif;
          letter-spacing: 0.04em;
          text-shadow: 0 1px 0 rgba(255,236,180,0.6);
          box-shadow:
            inset 0 2px 0 rgba(255,255,220,0.8),
            inset 0 -3px 4px rgba(80,40,0,0.5),
            0 4px 0 #4a2c06,
            0 6px 12px -2px rgba(0,0,0,0.5);
          transition: transform .15s ease, box-shadow .15s ease;
        }
        .brass-btn:hover {
          background:
            linear-gradient(180deg,
              #ffefb0 0%,
              #e6b658 30%,
              #c68b2c 55%,
              #936118 100%);
          transform: translateY(-1px);
        }
        .brass-btn:active {
          transform: translateY(3px);
          box-shadow:
            inset 0 2px 0 rgba(255,255,220,0.6),
            inset 0 -3px 4px rgba(80,40,0,0.6),
            0 1px 0 #4a2c06;
        }
      `}</style>
      <button
        type="button"
        className="brass-btn px-8 py-3 rounded-md text-[14px] font-semibold uppercase"
      >
        Officium Imperium
      </button>
    </div>
  );
}
Brass Embossed Button
