/* global React */
var Card = window.DoslovnoByDesignSystem_88f6e6.Card;
var Badge = window.DoslovnoByDesignSystem_88f6e6.Badge;
var Button = window.DoslovnoByDesignSystem_88f6e6.Button;
var Icon = window.DBIcon;
var DBSection = window.DBSection;
var DBEyebrow = window.DBEyebrow;
var DBHeader = window.DBHeader;
var DBFooter = window.DBFooter;
var DB_MAXW = window.DB_MAXW;

var goCalc = function () { window.location.href = "index.html#do-calc-send"; };
var goLead = function () { window.location.href = "index.html#do-lead"; };

// --- данные прайса (синхронизировано с маркетинг/прайс-doslovno-v1.md) ---
var KEY_OUTBOUND = [
  ["Паспорт", "≈ 175 BYN", "1 стр., перевод + заверение на иностранный"],
  ["Свидетельство о рождении / браке / разводе", "≈ 175 BYN", "1 стр., с заверением"],
  ["Справка о несудимости", "≈ 175 BYN", "частый документ для виз и ВНЖ"],
  ["Согласие на выезд ребёнка", "≈ 175 BYN", "нотариальный перевод"],
  ["Диплом с приложением", "≈ 200 BYN", "2 стр., заверение разовое"],
];
var KEY_INBOUND = [
  ["Паспорт / свидетельство / справка", "≈ 100 BYN", "1 стр., перевод на русский + заверение"],
];
// Полный построчный список по языкам (синхронизировано с маркетинг/прайс-doslovno-v2.md), алфавит
var LANGS = [
  ["Азербайджанский", "45 BYN"],
  ["Английский", "25 BYN"],
  ["Арабский", "58 BYN"],
  ["Армянский", "60 BYN"],
  ["Белорусский", "20 BYN"],
  ["Болгарский", "50 BYN"],
  ["Венгерский", "55 BYN"],
  ["Вьетнамский", "75 BYN"],
  ["Греческий", "55 BYN"],
  ["Грузинский", "45 BYN"],
  ["Датский", "65 BYN"],
  ["Иврит", "65 BYN"],
  ["Испанский", "30 BYN"],
  ["Итальянский", "35 BYN"],
  ["Казахский", "50 BYN"],
  ["Китайский", "58 BYN"],
  ["Корейский", "60 BYN"],
  ["Латышский", "35 BYN"],
  ["Литовский", "35 BYN"],
  ["Молдавский", "50 BYN"],
  ["Немецкий", "25 BYN"],
  ["Нидерландский", "65 BYN"],
  ["Норвежский", "75 BYN"],
  ["Польский", "35 BYN"],
  ["Португальский", "45 BYN"],
  ["Румынский", "50 BYN"],
  ["Русский", "20 BYN"],
  ["Сербский", "40 BYN"],
  ["Словацкий", "50 BYN"],
  ["Словенский", "65 BYN"],
  ["Турецкий", "45 BYN"],
  ["Туркменский", "45 BYN"],
  ["Узбекский", "50 BYN"],
  ["Украинский", "20 BYN"],
  ["Фарси (персидский)", "55 BYN"],
  ["Финский", "55 BYN"],
  ["Французский", "30 BYN"],
  ["Хорватский", "40 BYN"],
  ["Чешский", "35 BYN"],
  ["Шведский", "60 BYN"],
  ["Эстонский", "60 BYN"],
  ["Японский", "70 BYN"],
];
var NOTARY = [
  ["Заверение перевода на иностранный язык", "150 BYN", "из них 90 — гос.тариф нотариуса (п.36), остальное — наша работа"],
  ["Заверение перевода на русский / белорусский", "75 BYN", null],
  ["Нотариальная копия (до 3 стр.)", "50 BYN", null],
  ["Печать бюро (сертификация, без нотариуса)", "14 BYN", null],
];
var APOSTILLE = [
  ["Апостиль (Минюст) — образование, ЗАГС", "350 BYN", "225 госпошлина + 125 наша работа"],
  ["Апостиль (МИД)", "от 400 BYN", "225 госпошлина + работа"],
  ["Консульская легализация", "от 600 BYN", "рассчитываем индивидуально"],
];

function PriceRow(props) {
  var hasNote = !!props.note;
  return (
    <div style={{ padding: "16px 0", borderBottom: props.last ? "none" : "1px dashed var(--color-border)" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
        <span style={{ fontSize: 16, color: "var(--color-ink)", fontWeight: 500 }}>{props.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" }}>{props.price}</span>
      </div>
      {hasNote ? <div style={{ fontSize: 13, color: "var(--color-mute)", marginTop: 4, maxWidth: 520 }}>{props.note}</div> : null}
    </div>
  );
}

function PriceBlock(props) {
  return (
    <div style={{ marginBottom: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
        <Icon name={props.icon} size={20} color="var(--color-primary)" />
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 24, color: "var(--color-navy-deep)", margin: 0 }}>{props.title}</h2>
      </div>
      {props.subtitle ? <p style={{ fontSize: 15, color: "var(--color-body)", margin: "0 0 12px", maxWidth: 640 }}>{props.subtitle}</p> : null}
      <Card variant="content" bordered style={{ padding: "8px 24px" }}>
        {props.rows.map(function (r, i) {
          return <PriceRow key={r[0]} doc={r[0]} price={r[1]} note={r[2]} last={i === props.rows.length - 1} />;
        })}
      </Card>
    </div>
  );
}

function DBPrice() {
  return (
    <React.Fragment>
      <DBHeader active="prices" />

      {/* intro */}
      <DBSection bg="var(--surface-page)" pad="56px 24px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <DBEyebrow>Цены</DBEyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 40, color: "var(--color-navy-deep)", margin: "10px 0 14px", lineHeight: 1.12, letterSpacing: "-0.02em" }}>
            Понятные цены — без скрытых доплат
          </h1>
          <p style={{ fontSize: 18, lineHeight: "28px", color: "var(--color-body)", margin: 0, maxWidth: 680 }}>
            Показываем, из чего складывается цена: перевод + заверение у нотариуса. В заверении на иностранный язык 90 BYN — это
            государственный тариф нотариуса, а не наша наценка. На главной — примерный расчёт, здесь — подробно по каждой услуге.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 22 }}>
            <Button variant="primary" size="lg" onClick={goCalc} iconRight={<Icon name="calculator" size={18} color="var(--color-navy-deep)" />}>Рассчитать мой документ</Button>
            <Button variant="ghost" size="lg" onClick={goLead}>Оставить заявку</Button>
          </div>
        </div>
      </DBSection>

      {/* перевод по языкам — полный список, на всю ширину */}
      <DBSection bg="var(--surface-soft)" pad="32px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
            <Icon name="languages" size={20} color="var(--color-primary)" />
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 24, color: "var(--color-navy-deep)", margin: 0 }}>Перевод, 1 страница</h2>
          </div>
          <p style={{ fontSize: 15, color: "var(--color-body)", margin: "0 0 4px", maxWidth: 760 }}>
            Базовая ставка за страницу перевода без заверения. Цены указаны за стандартный документ общей тематики.
          </p>
          <p style={{ fontSize: 14, color: "var(--color-mute)", margin: "0 0 14px", maxWidth: 760 }}>
            1 переводческая страница = <strong>1800 знаков с пробелами</strong> (≈ 250 слов). Минимальный заказ — 1 страница.
            Для иероглифики (китайский, японский, корейский, арабский, иврит) объём считается по готовому переводу.
          </p>
          <Card variant="content" bordered style={{ padding: "8px 24px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", columnGap: 40 }} className="dby-grid-2">
              {LANGS.map(function (r, i) {
                return <PriceRow key={r[0]} doc={r[0]} price={r[1]} last={i >= LANGS.length - 2} />;
              })}
            </div>
          </Card>
        </div>
      </DBSection>

      {/* нотариальное заверение */}
      <DBSection bg="var(--surface-page)" pad="32px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <PriceBlock icon="badge-check" title="Нотариальное заверение"
            subtitle="За документ. Зависит от направления перевода."
            rows={NOTARY} />
        </div>
      </DBSection>

      {/* под ключ — выезд */}
      <DBSection bg="var(--surface-soft)" pad="32px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <Badge tone="soft"><Icon name="plane" size={14} color="#b06f12" />&nbsp;Для выезда за рубеж</Badge>
          <div style={{ height: 14 }} />
          <PriceBlock icon="file-check-2" title="Документы «под ключ» — на иностранный язык"
            subtitle="Полный пакет: перевод дипломированным переводчиком + нотариальное заверение. Цены за типовой документ."
            rows={KEY_OUTBOUND} />
        </div>
      </DBSection>

      {/* под ключ — в РБ */}
      <DBSection bg="var(--surface-page)" pad="32px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <Badge tone="soft"><Icon name="house" size={14} color="#b06f12" />&nbsp;Для документов в Беларуси</Badge>
          <div style={{ height: 14 }} />
          <PriceBlock icon="file-text" title="Документы «под ключ» — на русский язык"
            subtitle="Перевод иностранных документов для использования в Беларуси. Заверение на русский дешевле — гос.тариф ниже."
            rows={KEY_INBOUND} />
        </div>
      </DBSection>

      {/* апостиль */}
      <DBSection bg="var(--surface-soft)" pad="32px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto" }}>
          <PriceBlock icon="stamp" title="Апостиль и легализация"
            subtitle="Показываем раздельно: государственная пошлина и наша работа. Пошлина одинаковая у всех — переплачивать незачем."
            rows={APOSTILLE} />
        </div>
      </DBSection>

      {/* срочность + скидки */}
      <DBSection bg="var(--surface-page)" pad="32px 24px 56px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }} className="dby-grid-2">
          <Card variant="content" bordered style={{ padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
              <Icon name="clock-3" size={20} color="var(--color-primary)" />
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, color: "var(--color-navy-deep)", margin: 0 }}>Срочность</h2>
            </div>
            <p style={{ fontSize: 15, color: "var(--color-body)", margin: "0 0 12px" }}>Наценка только на перевод — на заверение у нотариуса не влияет.</p>
            <PriceRow doc="День в день / до 4 часов" price="+50%" />
            <PriceRow doc="Сверхсрочно (1–2 часа)" price="+100%" last />
          </Card>
          <Card variant="pale" style={{ padding: 28 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
              <Icon name="percent" size={20} color="#b06f12" />
              <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 22, color: "#7a4f10", margin: 0 }}>Скидки</h2>
            </div>
            <p style={{ fontSize: 15, color: "#7a4f10", margin: "0 0 12px" }}>Большой объём — выгоднее за страницу.</p>
            <div style={{ fontSize: 16, fontWeight: 700, color: "#7a4f10" }}>−5% при заказе от 100 страниц</div>
            <p style={{ fontSize: 14, color: "#7a4f10", margin: "10px 0 0", opacity: 0.85 }}>Постоянным и корпоративным клиентам — индивидуальные условия.</p>
          </Card>
        </div>
      </DBSection>

      {/* CTA */}
      <DBSection bg="var(--color-navy-deep)" pad="56px 24px">
        <div style={{ maxWidth: DB_MAXW, margin: "0 auto", textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 30, color: "#fff", margin: "0 0 10px" }}>Точную цену подтвердим после просмотра документа</h2>
          <p style={{ fontSize: 17, color: "var(--color-on-dark-mute)", margin: "0 auto 22px", maxWidth: 560 }}>
            Пришлите скан или фото — посчитаем точно и ответим в течение 30 минут. Без скрытых доплат.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" onClick={goCalc}>Рассчитать стоимость</Button>
            <Button variant="ghost" size="lg" style={{ color: "#fff", border: "1px solid var(--color-border-dark)" }} onClick={goLead}>Оставить заявку</Button>
          </div>
        </div>
      </DBSection>

      <DBFooter />
    </React.Fragment>
  );
}

window.DBPrice = DBPrice;