export function EditorialContactMap() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-10 py-14">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
        <div>
          <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-[#6B6B66]">
            ◆ Studio · since 2018
          </p>
          <h2
            className="mt-3 text-[44px] leading-[1.02]"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              letterSpacing: "-0.025em",
            }}
          >
            Visit us in <em className="text-[#6B6B66]">Mitte.</em>
          </h2>
          <p className="mt-4 text-[14px] text-[#3B3B36] leading-relaxed max-w-xs">
            Buzz the bell marked <span className="font-mono">VELYN/4F</span> —
            elevator on the right, coffee on the second pass.
          </p>
          <dl className="mt-7 space-y-3 border-t border-[#1111111A] pt-5">
            <div className="flex justify-between gap-6">
              <dt className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#6B6B66]">Address</dt>
              <dd className="text-[13px] text-right">Linienstraße 142, 10115 Berlin</dd>
            </div>
            <div className="flex justify-between gap-6">
              <dt className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#6B6B66]">Hours</dt>
              <dd className="text-[13px] text-right">Mon–Fri · 09:30 – 18:00</dd>
            </div>
            <div className="flex justify-between gap-6">
              <dt className="font-mono text-[11px] uppercase tracking-[0.16em] text-[#6B6B66]">Phone</dt>
              <dd className="text-[13px] text-right font-mono">+49 30 7873 0410</dd>
            </div>
          </dl>
          <a
            href="#"
            className="inline-flex items-center gap-2 mt-7 text-[13px] underline underline-offset-4 decoration-[#2A3D2F]/40 hover:decoration-[#2A3D2F]"
          >
            Open in Google Maps
            <span aria-hidden>→</span>
          </a>
        </div>

        {/* Replace this block with a real Google Maps <iframe> embed. */}
        <div
          className="relative aspect-[4/5] w-full border border-[#1111111A] bg-[#F2F1EC] overflow-hidden"
          aria-label="Map of studio location"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)",
              backgroundSize: "24px 24px",
            }}
            aria-hidden
          />
          {/* mock streets */}
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 400 500" aria-hidden>
            <path d="M0 280 Q 130 250 220 290 T 400 230" stroke="#2A3D2F" strokeWidth="3" fill="none" opacity="0.4" />
            <path d="M180 0 L 200 500" stroke="#111111" strokeWidth="2" fill="none" opacity="0.35" />
            <path d="M0 380 L 400 360" stroke="#111111" strokeWidth="1.5" fill="none" opacity="0.25" />
          </svg>
          <span
            className="absolute"
            style={{ top: "44%", left: "50%", transform: "translate(-50%, -100%)" }}
          >
            <span className="block h-4 w-4 rounded-full bg-[#2A3D2F] ring-4 ring-[#2A3D2F]/15" />
            <span className="mt-1 block h-3 w-px bg-[#2A3D2F] mx-auto" />
          </span>
          <span className="absolute bottom-3 left-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66]">
            52.5295° N · 13.3925° E
          </span>
        </div>
      </div>
    </div>
  );
}
Editorial Contact Map

Visit us in Mitte.
