// Pages.jsx — внутренние страницы (О миссии, Контакты, заглушки разделов)

// Компактная шапка внутренней страницы
function BackButton() {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={() => window.__navBack && window.__navBack()}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, cursor: "pointer",
        background: hover ? "rgba(243,238,218,.16)" : "rgba(243,238,218,.08)",
        border: "1px solid rgba(243,238,218,.28)", color: "var(--cream)",
        fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 14, padding: "9px 16px 9px 13px",
        borderRadius: 999, marginBottom: 22, transition: "all .2s ease" }}>
      <span style={{ display: "inline-flex", transform: hover ? "translateX(-2px)" : "none", transition: "transform .2s ease" }}>
        <Icon name="arrow-left" size={17} color="var(--cream)" />
      </span>
      Назад
    </button>
  );
}

function PageHero({ eyebrow, title, intro, image = "../../assets/page-heroes/about-news.png", imagePosition = "center center" }) {
  return (
    <section className="page-hero" style={{ background: "var(--green-deep)", padding: "148px 40px 112px",
      position: "relative", overflow: "hidden", "--page-hero-image": `url("${image}")`,
      "--page-hero-position": imagePosition }}>
      <div aria-hidden="true" className="page-hero-photo" />
      <div aria-hidden="true" className="page-hero-wash" />
      <div style={{ width: "100%", maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <SectionHead dark eyebrow={eyebrow} title={title} intro={intro} />
      </div>
    </section>
  );
}

function AboutPage() {
  return (
    <div>
      <PageHero eyebrow="О миссии"
        title="Кто мы и зачем мы здесь"
        intro="Северо-Осетинская миссия — это община верующих, призванных нести надежду Евангелия людям Северной Осетии."
        image="../../assets/page-heroes/about-news.png" imagePosition="center center" />
      <section style={{ background: "var(--cream)", padding: "88px 40px", position: "relative", overflow: "hidden" }}>
        <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: "24px 0 8px", maxWidth: 880, textWrap: "pretty" }}>
            Северо-Осетинская миссия начала своё служение в начале 1990-х годов — в непростое
            время перемен и больших человеческих нужд. С первых лет миссия стремилась быть
            рядом с людьми не только словом, но и делом.
          </p>

          {/* Этапы истории */}
          <div style={{ marginTop: 40 }}>
            {[
              { label: "Начало в 1990-е",
                text: "Одним из важных направлений стала гуманитарная помощь: поддержка нуждающихся семей, помощь беженцам и людям в сложных обстоятельствах. В период военных событий на Северном Кавказе, когда через регион проходили потоки беженцев из Чечни и Южной Осетии, эта помощь была особенно значимой. В разные годы миссия вела различные социальные проекты — среди них была даже собственная хлебопекарня." },
              { label: "Главное оставалось неизменным",
                text: "Со временем обстоятельства менялись, и многие гуманитарные проекты постепенно ушли в прошлое. Но главное направление сохранилось: нести людям надежду, поддержку и христианские ценности — через слово, печатные издания, радио, детские и подростковые программы." },
              { label: "Служение сегодня",
                text: "Сегодня служение стало более сосредоточенным. Ключевые направления — радио, редакционная работа и выпуск христианских журналов, среди которых «Тропинка» и «Вера и жизнь». Миссия продолжает участвовать в детском и подростковом служении: организует программы, встречи и мероприятия, создаёт пространство для полезного досуга и духовного развития." },
              { label: "Партнёрство",
                text: "Важной частью служения остаётся партнёрство с другими миссиями, церквями и общественными организациями. Миссия предоставляет журналы, материалы и поддержку, а партнёры используют эти ресурсы в работе с людьми на местах. Так служение продолжается за пределами одной организации и становится частью общего труда." },
              { label: "Детский хор",
                text: "Особое место в истории занимает детский хор. Он был создан почти тридцать лет назад и пережил уже несколько поколений участников. Сегодня в нём поют уже дети тех, кто когда-то сам был его частью. Хор выступает в разных городах, а его песни стали живым свидетельством преемственности, веры и радости." },
            ].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", textAlign: "center" }}>
          <p className="h2" style={{ color: "var(--cream)", margin: "0 auto", maxWidth: 720 }}>
            «Быть полезными людям, поддерживать семьи, говорить о вере и передавать надежду новым поколениям.»
          </p>
        </div>
      </section>
      {/* Вероучение — теперь часть страницы «О миссии» */}
      <BeliefsSection />
    </div>
  );
}

function ContactsPage() {
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [error, setError] = React.useState("");
  const [form, setForm] = React.useState({
    contact: "",
    message: "",
    name: "",
    subject: "",
  });
  const items = [
    { icon: "map-pin", h: "Адрес", t: "г. Владикавказ, Северная Осетия" },
    { icon: "mail", h: "Почта", t: "nomcc@mail.ru" },
    { icon: "phone", h: "Телефон", t: "8 (867) 251-68-83" },
  ];
  const updateField = (name) => (event) => {
    const value = event.target.value;
    setForm((current) => ({ ...current, [name]: value }));
    if (error) setError("");
  };
  const submitForm = () => {
    if (sending) return;
    const payload = {
      contact: form.contact.trim(),
      message: form.message.trim(),
      name: form.name.trim(),
      subject: form.subject.trim(),
    };
    if (!payload.name || !payload.contact || !payload.subject || !payload.message) {
      setError("Пожалуйста, заполните имя, контакт, тему и сообщение.");
      return;
    }
    setError("");
    setSending(true);
    fetch("/api/contact-requests", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        ...payload,
        formType: "contacts",
        status: "new",
      }),
    })
      .then((res) => {
        if (!res.ok) throw new Error("Не удалось отправить сообщение");
        setSent(true);
      })
      .catch(() => {
        setError("Не удалось отправить сообщение. Попробуйте ещё раз или напишите нам напрямую.");
      })
      .finally(() => {
        setSending(false);
      });
  };
  return (
    <div>
      <PageHero eyebrow="Контакты" title="Свяжитесь с нами"
        intro="Напишите нам — мы рады знакомству, молитве и общению. Ответим в ближайшее время."
        image="../../assets/page-heroes/contacts.png" imagePosition="center center" />
      <section style={{ background: "var(--cream)", padding: "88px 40px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid",
          gridTemplateColumns: "1fr 1.2fr", gap: 56 }} className="kit-2col">
          <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
            {items.map((it) => (
              <div key={it.h} style={{ display: "flex", gap: 16, alignItems: "center" }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, background: "#fff",
                  border: "1px solid var(--line)", display: "flex", alignItems: "center",
                  justifyContent: "center", flex: "none" }}>
                  <Icon name={it.icon} size={22} color="var(--terracotta)" />
                </div>
                <div>
                  <div className="caption" style={{ marginBottom: 2 }}>{it.h}</div>
                  <div style={{ fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 500, color: "var(--ink)" }}>{it.t}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ alignSelf: "start" }}>
            {sent ? (
              <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "8px 0" }}>
                <div style={{ width: 52, height: 52, borderRadius: 999, background: "rgba(1,65,56,.1)",
                  display: "flex", alignItems: "center", justifyContent: "center", flex: "none" }}>
                  <Icon name="check" size={26} color="var(--green-deep)" />
                </div>
                <div>
                  <h3 className="h3" style={{ margin: "0 0 4px" }}>Спасибо!</h3>
                  <p className="body" style={{ margin: 0 }}>Ваше сообщение отправлено. Мы скоро ответим.</p>
                </div>
              </div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="kit-2col">
                  <Field label="Имя" placeholder="Ваше имя" value={form.name} onChange={updateField("name")} />
                  <Field label="Email или телефон" placeholder="name@mail.ru" value={form.contact} onChange={updateField("contact")} />
                </div>
                <Field label="Тема" placeholder="Например: вопрос о служении" value={form.subject} onChange={updateField("subject")} />
                <Field label="Сообщение" placeholder="Напишите нам несколько слов…" value={form.message}
                  onChange={updateField("message")} textarea />
                {error && <p style={{ fontFamily: "var(--font-ui)", fontSize: 14.5,
                  lineHeight: 1.45, color: "var(--terracotta)", margin: "-4px 0 0" }}>{error}</p>}
                <div style={{ marginTop: 4 }}>
                  <Button variant="primary" iconRight="arrow-right" onClick={submitForm}
                    style={sending ? { opacity: .72, pointerEvents: "none" } : undefined}>
                    {sending ? "Отправляем..." : "Отправить"}
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

// Заглушка для разделов, которые ещё не наполнены контентом
function Placeholder({ title }) {
  return (
    <div>
      <PageHero eyebrow="Скоро" title={title}
        intro="Мы наполняем этот раздел с заботой — скоро здесь появятся материалы."
        image="../../assets/page-heroes/about-news.png" imagePosition="center center" />
      <section style={{ background: "var(--cream)", padding: "100px 40px", textAlign: "center" }}>
        <div style={{ maxWidth: 560, margin: "0 auto" }}>
          <Logomark color="var(--line-warm)" width={90} />
          <p className="lead" style={{ marginTop: 24, color: "var(--stone)" }}>
            Раздел «{title}» готовится. А пока вы можете узнать о нашей миссии,
            заглянуть в Медиа или просто написать нам — мы будем рады общению.
          </p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageHero, AboutPage, ContactsPage, Placeholder });