// RouteMapSectionAlt.jsx — "Карта с маршрутами Китай → Казахстан"
// Slots into AppAlt where MissionQuoteAlt used to be.

const altRmsStyles = {
  section: { background: "#fff" },
  head: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, gap: 32, flexWrap: "wrap" },
  headLeft: { display: "flex", flexDirection: "column", gap: 14, maxWidth: 620 },
  legend: { display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--font-display)", fontWeight: 300, fontSize: 13, color: "var(--fg-muted)" },
  legendRow: { display: "flex", alignItems: "center", gap: 10 },
  legendDot: (c) => ({ width: 9, height: 9, borderRadius: "50%", background: c }),

  panel: {
    position: "relative",
    borderRadius: 24,
    overflow: "hidden",
    background: "var(--gol-navy-950)",
    aspectRatio: "16 / 9",
  },
  panelMobile: { aspectRatio: "4 / 3" },
  panelInfo: {
    position: "absolute", top: 28, left: 28, zIndex: 2,
    display: "flex", flexDirection: "column", gap: 6,
  },
  panelLabel: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--gol-gold-400)" },
  panelTitle: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 15, color: "rgba(255,255,255,0.85)" },

  laneList: {
    position: "absolute", right: 28, bottom: 28, zIndex: 2,
    display: "flex", flexDirection: "column", gap: 8,
    background: "rgba(10,26,50,0.6)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 14,
    padding: "16px 18px",
    backdropFilter: "blur(8px)",
    minWidth: 320,
  },
  laneListMobile: { right: 12, bottom: 12, left: 12, minWidth: 0, padding: "14px 16px" },
  laneRow: { display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, alignItems: "center", fontFamily: "var(--font-mono)", fontSize: 12, color: "rgba(255,255,255,0.8)" },
  laneCode: { color: "var(--gol-gold-400)" },
  laneCity: { color: "#fff" },
};

function RouteMapSectionAlt() {
  const isMobile = window.useMobile ? window.useMobile(760) : false;
  const [lang] = window.useLang();
  return (
    <section className="section" style={altRmsStyles.section}>
      <div className="container">
        <div style={altRmsStyles.head}>
          <div style={altRmsStyles.headLeft}>
            <span className="eyebrow">{t("ГЕОГРАФИЯ", "ГЕОГРАФИЯ")}</span>
            <h2 className="h-section">{t("Карта с маршрутами", "Маршруттар картасы")}</h2>
            <p className="body-15-muted">
              {t("Прямые автомобильные направления Китай → Казахстан. Авто, мультимодал и ЖД через ключевые приграничные пункты — Хоргос, Достык.", "Қытай → Қазақстан тікелей автокөлік бағыттары. Авто, мультимодал және т/ж негізгі шекаралық пункттер арқылы — Қорғас, Достық.")}
            </p>
          </div>
        </div>

        <div className="section--dark" style={{ ...altRmsStyles.panel, ...(isMobile ? altRmsStyles.panelMobile : {}) }}>
          <RouteMap fit="cover" />
        </div>
      </div>
    </section>
  );
}

window.RouteMapSectionAlt = RouteMapSectionAlt;