export function PolaroidOfficeMap() {
  return (
    <div
      className="bg-[#E8E2D4] antialiased px-10 py-16 grid place-items-center text-[#1A1A18]"
      style={{
        backgroundImage:
          "repeating-linear-gradient(90deg, transparent 0 39px, rgba(26,26,24,0.04) 39px 40px)",
      }}
    >
      <div className="relative">
        {/* tape */}
        <span
          aria-hidden
          className="absolute -top-4 left-1/2 -translate-x-1/2 h-7 w-24 bg-[#F3E9C4]/85 border border-[#1A1A1814] rotate-[-2deg] shadow-sm"
        />

        <div
          className="bg-white p-3 pb-12 shadow-[0_24px_60px_-20px_rgba(0,0,0,0.25)]"
          style={{ transform: "rotate(-2.5deg)", width: 320 }}
        >
          {/* Map polaroid — replace with Google Maps <iframe> embed (sepia filter) */}
          <div
            className="relative aspect-square w-full overflow-hidden bg-[#E2D9C0]"
            style={{ filter: "sepia(0.4) contrast(0.95)" }}
            aria-label="Polaroid map of HQ"
          >
            <div
              className="absolute inset-0"
              style={{
                backgroundImage:
                  "linear-gradient(rgba(60,40,20,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(60,40,20,0.12) 1px, transparent 1px)",
                backgroundSize: "22px 22px",
              }}
              aria-hidden
            />
            <svg className="absolute inset-0 h-full w-full" viewBox="0 0 300 300" aria-hidden>
              <path d="M0 170 Q 80 140 160 165 T 300 130" stroke="#5C3A12" strokeWidth="3" fill="none" opacity="0.45" />
              <path d="M120 0 L 140 300" stroke="#5C3A12" strokeWidth="2" fill="none" opacity="0.32" />
              <path d="M0 240 L 300 220" stroke="#5C3A12" strokeWidth="1.5" fill="none" opacity="0.25" />
              <path d="M210 0 L 210 300" stroke="#5C3A12" strokeWidth="1.5" fill="none" opacity="0.2" />
            </svg>
            <span
              className="absolute"
              style={{ top: "52%", left: "47%", transform: "translate(-50%, -100%)" }}
            >
              <svg width="22" height="28" viewBox="0 0 22 28" aria-hidden>
                <path d="M11 0 C 4.9 0 0 4.9 0 11 c 0 8 11 17 11 17 s 11 -9 11 -17 C 22 4.9 17.1 0 11 0 z" fill="#C0392B" />
                <circle cx="11" cy="11" r="4" fill="#FAFAF8" />
              </svg>
            </span>
          </div>

          {/* Handwritten caption */}
          <p
            className="mt-5 text-center text-[18px] text-[#3B2D14]"
            style={{
              fontFamily: "'Caveat', 'Bradley Hand', cursive",
              transform: "rotate(-1deg)",
            }}
          >
            HQ — Berlin, May ’25
          </p>
        </div>

        {/* meta strip */}
        <div className="mt-8 max-w-[320px] mx-auto text-center">
          <p className="font-mono text-[10px] uppercase tracking-[0.22em] text-[#3B2D14]/60">
            ◆ Roll 03 · frame 12
          </p>
          <p className="mt-2 text-[13px] text-[#3B2D14]">
            Linienstraße 142, 10115 — the corner with the bakery.
          </p>
        </div>
      </div>
    </div>
  );
}
Polaroid Office Map
