// ============================================================================
// vk-pages-a.jsx — Home (weather-reactive beach hero) + Excursions catalogue.
// ============================================================================
const { VK: K, t: T, VEXC: EX, Brackets: BR, MonoTag: MT, Angular: ANG, ArrowBullet: AB, COND_LABEL: CL, dayNames: DN, toEur: EU } = window;

// ── PALM SILHOUETTE (decorative, beach mood) ──────────────────────────────
function Palm({ fill = "#0c2622" }) {
  return (
    <svg viewBox="0 0 200 230" width="100%" height="100%" style={{ display: "block", overflow: "visible" }}>
      {/* trunk */}
      <path d="M96 230 C90 176 86 132 101 96 l9 2 C98 134 104 178 110 230 Z" fill={fill} />
      {/* fronds */}
      <g fill={fill}>
        <path d="M104 98 C70 70 34 64 2 71 C40 52 82 58 107 90 Z" />
        <path d="M103 96 C96 56 71 28 42 13 C84 26 111 55 110 88 Z" />
        <path d="M106 95 C132 60 169 47 200 50 C163 43 124 57 108 89 Z" />
        <path d="M108 99 C141 80 178 80 200 95 C169 71 130 71 108 92 Z" />
        <path d="M102 97 C82 73 56 64 26 64 C64 51 96 66 107 90 Z" />
        <path d="M107 93 C113 55 134 27 162 14 C129 35 110 60 110 88 Z" />
      </g>
      {/* coconuts */}
      <circle cx="99" cy="96" r="5" fill={fill} />
      <circle cx="110" cy="98" r="4.4" fill={fill} />
      <circle cx="104" cy="103" r="4.4" fill={fill} />
    </svg>
  );
}

// ── WEATHER SCENE (pure CSS, reacts to live condition) ────────────────────
function WeatherScene({ cond }) {
  const P = {
    clear:  { top: "#1F5C8C", mid: "#4E92BD", hor: "#A9D2E6", sea: "#16607E", sand: "#C9AE76", sun: 1, rain: 0, dim: 0.18 },
    clouds: { top: "#33414D", mid: "#566873", hor: "#8B99A1", sea: "#2A4751", sand: "#9C9079", sun: 0.25, rain: 0, dim: 0.3 },
    rain:   { top: "#181D23", mid: "#2A333B", hor: "#48535C", sea: "#16242B", sand: "#5E5A4E", sun: 0, rain: 1, dim: 0.42 },
    storm:  { top: "#121519", mid: "#222A31", hor: "#3A444C", sea: "#101B21", sand: "#4E4B43", sun: 0, rain: 1, dim: 0.5 },
    snow:   { top: "#41474E", mid: "#6E757C", hor: "#B7BDC1", sea: "#3A4A52", sand: "#9AA0A2", sun: 0.2, rain: 0, dim: 0.3 },
  }[cond] || {};
  const wet = P.rain > 0;
  const cloudy = cond === "clouds" || cond === "rain" || cond === "storm";
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
      {/* sky */}
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, ${P.top} 0%, ${P.mid} 46%, ${P.hor} 64%)` }} />
      {/* drifting clouds */}
      {cloudy && (
        <>
          <div className="vk-cloud" style={{ position: "absolute", top: "6%", left: "-6%", width: "62%", height: "30%",
            background: `radial-gradient(60% 100% at 38% 60%, rgba(8,10,14,${wet ? 0.5 : 0.32}) 0%, transparent 70%), radial-gradient(50% 90% at 70% 55%, rgba(8,10,14,${wet ? 0.42 : 0.26}) 0%, transparent 72%)`,
            filter: "blur(10px)", pointerEvents: "none" }} />
          <div className="vk-cloud2" style={{ position: "absolute", top: "-2%", right: "-8%", width: "58%", height: "34%",
            background: `radial-gradient(58% 100% at 60% 55%, rgba(6,8,12,${wet ? 0.55 : 0.3}) 0%, transparent 72%), radial-gradient(46% 86% at 30% 60%, rgba(6,8,12,${wet ? 0.45 : 0.24}) 0%, transparent 74%)`,
            filter: "blur(12px)", pointerEvents: "none" }} />
        </>
      )}
      {/* sun glow */}
      {P.sun > 0 && (
        <div style={{ position: "absolute", top: "12%", right: "16%", width: 260, height: 260, borderRadius: "50%",
          background: `radial-gradient(circle, rgba(255,228,170,${0.95 * P.sun}) 0%, rgba(255,180,110,${0.5 * P.sun}) 32%, transparent 66%)`,
          filter: "blur(2px)" }} />
      )}
      {/* sea band */}
      <div style={{ position: "absolute", left: 0, right: 0, top: "60%", height: "22%", background: `linear-gradient(180deg, ${P.hor}, ${P.sea})` }} />
      {/* sand foreground */}
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "20%",
        background: `linear-gradient(180deg, ${P.sea} 0%, ${P.sand} 30%, ${P.sand} 100%)` }} />
      {/* wet-sand reflection sheen */}
      {wet && (
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "20%", pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(150,180,205,0.22) 0%, rgba(120,150,175,0.10) 35%, transparent 100%)",
          mixBlendMode: "screen" }} />
      )}
      {/* sea ripples under the rain */}
      {wet && ["38%", "60%", "74%"].map((l, i) => (
        <div key={i} className="vk-ripple" style={{ position: "absolute", left: l, top: `${66 + i * 5}%`,
          width: 90, height: 18, border: "1px solid rgba(190,212,230,0.5)", borderRadius: "50%",
          animationDelay: `${i * 0.8}s`, pointerEvents: "none" }} />
      ))}
      {/* rain — layered for depth */}
      {wet && (
        <>
          <div className="vk-rain-far" style={{ position: "absolute", inset: "-10%",
            backgroundImage: "repeating-linear-gradient(100deg, transparent 0 9px, rgba(190,212,230,0.10) 9px 10px)", pointerEvents: "none" }} />
          <div className="vk-rain-near" style={{ position: "absolute", inset: "-10%",
            backgroundImage: "repeating-linear-gradient(104deg, transparent 0 6px, rgba(205,225,240,0.20) 6px 7.5px)", pointerEvents: "none" }} />
        </>
      )}
      {/* lightning flash (storm only) */}
      {cond === "storm" && (
        <div className="vk-flash" style={{ position: "absolute", inset: 0, pointerEvents: "none",
          background: "radial-gradient(120% 80% at 70% 8%, rgba(220,232,255,0.9) 0%, rgba(190,210,245,0.35) 22%, transparent 55%)" }} />
      )}
      {/* technical grid */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.5,
        backgroundImage: `linear-gradient(${K.line2} 1px, transparent 1px), linear-gradient(90deg, ${K.line2} 1px, transparent 1px)`,
        backgroundSize: "64px 64px" }} />
      {/* darken for legibility */}
      <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, rgba(8,8,10,${P.dim}) 0%, rgba(8,8,10,0.15) 40%, rgba(8,8,10,0.82) 100%)` }} />
      {/* palms */}
      <div className="vk-palm" style={{ position: "absolute", right: "3%", bottom: "-12px", width: "clamp(160px,20vw,300px)", height: "clamp(190px,24vw,360px)", transformOrigin: "55% 100%", pointerEvents: "none" }}>
        <Palm fill="#0b2420" />
      </div>
      <div className="vk-palm2" style={{ position: "absolute", right: "17%", bottom: "-16px", width: "clamp(95px,11vw,165px)", height: "clamp(115px,14vw,200px)", transformOrigin: "50% 100%", transform: "scaleX(-1)", pointerEvents: "none", opacity: 0.9 }}>
        <Palm fill="#0b2420" />
      </div>
    </div>
  );
}

// ── HOME ──────────────────────────────────────────────────────────────────
function PageHome({ lang, nav }) {
  const w = window.useSunnyWeather();
  const [photo, setPhoto] = window.uS(false);
  const condLabel = (CL[w.cond] || CL.clear)[lang];

  const tiles = [
    { k: "exc", code: "01", to: "exc", title: T(lang, "nav_exc"), d: T(lang, "tile_exc_d") },
    { k: "fnd", code: "02", to: "finder", title: T(lang, "nav_finder"), d: T(lang, "tile_fnd_d") },
    { k: "car", code: "03", to: "rental", title: T(lang, "nav_rental"), d: T(lang, "tile_car_d") },
  ];
  const featured = EX.slice(0, 3);

  return (
    <div>
      {/* HERO */}
      <section style={{ position: "relative", height: "calc(100vh - 64px)", minHeight: 560, overflow: "hidden" }}>
        <WeatherScene cond={w.cond} />
        {photo && (
          <image-slot id={`vk-hero-${w.cond}`} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
            shape="rect" placeholder={`${T(lang, "drop_photo")}: ${condLabel}`}></image-slot>
        )}
        <div style={{ position: "absolute", inset: 22, pointerEvents: "none" }}><BR color="rgba(255,255,255,0.22)" size={30} /></div>

        {/* live weather chip */}
        <div style={{ position: "absolute", top: 26, right: 26, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 14px", background: "rgba(8,8,10,0.5)",
            border: "1px solid rgba(255,255,255,0.2)", backdropFilter: "blur(8px)", fontFamily: K.MONO, fontSize: 12, color: "#F3F1EC", letterSpacing: "0.04em", whiteSpace: "nowrap" }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: w.error ? K.faint : "#5BE08A",
              boxShadow: w.error ? "none" : "0 0 8px #5BE08A" }} />
            {T(lang, "sunny_beach")} · {w.loading ? "···" : `${condLabel}, ${w.temp}°`}
          </div>
          <button onClick={() => setPhoto((p) => !p)} style={{ pointerEvents: "auto", cursor: "pointer",
            padding: "6px 11px", background: photo ? K.coral : "rgba(8,8,10,0.5)", border: `1px solid ${photo ? K.coral : "rgba(255,255,255,0.2)"}`,
            color: photo ? "#08080A" : "rgba(243,241,236,0.78)", fontFamily: K.MONO, fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", backdropFilter: "blur(8px)", whiteSpace: "nowrap" }}>
            {photo ? T(lang, "scene_off") : T(lang, "own_photo")}
          </button>
        </div>

        {/* headline */}
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "0 clamp(22px,5vw,60px) clamp(40px,6vh,72px)" }}>
          <div style={{ marginBottom: 20 }}><MT accent>{w.loading ? "LIVE · ··· " : `LIVE · ${condLabel.toUpperCase()} · ${w.temp}°`}</MT></div>
          <h1 style={{ fontFamily: K.HEAD, fontWeight: 800, fontSize: "clamp(38px,7vw,82px)", lineHeight: 0.98,
            letterSpacing: "-0.02em", color: "#F3F1EC", margin: 0, maxWidth: 900, textShadow: "0 4px 30px rgba(0,0,0,0.5)" }}>
            {lang === "ru" ? <>{T(lang, "home_t1")}<br /><span style={{ color: K.coral }}>{T(lang, "home_t2")}</span></> : <>{T(lang, "home_t1")}<br /><span style={{ color: K.coral }}>{T(lang, "home_t2")}</span></>}
          </h1>
          <p style={{ fontFamily: K.BODY, fontSize: "clamp(15px,1.6vw,18px)", lineHeight: 1.55, color: "rgba(243,241,236,0.82)",
            maxWidth: 540, margin: "20px 0 0" }}>
            {T(lang, "home_sub")}
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap", pointerEvents: "auto" }}>
            <ANG variant="coral" size="lg" onClick={() => nav("exc")}>{T(lang, "all_exc")}</ANG>
            <ANG variant="ghost" size="lg" onClick={() => nav("finder")} style={{ color: "#F3F1EC", borderColor: "rgba(255,255,255,0.28)" }}>{T(lang, "finder_cta")}</ANG>
          </div>
        </div>

        {/* scroll cue */}
        <div className="vk-bounce" style={{ position: "absolute", left: "50%", bottom: 18, transform: "translateX(-50%)", color: K.coral }}>
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 8l7 7 7-7" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
        </div>
      </section>

      {/* DIRECTORY TILES */}
      <section style={{ padding: "clamp(40px,6vw,72px) clamp(22px,5vw,60px) clamp(16px,2vw,24px)", borderTop: `1px solid ${K.line}` }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 30, flexWrap: "wrap", gap: 12 }}>
          <MT>{T(lang, "dir_label")}</MT>
          <span style={{ fontFamily: K.MONO, fontSize: 11, color: K.faint, letterSpacing: "0.1em" }}>DREAM TEAM · BLACK SEA · BG</span>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: 1, background: K.line, border: `1px solid ${K.line}` }}>
          {tiles.map((tl) => (
            <button key={tl.k} onClick={() => nav(tl.to)} style={{ position: "relative", textAlign: "left", cursor: "pointer",
              background: K.panel, border: "none", padding: "26px 24px 24px", display: "flex", flexDirection: "column", gap: 12, minHeight: 188,
              transition: "background .2s" }}
              onMouseEnter={(e) => e.currentTarget.style.background = K.panel2}
              onMouseLeave={(e) => e.currentTarget.style.background = K.panel}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontFamily: K.MONO, fontSize: 11, color: K.coral, letterSpacing: "0.14em" }}>[{tl.code}]</span>
                <AB />
              </div>
              <h3 style={{ fontFamily: K.HEAD, fontWeight: 800, fontSize: 24, color: K.ink, margin: "auto 0 0", letterSpacing: "-0.01em" }}>{tl.title}</h3>
              <p style={{ fontFamily: K.BODY, fontSize: 13, lineHeight: 1.5, color: K.sub, margin: 0 }}>{tl.d}</p>
            </button>
          ))}
        </div>
      </section>

      {/* FEATURED */}
      <section style={{ padding: "clamp(24px,3vw,36px) clamp(22px,5vw,60px) clamp(50px,7vw,84px)" }}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 24, flexWrap: "wrap", gap: 12 }}>
          <h2 style={{ fontFamily: K.HEAD, fontWeight: 800, fontSize: "clamp(26px,3.4vw,40px)", color: K.ink, margin: 0, letterSpacing: "-0.01em" }}>
            {T(lang, "featured_h")}
          </h2>
          <button onClick={() => nav("exc")} style={{ background: "none", border: "none", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 9,
            fontFamily: K.MONO, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: K.coral }}>
            {T(lang, "all_exc")} <AB />
          </button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))", gap: 20 }}>
          {featured.map((e) => <ExcCard key={e.id} e={e} lang={lang} nav={nav} />)}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 14, marginTop: 28 }}>
          <ANG variant="ghost" onClick={() => nav("finder")}>
            <span style={{ width: 7, height: 7, background: K.coral, flexShrink: 0 }} />{T(lang, "finder_cta")}
          </ANG>
          <ANG variant="coral" onClick={() => nav("exc")}>
            {T(lang, "all_exc")} <AB color="#0A0A0B" size={15} />
          </ANG>
        </div>
      </section>
    </div>
  );
}

// ── EXCURSION CARD (shared) ────────────────────────────────────────────────
function ExcCard({ e, lang, nav, match = null, matchOf = 0 }) {
  const [h, setH] = window.uS(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} onClick={() => window.dtOpenBooking && window.dtOpenBooking({ type: "exc", id: e.id })}
      style={{ position: "relative", background: K.panel, border: `1px solid ${h ? K.coral : K.line}`, cursor: "pointer",
        display: "flex", flexDirection: "column", transition: "border-color .2s" }}>
      <div style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden" }}>
        <image-slot id={`vk-exc-${e.id}`} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
          shape="rect" src={e.img} placeholder={e.place[lang]}></image-slot>
        <div style={{ position: "absolute", top: 12, left: 12, zIndex: 2 }}>
          <span style={{ fontFamily: K.MONO, fontSize: 10, letterSpacing: "0.14em", color: "#F3F1EC", background: "rgba(8,8,10,0.72)",
            border: "1px solid rgba(255,255,255,0.18)", padding: "5px 9px", whiteSpace: "nowrap" }}>{e.code} · {e.cat}</span>
        </div>
        {e.seats <= 5 && (
          <div style={{ position: "absolute", top: 12, right: 12, zIndex: 2, fontFamily: K.MONO, fontSize: 10, letterSpacing: "0.1em",
            color: K.coral, background: "rgba(8,8,10,0.72)", border: `1px solid ${K.coral}`, padding: "5px 9px", whiteSpace: "nowrap" }}>
            {e.seats} {T(lang, "seats_left")}
          </div>
        )}
      </div>
      <div style={{ padding: "18px 20px 20px", display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 style={{ fontFamily: K.HEAD, fontWeight: 800, fontSize: 22, color: K.ink, margin: "0 0 8px", letterSpacing: "-0.01em" }}>{e.title[lang]}</h3>
        {match != null && matchOf > 0 && (
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 10 }}>
            <span style={{ fontFamily: K.MONO, fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase", color: K.coral }}>★ {match}/{matchOf}</span>
            <div style={{ display: "flex", gap: 3 }}>
              {Array.from({ length: matchOf }).map((_, i) => <span key={i} style={{ width: 16, height: 3, background: i < match ? K.coral : K.line }} />)}
            </div>
          </div>
        )}
        <div style={{ fontFamily: K.MONO, fontSize: 11, color: K.faint, letterSpacing: "0.04em", marginBottom: 12, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
          <span>{e.time}</span>
          {e.valid_until && (
            <>
              <span style={{ width: 3, height: 3, background: K.faint, borderRadius: "50%" }} />
              <span style={{ color: K.sand, border: `1px solid ${K.line}`, padding: "1px 5px" }}>{T(lang, "until_label")} {e.valid_until.split("-").reverse().join(".")}</span>
            </>
          )}
          {e.days && e.days.length > 0 && (
            <>
              <span style={{ width: 3, height: 3, background: K.faint, borderRadius: "50%" }} />
              <span style={{ display: "inline-flex", gap: 4 }}>
                {DN(lang, e.days).map((d, i) => (
                  <span key={i} style={{ color: K.coral, border: `1px solid ${K.line}`, padding: "1px 5px" }}>{d}</span>
                ))}
              </span>
            </>
          )}
        </div>
        <p style={{ fontFamily: K.BODY, fontSize: 13.5, lineHeight: 1.55, color: K.sub, margin: 0, flex: 1,
          display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{e.pitch[lang]}</p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 12, marginTop: 18, paddingTop: 16, borderTop: `1px solid ${K.line}` }}>
          <div style={{ fontFamily: K.HEAD, color: K.ink, whiteSpace: "nowrap" }}>
            {e.price == null ? (
              <span style={{ fontFamily: K.MONO, fontSize: 13, fontWeight: 600, color: K.coral, letterSpacing: "0.02em" }}>{T(lang, "price_check")}</span>
            ) : (
              <>
                <span style={{ fontFamily: K.MONO, fontSize: 11, color: K.faint }}>{T(lang, "from")} </span>
                <span style={{ fontSize: 20, fontWeight: 800 }}>€{EU(e.price)}</span>
                <span style={{ fontFamily: K.MONO, fontSize: 11, color: K.faint }}> · {e.price} лв</span>
                {e.priceChild != null && (
                  <span style={{ display: "block", fontFamily: K.MONO, fontSize: 10.5, color: K.faint, marginTop: 3, letterSpacing: "0.02em" }}>
                    {T(lang, "child_short")} €{EU(e.priceChild)} / {e.priceChild} лв
                  </span>
                )}
              </>
            )}
          </div>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: K.MONO, fontSize: 11, letterSpacing: "0.12em", flexShrink: 0,
            textTransform: "uppercase", color: h ? K.coral : K.sub, transition: "color .2s", whiteSpace: "nowrap" }}>
            {T(lang, "book")} <AB color={h ? K.coral : K.sub} size={14} />
          </span>
        </div>
      </div>
    </div>
  );
}

// ── EXCURSIONS PAGE ────────────────────────────────────────────────────────
const VK_FILTERS = [
  { k: "all",     l: { ru: "Все", en: "All", de: "Alle", pl: "Wszystkie", he: "הכל", bg: "Всички", cs: "Vše" } },
  { k: "active",  l: { ru: "Актив", en: "Active", de: "Aktiv", pl: "Aktyw", he: "אקטיב", bg: "Актив", cs: "Aktivní" } },
  { k: "kids",    l: { ru: "С детьми", en: "Kids", de: "Kinder", pl: "Z dziećmi", he: "עם ילדים", bg: "С деца", cs: "S dětmi" } },
  { k: "romance", l: { ru: "Романтика", en: "Romance", de: "Romantik", pl: "Romantyka", he: "רומנטיקה", bg: "Романтика", cs: "Romantika" } },
  { k: "culture", l: { ru: "Культура", en: "Culture", de: "Kultur", pl: "Kultura", he: "תרבות", bg: "Култура", cs: "Kultura" } },
  { k: "party",   l: { ru: "Вечеринка", en: "Party", de: "Party", pl: "Impreza", he: "מסיבה", bg: "Парти", cs: "Party" } },
  { k: "relax",   l: { ru: "Релакс", en: "Relax", de: "Entspannung", pl: "Relaks", he: "רגיעה", bg: "Релакс", cs: "Relax" } },
];
function PageExcursions({ lang, nav }) {
  const [sel, setSel] = window.uS(() => new Set());
  const toggle = (k) => setSel((prev) => { const n = new Set(prev); n.has(k) ? n.delete(k) : n.add(k); return n; });
  const active = sel.size > 0;
  const ranked = window.uM(() => {
    if (!active) return EX.map((e) => ({ e, m: 0 }));
    return EX.map((e) => ({ e, m: [...sel].filter((tag) => e.tags.includes(tag)).length }))
      .filter((x) => x.m > 0)
      .sort((a, b) => b.m - a.m || a.e.price - b.e.price);
  }, [sel]);
  const chips = VK_FILTERS.filter((ft) => ft.k !== "all");
  return (
    <div style={{ padding: "clamp(30px,5vw,56px) clamp(22px,5vw,60px) clamp(50px,7vw,84px)" }}>
      <div style={{ marginBottom: 10 }}><MT accent>{T(lang, "cat_label")}</MT></div>
      <h1 style={{ fontFamily: K.HEAD, fontWeight: 800, fontSize: "clamp(34px,5.4vw,64px)", color: K.ink, margin: "16px 0 6px", letterSpacing: "-0.02em" }}>
        {T(lang, "exc_h1")}
      </h1>
      <p style={{ fontFamily: K.BODY, fontSize: 15, color: K.sub, maxWidth: 560, margin: "0 0 26px" }}>
        {T(lang, "exc_intro")}
      </p>
      <div style={{ display: "flex", gap: 9, flexWrap: "wrap", alignItems: "center", marginBottom: active ? 12 : 28 }}>
        <button onClick={() => setSel(new Set())} style={{ cursor: "pointer", padding: "9px 16px", clipPath: window.ANGULAR_CLIP,
          fontFamily: K.MONO, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase",
          background: !active ? K.coral : "transparent", color: !active ? K.void : K.sub, border: !active ? "none" : `1px solid ${K.line}` }}>
          {VK_FILTERS[0].l[lang]}
        </button>
        {chips.map((ft) => {
          const on = sel.has(ft.k);
          return (
            <button key={ft.k} onClick={() => toggle(ft.k)} style={{ cursor: "pointer", padding: "9px 16px",
              clipPath: window.ANGULAR_CLIP, fontFamily: K.MONO, fontSize: 12, letterSpacing: "0.06em", textTransform: "uppercase",
              display: "inline-flex", alignItems: "center", gap: 7,
              background: on ? K.coral : "transparent", color: on ? K.void : K.sub, border: on ? "none" : `1px solid ${K.line}`,
              transition: "all .2s" }}>
              {on && <span style={{ fontSize: 12, lineHeight: 1 }}>✓</span>}{ft.l[lang]}
            </button>
          );
        })}
        <span style={{ marginLeft: "auto", fontFamily: K.MONO, fontSize: 12, color: K.faint, letterSpacing: "0.08em", alignSelf: "center" }}>
          {String(ranked.length).padStart(2, "0")} / {String(EX.length).padStart(2, "0")}
        </span>
      </div>
      {active && (
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 28, alignItems: "center" }}>
          <span style={{ fontFamily: K.MONO, fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: K.faint }}>{T(lang, "selected")}</span>
          {[...sel].map((k) => {
            const ft = VK_FILTERS.find((x) => x.k === k);
            return <span key={k} onClick={() => toggle(k)} style={{ cursor: "pointer", fontFamily: K.MONO, fontSize: 10.5,
              letterSpacing: "0.06em", textTransform: "uppercase", color: K.coral, border: `1px solid ${K.coral}`, padding: "4px 9px" }}>
              {ft ? ft.l[lang] : k} ✕</span>;
          })}
        </div>
      )}
      {ranked.length === 0 ? (
        <div style={{ padding: "60px 0", textAlign: "center", fontFamily: K.BODY, color: K.faint }}>
          {T(lang, "no_match")}
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(300px,1fr))", gap: 20 }}>
          {ranked.map((x) => <ExcCard key={x.e.id} e={x.e} lang={lang} nav={nav} match={active ? x.m : null} matchOf={sel.size} />)}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { PageHome, PageExcursions, ExcCard, WeatherScene });