export function MagazineSpreadMap() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-8 py-12">
      {/* Masthead */}
      <div className="flex items-baseline justify-between border-b border-[#1111111A] pb-3 font-mono text-[10.5px] uppercase tracking-[0.22em] text-[#6B6B66]">
        <span>Velynkit Quarterly · Vol. 04</span>
        <span>SEC. III — Locations</span>
        <span>Spread 12 / 96</span>
      </div>

      {/* Spread */}
      <div className="relative mt-6 border border-[#1111111A] bg-white overflow-hidden">
        {/* Hero map — replace with Google Maps <iframe> embed (terrain style) */}
        <div
          className="relative aspect-[16/8] w-full bg-[#EDE9DE]"
          aria-label="Topographic map of the region"
        >
          {/* contour lines */}
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 800 400" preserveAspectRatio="none" aria-hidden>
            {[40, 80, 130, 180, 230, 280, 330].map((y, i) => (
              <path
                key={i}
                d={`M0 ${y} Q 200 ${y - 20 + i * 4} 400 ${y + 10} T 800 ${y - 10}`}
                stroke="#5C4A20"
                strokeWidth="1"
                fill="none"
                opacity={0.18 + i * 0.03}
              />
            ))}
            {/* river */}
            <path
              d="M0 230 Q 250 210 380 250 Q 530 280 800 240"
              stroke="#3F7B89"
              strokeWidth="3.5"
              fill="none"
              opacity="0.55"
            />
            {/* roads */}
            <path d="M120 0 L 200 400" stroke="#1A1A18" strokeWidth="1" fill="none" opacity="0.32" />
            <path d="M500 0 L 460 400" stroke="#1A1A18" strokeWidth="1" fill="none" opacity="0.25" />
            <path d="M0 100 L 800 130" stroke="#1A1A18" strokeWidth="1" fill="none" opacity="0.22" />
          </svg>
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "radial-gradient(rgba(60,40,20,0.18) 0.8px, transparent 1px)",
              backgroundSize: "10px 10px",
              opacity: 0.55,
            }}
            aria-hidden
          />

          {/* center pin */}
          <span
            className="absolute"
            style={{ top: "52%", left: "47%", transform: "translate(-50%, -100%)" }}
          >
            <svg width="32" height="40" 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="#1A1A18" />
              <circle cx="11" cy="11" r="4" fill="#FAFAF8" />
            </svg>
          </span>

          {/* labels */}
          <span className="absolute top-4 left-5 font-mono text-[10.5px] uppercase tracking-[0.2em] text-[#1A1A18]/55">N ↑</span>
          <span className="absolute top-4 right-5 font-mono text-[10.5px] uppercase tracking-[0.2em] text-[#1A1A18]/55">Scale 1 : 12,500</span>
          <span className="absolute bottom-4 left-5 font-mono text-[10.5px] uppercase tracking-[0.2em] text-[#1A1A18]/55">Sheet 4F · Mitte</span>

          {/* editorial overlay headline */}
          <div className="absolute inset-0 grid place-items-end p-8 sm:p-12">
            <div className="bg-[#FAFAF8]/85 backdrop-blur-sm border border-[#1111111A] px-6 py-5 max-w-md">
              <p className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-[#6B6B66]">
                ◆ Atlas · Plate XII
              </p>
              <h1
                className="mt-2 text-[40px] sm:text-[52px] leading-[0.96]"
                style={{
                  fontFamily: "var(--font-instrument-serif), Georgia, serif",
                  letterSpacing: "-0.025em",
                }}
              >
                Where the <em className="text-[#6B6B66]">work</em> happens.
              </h1>
              <p className="mt-3 text-[13px] text-[#3B3B36]">
                Linienstraße 142, Berlin. Find the bakery on the corner — we are
                two flights above it.
              </p>
            </div>
          </div>
        </div>

        {/* Footer rule */}
        <div className="flex items-center justify-between px-6 py-3 border-t border-[#1111111A] font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
          <span>Cartography — Velynkit Studio</span>
          <span>© Berlin, 2025</span>
        </div>
      </div>
    </div>
  );
}
Magazine Spread Map

Where the work happens.
