// SubscriptionPage.jsx — страница годовой подписки на журналы.

const DEFAULT_SUBSCRIPTION_SETTINGS = {
  enabled: true,
  annualPrice: 900,
  issuesPerYear: 6,
  bulkDiscountThreshold: 40,
  bulkDiscountPercent: 50,
  priceDescriptionTemplate: "Это стоимость годовой подписки на выбранный журнал: он выходит раз в два месяца, всего {issuesPerYear} выпусков в год.",
  bulkDiscountDescriptionTemplate: "При заказе от {discountThreshold} журналов действует скидка {discountPercent}%.",
  bulkDiscountAppliedTemplate: "Скидка {discountPercent}% от {subtotal} ₽",
  journalQuantityNoteTemplate: "Журнал выходит раз в два месяца: 1 годовая подписка = {issuesPerYear} выпусков в год.",
  introTitle: "Подписка на журналы",
  introText: "Оформите годовую подписку на журналы «Вера и Жизнь» и «Тропинка». Мы отправляем выпуски по России через Почту России.",
  paymentInstructions: "После оплаты прикрепите квитанцию к заявке. Мы проверим данные и свяжемся с вами при необходимости.",
  paymentQrUrl: "https://osmis.ru/podpiska",
  paymentQrText: "Отсканируйте QR-код, чтобы открыть страницу подписки и заполнить заявку.",
  subscriptionContactText: "По вопросам подписки обращайтесь сюда.",
  subscriptionContactPhone: "8 (989) 036-74-34",
  subscriptionContactEmail: "postnomcc@gmail.com",
  subscriptionNotificationEmail: "postnomcc@gmail.com",
  subscriptionNotificationEnabled: true,
  successMessage: "Спасибо! Заявка на подписку отправлена. Мы проверим квитанцию и свяжемся с вами, если потребуется уточнение.",
  consentText: "Я даю согласие Местной Религиозной Организации Северо-Осетинская Миссия Христианского Милосердия Российского Союза Евангельских Христиан Баптистов на обработку и использование моих персональных данных.",
  journals: [
    { key: "vera-life", title: "Вера и Жизнь", audience: "Для взрослых", enabled: true, sortOrder: 10 },
    { key: "tropinka", title: "Тропинка", audience: "Для детей", enabled: true, sortOrder: 20 },
  ],
};

function getRussianPlural(number, forms) {
  const value = Math.abs(Number(number || 0)) % 100;
  const lastDigit = value % 10;

  if (value > 10 && value < 20) return forms[2];
  if (lastDigit > 1 && lastDigit < 5) return forms[1];
  if (lastDigit === 1) return forms[0];
  return forms[2];
}

function formatRubles(value) {
  return Number(value || 0).toLocaleString("ru-RU");
}

function renderSubscriptionTemplate(template, values) {
  return String(template || "").replace(/\{(\w+)\}/g, (match, key) => (
    Object.prototype.hasOwnProperty.call(values, key) ? String(values[key]) : match
  ));
}

function getCurrentSubscriptionYear() {
  return new Date().getFullYear();
}

function phoneHref(value) {
  const digits = String(value || "").replace(/\D/g, "");
  if (!digits) return "";
  return `tel:+${digits.startsWith("7") ? digits : digits.startsWith("8") ? `7${digits.slice(1)}` : digits}`;
}

function normalizeSubscriptionSettings(data) {
  const settings = { ...DEFAULT_SUBSCRIPTION_SETTINGS, ...(data || {}) };
  const journals = Array.isArray(settings.journals) && settings.journals.length
    ? settings.journals
    : DEFAULT_SUBSCRIPTION_SETTINGS.journals;

  return {
    ...settings,
    enabled: settings.enabled !== false,
    subscriptionYear: getCurrentSubscriptionYear(),
    annualPrice: Number(settings.annualPrice || DEFAULT_SUBSCRIPTION_SETTINGS.annualPrice),
    issuesPerYear: Number(settings.issuesPerYear || DEFAULT_SUBSCRIPTION_SETTINGS.issuesPerYear),
    bulkDiscountThreshold: Number(settings.bulkDiscountThreshold || DEFAULT_SUBSCRIPTION_SETTINGS.bulkDiscountThreshold),
    bulkDiscountPercent: Math.max(0, Math.min(Number(settings.bulkDiscountPercent ?? DEFAULT_SUBSCRIPTION_SETTINGS.bulkDiscountPercent), 100)),
    priceDescriptionTemplate: settings.priceDescriptionTemplate || DEFAULT_SUBSCRIPTION_SETTINGS.priceDescriptionTemplate,
    bulkDiscountDescriptionTemplate: settings.bulkDiscountDescriptionTemplate || DEFAULT_SUBSCRIPTION_SETTINGS.bulkDiscountDescriptionTemplate,
    bulkDiscountAppliedTemplate: settings.bulkDiscountAppliedTemplate || DEFAULT_SUBSCRIPTION_SETTINGS.bulkDiscountAppliedTemplate,
    journalQuantityNoteTemplate: settings.journalQuantityNoteTemplate || DEFAULT_SUBSCRIPTION_SETTINGS.journalQuantityNoteTemplate,
    paymentQrUrl: settings.paymentQrUrl || DEFAULT_SUBSCRIPTION_SETTINGS.paymentQrUrl,
    paymentQrText: settings.paymentQrText || DEFAULT_SUBSCRIPTION_SETTINGS.paymentQrText,
    subscriptionContactText: settings.subscriptionContactText || DEFAULT_SUBSCRIPTION_SETTINGS.subscriptionContactText,
    subscriptionContactPhone: settings.subscriptionContactPhone || DEFAULT_SUBSCRIPTION_SETTINGS.subscriptionContactPhone,
    subscriptionContactEmail: settings.subscriptionContactEmail || DEFAULT_SUBSCRIPTION_SETTINGS.subscriptionContactEmail,
    subscriptionNotificationEmail: settings.subscriptionNotificationEmail || DEFAULT_SUBSCRIPTION_SETTINGS.subscriptionNotificationEmail,
    subscriptionNotificationEnabled: settings.subscriptionNotificationEnabled !== false,
    journals: journals
      .filter((journal) => journal && journal.enabled !== false && journal.key && journal.title)
      .sort((a, b) => Number(a.sortOrder || 0) - Number(b.sortOrder || 0)),
  };
}

async function fetchSubscriptionSettings() {
  const res = await fetch("/api/globals/subscription-settings", {
    headers: { Accept: "application/json" },
  });
  if (!res.ok) throw new Error("Не удалось загрузить настройки подписки");
  return normalizeSubscriptionSettings(await res.json());
}

function SubscriptionField({ label, required, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: 12.5,
        fontWeight: 600, color: "var(--graphite)", marginBottom: 7 }}>
        {label}{required ? " *" : ""}
      </span>
      {children}
    </label>
  );
}

function subscriptionInputStyle(focus) {
  return {
    width: "100%",
    boxSizing: "border-box",
    fontFamily: "var(--font-ui)",
    fontSize: 15,
    padding: "13px 15px",
    border: "1.5px solid " + (focus ? "var(--terracotta)" : "var(--line-warm)"),
    borderRadius: 10,
    background: focus ? "#fff" : "var(--cream)",
    color: "var(--ink)",
    outline: "none",
    boxShadow: focus ? "0 0 0 3px rgba(211,97,60,.12)" : "none",
    transition: "all .2s ease",
  };
}

function SubscriptionInput({ label, required, textarea, ...props }) {
  const [focus, setFocus] = React.useState(false);
  const handleKeyDown = (event) => {
    if (props.onKeyDown) props.onKeyDown(event);
    if (event.defaultPrevented) return;

    if (event.key === "Enter" && !textarea) {
      event.preventDefault();
      focusNextFieldFrom(event.currentTarget);
    }
  };
  const common = {
    ...props,
    onFocus: () => setFocus(true),
    onBlur: () => setFocus(false),
    onKeyDown: handleKeyDown,
    style: { ...subscriptionInputStyle(focus), minHeight: textarea ? 108 : undefined, resize: textarea ? "vertical" : undefined },
  };
  return (
    <SubscriptionField label={label} required={required}>
      {textarea ? <textarea {...common} /> : <input {...common} />}
    </SubscriptionField>
  );
}

function extractPostalCode(address) {
  const match = String(address || "").match(/\b\d{6}\b/);
  return match ? match[0] : "";
}

function focusNextFieldFrom(current) {
  if (!current) return;

  const form = current.closest("form");
  if (!form) return;

  const fields = [...form.querySelectorAll("input, textarea, select, button")]
    .filter((field) => !field.disabled && field.type !== "hidden" && field.tabIndex !== -1 && !field.dataset.addressSuggestion);
  const index = fields.indexOf(current);
  const next = fields[index + 1];
  if (next) next.focus();
}

function formatRussianPhone(value) {
  let digits = String(value || "").replace(/\D/g, "");

  if (digits.startsWith("8")) digits = "7" + digits.slice(1);
  if (!digits.startsWith("7")) digits = "7" + digits;
  digits = digits.slice(0, 11);

  const rest = digits.slice(1);
  const part1 = rest.slice(0, 3);
  const part2 = rest.slice(3, 6);
  const part3 = rest.slice(6, 8);
  const part4 = rest.slice(8, 10);

  let formatted = "+7";
  if (part1) formatted += ` (${part1}`;
  if (part1.length === 3) formatted += ")";
  if (part2) formatted += ` ${part2}`;
  if (part3) formatted += `-${part3}`;
  if (part4) formatted += `-${part4}`;

  return formatted;
}

function cleanEmailInput(value) {
  const cleaned = String(value || "")
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "")
    .replace(/[^a-z0-9._%+\-@]/g, "");

  const [first, ...rest] = cleaned.split("@");
  return rest.length ? `${first}@${rest.join("").replace(/@/g, "")}` : first;
}

function AddressSuggestField({ value, onChange, onPostalCode }) {
  const [focus, setFocus] = React.useState(false);
  const [suggestions, setSuggestions] = React.useState([]);
  const [provider, setProvider] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  const [activeIndex, setActiveIndex] = React.useState(0);
  const inputRef = React.useRef(null);
  const pickedAddressRef = React.useRef("");

  React.useEffect(() => {
    const query = value.trim();
    if (query.length < 2) {
      setSuggestions([]);
      setOpen(false);
      setLoading(false);
      setActiveIndex(0);
      return;
    }

    if (query === pickedAddressRef.current) {
      setSuggestions([]);
      setOpen(false);
      setLoading(false);
      setActiveIndex(0);
      return;
    }

    const controller = new AbortController();
    const timer = setTimeout(() => {
      setLoading(true);
      fetch("/api/address-suggestions", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ query }),
        signal: controller.signal,
      })
        .then((res) => res.ok ? res.json() : { suggestions: [] })
        .then((data) => {
          const next = Array.isArray(data.suggestions) ? data.suggestions.filter((item) => item.value) : [];
          setProvider(data.provider || "");
          setSuggestions(next);
          setActiveIndex(0);
          setOpen(next.length > 0);
        })
        .catch((error) => {
          if (error.name !== "AbortError") {
            setSuggestions([]);
            setProvider("");
            setOpen(false);
          }
        })
        .finally(() => {
          if (!controller.signal.aborted) setLoading(false);
        });
    }, 260);

    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [value]);

  const pick = (suggestion) => {
    const nextAddress = suggestion.unrestrictedValue || suggestion.value;
    pickedAddressRef.current = nextAddress.trim();
    onChange(nextAddress);
    onPostalCode(suggestion.postalCode || extractPostalCode(nextAddress));
    setOpen(false);
    setSuggestions([]);
  };

  const handleKeyDown = (event) => {
    if (event.key === "ArrowDown" && suggestions.length) {
      event.preventDefault();
      setOpen(true);
      setActiveIndex((index) => Math.min(index + 1, suggestions.length - 1));
      return;
    }

    if (event.key === "ArrowUp" && suggestions.length) {
      event.preventDefault();
      setOpen(true);
      setActiveIndex((index) => Math.max(index - 1, 0));
      return;
    }

    if (event.key === "Escape") {
      setOpen(false);
      return;
    }

    if (event.key === "Enter") {
      event.preventDefault();
      if (open && suggestions[activeIndex]) pick(suggestions[activeIndex]);
      else setOpen(false);
      focusNextFieldFrom(inputRef.current);
    }
  };

  return (
    <div>
      <span style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: 12.5,
        fontWeight: 600, color: "var(--graphite)", marginBottom: 7 }}>
        Адрес получателя *
      </span>
      <div style={{ position: "relative" }}>
        <textarea ref={inputRef} rows={3} value={value}
          name="mission_delivery_text"
          id="mission-delivery-text"
          autoComplete="new-password"
          autoCorrect="off"
          autoCapitalize="none"
          spellCheck="false"
          data-form-type="other"
          data-lpignore="true"
          data-1p-ignore="true"
          data-bwignore="true"
          placeholder="Начните вводить адрес: город, улицу, дом или индекс"
          onChange={(e) => {
            const next = e.target.value;
            const postalCode = extractPostalCode(next);
            if (next.trim() !== pickedAddressRef.current) pickedAddressRef.current = "";
            onChange(next);
            if (postalCode) onPostalCode(postalCode);
          }}
          onKeyDown={handleKeyDown}
          onFocus={() => {
            setFocus(true);
            if (suggestions.length && value.trim() !== pickedAddressRef.current) setOpen(true);
          }}
          onBlur={() => {
            setFocus(false);
            setTimeout(() => setOpen(false), 140);
          }}
          style={{ ...subscriptionInputStyle(focus), minHeight: 104, resize: "vertical" }} />
        <div style={{ position: "absolute", left: 0, right: 0, top: "calc(100% + 6px)", zIndex: 20,
          background: "#fff", border: "1px solid var(--line-warm)", borderRadius: 14,
          boxShadow: open || loading ? "0 18px 40px rgba(30,26,22,.14)" : "0 8px 22px rgba(30,26,22,0)",
          overflow: "hidden", maxHeight: open || loading ? 288 : 0,
          opacity: open || loading ? 1 : 0, pointerEvents: open || loading ? "auto" : "none",
          transform: open || loading ? "translateY(0)" : "translateY(-4px)",
          transition: "opacity .16s ease, transform .16s ease, max-height .16s ease, box-shadow .16s ease" }}>
          <div style={{ maxHeight: 288, overflowY: "auto" }}>
            {loading && suggestions.length === 0 ? (
              <div style={{ padding: "13px 15px", fontFamily: "var(--font-ui)", fontSize: 14,
                color: "var(--stone)" }}>
                Ищем адрес...
              </div>
            ) : suggestions.map((suggestion, index) => {
              const active = index === activeIndex;
              return (
                <button key={`${suggestion.value}-${index}`} type="button" data-address-suggestion="true"
                  onMouseDown={(e) => e.preventDefault()}
                  onMouseEnter={() => setActiveIndex(index)}
                  onClick={() => {
                    pick(suggestion);
                    requestAnimationFrame(() => focusNextFieldFrom(inputRef.current));
                  }}
                  style={{ width: "100%", display: "block", textAlign: "left",
                    background: active ? "rgba(211,97,60,.08)" : "transparent",
                    border: "none", borderBottom: index === suggestions.length - 1 ? "none" : "1px solid var(--line)",
                    padding: "12px 15px", cursor: "pointer", fontFamily: "var(--font-ui)",
                    fontSize: 14.5, lineHeight: 1.45, color: active ? "var(--terracotta)" : "var(--ink)",
                    transition: "background .12s ease, color .12s ease" }}>
                  {suggestion.value}
                  {suggestion.postalCode && (
                    <span style={{ display: "block", marginTop: 2, fontSize: 12.5,
                      color: active ? "var(--terracotta)" : "var(--stone)" }}>
                      Индекс: {suggestion.postalCode}
                    </span>
                  )}
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

function SubscriptionPage() {
  const [settings, setSettings] = React.useState(DEFAULT_SUBSCRIPTION_SETTINGS);
  const [settingsStatus, setSettingsStatus] = React.useState("loading");
  const [quantities, setQuantities] = React.useState({ "vera-life": 0, tropinka: 0 });
  const [form, setForm] = React.useState({
    lastName: "",
    firstName: "",
    middleName: "",
    postalCode: "",
    recipientAddress: "",
    phone: "",
    email: "",
    consentAccepted: false,
  });
  const [receipt, setReceipt] = React.useState(null);
  const [status, setStatus] = React.useState({ type: "", message: "" });
  const [submitting, setSubmitting] = React.useState(false);
  const receiptInputRef = React.useRef(null);

  React.useEffect(() => {
    let alive = true;
    fetchSubscriptionSettings()
      .then((next) => {
        if (!alive) return;
        setSettings(next);
        setSettingsStatus("ready");
      })
      .catch(() => {
        if (!alive) return;
        setSettings(normalizeSubscriptionSettings(DEFAULT_SUBSCRIPTION_SETTINGS));
        setSettingsStatus("error");
      });
    return () => { alive = false; };
  }, []);

  const totalQuantity = Object.values(quantities).reduce((sum, value) => sum + Number(value || 0), 0);
  const subtotalAmount = totalQuantity * Number(settings.annualPrice || 0);
  const discountRate = Number(settings.bulkDiscountPercent || 0) / 100;
  const hasBulkDiscount = totalQuantity >= Number(settings.bulkDiscountThreshold || 0) && discountRate > 0;
  const totalAmount = hasBulkDiscount ? Math.round(subtotalAmount * (1 - discountRate)) : subtotalAmount;
  const templateValues = {
    price: formatRubles(settings.annualPrice),
    year: settings.subscriptionYear,
    issuesPerYear: settings.issuesPerYear,
    discountThreshold: settings.bulkDiscountThreshold,
    discountPercent: settings.bulkDiscountPercent,
    subtotal: formatRubles(subtotalAmount),
    total: formatRubles(totalAmount),
  };

  const setQuantity = (key, value) => {
    const next = Math.max(0, Math.min(Number.parseInt(value || "0", 10) || 0, 100));
    setQuantities((current) => ({ ...current, [key]: next }));
  };

  const setField = (key, value) => {
    setForm((current) => ({ ...current, [key]: value }));
  };

  const submit = async (event) => {
    event.preventDefault();
    setStatus({ type: "", message: "" });

    if (!settings.enabled) {
      setStatus({ type: "error", message: "Подписка временно недоступна." });
      return;
    }

    if (totalQuantity <= 0) {
      setStatus({ type: "error", message: "Укажите количество хотя бы одного журнала." });
      return;
    }

    if (!form.consentAccepted) {
      setStatus({ type: "error", message: "Нужно согласие на обработку персональных данных." });
      return;
    }

    if (!receipt) {
      setStatus({ type: "error", message: "Прикрепите квитанцию об оплате." });
      return;
    }

    const recipientAddress = form.recipientAddress.trim();
    const postalCode = form.postalCode || extractPostalCode(recipientAddress);
    if (!recipientAddress) {
      setStatus({ type: "error", message: "Заполните адрес получателя." });
      return;
    }

    if (!postalCode) {
      setStatus({ type: "error", message: "Выберите адрес из подсказки или укажите индекс в адресе." });
      return;
    }

    const payload = new FormData();
    payload.set("veraLifeQuantity", String(quantities["vera-life"] || 0));
    payload.set("tropinkaQuantity", String(quantities.tropinka || 0));
    payload.set("lastName", form.lastName);
    payload.set("firstName", form.firstName);
    payload.set("middleName", form.middleName);
    payload.set("postalCode", postalCode);
    payload.set("recipientAddress", recipientAddress);
    payload.set("phone", form.phone);
    payload.set("email", form.email);
    payload.set("consentAccepted", form.consentAccepted ? "yes" : "no");
    payload.set("receipt", receipt);
    payload.set("website", "");

    setSubmitting(true);
    try {
      const res = await fetch("/api/subscription-requests/submit", {
        method: "POST",
        body: payload,
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.message || "Не удалось отправить заявку.");

      setStatus({ type: "success", message: data.message || settings.successMessage });
      setQuantities({ "vera-life": 0, tropinka: 0 });
      setForm({
        lastName: "",
        firstName: "",
        middleName: "",
        postalCode: "",
        recipientAddress: "",
        phone: "",
        email: "",
        consentAccepted: false,
      });
      setReceipt(null);
      if (receiptInputRef.current) receiptInputRef.current.value = "";
    } catch (error) {
      setStatus({ type: "error", message: error.message || "Не удалось отправить заявку." });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="subscription-page">
      <style>{`
        .subscription-payment-qr:hover {
          border-color: rgba(211,97,60,.36) !important;
          box-shadow: 0 10px 26px rgba(63,55,45,.08) !important;
          transform: translateY(-1px);
        }
        .subscription-payment-qr:focus-visible {
          outline: 3px solid rgba(211,97,60,.24);
          outline-offset: 3px;
        }
        @media (max-width: 720px) {
          .subscription-page .page-hero {
            --page-hero-position: 62% center !important;
          }
          .subscription-page .page-hero .h1 {
            font-size: 34px !important;
            line-height: 1.05 !important;
          }
          .subscription-page .page-hero .lead {
            font-size: 16px !important;
            line-height: 1.5 !important;
          }
          .subscription-section {
            padding: 34px 16px 54px !important;
          }
          .subscription-layout {
            gap: 16px !important;
          }
          .subscription-aside {
            gap: 12px !important;
          }
          .subscription-price-card {
            border-radius: 18px !important;
            padding: 18px !important;
          }
          .subscription-price-card .caption {
            margin-bottom: 7px !important;
          }
          .subscription-price-value {
            font-size: 36px !important;
          }
          .subscription-price-text {
            font-size: 13.5px !important;
            line-height: 1.45 !important;
            margin-top: 10px !important;
          }
          .subscription-discount-text {
            font-size: 13px !important;
            line-height: 1.4 !important;
            margin-top: 8px !important;
          }
          .subscription-info-card {
            border-radius: 14px !important;
            padding: 16px !important;
          }
          .subscription-info-card h3 {
            font-size: 19px !important;
            margin-bottom: 8px !important;
          }
          .subscription-info-card p {
            font-size: 13.5px !important;
            line-height: 1.45 !important;
          }
          .subscription-payment-qr {
            grid-template-columns: 82px 1fr !important;
            gap: 11px !important;
            margin-top: 14px !important;
            padding: 10px !important;
            border-radius: 13px !important;
          }
          .subscription-payment-qr img {
            width: 82px !important;
            height: 82px !important;
            border-radius: 9px !important;
          }
          .subscription-payment-qr-title {
            font-size: 13.5px !important;
            margin-bottom: 4px !important;
          }
          .subscription-payment-qr-text {
            font-size: 12.5px !important;
            line-height: 1.35 !important;
          }
          .subscription-payment-qr-action {
            font-size: 12px !important;
            margin-top: 8px !important;
            padding: 6px 9px !important;
          }
          .subscription-contact-card {
            border-radius: 14px !important;
            padding: 16px !important;
          }
          .subscription-contact-card h3 {
            font-size: 19px !important;
            margin-bottom: 8px !important;
          }
          .subscription-contact-card p {
            font-size: 13.5px !important;
            line-height: 1.45 !important;
          }
          .subscription-contact-links {
            gap: 8px !important;
          }
          .subscription-form {
            border-radius: 18px !important;
            padding: 18px !important;
          }
          .subscription-form-title {
            font-size: 24px !important;
            margin-bottom: 6px !important;
          }
          .subscription-form-intro {
            font-size: 14px !important;
            line-height: 1.45 !important;
            margin-bottom: 18px !important;
          }
          .subscription-journal-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px !important;
            margin-bottom: 16px !important;
          }
          .subscription-journal-card {
            border-radius: 13px !important;
            padding: 12px !important;
          }
          .subscription-journal-card .caption {
            font-size: 10.5px !important;
            line-height: 1.25 !important;
            margin-bottom: 5px !important;
          }
          .subscription-journal-card h3 {
            font-size: 16px !important;
            line-height: 1.15 !important;
            margin-bottom: 10px !important;
          }
          .subscription-compact-note {
            display: none !important;
          }
          .subscription-grid {
            gap: 11px !important;
            margin-bottom: 11px !important;
          }
          .subscription-name-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          }
          .subscription-name-grid > label:nth-child(3) {
            grid-column: 1 / -1;
          }
          .subscription-form input,
          .subscription-form textarea {
            border-radius: 9px !important;
            font-size: 14px !important;
            padding: 11px 12px !important;
          }
          .subscription-form textarea {
            min-height: 84px !important;
          }
          .subscription-form input[type="checkbox"] {
            padding: 0 !important;
          }
          .subscription-form input[type="file"] {
            font-size: 13px !important;
          }
          .subscription-address-wrap {
            margin-bottom: 11px !important;
          }
          .subscription-consent {
            font-size: 12.5px !important;
            line-height: 1.4 !important;
            margin-top: 14px !important;
          }
          .subscription-total {
            align-items: stretch !important;
            gap: 14px !important;
            margin-top: 20px !important;
            padding-top: 18px !important;
          }
          .subscription-total > div:first-child {
            flex: 1 1 auto;
          }
          .subscription-total button {
            width: 100%;
          }
        }
        @media (max-width: 350px) {
          .subscription-journal-grid {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
      <PageHero eyebrow="Подписка" title={settings.introTitle}
        intro={settings.introText}
        image="../../assets/page-heroes/subscription.png" imagePosition="58% center" />

      <section className="subscription-section" style={{ background: "var(--cream)", padding: "82px 40px 96px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "0.78fr 1.22fr",
          gap: 42, alignItems: "start" }} className="kit-2col subscription-layout">
          <aside className="subscription-aside" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div className="subscription-price-card" style={{ background: "var(--green-deep)", color: "var(--cream)", borderRadius: 24,
              padding: 28 }}>
              <div className="caption" style={{ color: "rgba(243,238,218,.64)", marginBottom: 10 }}>
                Годовая подписка {settings.subscriptionYear}
              </div>
              <div className="subscription-price-value" style={{ fontFamily: "var(--font-display)", fontSize: 48, lineHeight: 1,
                fontWeight: 700, color: "var(--terracotta-bright)" }}>
                {settings.annualPrice.toLocaleString("ru-RU")} ₽
              </div>
              <p className="subscription-price-text" style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, lineHeight: 1.55,
                color: "rgba(243,238,218,.78)", margin: "14px 0 0" }}>
                {renderSubscriptionTemplate(settings.priceDescriptionTemplate, templateValues)}
              </p>
              <p className="subscription-discount-text" style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, lineHeight: 1.5,
                color: "rgba(243,238,218,.68)", margin: "12px 0 0" }}>
                {renderSubscriptionTemplate(settings.bulkDiscountDescriptionTemplate, templateValues)}
              </p>
            </div>

            <div className="subscription-info-card" style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 18,
              padding: 24 }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22,
                margin: "0 0 12px", color: "var(--ink)" }}>Оплата и отправка</h3>
              <p style={{ fontFamily: "var(--font-ui)", fontSize: 15, lineHeight: 1.6,
                color: "var(--graphite)", margin: 0 }}>
                {settings.paymentInstructions}
              </p>
              <p style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, lineHeight: 1.55,
                color: "var(--stone)", margin: "14px 0 0" }}>
                Журналы отправляются по России через Почту России.
              </p>
              <a className="subscription-payment-qr" href={settings.paymentQrUrl}
                aria-label="Открыть страницу подписки"
                style={{ display: "grid", gridTemplateColumns: "112px 1fr", gap: 16, alignItems: "center",
                  marginTop: 18, padding: 12, border: "1px solid var(--line-warm)", borderRadius: 14,
                  background: "var(--cream)", textDecoration: "none", transition: "border-color .2s ease, box-shadow .2s ease, transform .2s ease" }}>
                <img src={`/api/subscription-payment-qr?path=${encodeURIComponent(settings.paymentQrUrl)}`} alt="QR-код страницы подписки"
                  style={{ width: 112, height: 112, display: "block", borderRadius: 10, background: "#fff" }} />
                <span>
                  <span className="subscription-payment-qr-title" style={{ display: "block", fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 14.5,
                    color: "var(--ink)", marginBottom: 5 }}>
                    QR-код страницы подписки
                  </span>
                  <span className="subscription-payment-qr-text" style={{ display: "block", fontFamily: "var(--font-ui)", fontSize: 13.5, lineHeight: 1.45,
                    color: "var(--stone)" }}>
                    {settings.paymentQrText}
                  </span>
                  <span className="subscription-payment-qr-action" style={{ display: "inline-flex", alignItems: "center",
                    marginTop: 10, padding: "7px 10px", borderRadius: 999, background: "rgba(211,97,60,.12)",
                    color: "var(--terracotta)", fontFamily: "var(--font-ui)", fontSize: 12.5, fontWeight: 700 }}>
                    Нажмите, чтобы открыть подписку
                  </span>
                </span>
              </a>
            </div>

            <div className="subscription-contact-card" style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: 18,
              padding: 24 }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22,
                margin: "0 0 12px", color: "var(--ink)" }}>Вопросы по подписке</h3>
              <p style={{ fontFamily: "var(--font-ui)", fontSize: 15, lineHeight: 1.6,
                color: "var(--graphite)", margin: 0 }}>
                {settings.subscriptionContactText}
              </p>
              <div className="subscription-contact-links" style={{ display: "grid", gap: 10, marginTop: 16 }}>
                <a href={phoneHref(settings.subscriptionContactPhone)}
                  style={{ fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 15,
                    color: "var(--terracotta)", textDecoration: "none" }}>
                  {settings.subscriptionContactPhone}
                </a>
                <a href={`mailto:${settings.subscriptionContactEmail}`}
                  style={{ fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 15,
                    color: "var(--terracotta)", textDecoration: "none", overflowWrap: "anywhere" }}>
                  {settings.subscriptionContactEmail}
                </a>
              </div>
            </div>

            {settingsStatus === "error" && (
              <div style={{ border: "1px solid rgba(211,97,60,.28)", background: "rgba(211,97,60,.08)",
                borderRadius: 14, padding: 16, fontFamily: "var(--font-ui)", color: "var(--graphite)",
                fontSize: 14.5, lineHeight: 1.5 }}>
                Настройки подписки временно не загрузились. Показаны значения по умолчанию.
              </div>
            )}
          </aside>

          <form className="subscription-form" onSubmit={submit} style={{ background: "#fff", border: "1px solid var(--line)",
            borderRadius: 24, padding: 28 }}>
            <h2 className="subscription-form-title" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 30,
              letterSpacing: "-.01em", color: "var(--ink)", margin: "0 0 8px" }}>
              Заявка на подписку
            </h2>
            <p className="subscription-form-intro" style={{ fontFamily: "var(--font-ui)", fontSize: 15.5, lineHeight: 1.55,
              color: "var(--stone)", margin: "0 0 26px" }}>
              Заполните данные получателя и прикрепите квитанцию об оплате.
            </p>

            {!settings.enabled && (
              <div style={{ marginBottom: 22, border: "1px solid var(--line-warm)", borderRadius: 14,
                padding: 16, fontFamily: "var(--font-ui)", color: "var(--graphite)", background: "var(--cream)" }}>
                Подписка временно недоступна. Пожалуйста, попробуйте позже.
              </div>
            )}

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 24 }}
              className="kit-grid-2 subscription-journal-grid">
              {settings.journals.map((journal) => (
                <div className="subscription-journal-card" key={journal.key} style={{ border: "1px solid var(--line-warm)", borderRadius: 16,
                  padding: 18, background: "var(--cream)" }}>
                  <div className="caption" style={{ marginBottom: 8 }}>{journal.audience || "Журнал"}</div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 21,
                    margin: "0 0 14px", color: "var(--ink)" }}>{journal.title}</h3>
                  <SubscriptionInput label="Количество" type="number" min="0" max="100"
                    placeholder="0" value={quantities[journal.key] || ""}
                    onChange={(e) => setQuantity(journal.key, e.target.value)} />
                  <div className="caption subscription-compact-note" style={{ marginTop: 8 }}>
                    {renderSubscriptionTemplate(settings.journalQuantityNoteTemplate, templateValues)}
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16, marginBottom: 16 }}
              className="kit-grid-3 subscription-grid subscription-name-grid">
              <SubscriptionInput label="Фамилия" required value={form.lastName}
                onChange={(e) => setField("lastName", e.target.value)} />
              <SubscriptionInput label="Имя" required value={form.firstName}
                onChange={(e) => setField("firstName", e.target.value)} />
              <SubscriptionInput label="Отчество" value={form.middleName}
                onChange={(e) => setField("middleName", e.target.value)} />
            </div>

            <div className="subscription-address-wrap" style={{ marginBottom: 16 }}>
              <AddressSuggestField value={form.recipientAddress}
                onChange={(value) => setField("recipientAddress", value)}
                onPostalCode={(value) => setField("postalCode", value)} />
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "180px 1fr 1fr", gap: 16, marginBottom: 16 }}
              className="kit-grid-3 subscription-grid">
              <SubscriptionInput label="Индекс" required inputMode="numeric" pattern="[0-9]{6}"
                placeholder="362000" value={form.postalCode}
                onChange={(e) => setField("postalCode", e.target.value.replace(/\D/g, "").slice(0, 6))} />
              <SubscriptionInput label="Номер контактного телефона" required type="tel"
                inputMode="tel" autoComplete="tel" placeholder="+7 (___) ___-__-__" value={form.phone}
                onChange={(e) => setField("phone", formatRussianPhone(e.target.value))} />
              <SubscriptionInput label="Эл. почта, если имеется" type="email"
                inputMode="email" autoComplete="email" placeholder="name@example.ru" value={form.email}
                onChange={(e) => setField("email", cleanEmailInput(e.target.value))} />
            </div>

            <SubscriptionField label="Квитанция об оплате" required>
              <input ref={receiptInputRef} type="file" accept="application/pdf,.pdf"
                onChange={(e) => setReceipt(e.target.files && e.target.files[0] ? e.target.files[0] : null)}
                style={{ ...subscriptionInputStyle(false), padding: 11, background: "var(--cream)" }} />
              <div className="caption" style={{ marginTop: 7 }}>PDF-файл, до 10 МБ.</div>
            </SubscriptionField>

            <label className="subscription-consent" style={{ display: "flex", gap: 12, alignItems: "flex-start", marginTop: 18,
              fontFamily: "var(--font-ui)", fontSize: 14.5, lineHeight: 1.5, color: "var(--graphite)" }}>
              <input type="checkbox" checked={form.consentAccepted}
                onChange={(e) => setField("consentAccepted", e.target.checked)}
                style={{ marginTop: 3, width: 18, height: 18, accentColor: "var(--terracotta)", flex: "none" }} />
              <span>{settings.consentText}</span>
            </label>

            <input type="text" name="website" tabIndex="-1" autoComplete="off"
              style={{ position: "absolute", left: "-9999px", opacity: 0 }} aria-hidden="true" />

            <div className="subscription-total" style={{ borderTop: "1px solid var(--line)", marginTop: 26, paddingTop: 22,
              display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18,
              flexWrap: "wrap" }}>
              <div>
                <div className="caption">Итого</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 700,
                  color: "var(--ink)", marginTop: 2 }}>
                  {totalAmount.toLocaleString("ru-RU")} ₽
                </div>
                {hasBulkDiscount && (
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, lineHeight: 1.45,
                    color: "var(--terracotta)", marginTop: 4 }}>
                    {renderSubscriptionTemplate(settings.bulkDiscountAppliedTemplate, templateValues)}
                  </div>
                )}
                {totalQuantity <= 0 && (
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, lineHeight: 1.45,
                    color: "var(--stone)", marginTop: 5 }}>
                    Выберите количество журналов
                  </div>
                )}
              </div>
              <Button type="submit" variant="primary" size="lg" icon="send" style={{ justifyContent: "center" }}
                disabled={submitting || !settings.enabled}>
                {submitting ? "Отправляем..." : "Отправить заявку"}
              </Button>
            </div>

            {status.message && (
              <div style={{ marginTop: 20, borderRadius: 14, padding: 16,
                border: status.type === "success" ? "1px solid rgba(1,65,56,.22)" : "1px solid rgba(211,97,60,.28)",
                background: status.type === "success" ? "rgba(1,65,56,.08)" : "rgba(211,97,60,.08)",
                color: "var(--graphite)", fontFamily: "var(--font-ui)", fontSize: 15,
                lineHeight: 1.5 }}>
                {status.message}
              </div>
            )}
          </form>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SubscriptionPage, fetchSubscriptionSettings });