/* global React */
const { Calculator, Card, Badge, Button, Input, Textarea, Tabs, Select, NumberStepper } = window.DoslovnoByDesignSystem_88f6e6;
const Icon = window.DBIcon;

const MAXW = "var(--container-max)";

function scrollToId(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 70;
  window.scrollTo({ top: y, behavior: "smooth" });
}

/* ----------------------------------------------------------- layout helpers */
function Section({ children, bg = "var(--surface-page)", id, style = {}, pad = "112px 24px" }) {
  return (
    <section id={id} style={{ background: bg, padding: pad, ...style }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>{children}</div>
    </section>
  );
}

function Eyebrow({ children, onDark = false }) {
  return (
    <div style={{
      fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase",
      color: onDark ? "var(--color-primary)" : "#b06f12", marginBottom: 14,
    }}>{children}</div>
  );
}

function H2({ children, onDark = false, style = {} }) {
  return (
    <h2 style={{
      fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "var(--display-md-size)",
      lineHeight: 1.08, letterSpacing: "-0.02em",
      color: onDark ? "#fff" : "var(--color-ink)", margin: 0, ...style,
    }}>{children}</h2>
  );
}

/* ----------------------------------------------------- language switcher */
const HEADER_LANGS = [["RU", "Русский"], ["BY", "Беларуская"], ["EN", "English"], ["PL", "Polski"]];
function LangSwitcher() {
  const [cur, setCur] = React.useState("RU");
  return (
    <div style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 6, border: "1px solid var(--color-border)", background: "var(--color-canvas)", borderRadius: "var(--radius-pill)", padding: "6px 26px 6px 12px" }}>
      <Icon name="globe" size={16} color="var(--color-navy-deep)" />
      <select aria-label="Язык сайта" value={cur} onChange={(e) => setCur(e.target.value)}
        style={{ appearance: "none", WebkitAppearance: "none", MozAppearance: "none", border: "none", outline: "none", background: "transparent", font: "inherit", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 700, color: "var(--color-navy-deep)", cursor: "pointer", padding: 0 }}>
        {HEADER_LANGS.map(([code, name]) => (<option key={code} value={code}>{name}</option>))}
      </select>
      <span style={{ position: "absolute", right: 12, pointerEvents: "none", fontSize: 10, color: "var(--color-mute)" }}>▾</span>
    </div>
  );
}

/* --------------------------------------------------------------- lead sink */
// Единая точка приёма заявок. Сейчас: сохраняем в localStorage (черновая «база»
// до интеграции) и, если задан LEAD_ENDPOINT, отправляем POST. Позже это тело
// заменяем на реальный бэкенд / CRM / сервис статистики лидов — UI не трогаем.
const LEAD_ENDPOINT = ""; // напр. "/api/lead" или вебхук Telegram-бота. Пусто — пока только локально.

async function submitLead(payload) {
  const lead = {
    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 7),
    ts: new Date().toISOString(),
    page: typeof location !== "undefined" ? location.pathname : "",
    ...payload,
  };
  try {
    const k = "doslovno_leads";
    const all = JSON.parse(localStorage.getItem(k) || "[]");
    all.push(lead);
    localStorage.setItem(k, JSON.stringify(all));
  } catch (e) { /* приватный режим — пропускаем локальное сохранение */ }
  if (LEAD_ENDPOINT) {
    await fetch(LEAD_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(lead),
    });
  }
  console.log("[lead]", lead);
  return lead;
}

// --- режим взаимодействия: скролл к секции или модалка поверх экрана ---
// Техфлаг: "scroll" — скроллим к калькулятору/форме; "modal" — открываем поверх.
const INTERACTION_MODE = "modal";

// Открыть калькулятор. opts.mode: "quick" | "send".
function openCalc(opts) {
  opts = opts || {};
  if (INTERACTION_MODE === "modal") {
    window.dispatchEvent(new CustomEvent("doslovno:open-modal", { detail: { kind: "calc", mode: opts.mode || "quick" } }));
  } else {
    if (opts.mode) window.dispatchEvent(new CustomEvent("doslovno:set-calc-mode", { detail: { mode: opts.mode } }));
    scrollToId("hero");
  }
}

// Открыть форму заявки. opts.message — предзаполнить текст.
// В модалке текст передаём через detail (форма ещё не смонтирована — событие
// prefill-lead она бы не поймала), на встроенную форму внизу — событием.
function openLead(opts) {
  opts = opts || {};
  if (INTERACTION_MODE === "modal") {
    window.dispatchEvent(new CustomEvent("doslovno:open-modal", { detail: { kind: "lead", message: opts.message || "" } }));
  } else {
    if (opts.message) window.dispatchEvent(new CustomEvent("doslovno:prefill-lead", { detail: { message: opts.message } }));
    scrollToId("lead");
  }
}

function closeModal() { window.dispatchEvent(new CustomEvent("doslovno:close-modal")); }

// Совместимость: старое имя.
function prefillLead(message) { openLead({ message: message }); }

// Грубая валидация номера: после префикса +375 должно остаться 9 цифр.
function isValidPhone(raw) {
  return (raw || "").replace(/\D/g, "").length >= 9;
}

/* --------------------------------------------------------- form helpers */
// Звёздочка обязательного поля в label.
function reqLabel(text) {
  return <span>{text} <span style={{ color: "var(--color-negative)" }}>*</span></span>;
}
// Чекбокс согласия на обработку персональных данных.
function Consent(props) {
  return (
    <label style={{ display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer", fontSize: 13, color: props.error ? "var(--color-negative)" : "var(--color-mute)", lineHeight: 1.4, margin: 0 }}>
      <input type="checkbox" checked={props.checked} onChange={props.onChange} style={{ marginTop: 1, width: 16, height: 16, flexShrink: 0, accentColor: "#e8a02c", cursor: "pointer" }} />
      <span>Согласен на обработку персональных данных</span>
    </label>
  );
}

/* ------------------------------------------------------------- calculator */
const CALC_DOCS = ["Свидетельство о рождении", "Диплом / аттестат", "Справка", "Договор", "Паспорт", "Иное"];
const CALC_LANGS = ["Русский", "Белорусский", "Английский", "Польский", "Немецкий", "Литовский", "Чешский", "Украинский", "Итальянский", "Испанский", "Французский", "Китайский", "Арабский", "Персидский", "Туркменский"];
const LANG_RATE = { "Английский": 25, "Немецкий": 25, "Польский": 35, "Литовский": 35, "Чешский": 35, "Итальянский": 35, "Испанский": 30, "Французский": 30, "Украинский": 20, "Русский": 20, "Белорусский": 20, "Китайский": 58, "Арабский": 58, "Персидский": 55, "Туркменский": 45 };
// Заверение зависит от направления: на русский/белорусский — 75, на иностранный — 150 (из них 90 — гос.тариф нотариуса, п.36).
const NOTARY_FEE = (to) => (to === "Русский" || to === "Белорусский") ? 75 : 150;
// Дефолтное состояние калькулятора. Если пользователь ничего не менял —
// в заявку расчёт не подставляем (примечание остаётся пустым).
const CALC_DEFAULTS = { doc: CALC_DOCS[0], from: "Русский", to: "Английский", notary: false, pages: 1 };
function CustomCalc(props) {
  const uid = React.useId();
  const [mode, setMode] = React.useState((props && props.initialMode) || "quick");
  const [doc, setDoc] = React.useState(CALC_DEFAULTS.doc);
  const [from, setFrom] = React.useState(CALC_DEFAULTS.from);
  const [to, setTo] = React.useState(CALC_DEFAULTS.to);
  const [notary, setNotary] = React.useState(CALC_DEFAULTS.notary); // по умолчанию без заверения — цена не пугает
  const [pages, setPages] = React.useState(CALC_DEFAULTS.pages); // среднее по документам, клиент подправит
  // режим «Отправить на оценку»
  const [sendPhone, setSendPhone] = React.useState("");
  const [sendFileName, setSendFileName] = React.useState("");
  const [sendConsent, setSendConsent] = React.useState(false);
  const [sendStatus, setSendStatus] = React.useState("idle"); // idle | sending | sent | error
  const [sendTouched, setSendTouched] = React.useState(false);
  // переключение вкладки извне (скролл-режим)
  React.useEffect(() => {
    const h = (e) => { if (e.detail && e.detail.mode) setMode(e.detail.mode); };
    window.addEventListener("doslovno:set-calc-mode", h);
    return () => window.removeEventListener("doslovno:set-calc-mode", h);
  }, []);
  const sendPhoneOk = isValidPhone(sendPhone);
  const submitEstimate = async () => {
    setSendTouched(true);
    if (!sendPhoneOk || !sendConsent) return;
    setSendStatus("sending");
    try {
      await submitLead({ kind: "calc_estimate", phone: "+375" + sendPhone.replace(/\D/g, "").slice(-9), file: sendFileName || null });
      setSendStatus("sent");
    } catch (e) { setSendStatus("error"); }
  };
  const transFee = (LANG_RATE[to] || 25) * pages;
  const notaryFee = notary ? NOTARY_FEE(to) : 0;
  const est = transFee + notaryFee;
  // тронут ли калькулятор — хоть одно поле отличается от дефолта
  const calcTouched = doc !== CALC_DEFAULTS.doc || from !== CALC_DEFAULTS.from || to !== CALC_DEFAULTS.to || notary !== CALC_DEFAULTS.notary || pages !== CALC_DEFAULTS.pages;
  const goLeadFromCalc = () => calcTouched
    ? prefillLead(`${doc}, ${from} → ${to}${notary ? ", с заверением" : ""}, ${pages} стр. Расчёт ≈ ${est} BYN`)
    : openLead();
  const swap = () => { setFrom(to); setTo(from); };
  const Pill = ({ active, children, onClick }) => (
    <button type="button" onClick={onClick} style={{ flex: 1, padding: 12, border: `1px solid ${active ? "var(--color-primary)" : "var(--color-border-strong)"}`, background: active ? "var(--color-primary-pale)" : "var(--color-canvas)", color: "var(--color-navy-deep)", borderRadius: "var(--radius-md)", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 600 }}>{children}</button>
  );
  const tabBtn = (id, label) => {
    const on = mode === id;
    return (
      <button type="button" onClick={() => setMode(id)} style={{ flex: 1, padding: "10px 12px", border: "none", borderRadius: "var(--radius-pill)", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, color: on ? "var(--color-navy-deep)" : "var(--color-body)", background: on ? "var(--color-canvas)" : "transparent", boxShadow: on ? "0 1px 2px rgba(20,20,58,0.08)" : "none" }}>{label}</button>
    );
  };
  return (
    <div style={{ background: "var(--color-canvas)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-xl)", padding: 24, fontFamily: "var(--font-body)", width: "100%", boxSizing: "border-box" }}>
      <div style={{ display: "flex", gap: 4, padding: 4, background: "var(--color-canvas-soft)", borderRadius: "var(--radius-pill)", marginBottom: 20 }}>
        {tabBtn("quick", "Быстрый расчёт")}
        {tabBtn("send", "Отправить на оценку")}
      </div>

      {mode === "quick" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <Select label="Тип документа" value={doc} onChange={(e) => setDoc(e.target.value)} options={CALC_DOCS} />
          <div>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 6 }}>
              <span style={{ fontSize: 14, fontWeight: 600, color: "var(--color-navy-deep)" }}>Направление перевода</span>
              <button type="button" onClick={swap} aria-label="Поменять языки местами" style={{ display: "inline-flex", alignItems: "center", gap: 5, border: "none", background: "transparent", cursor: "pointer", color: "#b06f12", fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 600 }}><Icon name="arrow-left-right" size={14} color="var(--color-primary)" />Поменять</button>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", gap: 10, alignItems: "center" }}>
              <Select value={from} onChange={(e) => setFrom(e.target.value)} options={CALC_LANGS} />
              <Icon name="arrow-right" size={18} color="var(--color-mute)" />
              <Select value={to} onChange={(e) => setTo(e.target.value)} options={CALC_LANGS} />
            </div>
          </div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, color: "var(--color-navy-deep)", marginBottom: 6 }}>Нотариальное заверение</div>
            <div style={{ display: "flex", gap: 8 }}>
              <Pill active={notary} onClick={() => setNotary(true)}>Да</Pill>
              <Pill active={!notary} onClick={() => setNotary(false)}>Нет</Pill>
            </div>
          </div>
          <NumberStepper label="Количество страниц" value={pages} min={1} onChange={setPages} suffix=" стр." />
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, marginTop: 4, padding: "18px 20px", background: "var(--color-navy-deep)", borderRadius: "var(--radius-lg)", color: "var(--color-on-dark)" }}>
            <div>
              <div style={{ fontSize: 13, color: "var(--color-on-dark-mute)" }}>Примерная стоимость</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 32, color: "#fff", lineHeight: 1.1 }}>≈ {est} <span style={{ color: "var(--color-primary)", fontSize: 22 }}>BYN</span></div>
            </div>
            <Button variant="primary" onClick={goLeadFromCalc}>Оставить заявку</Button>
          </div>
          <div style={{ fontSize: 13, color: "var(--color-body)", textAlign: "center", lineHeight: 1.5 }}>
            Перевод {LANG_RATE[to] || 25}{pages > 1 ? `×${pages}` : ""} = {transFee} BYN{notary ? ` + заверение ${notaryFee} BYN` : ""}
            {notary && notaryFee === 150 ? <span style={{ color: "var(--color-mute)" }}><br/>из них 90 BYN — гос.тариф нотариуса, не наша наценка</span> : null}
          </div>
          <div style={{ fontSize: 12, color: "var(--color-mute)", textAlign: "center" }}>Точную стоимость подтвердим после просмотра документа</div>
        </div>
      ) : sendStatus === "sent" ? (
        <div style={{ textAlign: "center", padding: "32px 8px" }}>
          <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--color-positive-pale)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 14px" }}>
            <Icon name="check" size={28} color="var(--color-positive-deep)" />
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--color-ink)", margin: "0 0 6px" }}>Документ получен</h3>
          <p style={{ color: "var(--color-body)", margin: 0 }}>Посчитаем точную стоимость и свяжемся в течение 30 минут.</p>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <label style={{ border: "1.5px dashed var(--color-border-strong)", borderRadius: "var(--radius-lg)", padding: "28px 20px", textAlign: "center", cursor: "pointer", background: "var(--color-canvas-soft)", display: "block" }}>
            <Icon name="upload-cloud" size={28} color="var(--color-primary)" />
            <div style={{ fontWeight: 700, color: "var(--color-navy-deep)", fontSize: 16, marginTop: 8 }}>{sendFileName || "Прикрепите файл или фото документа"}</div>
            <div style={{ fontSize: 13, color: "var(--color-mute)", marginTop: 4 }}>PDF, JPG, PNG · можно сфотографировать с телефона</div>
            <input type="file" accept=".pdf,.jpg,.jpeg,.png" style={{ display: "none" }} onChange={(e) => setSendFileName(e.target.files && e.target.files[0] ? e.target.files[0].name : "")} />
          </label>
          <Input id={uid + "-phone"} label={reqLabel("Телефон для связи")} prefix="+375" placeholder="29 000-00-00" value={sendPhone} onChange={(e) => setSendPhone(e.target.value)} error={sendTouched && !sendPhoneOk ? "Укажите номер телефона" : undefined} />
          <Consent checked={sendConsent} onChange={(e) => setSendConsent(e.target.checked)} error={sendTouched && !sendConsent} />
          <Button variant="primary" size="lg" fullWidth disabled={sendStatus === "sending"} onClick={submitEstimate}>{sendStatus === "sending" ? "Отправляем…" : "Отправить — мы перезвоним"}</Button>
          {sendStatus === "error" ? <div style={{ fontSize: 13, color: "var(--color-negative)", textAlign: "center" }}>Не удалось отправить. Позвоните нам или попробуйте ещё раз.</div> : null}
          <div style={{ fontSize: 12, color: "var(--color-mute)", textAlign: "center" }}>Посчитаем точную стоимость сами и свяжемся в течение 30 минут</div>
        </div>
      )}
    </div>
  );
}

/* ----------------------------------------------------------------- header */
function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Услуги", "services"], ["Доставка", "delivery"], ["Цены", "prices"], ["Вики", "wiki"], ["Контакты", "lead"]];
  const [hover, setHover] = React.useState(null);
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 30,
      background: "rgba(255,255,255,0.9)", backdropFilter: "saturate(140%) blur(10px)",
      borderBottom: "1px solid var(--color-border)",
      boxShadow: scrolled ? "var(--shadow-soft)" : "none",
    }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto", padding: "12px 24px", display: "flex", alignItems: "center", gap: 24 }}>
        <button onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
          style={{ border: "none", background: "transparent", cursor: "pointer", display: "flex", alignItems: "center", gap: 10, padding: 0 }}>
          <img src="assets/mark.svg" style={{ height: 30 }} alt="doslovno.by" />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, color: "var(--color-navy-deep)", letterSpacing: "-0.02em" }}>
            doslovno<span style={{ color: "var(--color-primary)" }}>.by</span>
          </span>
        </button>
        <nav className="dby-nav-links" style={{ display: "flex", alignItems: "center", gap: 4, marginLeft: 22 }}>
          {links.map(([label, id]) => (
            <button key={id} onClick={() => (id === "wiki" ? (window.location.href = "wiki.html") : scrollToId(id))}
              onMouseEnter={() => setHover(id)} onMouseLeave={() => setHover(null)}
              style={{
                border: "none", background: "transparent", font: "inherit", fontSize: 15, fontWeight: 600,
                cursor: "pointer", padding: "8px 12px", borderRadius: "var(--radius-pill)",
                color: hover === id ? "var(--color-navy-deep)" : "var(--color-body)",
                transition: "color 120ms ease",
              }}>{label}</button>
          ))}
        </nav>
        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
          <LangSwitcher />
          <a href="tel:+375296234176" className="dby-phone" style={{ textDecoration: "none", fontWeight: 700, color: "var(--color-navy-deep)", fontSize: 15, whiteSpace: "nowrap" }}>+375 29 623-41-76</a>
          <Button variant="primary" size="sm" onClick={() => openCalc()}>Рассчитать стоимость</Button>
        </div>
      </div>
    </header>
  );
}

/* ------------------------------------------------------------------- hero */
function Hero() {
  const trust = [
    ["clock-3", "Готовность от 4 часов"],
    ["shield-check", "Принимают в любых инстанциях"],
    ["badge-check", "Заверение у нотариуса"],
  ];
  return (
    <section id="hero" style={{ background: "var(--color-navy-deep)", color: "var(--color-on-dark)", padding: "72px 24px 84px" }}>
      <div className="dby-grid-2" style={{ maxWidth: MAXW, margin: "0 auto", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 22, flexWrap: "wrap" }}>
            <Badge tone="dark"><Icon name="map-pin" size={15} color="var(--color-primary)" />&nbsp;Рядом с визовым центром</Badge>
            <Badge tone="dark"><Icon name="truck" size={15} color="var(--color-primary)" />&nbsp;Заберём и доставим по Минску</Badge>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "var(--display-xl-size)", lineHeight: 1.02, letterSpacing: "-0.02em", color: "#fff", margin: 0 }}>
            Нотариальный перевод.<br />Ценим ваше&nbsp;<span style={{ color: "var(--color-primary)" }}>время</span>.
          </h1>
          <p style={{ fontSize: 20, lineHeight: "30px", color: "var(--color-on-dark)", maxWidth: 470, marginTop: 22, marginBottom: 30 }}>
            Приходите с документом — уходите с готовым переводом, заверенным у нотариуса. Берём на себя нервы, очереди и бюрократию.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={() => openCalc()}>Рассчитать стоимость</Button>
            <Button variant="ghost" size="lg" style={{ color: "#fff", border: "1px solid var(--color-border-dark)" }} onClick={() => openLead()}>
              <Icon name="phone-call" size={18} color="#fff" />&nbsp;Перезвоните мне
            </Button>
          </div>
          <div style={{ display: "flex", gap: 28, marginTop: 38, flexWrap: "wrap" }}>
            {trust.map(([ic, tx]) => (
              <div key={tx} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--color-on-dark)" }}>
                <Icon name={ic} size={18} color="var(--color-primary)" />{tx}
              </div>
            ))}
          </div>
        </div>
        <CustomCalc />
      </div>
    </section>
  );
}

/* --------------------------------------------------------- how we work */
function HowWeWork() {
  const steps = [
    ["file-text", "Приносите или присылаете документ", "Загляните к нам у визового центра или отправьте скан / фото в мессенджер."],
    ["calculator", "Считаем и согласовываем", "Сразу называем точную цену и срок. Никаких скрытых доплат за заверение."],
    ["badge-check", "Переводим и заверяем у нотариуса", "Делает дипломированный переводчик, заверяет нотариус — документ примут везде."],
    ["truck", "Забираете или привозим", "Готовый перевод отдадим в офисе или бесплатно доставим курьером по Минску."],
  ];
  const flowWords = ["передаём", "считаем", "переводим", "доставляем"];
  const reduce = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    if (reduce) return;
    const id = setInterval(() => setActive((a) => (a + 1) % 4), 1900);
    return () => clearInterval(id);
  }, [reduce]);
  return (
    <Section id="how">
      <div style={{ maxWidth: 640, marginBottom: 40 }}>
        <Eyebrow>Как мы работаем</Eyebrow>
        <H2>Четыре шага — и документ готов</H2>
        <p style={{ fontSize: 18, lineHeight: "28px", color: "var(--color-body)", marginTop: 14 }}>
          Вам не нужно разбираться в требованиях инстанций и стоять в очередях. Это наша работа.
        </p>
      </div>

      {/* document gliding from step to step */}
      <div className="dby-flowtrack" style={{ position: "relative", height: 52, margin: "0 0 4px" }}>
        <div style={{ position: "absolute", left: "12.5%", right: "12.5%", top: 34, height: 2, background: "var(--color-border)", borderRadius: 2 }} />
        {[0, 1, 2, 3].map((i) => (
          <div key={i} style={{ position: "absolute", left: `${12.5 + i * 25}%`, top: 34, width: 10, height: 10, borderRadius: "50%", transform: "translate(-50%,-50%)", background: i <= active ? "var(--color-primary)" : "var(--color-border-strong)", transition: "background 400ms ease" }} />
        ))}
        <div aria-hidden="true" style={{ position: "absolute", top: 0, left: `${12.5 + active * 25}%`, transform: "translateX(-50%)", transition: reduce ? "none" : "left 900ms cubic-bezier(.5,0,.2,1)", display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--color-navy-deep)", color: "#fff", padding: "6px 11px", borderRadius: "var(--radius-pill)", boxShadow: "var(--shadow-pop)", fontSize: 12, fontWeight: 600, whiteSpace: "nowrap" }}>
            <Icon name="file-text" size={14} color="var(--color-primary)" />{flowWords[active]}
          </div>
          <div style={{ width: 0, height: 0, borderLeft: "5px solid transparent", borderRight: "5px solid transparent", borderTop: "6px solid var(--color-navy-deep)" }} />
        </div>
      </div>

      <div className="dby-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
        {steps.map(([ic, t, d], i) => {
          const on = i === active && !reduce;
          return (
            <Card key={t} variant="content" bordered style={{ display: "flex", flexDirection: "column", gap: 14, position: "relative", overflow: "hidden",
              borderColor: on ? "var(--color-primary)" : "var(--color-border)",
              boxShadow: on ? "0 14px 30px -20px rgba(20,20,58,0.45)" : "none",
              transform: on ? "translateY(-3px)" : "none",
              transition: "transform 360ms ease, box-shadow 360ms ease, border-color 360ms ease" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: on ? "var(--color-primary)" : "var(--color-primary-pale)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background 360ms ease" }}>
                  <Icon name={ic} size={24} color={on ? "var(--color-navy-deep)" : "#b06f12"} />
                </div>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 34, color: on ? "var(--color-primary)" : "#d9dbe3", lineHeight: 1, transition: "color 360ms ease" }}>{i + 1}</span>
              </div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, color: "var(--color-ink)", margin: 0, lineHeight: 1.2 }}>{t}</h3>
              <p style={{ fontSize: 14, lineHeight: "21px", color: "var(--color-body)", margin: 0 }}>{d}</p>
            </Card>
          );
        })}
      </div>
    </Section>
  );
}

/* --------------------------------------------------------- services / tabs */
const SERVICE_DATA = {
  emb: {
    note: "Документы для подачи в посольства и консульства — переводим под требования конкретной страны.",
    items: [
      ["file-check-2", "Справка о несудимости", "Перевод + заверение, частый документ для виз и ВНЖ."],
      ["file-text", "Выписка из банка / о доходах", "Финансовые документы для визовых анкет."],
      ["badge-check", "Согласие на выезд ребёнка", "Нотариальный перевод согласия от родителей."],
      ["file-text", "Паспорт и внутренние документы", "Перевод страниц паспорта, ID-карты, прописки."],
    ],
  },
  abroad: {
    note: "Переезд, ПМЖ и легализация документов за границей — полный пакет под ключ.",
    items: [
      ["file-check-2", "Свидетельства ЗАГС", "О рождении, браке, разводе — с заверением."],
      ["badge-check", "Документы для ПМЖ", "Полный комплект под требования страны."],
      ["file-text", "Водительское удостоверение", "Перевод для обмена прав за рубежом."],
      ["file-check-2", "Апостиль и легализация", "Подскажем, что заверять нотариально, а что апостилем."],
    ],
  },
  edu: {
    note: "Поступление и учёба за рубежом — переводим документы об образовании.",
    items: [
      ["file-check-2", "Диплом с приложением", "Перевод диплома и вкладыша с оценками."],
      ["file-text", "Аттестат об образовании", "Школьный аттестат для поступления."],
      ["badge-check", "Академические справки", "Справки о периоде обучения, транскрипты."],
      ["file-text", "Мотивационные письма", "Перевод сопроводительных документов."],
    ],
  },
  med: {
    note: "Лечение и медицинские визы — переводим документы для клиник за рубежом.",
    items: [
      ["file-check-2", "Медицинские выписки", "История болезни, эпикризы, заключения."],
      ["file-text", "Результаты обследований", "Анализы, снимки, протоколы исследований."],
      ["badge-check", "Справки и направления", "Для записи в зарубежные клиники."],
      ["file-text", "Рецепты и назначения", "Перевод назначений лечащего врача."],
    ],
  },
};

function ServiceCard({ ic, t, d }) {
  const [h, setH] = React.useState(false);
  return (
    <Card variant="content" bordered
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      onClick={() => openLead()}
      style={{ display: "flex", flexDirection: "column", gap: 14, height: "100%", cursor: "pointer",
        borderColor: h ? "var(--color-primary)" : "var(--color-border)",
        boxShadow: h ? "0 14px 30px -20px rgba(20,20,58,0.45)" : "none",
        transform: h ? "translateY(-3px)" : "none",
        transition: "transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease" }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
        <div style={{ width: 48, height: 48, borderRadius: "var(--radius-md)", background: h ? "var(--color-primary)" : "var(--color-primary-pale)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background 160ms ease" }}>
          <Icon name={ic} size={23} color={h ? "var(--color-navy-deep)" : "#b06f12"} />
        </div>
        <Icon name="arrow-up-right" size={20} color="var(--color-primary)" style={{ opacity: h ? 1 : 0, transform: h ? "none" : "translate(-3px,3px)", transition: "opacity 160ms ease, transform 160ms ease" }} />
      </div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 17, color: "var(--color-ink)", margin: 0, lineHeight: 1.25 }}>{t}</h3>
      <p style={{ fontSize: 14, lineHeight: "21px", color: "var(--color-body)", margin: 0 }}>{d}</p>
    </Card>
  );
}

function Services() {
  const [tab, setTab] = React.useState("emb");
  const data = SERVICE_DATA[tab];
  return (
    <Section id="services" bg="var(--surface-soft)">
      <div style={{ maxWidth: 680, marginBottom: 32 }}>
        <Eyebrow>Услуги и направления</Eyebrow>
        <H2>Что мы переводим</H2>
        <p style={{ fontSize: 18, lineHeight: "28px", color: "var(--color-body)", marginTop: 14 }}>
          Мы делаем одно дело и делаем его хорошо: нотариальные переводы документов. Выберите свою ситуацию.
        </p>
      </div>
      <Tabs
        value={tab}
        onChange={setTab}
        style={{ marginBottom: 24, background: "var(--color-canvas)" }}
        tabs={[
          { id: "emb", label: "Посольства" },
          { id: "abroad", label: "Выезд за границу" },
          { id: "edu", label: "Учёба" },
          { id: "med", label: "Медицина" },
        ]}
      />
      <p style={{ fontSize: 16, lineHeight: "24px", color: "var(--color-body)", margin: "0 0 20px", maxWidth: 620 }}>{data.note}</p>
      <div className="dby-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
        {data.items.map(([ic, t, d]) => (
          <ServiceCard key={t} ic={ic} t={t} d={d} />
        ))}
      </div>
      <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 8, fontSize: 15, color: "var(--color-body)" }}>
        <Icon name="messages-square" size={18} color="var(--color-primary)" />
        Не нашли свой документ? <button onClick={() => openLead()} style={{ border: "none", background: "transparent", padding: 0, cursor: "pointer", color: "#b06f12", fontWeight: 700, fontFamily: "inherit", fontSize: 15 }}>Напишите нам</button> — переведём почти всё.
      </div>
    </Section>
  );
}

/* --------------------------------------------------------------- delivery */
function SchematicMap() {
  return (
    <div style={{
      position: "relative", height: 320, borderRadius: "var(--radius-xl)", overflow: "hidden",
      background: "radial-gradient(120% 90% at 70% 30%, #f4f6fa 0%, var(--color-canvas-soft) 70%)",
      border: "1px solid var(--color-border)",
    }}>
      {/* faint street grid */}
      <div style={{ position: "absolute", inset: 0, backgroundImage:
        "linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px)",
        backgroundSize: "44px 44px", opacity: 0.5 }} />
      <div style={{ position: "absolute", inset: 0, backgroundImage:
        "linear-gradient(115deg, transparent 46%, #dde0e8 46%, #dde0e8 54%, transparent 54%)" }} />
      {/* pin */}
      <div style={{ position: "absolute", left: "62%", top: "44%", transform: "translate(-50%,-100%)", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "var(--color-navy-deep)", color: "#fff", padding: "7px 12px", borderRadius: "var(--radius-pill)", fontSize: 13, fontWeight: 600, whiteSpace: "nowrap", boxShadow: "var(--shadow-pop)" }}>
          <Icon name="map-pin" size={15} color="var(--color-primary)" /> doslovno.by
        </div>
        <div style={{ width: 14, height: 14, borderRadius: "50% 50% 50% 0", background: "var(--color-primary)", border: "2px solid var(--color-navy-deep)", transform: "rotate(-45deg)", margin: "6px auto 0" }} />
      </div>
      <div style={{ position: "absolute", left: 16, bottom: 14, background: "rgba(255,255,255,0.85)", padding: "5px 10px", borderRadius: "var(--radius-sm)", fontSize: 12, fontWeight: 600, color: "var(--color-body)" }}>
        Рядом с визовым центром
      </div>
    </div>
  );
}

function Delivery() {
  return (
    <Section id="delivery">
      <div className="dby-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <Eyebrow>Забор и доставка</Eyebrow>
          <H2>Заберём и привезём документ по Минску</H2>
          <p style={{ fontSize: 18, lineHeight: "28px", color: "var(--color-body)", marginTop: 14, maxWidth: 460 }}>
            Не нужно подстраивать день под визит. Курьер заберёт оригинал у вас и вернёт готовый перевод — туда, куда удобно.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 26 }}>
            {[["truck", "Бесплатный курьер по городу"], ["clock-3", "Забор в день обращения"], ["map-pin", "Или приходите сами — мы у визового центра"]].map(([ic, tx]) => (
              <div key={tx} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 16, color: "var(--color-ink)", fontWeight: 500 }}>
                <span style={{ width: 38, height: 38, borderRadius: "var(--radius-md)", background: "var(--color-primary-pale)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={ic} size={19} color="#b06f12" />
                </span>{tx}
              </div>
            ))}
          </div>
          <div style={{ marginTop: 30 }}>
            <Button variant="primary" size="lg" onClick={() => openLead()}>
              <Icon name="truck" size={20} color="var(--color-navy-deep)" />&nbsp;Вызвать курьера
            </Button>
          </div>
        </div>
        <SchematicMap />
      </div>
    </Section>
  );
}

/* ----------------------------------------------------------------- prices */
// Комплект «под ключ» на иностранный (эмиграция): перевод 25 + заверение 150. Многостраничные — заверение разовое.
const PRICES = [
  ["Свидетельство о рождении / браке", "≈ 175 BYN"],
  ["Паспорт", "≈ 175 BYN"],
  ["Справка о несудимости", "≈ 175 BYN"],
  ["Согласие на выезд ребёнка", "≈ 175 BYN"],
  ["Диплом с приложением", "≈ 200 BYN"],
  ["Договор / нотариальный документ", "от ≈ 90 BYN / стр."],
];

function Prices() {
  return (
    <Section id="prices" bg="var(--surface-soft)">
      <div className="dby-grid-2" style={{ display: "grid", gridTemplateColumns: "1.2fr 0.8fr", gap: 48, alignItems: "start" }}>
        <div>
          <Eyebrow>Цены примером</Eyebrow>
          <H2 style={{ marginBottom: 24 }}>Понятные цены без сюрпризов</H2>
          <Card variant="content" bordered padding={8} style={{ padding: "8px 24px" }}>
            {PRICES.map(([doc, price], i) => (
              <div key={doc} style={{ display: "flex", alignItems: "baseline", gap: 12, padding: "16px 0", borderBottom: i < PRICES.length - 1 ? "1px dashed var(--color-border)" : "none" }}>
                <span style={{ fontSize: 16, color: "var(--color-ink)", fontWeight: 500 }}>{doc}</span>
                <span style={{ flex: 1, borderBottom: "2px dotted var(--color-border-strong)", margin: "0 4px", transform: "translateY(-4px)" }} />
                <span style={{ fontSize: 16, fontWeight: 700, color: "var(--color-ink)", whiteSpace: "nowrap" }}>{price}</span>
              </div>
            ))}
          </Card>
          <a href="price.html" style={{ display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16, textDecoration: "none", color: "#b06f12", fontWeight: 700, fontSize: 15 }}>
            Полный прайс по всем услугам и языкам
            <Icon name="arrow-right" size={16} color="var(--color-primary)" />
          </a>
        </div>
        <Card variant="pale" padding={28} style={{ position: "sticky", top: 90 }}>
          <Badge tone="soft"><Icon name="zap" size={14} color="#b06f12" />&nbsp;Цена за минуту</Badge>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 26, color: "#7a4f10", margin: "16px 0 10px", lineHeight: 1.15 }}>
            Точную цену подтвердим после просмотра документа
          </h3>
          <p style={{ fontSize: 15, lineHeight: "23px", color: "#7a4f10", margin: "0 0 22px" }}>
            Примеры под ключ для выезда — перевод на иностранный язык с заверением у нотариуса, всё включено. Перевод на русский (для документов в Беларуси) — дешевле, от ≈ 100 BYN. Без скрытых доплат.
          </p>
          <Button variant="primary" size="lg" fullWidth onClick={() => openCalc({ mode: "send" })}>
            Рассчитать мой документ
          </Button>
        </Card>
      </div>
    </Section>
  );
}

/* ------------------------------------------------------------------- wiki */
function WikiTeaser() {
  const countries = ["Польша", "Германия", "Литва", "Чехия", "США", "Канада", "Италия"];
  return (
    <Section id="wiki">
      <Card variant="pale" padding={0} style={{ overflow: "hidden" }}>
        <div className="dby-grid-2" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 0, alignItems: "stretch" }}>
          <div style={{ padding: "48px 44px" }}>
            <Eyebrow>Полезная вики</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "var(--display-md-size)", lineHeight: 1.08, letterSpacing: "-0.02em", color: "#5e3d0c", margin: 0 }}>
              Какие документы нужны — по странам и целям
            </h2>
            <p style={{ fontSize: 17, lineHeight: "26px", color: "#7a4f10", marginTop: 16, marginBottom: 24, maxWidth: 440 }}>
              Бесплатная база знаний: разбираем, какой пакет документов в какое консульство, что заверять у нотариуса, а что — апостилем. Обновляем по мере изменения требований.
            </p>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 28 }}>
              {countries.map((c) => (
                <span key={c} style={{ background: "rgba(255,255,255,0.7)", border: "1px solid rgba(122,79,16,0.18)", borderRadius: "var(--radius-pill)", padding: "7px 14px", fontSize: 14, fontWeight: 600, color: "#7a4f10" }}>{c}</span>
              ))}
              <span style={{ background: "transparent", borderRadius: "var(--radius-pill)", padding: "7px 6px", fontSize: 14, fontWeight: 600, color: "#7a4f10" }}>и ещё…</span>
            </div>
            <Button variant="primary" size="lg" onClick={() => { window.location.href = "wiki.html"; }} iconRight={<Icon name="file-text" size={18} color="var(--color-navy-deep)" />}>
              Открыть раздел «Вики»
            </Button>
          </div>
          <div style={{ background: "var(--color-navy-deep)", padding: "44px", display: "flex", flexDirection: "column", justifyContent: "center", gap: 14 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, background: "rgba(255,255,255,0.06)", border: "1px solid var(--color-border-dark)", borderRadius: "var(--radius-md)", padding: "13px 16px" }}>
              <Icon name="search" size={20} color="var(--color-primary)" />
              <span style={{ color: "var(--color-on-dark-mute)", fontSize: 15 }}>Например, «диплом для Польши»</span>
            </div>
            {[["Польша: документы для визы D (учёба)", "Польша · Учёба"], ["Воссоединение семьи в Германии", "Германия · Семья"], ["Справка о несудимости: перевод и апостиль", "Общее"]].map(([t, m]) => (
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 4px", borderBottom: "1px solid var(--color-border-dark)" }}>
                <Icon name="file-text" size={18} color="var(--color-primary)" />
                <div>
                  <div style={{ color: "#fff", fontSize: 15, fontWeight: 600, lineHeight: 1.25 }}>{t}</div>
                  <div style={{ color: "var(--color-on-dark-mute)", fontSize: 12, marginTop: 2 }}>{m}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </Section>
  );
}

/* --------------------------------------------------------------- lead form */
function LeadForm(props) {
  const embedded = props && props.embedded;
  const uid = React.useId();
  const [name, setName] = React.useState("");
  const [phone, setPhone] = React.useState("");
  const [message, setMessage] = React.useState((props && props.initialMessage) || "");
  const [consent, setConsent] = React.useState(false);
  const [status, setStatus] = React.useState("idle"); // idle | sending | sent | error
  const [touched, setTouched] = React.useState(false);
  const sent = status === "sent";

  React.useEffect(() => {
    const h = (e) => {
      if (e.detail && e.detail.message) setMessage(e.detail.message);
      if (status === "sent") setStatus("idle");
    };
    window.addEventListener("doslovno:prefill-lead", h);
    return () => window.removeEventListener("doslovno:prefill-lead", h);
  }, [status]);

  const nameOk = name.trim().length > 0;
  const phoneOk = isValidPhone(phone);
  const handleSubmit = async () => {
    setTouched(true);
    if (!nameOk || !phoneOk || !consent) return;
    setStatus("sending");
    try {
      await submitLead({ kind: "lead_form", name: name.trim(), phone: "+375" + phone.replace(/\D/g, "").slice(-9), message: message.trim() });
      setStatus("sent");
    } catch (e) { setStatus("error"); }
  };

  const card = (
    <Card variant="content" bordered padding={28}>
      {sent ? (
        <div style={{ textAlign: "center", padding: "24px 8px" }}>
          <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--color-positive-pale)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 14px" }}>
            <Icon name="check" size={28} color="var(--color-positive-deep)" />
          </div>
          <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--color-ink)", margin: "0 0 6px" }}>Заявка принята</h3>
          <p style={{ color: "var(--color-body)", margin: 0 }}>Перезвоним в течение 30 минут.</p>
        </div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {embedded ? <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, color: "var(--color-ink)", margin: "0 0 2px" }}>Оставьте заявку</h3> : null}
          <Input id={uid + "-name"} label={reqLabel("Имя")} placeholder="Как к вам обращаться" value={name} onChange={(e) => setName(e.target.value)} error={touched && !nameOk ? "Укажите имя" : undefined} />
          <Input id={uid + "-phone"} label={reqLabel("Телефон")} prefix="+375" placeholder="29 000-00-00" value={phone} onChange={(e) => setPhone(e.target.value)} error={touched && !phoneOk ? "Укажите номер телефона" : undefined} />
          <Textarea label="Что нужно перевести?" rows={2} placeholder="Например: свидетельство о рождении на польский, с заверением" value={message} onChange={(e) => setMessage(e.target.value)} />
          <Consent checked={consent} onChange={(e) => setConsent(e.target.checked)} error={touched && !consent} />
          <Button variant="primary" size="lg" fullWidth disabled={status === "sending"} onClick={handleSubmit}>{status === "sending" ? "Отправляем…" : "Отправить заявку"}</Button>
          {touched && (!nameOk || !phoneOk || !consent) ? <p style={{ fontSize: 13, color: "var(--color-negative)", textAlign: "center", margin: 0 }}>Заполните обязательные поля и отметьте согласие</p> : null}
          {status === "error" ? <p style={{ fontSize: 13, color: "var(--color-negative)", textAlign: "center", margin: 0 }}>Не удалось отправить. Позвоните нам или попробуйте ещё раз.</p> : null}
        </div>
      )}
    </Card>
  );

  if (embedded) return card;

  return (
    <Section id="lead" bg="var(--surface-soft)">
      <div className="dby-grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <Badge tone="pale"><Icon name="clock-3" size={14} color="#b06f12" />&nbsp;Ответим в течение 30 минут</Badge>
          <H2 style={{ margin: "16px 0 12px" }}>Оставьте заявку</H2>
          <p style={{ fontSize: 18, lineHeight: "28px", color: "var(--color-body)", margin: 0, maxWidth: 430 }}>
            Напишите, что нужно перевести. Мы посчитаем точную стоимость и перезвоним — или сразу заберём документ по Минску.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 26 }}>
            {[["truck", "Бесплатно заберём и доставим по городу"], ["phone-call", "+375 29 623-41-76 · Telegram · Viber"], ["map-pin", "Минск, рядом с визовым центром"]].map(([ic, tx]) => (
              <div key={tx} style={{ display: "flex", alignItems: "center", gap: 12, color: "var(--color-body)", fontSize: 15 }}>
                <Icon name={ic} size={20} color="var(--color-primary)" />{tx}
              </div>
            ))}
          </div>
        </div>
        {card}
      </div>
    </Section>
  );
}

/* --------------------------------------------------------------- modal host */
function ModalHost() {
  const [modal, setModal] = React.useState(null); // null | { kind: "calc"|"lead", mode }
  React.useEffect(() => {
    const open = (e) => setModal(e.detail || {});
    const close = () => setModal(null);
    window.addEventListener("doslovno:open-modal", open);
    window.addEventListener("doslovno:close-modal", close);
    return () => { window.removeEventListener("doslovno:open-modal", open); window.removeEventListener("doslovno:close-modal", close); };
  }, []);
  // обработка переходов с других страниц: index.html#do-calc-send и т.п.
  React.useEffect(() => {
    const h = window.location.hash;
    let act = null;
    if (h === "#do-calc-send") act = () => openCalc({ mode: "send" });
    else if (h === "#do-calc") act = () => openCalc({ mode: "quick" });
    else if (h === "#do-lead") act = () => openLead({});
    if (act) { history.replaceState(null, "", window.location.pathname); act(); }
  }, []);
  React.useEffect(() => {
    document.body.style.overflow = modal ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [modal]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setModal(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  if (!modal) return null;
  return (
    <div onClick={() => setModal(null)} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(20,20,58,0.55)", backdropFilter: "blur(4px)", display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "6vh 16px 16px", overflowY: "auto" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ width: "100%", maxWidth: modal.kind === "calc" ? 460 : 460, position: "relative" }}>
        <button onClick={() => setModal(null)} aria-label="Закрыть" style={{ position: "absolute", top: -42, right: 0, background: "transparent", border: "none", cursor: "pointer", color: "#fff", display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-body)", fontSize: 15, fontWeight: 600 }}>
          Закрыть <Icon name="x" size={20} color="#fff" />
        </button>
        {modal.kind === "calc" ? <CustomCalc initialMode={modal.mode || "quick"} /> : <LeadForm embedded initialMessage={modal.message} />}
      </div>
    </div>
  );
}

/* ----------------------------------------------------------------- footer */
// Независимый счётчик главной: считает только первый заход браузера.
// Обновление страницы повторно не увеличивает счётчик (свои ключи, не связан с ширмой).
function useHomeVisits() {
  const [n, setN] = React.useState(null);
  React.useEffect(() => {
    const KEY = "dby_home_views";
    const SEEN = "dby_home_seen";
    let v = parseInt(localStorage.getItem(KEY) || "41", 10);
    if (isNaN(v)) v = 41;
    if (!localStorage.getItem(SEEN)) {
      v = v + 1;
      localStorage.setItem(KEY, String(v));
      localStorage.setItem(SEEN, "1");
    }
    setN(v);
  }, []);
  return n;
}

function Footer() {
  const visits = useHomeVisits();
  const col = (title, links) => (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ fontSize: 13, fontWeight: 700, color: "#fff", marginBottom: 2 }}>{title}</div>
      {links.map(([label, id]) => (
        <button key={label} onClick={() => (id ? scrollToId(id) : null)} style={{ border: "none", background: "transparent", textAlign: "left", padding: 0, cursor: "pointer", color: "var(--color-on-dark-mute)", fontSize: 14, fontFamily: "var(--font-body)" }}>{label}</button>
      ))}
    </div>
  );
  return (
    <footer style={{ background: "var(--color-navy-deep)", color: "var(--color-on-dark)", padding: "56px 24px 32px" }}>
      <div style={{ maxWidth: MAXW, margin: "0 auto" }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 48, justifyContent: "space-between" }}>
          <div style={{ maxWidth: 320 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <img src="assets/mark-light.svg" style={{ height: 30 }} alt="" />
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, color: "#fff", letterSpacing: "-0.02em" }}>
                doslovno<span style={{ color: "var(--color-primary)" }}>.by</span>
              </span>
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: "22px", color: "var(--color-on-dark-mute)" }}>
              Бюро нотариальных переводов в Минске. Рядом с визовым центром. Заберём и доставим документ по городу.
            </p>
          </div>
          {col("Услуги", [["Посольства", "services"], ["Выезд за границу", "services"], ["Учёба", "services"], ["Медицина", "services"]])}
          {col("Полезное", [["Вики: по странам", "wiki"], ["Цены", "prices"], ["Доставка по Минску", "delivery"]])}
          {col("Контакты", [["+375 29 623-41-76", "lead"], ["Оставить заявку", "lead"], ["Как нас найти", "delivery"]])}
        </div>
        <div style={{ marginTop: 44, paddingTop: 20, borderTop: "1px solid var(--color-border-dark)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8, fontSize: 13, color: "var(--color-on-dark-mute)" }}>
          <span>© 2026 doslovno.by · Минск</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
            <img src="https://api.iconify.design/lucide/eye.svg?color=%23a9adc4" alt="" style={{ width: 16, height: 16, opacity: 0.85 }} />
            {visits != null ? visits : "—"}
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ------------------------------------------------------------------- page */
function Home() {
  return (
    <div style={{ fontFamily: "var(--font-body)", color: "var(--color-body)" }}>
      <Header />
      <main>
        <Hero />
        <HowWeWork />
        <Services />
        <Delivery />
        <Prices />
        <WikiTeaser />
        <LeadForm />
      </main>
      <Footer />
      <ModalHost />
    </div>
  );
}
window.DBHome = Home;
