export function SoftMonoLocationCard() {
  return (
    <div className="bg-[#F2F1EC] antialiased px-6 py-14 grid place-items-center text-[#111111]">
      <div className="w-full max-w-md bg-white rounded-2xl border border-[#1111111A] shadow-[0_1px_0_rgba(17,17,17,0.04),0_24px_60px_-30px_rgba(17,17,17,0.15)] overflow-hidden">
        {/* Map preview — replace with Google Maps <iframe> embed */}
        <div
          className="relative aspect-[16/10] w-full bg-gradient-to-br from-[#E9EFE7] via-[#F2F1EC] to-[#E2E6DC]"
          aria-label="Map preview"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "radial-gradient(rgba(42,61,47,0.18) 1px, transparent 1.5px)",
              backgroundSize: "14px 14px",
            }}
            aria-hidden
          />
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 400 250" aria-hidden>
            <path d="M0 140 Q 100 100 200 130 T 400 110" stroke="#2A3D2F" strokeWidth="2.5" fill="none" opacity="0.45" />
            <path d="M0 200 L 400 180" stroke="#2A3D2F" strokeWidth="1.5" fill="none" opacity="0.25" />
            <path d="M150 0 L 170 250" stroke="#2A3D2F" strokeWidth="1.5" fill="none" opacity="0.25" />
          </svg>
          <span
            className="absolute"
            style={{ top: "50%", left: "50%", transform: "translate(-50%, -100%)" }}
            aria-hidden
          >
            <span className="relative block h-3.5 w-3.5 rounded-full bg-[#2A3D2F] ring-[5px] ring-[#2A3D2F]/15">
              <span
                className="absolute inset-0 rounded-full bg-[#2A3D2F]/30"
                style={{ animation: "softpulse 2.4s ease-out infinite" }}
              />
            </span>
          </span>
          <style>{`
            @keyframes softpulse {
              0% { transform: scale(1); opacity: 0.5; }
              80% { transform: scale(3); opacity: 0; }
              100% { transform: scale(3); opacity: 0; }
            }
          `}</style>
        </div>

        <div className="p-6">
          <div className="flex items-center gap-2 font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
            <span className="inline-block h-1.5 w-1.5 rounded-full bg-[#2A3D2F]" />
            Open now · until 18:00
          </div>
          <h3 className="mt-2 text-[20px] font-medium tracking-tight leading-snug">
            Velynkit Studio — Berlin
          </h3>
          <p className="mt-1 text-[14px] text-[#6B6B66]">
            Linienstraße 142, 10115 Berlin
          </p>

          <div className="mt-5 flex items-center gap-2">
            <a
              href="#"
              className="flex-1 grid place-items-center rounded-full bg-[#111111] text-white text-[13px] font-medium py-2.5 hover:bg-[#1F1F1D] transition-colors"
            >
              Get directions
            </a>
            <a
              href="tel:+493078730410"
              className="grid place-items-center rounded-full border border-[#1111111A] text-[13px] font-medium px-4 py-2.5 hover:bg-[#F7F6F2] transition-colors"
              aria-label="Call studio"
            >
              ☏ Call
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
Soft Mono Location Card

Velynkit Studio — Berlin
