// ============================================================================
// vk-pages-b.jsx — AI Finder (6-question wizard), Car Rental, Contacts+form.
// ============================================================================
const { VK: KK, t: TT, VCARS: CARS, VSHOPS: SHOPS, FINDER_Q: FQ, scoreExcursions: SCORE,
  MonoTag: M2, Angular: A2, ArrowBullet: AB2, toEur: EU2 } = window;

// ── AI FINDER ───────────────────────────────────────────────────────────────
function PageFinder({ lang, nav }) {
  const [stage, setStage] = window.uS("intro"); // intro | q | calc | result
  const [step, setStep] = window.uS(0);
  const [ans, setAns] = window.uS({});
  const [ranked, setRanked] = window.uS([]);

  const pick = (id, v) => {
    const next = { ...ans, [id]: v };
    setAns(next);
    if (step < FQ.length - 1) setStep(step + 1);
    else {
      setStage("calc");
      setTimeout(() => { setRanked(SCORE(next)); setStage("result"); }, 1600);
    }
  };
  const restart = () => { setAns({}); setStep(0); setRanked([]); setStage("intro"); };

  if (stage === "intro") {
    return (
      <Wrap>
        <div style={{ maxWidth: 720 }}>
          <M2 accent>{TT(lang, "finder_label")}</M2>
          <h1 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: "clamp(36px,6vw,72px)", color: KK.ink, margin: "20px 0 0", letterSpacing: "-0.02em", lineHeight: 1 }}>
            {lang === "ru" ? <>{TT(lang, "finder_t1")}<br /><span style={{ color: KK.coral }}>{TT(lang, "finder_t2")}</span></> : <>{TT(lang, "finder_t1")}<br /><span style={{ color: KK.coral }}>{TT(lang, "finder_t2")}</span></>}
          </h1>
          <p style={{ fontFamily: KK.BODY, fontSize: 16, lineHeight: 1.6, color: KK.sub, margin: "24px 0 36px", maxWidth: 520 }}>
            {TT(lang, "finder_intro")}
          </p>
          <A2 variant="coral" size="lg" onClick={() => setStage("q")}>{TT(lang, "finder_start")}</A2>
          <div style={{ display: "flex", gap: 28, marginTop: 48, flexWrap: "wrap" }}>
            {[["01", TT(lang, "step_answer")], ["02", TT(lang, "step_score")], ["03", TT(lang, "step_pick")]].map(([n, l]) => (
              <div key={n} style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
                <span style={{ fontFamily: KK.MONO, fontSize: 12, color: KK.coral, letterSpacing: "0.1em" }}>{n}</span>
                <span style={{ fontFamily: KK.BODY, fontSize: 14, color: KK.sub }}>{l}</span>
              </div>
            ))}
          </div>
        </div>
      </Wrap>
    );
  }

  if (stage === "calc") {
    return (
      <Wrap center>
        <div style={{ textAlign: "center" }}>
          <div className="vk-spin" style={{ width: 64, height: 64, margin: "0 auto 28px", border: `2px solid ${KK.line}`, borderTopColor: KK.coral, borderRadius: "50%" }} />
          <div style={{ fontFamily: KK.MONO, fontSize: 13, letterSpacing: "0.18em", textTransform: "uppercase", color: KK.coral }}>
            {TT(lang, "calc_text")}
          </div>
        </div>
      </Wrap>
    );
  }

  if (stage === "result") {
    const best = ranked[0], alts = ranked.slice(1, 3);
    const reasons = buildReasons(ans, best.e, lang);
    return (
      <Wrap>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 12, marginBottom: 24 }}>
          <M2 accent>{TT(lang, "result_label")}</M2>
          <button onClick={restart} style={{ background: "none", border: "none", cursor: "pointer", fontFamily: KK.MONO, fontSize: 12,
            letterSpacing: "0.1em", textTransform: "uppercase", color: KK.sub, display: "inline-flex", gap: 8, alignItems: "center" }}>
            ↻ {TT(lang, "restart")}
          </button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.3fr) minmax(0,1fr)", gap: 24, alignItems: "stretch" }} className="vk-result-grid">
          {/* hero match */}
          <div style={{ position: "relative", border: `1px solid ${KK.coral}`, background: KK.panel, display: "flex", flexDirection: "column", minHeight: 420 }}>
            <div style={{ position: "relative", flex: 1, minHeight: 240, overflow: "hidden" }}>
              <image-slot id={`vk-exc-${best.e.id}`} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} shape="rect" src={best.e.img} placeholder={best.e.place[lang]}></image-slot>
              <div style={{ position: "absolute", top: 14, left: 14, fontFamily: KK.MONO, fontSize: 10, letterSpacing: "0.14em", color: KK.void, background: KK.coral, padding: "6px 10px" }}>
                ★ {TT(lang, "match")} {Math.min(99, 70 + best.s * 4)}%
              </div>
            </div>
            <div style={{ padding: "22px 24px 24px" }}>
              <div style={{ fontFamily: KK.MONO, fontSize: 11, color: KK.faint, letterSpacing: "0.1em", marginBottom: 8 }}>{best.e.code} · {best.e.cat} · {best.e.time}</div>
              <h2 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: 30, color: KK.ink, margin: "0 0 12px", letterSpacing: "-0.01em" }}>{best.e.title[lang]}</h2>
              <p style={{ fontFamily: KK.BODY, fontSize: 14, lineHeight: 1.6, color: KK.sub, margin: "0 0 18px" }}>{best.e.pitch[lang]}</p>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 16, borderTop: `1px solid ${KK.line}` }}>
                <div style={{ fontFamily: KK.HEAD, color: KK.ink }}><span style={{ fontFamily: KK.MONO, fontSize: 11, color: KK.faint }}>{TT(lang, "from")} </span><span style={{ fontSize: 22, fontWeight: 800 }}>€{EU2(best.e.price)}</span></div>
                <A2 variant="coral" onClick={() => window.dtOpenBooking && window.dtOpenBooking({ type: "exc", id: best.e.id })}>{TT(lang, "book")}</A2>
              </div>
            </div>
          </div>
          {/* reasons + alternatives */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ border: `1px solid ${KK.line}`, background: KK.panel, padding: "20px 22px" }}>
              <div style={{ fontFamily: KK.MONO, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: KK.coral, marginBottom: 14 }}>{TT(lang, "why")}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {reasons.map((r, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontFamily: KK.BODY, fontSize: 13.5, color: KK.ink, lineHeight: 1.45 }}>
                    <AB2 size={14} />{r}
                  </div>
                ))}
              </div>
            </div>
            <div style={{ border: `1px solid ${KK.line}`, background: KK.panel, padding: "20px 22px", flex: 1 }}>
              <div style={{ fontFamily: KK.MONO, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: KK.faint, marginBottom: 14 }}>{TT(lang, "alternatives")}</div>
              {alts.map((a) => (
                <button key={a.e.id} onClick={() => nav("exc")} style={{ width: "100%", textAlign: "left", cursor: "pointer", background: "none",
                  border: "none", borderTop: `1px solid ${KK.line2}`, padding: "13px 0", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div>
                    <div style={{ fontFamily: KK.HEAD, fontWeight: 700, fontSize: 16, color: KK.ink }}>{a.e.title[lang]}</div>
                    <div style={{ fontFamily: KK.MONO, fontSize: 10.5, color: KK.faint, letterSpacing: "0.06em", marginTop: 3 }}>{a.e.code} · €{EU2(a.e.price)}</div>
                  </div>
                  <AB2 color={KK.sub} />
                </button>
              ))}
            </div>
          </div>
        </div>
      </Wrap>
    );
  }

  // question stage
  const Q = FQ[step];
  return (
    <Wrap>
      <div style={{ maxWidth: 760, margin: "0 auto", width: "100%" }}>
        {/* progress */}
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 40 }}>
          <span style={{ fontFamily: KK.MONO, fontSize: 13, color: KK.coral, letterSpacing: "0.1em" }}>{String(step + 1).padStart(2, "0")}</span>
          <div style={{ flex: 1, height: 2, background: KK.line, position: "relative" }}>
            <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: `${((step + 1) / FQ.length) * 100}%`, background: KK.coral, transition: "width .4s" }} />
          </div>
          <span style={{ fontFamily: KK.MONO, fontSize: 13, color: KK.faint, letterSpacing: "0.1em" }}>{String(FQ.length).padStart(2, "0")}</span>
        </div>
        <h2 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: "clamp(30px,5vw,52px)", color: KK.ink, margin: "0 0 36px", letterSpacing: "-0.02em", lineHeight: 1.02 }}>{Q.q[lang]}</h2>
        <div style={{ display: "grid", gridTemplateColumns: Q.opts.length > 2 ? "repeat(auto-fit,minmax(220px,1fr))" : "1fr 1fr", gap: 12 }}>
          {Q.opts.map((o, i) => (
            <button key={o.v} onClick={() => pick(Q.id, o.v)} style={{ cursor: "pointer", textAlign: "left", padding: "22px 22px",
              background: KK.panel, border: `1px solid ${KK.line}`, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
              transition: "all .18s" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = KK.coral; e.currentTarget.style.background = KK.panel2; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = KK.line; e.currentTarget.style.background = KK.panel; }}>
              <span style={{ fontFamily: KK.HEAD, fontWeight: 700, fontSize: 18, color: KK.ink }}>
                <span style={{ fontFamily: KK.MONO, fontSize: 11, color: KK.coral, marginRight: 12, letterSpacing: "0.06em" }}>{String.fromCharCode(65 + i)}</span>{o.l[lang]}
              </span>
              <AB2 color={KK.sub} />
            </button>
          ))}
        </div>
        {step > 0 && (
          <button onClick={() => setStep(step - 1)} style={{ marginTop: 28, background: "none", border: "none", cursor: "pointer",
            fontFamily: KK.MONO, fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: KK.sub }}>← {TT(lang, "back")}</button>
        )}
      </div>
    </Wrap>
  );
}

function buildReasons(ans, e, lang) {
  const R = [];
  const F = window.t;
  if (ans.party && e.party.includes(ans.party)) R.push(F(lang, "reason_party"));
  if (ans.dur === e.dur) R.push(F(lang, "reason_time"));
  if (ans.budget) { const ok = ans.budget === "lo" ? e.price <= 50 : ans.budget === "mid" ? e.price <= 80 : e.price > 80; if (ok) R.push(F(lang, "reason_budget")); }
  if (ans.party_ok === "yes" && e.tags.includes("party")) R.push(F(lang, "reason_drinks"));
  if (ans.kids_ok === "yes" && e.tags.includes("kids")) R.push(F(lang, "reason_kids"));
  if (ans.vibe === "relax" && e.tags.includes("relax")) R.push(F(lang, "reason_relax"));
  if (ans.vibe === "culture" && e.tags.includes("culture")) R.push(F(lang, "reason_culture"));
  if (R.length < 2) R.push(F(lang, "reason_rated"));
  return R.slice(0, 4);
}

// ── CAR RENTAL ──────────────────────────────────────────────────────────────
function PageRental({ lang, nav }) {
  const [cls, setCls] = window.uS("ALL");
  const classes = ["ALL", ...Array.from(new Set(CARS.map((c) => c.cls)))];
  const list = cls === "ALL" ? CARS : CARS.filter((c) => c.cls === cls);
  return (
    <Wrap>
      <M2 accent>{TT(lang, "rental_label")}</M2>
      <h1 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: "clamp(34px,5.4vw,64px)", color: KK.ink, margin: "16px 0 6px", letterSpacing: "-0.02em" }}>
        {TT(lang, "rental_h1")}
      </h1>
      <p style={{ fontFamily: KK.BODY, fontSize: 15, color: KK.sub, maxWidth: 540, margin: "0 0 30px" }}>
        {TT(lang, "rental_intro")}
      </p>
      <div style={{ display: "flex", gap: 9, flexWrap: "wrap", marginBottom: 28 }}>
        {classes.map((c) => {
          const on = cls === c;
          return <button key={c} onClick={() => setCls(c)} style={{ cursor: "pointer", padding: "9px 15px", clipPath: window.ANGULAR_CLIP,
            fontFamily: KK.MONO, fontSize: 11.5, letterSpacing: "0.08em", background: on ? KK.coral : "transparent", color: on ? KK.void : KK.sub,
            border: on ? "none" : `1px solid ${KK.line}` }}>{c}</button>;
        })}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(310px,1fr))", gap: 20 }}>
        {list.map((c) => <CarCard key={c.id} c={c} lang={lang} nav={nav} />)}
      </div>
      {/* how it works */}
      <div style={{ marginTop: 56, borderTop: `1px solid ${KK.line}`, paddingTop: 36 }}>
        <M2>{TT(lang, "how_works")}</M2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: 24, marginTop: 24 }}>
          {[["001", TT(lang, "hw1")], ["002", TT(lang, "hw2")], ["003", TT(lang, "hw3")]].map(([n, l]) => (
            <div key={n} style={{ borderLeft: `2px solid ${KK.coral}`, paddingLeft: 16 }}>
              <div style={{ fontFamily: KK.MONO, fontSize: 12, color: KK.coral, letterSpacing: "0.1em", marginBottom: 8 }}>{n}</div>
              <div style={{ fontFamily: KK.HEAD, fontWeight: 700, fontSize: 18, color: KK.ink }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </Wrap>
  );
}
function CarCard({ c, lang, nav }) {
  const [h, setH] = window.uS(false);
  const specs = [[TT(lang, "sp_seats"), c.seats], [TT(lang, "sp_gear"), c.trans], [TT(lang, "sp_ac"), c.ac ? "✓" : "—"], [TT(lang, "sp_fuel"), c.fuel]];
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ background: KK.panel, border: `1px solid ${h ? KK.coral : KK.line}`, transition: "border-color .2s", display: "flex", flexDirection: "column" }}>
      <div style={{ position: "relative", aspectRatio: "16/10", overflow: "hidden" }}>
        <image-slot id={`vk-car-${c.id}`} style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} shape="rect" src={c.img} placeholder={c.name}></image-slot>
        <div style={{ position: "absolute", top: 12, left: 12, fontFamily: KK.MONO, fontSize: 10, letterSpacing: "0.12em", color: "#F3F1EC", background: "rgba(8,8,10,0.72)", border: "1px solid rgba(255,255,255,0.18)", padding: "5px 9px" }}>{c.code} · {c.cls}</div>
      </div>
      <div style={{ padding: "18px 20px 20px", flex: 1, display: "flex", flexDirection: "column" }}>
        <h3 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: 21, color: KK.ink, margin: "0 0 14px" }}>{c.name}</h3>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: KK.line, border: `1px solid ${KK.line}`, marginBottom: 16 }}>
          {specs.map(([k, v]) => (
            <div key={k} style={{ background: KK.panel, padding: "9px 11px", display: "flex", justifyContent: "space-between" }}>
              <span style={{ fontFamily: KK.MONO, fontSize: 10, color: KK.faint, letterSpacing: "0.06em", textTransform: "uppercase" }}>{k}</span>
              <span style={{ fontFamily: KK.MONO, fontSize: 11.5, color: KK.ink }}>{v}</span>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginTop: "auto" }}>
          <div style={{ fontFamily: KK.HEAD, color: KK.ink, whiteSpace: "nowrap" }}><span style={{ fontSize: 22, fontWeight: 800 }}>€{EU2(c.price)}</span><span style={{ fontFamily: KK.MONO, fontSize: 11, color: KK.faint }}> · {c.price} лв{TT(lang, "per_day")}</span></div>
          <A2 variant={h ? "coral" : "ghost"} size="sm" onClick={() => window.dtOpenBooking && window.dtOpenBooking({ type: "car", id: c.id })} style={{ flexShrink: 0 }}>{TT(lang, "rent")}</A2>
        </div>
      </div>
    </div>
  );
}

// ── CONTACTS + FORM ─────────────────────────────────────────────────────────
function PageContacts({ lang }) {
  const [kind, setKind] = window.uS("guest");
  const [sent, setSent] = window.uS(false);
  const [sending, setSending] = window.uS(false);
  const [err, setErr] = window.uS(false);
  const [form, setForm] = window.uS({ name: "", phone: "", msg: "" });
  const valid = form.name.trim() && form.phone.trim().length >= 6;
  const submit = async () => {
    if (!valid || sending) return;
    setSending(true); setErr(false);
    const kindL = kind === "agent" ? "Агент / Agent" : "Турист / Guest";
    const text =
      "✨ НОВАЯ ЗАЯВКА · DREAM TEAM\n\n" +
      "👤 " + kindL + "\n" +
      "— Имя: " + form.name + "\n" +
      "— Контакт: " + form.phone + "\n" +
      (form.msg.trim() ? "— Сообщение: " + form.msg + "\n" : "") +
      "— Язык сайта: " + lang.toUpperCase() + "\n" +
      "— Время: " + new Date().toLocaleString("ru-RU", { timeZone: "Europe/Sofia" });
    const res = await window.sendLeadToTelegram(text);
    setSending(false);
    // demo-friendly: if owner hasn't connected the bot yet (no chat-id), still show success.
    if (res.ok || res.reason === "no-chat-id") { setSent(true); setForm({ name: "", phone: "", msg: "" }); }
    else { setErr(true); }
  };
  return (
    <Wrap>
      <M2 accent>{TT(lang, "contacts_label")}</M2>
      <h1 style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: "clamp(34px,5.4vw,64px)", color: KK.ink, margin: "16px 0 30px", letterSpacing: "-0.02em" }}>
        {TT(lang, "contacts_h1")}
      </h1>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.1fr) minmax(0,1fr)", gap: 28, alignItems: "start" }} className="vk-contact-grid">
        {/* offices */}
        <div style={{ display: "flex", flexDirection: "column", gap: 1, background: KK.line, border: `1px solid ${KK.line}` }}>
          {SHOPS.map((s) => (
            <a key={s.id} href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(s.q)}`} target="_blank" rel="noreferrer"
              style={{ background: KK.panel, padding: "20px 22px", textDecoration: "none", display: "block", transition: "background .2s" }}
              onMouseEnter={(e) => e.currentTarget.style.background = KK.panel2} onMouseLeave={(e) => e.currentTarget.style.background = KK.panel}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 8 }}>
                <span style={{ fontFamily: KK.MONO, fontSize: 10.5, color: KK.coral, letterSpacing: "0.12em" }}>{s.code} · {s.area}</span>
                <span style={{ fontFamily: KK.MONO, fontSize: 10.5, color: KK.faint, letterSpacing: "0.06em" }}>{s.hours}</span>
              </div>
              <div style={{ fontFamily: KK.HEAD, fontWeight: 700, fontSize: 18, color: KK.ink, marginBottom: 5 }}>{s.name}</div>
              <div style={{ fontFamily: KK.BODY, fontSize: 13, color: KK.sub, marginBottom: 10 }}>{s.addr}</div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span style={{ fontFamily: KK.MONO, fontSize: 12.5, color: KK.ink }}>{s.phone}</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: KK.MONO, fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: KK.sub }}>
                  {TT(lang, "map_label")} <AB2 color={KK.sub} size={13} />
                </span>
              </div>
            </a>
          ))}
        </div>
        {/* form */}
        <div style={{ border: `1px solid ${KK.line}`, background: KK.panel, padding: "26px 26px 28px", position: "relative" }}>
          {!sent ? (
            <>
              <div style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: 22, color: KK.ink, marginBottom: 18 }}>{TT(lang, "write_us")}</div>
              <div style={{ display: "flex", gap: 1, background: KK.line, border: `1px solid ${KK.line}`, marginBottom: 18 }}>
                {[["guest", TT(lang, "guest")], ["agent", TT(lang, "agent")]].map(([v, l]) => (
                  <button key={v} onClick={() => setKind(v)} style={{ flex: 1, cursor: "pointer", padding: "11px", border: "none",
                    background: kind === v ? KK.coral : KK.panel, color: kind === v ? KK.void : KK.sub, fontFamily: KK.MONO, fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase" }}>{l}</button>
                ))}
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                <Field ph={TT(lang, "ph_name")} v={form.name} on={(x) => setForm({ ...form, name: x })} />
                <Field ph={TT(lang, "ph_phone")} v={form.phone} on={(x) => setForm({ ...form, phone: x })} />
                <Field ph={TT(lang, "ph_msg")} v={form.msg} on={(x) => setForm({ ...form, msg: x })} area />
              </div>
              <div style={{ marginTop: 18 }}>
                <A2 variant={valid && !sending ? "coral" : "ghost"} size="lg" onClick={submit} style={{ width: "100%", justifyContent: "center", opacity: valid && !sending ? 1 : 0.5, cursor: valid && !sending ? "pointer" : "not-allowed" }}>
                  {sending ? "…" : TT(lang, "send_req")}
                </A2>
              </div>
              {err && (
                <p style={{ fontFamily: KK.MONO, fontSize: 11, color: KK.coral, letterSpacing: "0.02em", marginTop: 12, lineHeight: 1.5 }}>
                  {TT(lang, "send_err")}
                </p>
              )}
              <p style={{ fontFamily: KK.MONO, fontSize: 10, color: KK.faint, letterSpacing: "0.04em", marginTop: 14, lineHeight: 1.5 }}>
                {TT(lang, "form_note")}
              </p>
            </>
          ) : (
            <div style={{ textAlign: "center", padding: "30px 0" }}>
              <div style={{ width: 56, height: 56, margin: "0 auto 18px", border: `1px solid ${KK.coral}`, display: "flex", alignItems: "center", justifyContent: "center", color: KK.coral }}>
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.5 4.5L19 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div style={{ fontFamily: KK.HEAD, fontWeight: 800, fontSize: 24, color: KK.ink, marginBottom: 8 }}>{TT(lang, "sent_title")}</div>
              <p style={{ fontFamily: KK.BODY, fontSize: 14, color: KK.sub, maxWidth: 280, margin: "0 auto" }}>
                {form.name.split(" ")[0] || ""}, {TT(lang, "sent_msg")}
              </p>
            </div>
          )}
        </div>
      </div>
    </Wrap>
  );
}
function Field({ ph, v, on, area }) {
  const st = { width: "100%", padding: "13px 15px", background: KK.panel2, border: `1px solid ${KK.line}`, color: KK.ink,
    fontFamily: KK.BODY, fontSize: 14, outline: "none" };
  return area
    ? <textarea placeholder={ph} value={v} onChange={(e) => on(e.target.value)} rows={3} style={{ ...st, resize: "vertical" }} onFocus={(e) => e.target.style.borderColor = KK.coral} onBlur={(e) => e.target.style.borderColor = KK.line} />
    : <input placeholder={ph} value={v} onChange={(e) => on(e.target.value)} style={st} onFocus={(e) => e.target.style.borderColor = KK.coral} onBlur={(e) => e.target.style.borderColor = KK.line} />;
}

// ── layout helper ───────────────────────────────────────────────────────────
function Wrap({ children, center }) {
  return <div style={{ padding: "clamp(30px,5vw,56px) clamp(22px,5vw,60px) clamp(50px,7vw,84px)", minHeight: "calc(100vh - 64px)",
    display: center ? "flex" : "block", alignItems: "center", justifyContent: "center" }}>{children}</div>;
}

Object.assign(window, { PageFinder, PageRental, PageContacts });