// BeliefsPage.jsx — раздел «Вероучение»: исповедание веры миссии

const CREED_LEAD = "Мы — евангельские христиане-баптисты. В центре нашей веры — Иисус Христос, Его любовь к человеку, Его смерть и воскресение ради спасения людей. Мы верим в Единого Бога — Отца, Сына и Святого Духа, Который сотворил мир, любит каждого человека и открывает Себя через Священное Писание.";

const CREED = [
  { label: "Священное Писание",
    text: "Мы принимаем Библию как Божье Слово и главный ориентир для веры, жизни, служения и отношений с людьми. Через Писание мы узнаём о Божьей любви, Его святости, милости, справедливости и желании привести человека к настоящей жизни с Ним." },
  { label: "Спасение по благодати",
    text: "Мы верим, что каждый человек нуждается в Божьей благодати и прощении. Спасение невозможно заслужить добрыми делами или религиозными усилиями — оно принимается верой как дар Божий через Иисуса Христа. Поэтому мы призываем людей не к формальности, а к живым личным отношениям с Богом, покаянию, доверию Христу и обновлённой жизни." },
  { label: "Церковь",
    text: "Мы верим, что церковь — это не просто здание, а община людей, которые следуют за Христом, поддерживают друг друга, молятся, изучают Библию, служат ближним и несут Евангелие тем, кто ещё не слышал о Божьей любви. Для нас важно, чтобы вера проявлялась не только в словах, но и в жизни: в любви, милосердии, честности, верности и заботе о людях." },
  { label: "Крещение и Вечеря Господня",
    text: "Мы совершаем крещение по личной вере, как осознанное свидетельство человека о покаянии, доверии Христу и желании следовать за Ним. Также мы участвуем в Вечере Господней, вспоминая жертву Иисуса Христа и Его любовь к нам." },
  { label: "Надежда и вечность",
    text: "Мы с надеждой ожидаем второго пришествия Иисуса Христа и верим в воскресение, Божий суд и вечную жизнь для тех, кто принадлежит Господу. Наша цель — прославлять Бога, служить людям и делиться благой вестью о Христе с уважением, любовью и открытым сердцем." },
];

function CreedItem({ n, label, text, last }) {
  return (
    <div className="creed-row" style={{ display: "grid", gridTemplateColumns: "56px 1fr", gap: 24,
      alignItems: "stretch" }}>
      {/* маркер этапа: кружок + линия к следующему */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
        <span className="creed-dot" style={{ width: 44, height: 44, borderRadius: 999, flex: "none",
          display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1,
          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15 }}>{String(n).padStart(2, "0")}</span>
        {!last && (
          <span className="creed-line" style={{ flex: 1, width: 2, marginTop: 4, position: "relative" }}>
            <i className="creed-line-fill" />
          </span>
        )}
      </div>
      <div style={{ paddingTop: 8, paddingBottom: last ? 0 : 40 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19,
          letterSpacing: "-.01em", color: "var(--ink)", margin: "0 0 8px", lineHeight: 1.25 }}>{label}</h3>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: 17, lineHeight: 1.7,
          color: "var(--graphite)", margin: 0, textWrap: "pretty" }}>{text}</p>
      </div>
    </div>
  );
}

// BeliefsSection — блок «Во что мы верим» (встраивается в страницу «О миссии»)
function BeliefsSection() {
  return (
    <React.Fragment>
      <section style={{ background: "var(--cream)", padding: "88px 40px", borderTop: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 980, margin: "0 auto" }}>
          <SectionHead eyebrow="Вероучение" title="Во что мы верим"
            intro="Кратко о том, что лежит в основании нашей веры, жизни и служения." />

          {/* Ведущий абзац */}
          <p style={{ fontFamily: "var(--font-ui)", fontWeight: 400, fontSize: 22, lineHeight: 1.6,
            color: "var(--ink)", margin: "44px 0 8px", maxWidth: 760, textWrap: "pretty" }}>{CREED_LEAD}</p>

          {/* Положения вероучения */}
          <div style={{ marginTop: 40 }}>
            {CREED.map((c, i, arr) => <CreedItem key={c.label} n={i + 1} last={i === arr.length - 1} {...c} />)}
          </div>
        </div>
      </section>

      {/* Завершающий акцент */}
      <section style={{ padding: "0 40px 40px", background: "var(--cream)" }}>
        <div style={{ maxWidth: 980, margin: "0 auto", background: "var(--green-deep)",
          borderRadius: 28, padding: "56px 48px", position: "relative", overflow: "hidden", textAlign: "center" }}>
          <p className="h2" style={{ position: "relative", color: "var(--cream)", margin: "0 auto", maxWidth: 720 }}>
            «Прославлять Бога, служить людям и делиться благой вестью о Христе — с уважением, любовью и открытым сердцем.»
          </p>
        </div>
      </section>
    </React.Fragment>
  );
}

// Тонкая обёртка-страница (на случай старых ссылок/истории браузера)
function BeliefsPage() {
  return (
    <div>
      <PageHero eyebrow="Вероучение" title="Во что мы верим"
        intro="Кратко о том, что лежит в основании нашей веры, жизни и служения."
        image="../../assets/page-heroes/about-news.png" imagePosition="center center" />
      <BeliefsSection />
    </div>
  );
}

Object.assign(window, { BeliefsPage, BeliefsSection });
