const STEPS = [
  { num: "01", note: "Exit S-Bahn at Rosenthaler Platz, head north." },
  { num: "02", note: "Cross Torstraße — pass the bakery on the right." },
  { num: "03", note: "Turn into Linienstraße — number 142, ring VELYN/4F." },
];

export function DirectionsStepMap() {
  return (
    <div className="bg-[#FAFAF8] text-[#111111] antialiased px-10 py-14">
      <div className="grid grid-cols-1 md:grid-cols-[1.2fr_1fr] gap-8">
        {/* Map with route — replace with Google Maps <iframe> directions embed */}
        <div
          className="relative aspect-[4/3] md:aspect-auto md:min-h-[420px] border border-[#1111111A] bg-[#F2F1EC] overflow-hidden"
          aria-label="Step-by-step route map"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(rgba(17,17,17,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.06) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
            aria-hidden
          />
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 400 400" preserveAspectRatio="none" aria-hidden>
            {/* base streets */}
            <path d="M0 230 L 400 230" stroke="#111111" strokeWidth="2" opacity="0.3" fill="none" />
            <path d="M0 320 L 400 320" stroke="#111111" strokeWidth="1.5" opacity="0.22" fill="none" />
            <path d="M120 0 L 120 400" stroke="#111111" strokeWidth="1.5" opacity="0.22" fill="none" />
            <path d="M260 0 L 260 400" stroke="#111111" strokeWidth="1.5" opacity="0.22" fill="none" />
            {/* route */}
            <path
              d="M60 350 L 120 350 L 120 230 L 260 230 L 260 110"
              stroke="#C0392B"
              strokeWidth="4"
              fill="none"
              strokeDasharray="0"
              strokeLinejoin="round"
              strokeLinecap="round"
            />
            <path
              d="M60 350 L 120 350 L 120 230 L 260 230 L 260 110"
              stroke="#FAFAF8"
              strokeWidth="1.5"
              fill="none"
              strokeDasharray="6 6"
              strokeLinejoin="round"
              strokeLinecap="round"
            />
          </svg>

          {/* start */}
          <span className="absolute" style={{ top: "87.5%", left: "15%", transform: "translate(-50%, -50%)" }}>
            <span className="grid h-7 w-7 place-items-center rounded-full bg-white border-2 border-[#C0392B] font-mono text-[11px] font-bold text-[#C0392B]">
              A
            </span>
          </span>
          {/* numbered waypoints */}
          {STEPS.map((s, i) => {
            const positions = [
              { top: "57.5%", left: "30%" },
              { top: "57.5%", left: "65%" },
              { top: "27.5%", left: "65%" },
            ];
            return (
              <span
                key={s.num}
                className="absolute"
                style={{ ...positions[i], transform: "translate(-50%, -50%)" }}
              >
                <span className="grid h-6 w-6 place-items-center rounded-full bg-[#C0392B] text-white font-mono text-[10px] font-bold ring-2 ring-white">
                  {s.num.replace(/^0/, "")}
                </span>
              </span>
            );
          })}
          {/* end pin */}
          <span className="absolute" style={{ top: "27.5%", left: "65%", transform: "translate(-50%, -110%)" }}>
            <svg width="24" height="30" 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>

          <div className="absolute bottom-3 left-3 font-mono text-[10px] uppercase tracking-[0.18em] text-[#6B6B66] bg-white/85 backdrop-blur px-2 py-1">
            ~6 min walk · 480 m
          </div>
        </div>

        {/* Steps */}
        <div>
          <p className="font-mono text-[11px] uppercase tracking-[0.22em] text-[#6B6B66]">
            ◆ Walking · from Rosenthaler Pl.
          </p>
          <h2
            className="mt-3 text-[32px] leading-[1.05]"
            style={{
              fontFamily: "var(--font-instrument-serif), Georgia, serif",
              letterSpacing: "-0.02em",
            }}
          >
            How to find us.
          </h2>

          <ol className="mt-6 space-y-4">
            {STEPS.map((s) => (
              <li key={s.num} className="flex items-start gap-4 border-t border-[#1111111A] pt-4">
                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-[#C0392B] text-white font-mono text-[11px] font-bold">
                  {s.num.replace(/^0/, "")}
                </span>
                <p className="text-[14px] leading-relaxed">{s.note}</p>
              </li>
            ))}
            <li className="flex items-start gap-4 border-t border-[#1111111A] pt-4">
              <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full border-2 border-[#1A1A18] font-mono text-[11px] font-bold">
                B
              </span>
              <p className="text-[14px] leading-relaxed">
                You’ve arrived — <span className="font-mono">Linienstraße 142, 4. OG</span>.
              </p>
            </li>
          </ol>
        </div>
      </div>
    </div>
  );
}
Directions Step Map

How to find us.
