export function SplitFlapCoordsMap() {
  return (
    <div className="bg-[#0F0E0B] text-[#F2EFE6] antialiased px-8 py-14 font-mono">
      <div className="max-w-4xl mx-auto">
        {/* Split-flap-style coordinates display */}
        <div className="flex flex-wrap items-end justify-between gap-y-4 border-b border-[#F2EFE6]/15 pb-5">
          <div>
            <p className="text-[10.5px] uppercase tracking-[0.24em] text-[#F2EFE6]/55">
              ◆ Departures · Velynkit HQ
            </p>
            <div className="mt-3 flex items-end gap-2">
              {"52.5295".split("").map((ch, i) => (
                <Flap key={`lat-${i}`} ch={ch} />
              ))}
              <span className="mb-1 px-1 text-[24px] text-[#F2EFE6]/75">°N</span>
            </div>
            <div className="mt-2 flex items-end gap-2">
              {"13.3925".split("").map((ch, i) => (
                <Flap key={`lng-${i}`} ch={ch} />
              ))}
              <span className="mb-1 px-1 text-[24px] text-[#F2EFE6]/75">°E</span>
            </div>
          </div>

          <div className="text-right">
            <div className="text-[10.5px] uppercase tracking-[0.24em] text-[#F2EFE6]/55">Gate</div>
            <div className="mt-1 text-[40px] leading-none">4F</div>
            <div className="mt-3 text-[10.5px] uppercase tracking-[0.24em] text-[#F2EFE6]/55">Status</div>
            <div className="mt-1 flex items-center justify-end gap-2 text-[14px]">
              <span className="h-2 w-2 rounded-full bg-amber-300 shadow-[0_0_8px_rgba(252,211,77,0.8)]" />
              BOARDING
            </div>
          </div>
        </div>

        {/* Map below — replace with Google Maps <iframe> embed (dark style) */}
        <div
          className="relative mt-6 aspect-[16/7] w-full border border-[#F2EFE6]/15 bg-[#15130E] overflow-hidden"
          aria-label="Coordinates map"
        >
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "linear-gradient(rgba(242,239,230,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(242,239,230,0.07) 1px, transparent 1px)",
              backgroundSize: "32px 32px",
            }}
            aria-hidden
          />
          <div
            className="absolute inset-0"
            style={{
              backgroundImage:
                "radial-gradient(rgba(252,211,77,0.35) 1px, transparent 1.5px)",
              backgroundSize: "70px 70px",
              opacity: 0.6,
            }}
            aria-hidden
          />
          <svg className="absolute inset-0 h-full w-full" viewBox="0 0 800 350" preserveAspectRatio="none" aria-hidden>
            <path d="M0 170 Q 220 140 400 180 T 800 150" stroke="rgba(242,239,230,0.35)" strokeWidth="2" fill="none" />
            <path d="M0 260 L 800 240" stroke="rgba(242,239,230,0.2)" strokeWidth="1.5" fill="none" />
            <path d="M260 0 L 280 350" stroke="rgba(242,239,230,0.2)" strokeWidth="1.5" fill="none" />
          </svg>
          <span
            className="absolute"
            style={{ top: "50%", left: "50%", transform: "translate(-50%, -100%)" }}
          >
            <span className="relative block h-3 w-3 rounded-full bg-amber-300 shadow-[0_0_18px_rgba(252,211,77,0.95)]" />
            <span
              className="absolute inset-0 rounded-full border border-amber-300/70"
              style={{ animation: "splitflap-pulse 2.6s ease-out infinite" }}
            />
          </span>
          <style>{`
            @keyframes splitflap-pulse {
              0% { transform: scale(1); opacity: 0.7; }
              90% { transform: scale(5); opacity: 0; }
              100% { transform: scale(5); opacity: 0; }
            }
          `}</style>
        </div>

        <div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-[10.5px] uppercase tracking-[0.18em] text-[#F2EFE6]/55">
          <span>◆ Berlin · Mitte · DE</span>
          <span>Tile 132,498 · Z14</span>
          <span>Last update 00:00:04 ago</span>
        </div>
      </div>
    </div>
  );
}

function Flap({ ch }: { ch: string }) {
  if (ch === ".") {
    return <span className="text-[36px] leading-none text-[#F2EFE6]/65 px-1">·</span>;
  }
  return (
    <span
      className="relative grid h-12 w-9 sm:h-14 sm:w-11 place-items-center rounded-sm bg-[#1A1814] border border-[#F2EFE6]/15 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)] text-[28px] sm:text-[32px] leading-none"
    >
      <span
        aria-hidden
        className="absolute inset-x-0 top-1/2 h-px bg-[#F2EFE6]/15"
      />
      {ch}
    </span>
  );
}
Split-Flap Coordinates Map
