const STORES = [
  { id: "01", name: "BERLIN — MITTE", addr: "Linienstr. 142, 10115", top: "30%", left: "52%" },
  { id: "02", name: "HAMBURG — STERNSCHANZE", addr: "Schulterblatt 87, 20357", top: "20%", left: "44%" },
  { id: "03", name: "MUNICH — GLOCKENBACH", addr: "Hans-Sachs-Str. 14, 80469", top: "70%", left: "55%" },
  { id: "04", name: "COLOGNE — BELGISCHES VIERTEL", addr: "Brüsseler Str. 35, 50674", top: "45%", left: "28%" },
];

export function BrutalistStoreLocator() {
  return (
    <div className="bg-[#FFE94B] text-black antialiased p-6 sm:p-10">
      <div className="border-[3px] border-black bg-[#FFE94B] p-6">
        <div className="flex items-end justify-between border-b-[3px] border-black pb-3 mb-6">
          <h2 className="font-mono text-[24px] font-bold uppercase leading-none tracking-tight">
            STORE / FINDER
          </h2>
          <span className="font-mono text-[11px] uppercase">04 LOCATIONS</span>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-[1fr_1.4fr] gap-6">
          {/* List */}
          <ol className="space-y-0 border-[3px] border-black bg-white">
            {STORES.map((s, i) => (
              <li
                key={s.id}
                className={`flex items-start gap-4 p-4 ${i < STORES.length - 1 ? "border-b-[3px] border-black" : ""}`}
              >
                <span className="grid h-10 w-10 shrink-0 place-items-center border-[3px] border-black bg-[#FFE94B] font-mono text-[15px] font-bold">
                  {s.id}
                </span>
                <div>
                  <div className="font-mono text-[12px] font-bold uppercase leading-tight">
                    {s.name}
                  </div>
                  <div className="font-mono text-[11px] uppercase text-black/70">
                    {s.addr}
                  </div>
                </div>
              </li>
            ))}
          </ol>

          {/* Map — replace with Google Maps <iframe> embed */}
          <div
            className="relative aspect-[4/5] md:aspect-auto border-[3px] border-black bg-white"
            aria-label="Map of stores"
          >
            <div
              className="absolute inset-0"
              style={{
                backgroundImage:
                  "linear-gradient(black 2px, transparent 2px), linear-gradient(90deg, black 2px, transparent 2px)",
                backgroundSize: "32px 32px",
                opacity: 0.15,
              }}
              aria-hidden
            />
            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 400 500" aria-hidden>
              <path d="M0 250 L 400 250" stroke="black" strokeWidth="3" />
              <path d="M200 0 L 200 500" stroke="black" strokeWidth="3" />
            </svg>
            {STORES.map((s) => (
              <span
                key={s.id}
                className="absolute -translate-x-1/2 -translate-y-1/2"
                style={{ top: s.top, left: s.left }}
              >
                <span className="grid h-8 w-8 place-items-center border-[3px] border-black bg-[#FFE94B] font-mono text-[12px] font-bold">
                  {s.id}
                </span>
              </span>
            ))}
            <span className="absolute bottom-2 right-2 font-mono text-[10px] uppercase bg-black text-[#FFE94B] px-2 py-1">
              DE — 1:9.5M
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}
Brutalist Store Locator

STORE / FINDER
