export function GlassMapWidget() {
  return (
    <div className="relative bg-[#0E0B1F] antialiased px-8 py-16 overflow-hidden">
      {/* gradient blobs */}
      <div
        aria-hidden
        className="absolute -top-20 -left-20 h-72 w-72 rounded-full"
        style={{ background: "radial-gradient(closest-side, #6D28D9, transparent)", filter: "blur(30px)", opacity: 0.7 }}
      />
      <div
        aria-hidden
        className="absolute bottom-0 right-0 h-80 w-80 rounded-full"
        style={{ background: "radial-gradient(closest-side, #EC4899, transparent)", filter: "blur(40px)", opacity: 0.55 }}
      />
      <div
        aria-hidden
        className="absolute top-1/2 left-1/3 h-60 w-60 rounded-full"
        style={{ background: "radial-gradient(closest-side, #22D3EE, transparent)", filter: "blur(35px)", opacity: 0.45 }}
      />

      <div className="relative grid place-items-center">
        <div className="w-full max-w-md rounded-3xl border border-white/15 bg-white/10 backdrop-blur-2xl shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)] overflow-hidden">
          {/* Address pill on top */}
          <div className="flex items-center justify-between px-5 pt-5">
            <span className="inline-flex items-center gap-2 rounded-full bg-white/15 border border-white/20 backdrop-blur px-3 py-1.5 text-[11px] font-mono uppercase tracking-[0.18em] text-white/90">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-300 shadow-[0_0_6px_rgba(110,231,183,0.9)]" />
              Open now
            </span>
            <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/55">
              4F · 28 min
            </span>
          </div>

          {/* Map — replace with Google Maps <iframe> embed (dark theme) */}
          <div
            className="relative mt-4 mx-5 mb-5 aspect-[4/3] rounded-2xl overflow-hidden border border-white/10 bg-white/[0.04]"
            aria-label="Glass-style map"
          >
            <div
              className="absolute inset-0"
              style={{
                backgroundImage:
                  "radial-gradient(rgba(255,255,255,0.22) 0.7px, transparent 1px)",
                backgroundSize: "16px 16px",
              }}
              aria-hidden
            />
            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 400 300" aria-hidden>
              <path d="M0 160 Q 130 130 230 170 T 400 130" stroke="rgba(255,255,255,0.4)" strokeWidth="2" fill="none" />
              <path d="M0 230 L 400 210" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" fill="none" />
              <path d="M180 0 L 200 300" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5" fill="none" />
            </svg>
            <span
              className="absolute"
              style={{ top: "50%", left: "50%", transform: "translate(-50%, -100%)" }}
            >
              <span className="relative block h-3.5 w-3.5 rounded-full bg-white shadow-[0_0_14px_rgba(236,72,153,0.9)]">
                <span
                  className="absolute inset-0 rounded-full bg-white/50"
                  style={{ animation: "glass-pulse 2.2s ease-out infinite" }}
                />
              </span>
            </span>
            <style>{`
              @keyframes glass-pulse {
                0% { transform: scale(1); opacity: 0.7; }
                90% { transform: scale(4); opacity: 0; }
                100% { transform: scale(4); opacity: 0; }
              }
            `}</style>
          </div>

          {/* Footer */}
          <div className="px-5 pb-5">
            <h3 className="text-[18px] font-medium text-white tracking-tight">
              Velyn HQ
            </h3>
            <p className="mt-1 text-[13px] text-white/65">
              Linienstraße 142, 10115 Berlin · 4. OG
            </p>
            <button
              type="button"
              className="mt-4 w-full rounded-full bg-white text-[#0E0B1F] py-2.5 text-[13px] font-medium hover:bg-white/90 transition-colors"
            >
              Open in Maps
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
Glass Map Widget

Velyn HQ
