const OFFICES = [
  {
    city: "Berlin",
    role: "Headquarters",
    addr: "Linienstraße 142",
    coords: "52.53° N · 13.39° E",
    tz: "CET",
    flavor: "river",
  },
  {
    city: "Lisbon",
    role: "Research lab",
    addr: "R. da Boavista 95",
    coords: "38.71° N · 9.14° W",
    tz: "WET",
    flavor: "coast",
  },
  {
    city: "Tokyo",
    role: "Asia studio",
    addr: "Sangenjaya 2-12",
    coords: "35.64° N · 139.66° E",
    tz: "JST",
    flavor: "grid",
  },
] as const;

function MockMap({ flavor }: { flavor: (typeof OFFICES)[number]["flavor"] }) {
  return (
    <div
      className="relative aspect-[5/4] w-full overflow-hidden bg-[#F2F1EC] border-b border-[#1111111A]"
      aria-label="Mini map"
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage:
            "radial-gradient(rgba(17,17,17,0.18) 1px, transparent 1.5px)",
          backgroundSize: "12px 12px",
        }}
        aria-hidden
      />
      <svg className="absolute inset-0 h-full w-full" viewBox="0 0 200 160" aria-hidden>
        {flavor === "river" && (
          <>
            <path d="M0 80 Q 60 50 110 90 T 200 70" stroke="#2A3D2F" strokeWidth="3" fill="none" opacity="0.5" />
            <path d="M0 130 L 200 120" stroke="#111" strokeWidth="1" opacity="0.25" />
          </>
        )}
        {flavor === "coast" && (
          <>
            <path d="M0 0 L 120 0 Q 80 60 140 100 Q 90 140 0 130 Z" fill="#2A3D2F" opacity="0.12" />
            <path d="M0 0 L 120 0 Q 80 60 140 100 Q 90 140 0 130" stroke="#2A3D2F" strokeWidth="1.5" fill="none" opacity="0.6" />
          </>
        )}
        {flavor === "grid" && (
          <>
            <path d="M0 50 L 200 50" stroke="#111" strokeWidth="1" opacity="0.3" />
            <path d="M0 100 L 200 100" stroke="#111" strokeWidth="1" opacity="0.3" />
            <path d="M70 0 L 70 160" stroke="#111" strokeWidth="1" opacity="0.3" />
            <path d="M140 0 L 140 160" stroke="#111" strokeWidth="1" opacity="0.3" />
          </>
        )}
      </svg>
      <span
        className="absolute"
        style={{ top: "50%", left: "50%", transform: "translate(-50%, -100%)" }}
      >
        <span className="block h-2.5 w-2.5 rounded-full bg-[#2A3D2F] ring-[5px] ring-[#2A3D2F]/15" />
      </span>
    </div>
  );
}

export function MultiOfficeGrid() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-10 py-14">
      <div className="max-w-3xl">
        <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-[#6B6B66]">
          ◆ Offices · 03 cities
        </p>
        <h2
          className="mt-3 text-[40px] leading-[1.02]"
          style={{
            fontFamily: "var(--font-instrument-serif), Georgia, serif",
            letterSpacing: "-0.025em",
          }}
        >
          Three rooms, <em className="text-[#6B6B66]">one studio.</em>
        </h2>
      </div>

      <div className="mt-10 grid grid-cols-1 md:grid-cols-3 gap-5">
        {OFFICES.map((o) => (
          <article
            key={o.city}
            className="border border-[#1111111A] bg-white overflow-hidden hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow"
          >
            {/* Replace MockMap with a real Google Maps <iframe> embed per location */}
            <MockMap flavor={o.flavor} />
            <div className="p-5">
              <div className="flex items-baseline justify-between">
                <h3 className="text-[20px] font-medium tracking-tight">{o.city}</h3>
                <span className="font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66]">
                  {o.tz}
                </span>
              </div>
              <p className="mt-1 text-[12px] text-[#6B6B66] uppercase font-mono tracking-[0.14em]">
                {o.role}
              </p>
              <div className="mt-4 space-y-1.5 border-t border-[#1111111A] pt-4 text-[13px]">
                <div>{o.addr}</div>
                <div className="font-mono text-[11px] text-[#6B6B66]">{o.coords}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}
Multi-Office Map Grid

Three rooms, one studio.

Berlin

Lisbon

Tokyo
