// SupportPage.jsx — страница «Поддержать»: благодарность, способы поддержки, QR (placeholder), CTA.
function SupportPage({ onNav }) {
  const donationUrl = "";
  const ways = [
    { icon: "smartphone", h: "Перевод по QR", t: "Отсканируйте код в приложении банка и поддержите служение за минуту." },
    { icon: "repeat", h: "Регулярная поддержка", t: "Небольшой ежемесячный вклад помогает планировать служение наперёд." },
    { icon: "hand-heart", h: "Молитва и участие", t: "Молитесь о миссии, делитесь материалами и становитесь волонтёром." },
  ];
  return (
    <div>
      <PageHero eyebrow="Поддержать" title="Станьте частью миссии"
        intro="Спасибо, что хотите поддержать наше служение. Ваша помощь несёт надежду людям Северной Осетии."
        image="../../assets/page-heroes/support.png" imagePosition="center center" />

      {/* Благодарность + способы */}
      <section style={{ background: "var(--cream)", padding: "88px 40px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid",
          gridTemplateColumns: "1fr 0.85fr", gap: 64, alignItems: "center" }} className="kit-2col">
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 34,
              lineHeight: 1.12, letterSpacing: "-.01em", color: "var(--ink)", margin: "0 0 18px",
              maxWidth: 640, textWrap: "balance" }}>
              Каждый дар — будь то молитва, время или средства — становится частью общего труда.
            </h2>
            <p className="body" style={{ margin: "0 0 36px" }}>
              Благодаря вашей поддержке мы издаём христианские журналы, проводим детские и
              молодёжные программы, помогаем семьям и несём Благую Весть тем, кто ещё её не слышал.
              Мы искренне благодарны каждому, кто рядом.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              {ways.map((w) => (
                <div key={w.h} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
                  <span style={{ width: 48, height: 48, borderRadius: 14, background: "rgba(211,97,60,.12)",
                    display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                    <Icon name={w.icon} size={22} color="var(--terracotta)" />
                  </span>
                  <div>
                    <h3 style={{ fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 17,
                      color: "var(--ink)", margin: "4px 0 4px" }}>{w.h}</h3>
                    <p style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, lineHeight: 1.55,
                      color: "var(--stone)", margin: 0, maxWidth: 420, textWrap: "pretty" }}>{w.t}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* QR-код (placeholder) */}
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 18,
            background: "#fff", border: "1px solid var(--line)", borderRadius: 24, padding: "40px 36px",
            boxShadow: "var(--shadow-sm)" }}>
            <span className="caption" style={{ letterSpacing: ".06em" }}>Отсканируйте, чтобы поддержать</span>
            {donationUrl ? (
              <a href={donationUrl} target="_blank" rel="noopener noreferrer" aria-label="Открыть страницу пожертвования"
                style={{ textDecoration: "none", color: "inherit" }}>
                <div style={{ width: 220, height: 220, borderRadius: 16, background: "var(--cream)",
                  border: "1.5px dashed var(--line-warm)", display: "flex", flexDirection: "column",
                  alignItems: "center", justifyContent: "center", gap: 10, color: "var(--stone)",
                  cursor: "pointer" }}>
                  <Icon name="qr-code" size={64} color="var(--stone-soft)" />
                  <span style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--stone)" }}>Открыть пожертвование</span>
                </div>
              </a>
            ) : (
              <div style={{ width: 220, height: 220, borderRadius: 16, background: "var(--cream)",
              border: "1.5px dashed var(--line-warm)", display: "flex", flexDirection: "column",
              alignItems: "center", justifyContent: "center", gap: 10, color: "var(--stone)" }}>
                <Icon name="qr-code" size={64} color="var(--stone-soft)" />
                <span style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--stone)" }}>QR-код появится здесь</span>
              </div>
            )}
            {donationUrl ? (
              <Button variant="primary" size="md" icon="heart" style={{ width: "100%", justifyContent: "center" }}
                onClick={() => window.open(donationUrl, "_blank", "noopener,noreferrer")}>
                Пожертвовать онлайн
              </Button>
            ) : (
              <button type="button" disabled style={{ width: "100%", borderRadius: 999,
                border: "1.5px solid var(--line-warm)", background: "var(--cream)", color: "var(--stone)",
                fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 15, padding: "13px 20px",
                cursor: "not-allowed" }}>
                Ссылка для пожертвования скоро появится
              </button>
            )}
            <p style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, lineHeight: 1.5,
              color: "var(--stone)", margin: 0, textAlign: "center", maxWidth: 240 }}>
              На телефоне можно будет нажать кнопку и перейти к оплате без сканирования QR-кода.
            </p>
          </div>
        </div>
      </section>

      {/* Аккуратный CTA */}
      <section style={{ padding: "0 40px 88px", background: "var(--cream)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", background: "var(--green-deep)",
          borderRadius: 28, padding: "56px 48px", textAlign: "center" }}>
          <h2 className="h1" style={{ color: "var(--cream)", margin: "0 0 14px" }}>Есть вопросы о поддержке?</h2>
          <p className="lead" style={{ color: "rgba(243,238,218,.82)", margin: "0 auto 30px", maxWidth: 600 }}>
            Напишите нам — расскажем о реквизитах, отчётности и о том, как ваша помощь служит людям.
          </p>
          <Button variant="primary" size="lg" iconRight="arrow-right" onClick={() => onNav("Контакты")}>Связаться с нами</Button>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { SupportPage });