export function SwissMiniMap() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-10 py-14">
      <div className="grid grid-cols-12 gap-6 border-t border-b border-black/80 py-8">
        {/* index column */}
        <div className="col-span-12 sm:col-span-2 font-mono text-[10.5px] uppercase tracking-[0.22em] text-black/65">
          <div>FILE</div>
          <div className="mt-1 text-black">LOC—04 / 12</div>
        </div>

        {/* mini map — replace with Google Maps <iframe> embed */}
        <div
          className="col-span-12 sm:col-span-4 relative aspect-square border border-black bg-white"
          aria-label="Compact location map"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(black 1px, transparent 1px), linear-gradient(90deg, black 1px, transparent 1px)",
              backgroundSize: "18px 18px",
              opacity: 0.15,
            }}
            aria-hidden
          />
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 200 200" aria-hidden>
            <path d="M0 100 L 200 100" stroke="black" strokeWidth="1.5" />
            <path d="M100 0 L 100 200" stroke="black" strokeWidth="1.5" />
            <circle cx="100" cy="100" r="45" fill="none" stroke="black" strokeWidth="1" strokeDasharray="2 4" opacity="0.4" />
          </svg>
          <span
            className="absolute"
            style={{ top: "50%", left: "50%", transform: "translate(-50%, -50%)" }}
          >
            <span className="block h-3 w-3 rounded-full bg-black ring-4 ring-black/15" />
          </span>
          <span className="absolute top-1 left-1 font-mono text-[9px] uppercase tracking-[0.18em] text-black/55">
            N ↑
          </span>
          <span className="absolute bottom-1 right-1 font-mono text-[9px] uppercase tracking-[0.18em] text-black/55">
            1:500
          </span>
        </div>

        {/* info column */}
        <div className="col-span-12 sm:col-span-6">
          <h3
            className="text-[28px] leading-[1.05]"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              letterSpacing: "-0.02em",
            }}
          >
            Berlin Studio
          </h3>
          <div className="mt-4 grid grid-cols-2 gap-x-6 gap-y-3 border-t border-black/15 pt-4">
            <Cell label="Address" value="Linienstraße 142" />
            <Cell label="Postal" value="10115 Berlin" />
            <Cell label="Coords" value="52.5295° N · 13.3925° E" />
            <Cell label="Plot" value="Block 4 / Lot 12-B" />
            <Cell label="Floor" value="4. OG · Atelier" />
            <Cell label="Built" value="1898 · est. 2018" />
          </div>
        </div>
      </div>
    </div>
  );
}

function Cell({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-black/55">
        {label}
      </div>
      <div className="mt-0.5 text-[13px]">{value}</div>
    </div>
  );
}
Swiss Mini Map

Berlin Studio
