// Верхние вкладки навигации «Планы / Карта», общие для обеих страниц.
function TopTabs({ active, planHref, mapHref }) {
  const PH = planHref || "План КА — Mission Ops.html";
  const MH = mapHref || "Map.html";
  const tab = (id, label, href, icon) => {
    const on = active === id;
    return (
      <a href={href} style={{
        display: "flex", alignItems: "center", gap: 7, padding: "0 16px", height: "100%",
        textDecoration: "none", fontSize: 13, fontWeight: 600,
        color: on ? "var(--ink)" : "var(--ink-3)",
        borderBottom: `2px solid ${on ? "var(--accent)" : "transparent"}`,
        background: on ? "var(--bg-1)" : "transparent",
      }}>
        <span style={{ display: "grid", placeItems: "center", opacity: on ? 1 : 0.7 }}>{icon}</span>
        {label}
      </a>
    );
  };
  return (
    <div style={{ height: 46, flex: "none", display: "flex", alignItems: "stretch", background: "var(--bg-0)", borderBottom: "1px solid var(--line)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 16px", borderRight: "1px solid var(--line)" }}>
        <div style={{ width: 20, height: 20, borderRadius: 5, background: "var(--accent)", display: "grid", placeItems: "center", boxShadow: "0 0 12px var(--accent)" }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" fill="var(--bg-0)" /><ellipse cx="12" cy="12" rx="10" ry="4.3" stroke="var(--bg-0)" strokeWidth="1.7" transform="rotate(28 12 12)" /></svg>
        </div>
        <span className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: ".05em", color: "var(--ink-1)" }}>MISSION&nbsp;OPS</span>
      </div>
      {tab("plans", "Планы", PH, <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="14" height="3" rx="1.5" fill="currentColor" /><rect x="6" y="12" width="14" height="3" rx="1.5" fill="currentColor" /><rect x="3" y="18" width="9" height="3" rx="1.5" fill="currentColor" /></svg>)}
      {tab("map", "Карта", MH, <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" /><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>)}
    </div>
  );
}

// Цветная метка типа аппаратуры (общая для обеих страниц).
function TypeDot({ type, size = 9 }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: 2, flex: "none",
      background: TYPE_COLOR[type], display: "inline-block",
      boxShadow: `0 0 6px ${TYPE_COLOR[type]}`,
    }} />
  );
}

Object.assign(window, { TopTabs, TypeDot });