// MinistryPage.jsx — раздел «Служение»: ОПИСАНИЕ служений (что это, для кого, зачем).
// Конкретная реализация (обложки, плеер) — во вкладке «Медиа»; отсюда туда ведут кнопки.

// Кликабельная плашка во всю ширину с плавной hover-анимацией (зум фото + акцент текста)
function MinistryPanel({ id, title, icon, image, paragraphs, cta, onCta, flip }) {
  const [hover, setHover] = React.useState(false);
  const tapStartRef = React.useRef(null);

  const startTap = (event) => {
    tapStartRef.current = {
      x: event.clientX,
      y: event.clientY,
    };
  };

  const finishTap = (event) => {
    const start = tapStartRef.current;
    tapStartRef.current = null;
    if (!start) return;
    const dx = Math.abs(event.clientX - start.x);
    const dy = Math.abs(event.clientY - start.y);
    if (dx > 8 || dy > 8) return;
    onCta();
  };

  const photo = (
    <div style={{ position: "relative", minHeight: 520, overflow: "hidden" }} className="kit-min-photo">
      <img src={image} alt={title} loading="lazy"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
          display: "block" }} />
    </div>
  );
  const textCol = (
    <div data-anchor-content style={{ position: "relative", zIndex: 2, padding: "clamp(44px, 5vw, 80px)",
      display: "flex", flexDirection: "column", justifyContent: "center" }} className="kit-min-text">
      <div style={{ maxWidth: 520, marginLeft: flip ? "auto" : 0 }}>
        <h2 className="h1" style={{ color: hover ? "var(--terracotta)" : "var(--ink)",
          margin: "0 0 18px", transition: "color .3s ease" }}>{title}</h2>
        {paragraphs.map((p, i) => (
          <p key={i} style={{ fontFamily: "var(--font-ui)", fontSize: 17, lineHeight: 1.7,
            color: "var(--graphite)", margin: "0 0 14px", maxWidth: 480, textWrap: "pretty" }}>{p}</p>
        ))}
        {/* акцентная ссылка-подсказка */}
        <button type="button" onClick={(event) => { event.stopPropagation(); onCta(); }} style={{ marginTop: 24, display: "inline-flex", alignItems: "center", gap: 10,
          fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 16,
          color: hover ? "var(--terracotta-bright)" : "var(--terracotta)", transition: "color .3s ease",
          background: "transparent", border: "none", padding: 0, cursor: "pointer", textAlign: "left" }}>
          <span style={{ position: "relative" }}>
            {cta}
            <span style={{ position: "absolute", left: 0, bottom: -3, height: 2, background: "currentColor",
              width: hover ? "100%" : "0%", transition: "width .4s cubic-bezier(.22,1,.36,1)" }} />
          </span>
          <span style={{ display: "inline-flex", transform: hover ? "translateX(5px)" : "translateX(0)",
            transition: "transform .4s cubic-bezier(.22,1,.36,1)" }}>
            <Icon name="arrow-right" size={19} />
          </span>
        </button>
      </div>
    </div>
  );

  return (
    <section id={id}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      onPointerDown={startTap} onPointerUp={finishTap} onPointerCancel={() => { tapStartRef.current = null; }}
      role="button" tabIndex={0} aria-label={cta}
      onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onCta(); } }}
      style={{ position: "relative", overflow: "hidden", background: "#fff", cursor: "pointer",
        scrollMarginTop: 80, borderTop: "1px solid var(--line)" }} className="kit-min-panel-outer">
      <div style={{ position: "relative", zIndex: 1, display: "grid",
        gridTemplateColumns: flip ? "1.15fr 0.85fr" : "0.85fr 1.15fr" }} className="kit-min-panel">
        {flip ? <React.Fragment>{photo}{textCol}</React.Fragment>
              : <React.Fragment>{textCol}{photo}</React.Fragment>}
      </div>
    </section>
  );
}

function MinistryBlock({ id, eyebrow, title, icon, image, paragraphs, cta, onCta, dark, flip, blob, player }) {
  const fg = dark ? "var(--cream)" : "var(--ink)";
  const fg2 = dark ? "var(--fg-on-dark-2)" : "var(--graphite)";

  const textInner = (
    <React.Fragment>
      <h2 className="h1" style={{ color: fg, margin: "0 0 18px" }}>{title}</h2>
      {paragraphs.map((p, i) => (
        <p key={i} style={{ fontFamily: "var(--font-ui)", fontSize: 17, lineHeight: 1.7,
          color: fg2, margin: "0 0 14px", maxWidth: 480, textWrap: "pretty" }}>{p}</p>
      ))}
      <div style={{ marginTop: 26 }}>
        <Button variant={dark ? "primary" : "secondary"} iconRight="arrow-right" onClick={onCta}>{cta}</Button>
      </div>
    </React.Fragment>
  );

  // ── Единая «плашка» во всю ширину: геометричное фото + кликабельный текст ──
  if (image) {
    return <MinistryPanel id={id} title={title} icon={icon} image={image}
      paragraphs={paragraphs} cta={cta} onCta={onCta} flip={flip} />;
  }

  // ── Блок без фото (тёмный, музыкальное служение) ──
  return (
    <section id={id} style={{ background: dark ? "var(--green-deep)" : "#fff",
      padding: "84px 40px", borderTop: dark ? "none" : "1px solid var(--line)",
      scrollMarginTop: 80, position: "relative", overflow: "hidden" }}>
      <div data-anchor-content style={{ maxWidth: 1280, margin: "0 auto", position: "relative",
        display: "flex", gap: 64, alignItems: player ? "flex-start" : "center", flexDirection: flip ? "row-reverse" : "row" }}
        className="kit-min-row">
        <div style={{ flex: 1, minWidth: 0 }}>{textInner}</div>
        <div style={player
          ? { flex: "1.45 1 0", minWidth: 0, position: "relative" }
          : { flex: "none", width: 560, position: "relative" }} className={"kit-min-visual" + (player ? " kit-min-player-visual" : "")}>
          {player ? (
            <ChoirPlayer compact />
          ) : (
          <div style={{ width: "100%", aspectRatio: "4 / 3", borderRadius: 24,
            background: dark ? "rgba(243,238,218,.06)" : "#fff",
            border: "1px solid " + (dark ? "rgba(243,238,218,.16)" : "var(--line)"),
            boxShadow: dark ? "none" : "var(--shadow-md)",
            display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div style={{ width: 96, height: 96, borderRadius: 26,
              background: dark ? "rgba(211,97,60,.22)" : "rgba(211,97,60,.12)",
              display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name={icon} size={44} color={dark ? "var(--terracotta-bright)" : "var(--terracotta)"} />
            </div>
          </div>
          )}
        </div>
      </div>
    </section>
  );
}

function MinistryPage({ onNav }) {
  return (
    <div>
      <PageHero eyebrow="Служение" title="Как мы служим людям"
        intro="Вера, которая проявляется в делах. Ниже — о наших изданиях и музыкальном служении: что это, для кого и зачем."
        image="../../assets/page-heroes/ministry.png" imagePosition="center center" />

      <MinistryBlock id="sl-tropinka"
        eyebrow="Издание для детей" icon="book-open" title="Журнал «Тропинка»"
        image="../../assets/mockup-tropinka.png" blob="tropinka"
        paragraphs={[
          "«Тропинка» — христианский журнал для детей. На его страницах живут библейские истории, добрые рассказы, стихи, головоломки и раскраски.",
          "Через игру и творчество дети знакомятся с Богом, учатся доброте, честности и любви к ближнему. Журнал читают в семьях, воскресных школах и на детских встречах.",
        ]}
        cta="Смотреть выпуски в Медиа" onCta={() => onNav("Медиа", "media-tropinka")} />

      <MinistryBlock id="sl-vera" flip
        eyebrow="Издание для взрослых" icon="book" title="Журнал «Вера и жизнь»"
        image="../../assets/mockup-vera.png" blob="vera"
        paragraphs={[
          "«Вера и жизнь» — журнал для взрослых о вере, которая меняет жизнь. Размышления над Писанием, свидетельства людей, ответы на трудные вопросы и истории служения.",
          "Он помогает укрепиться в вере, найти ответы и почувствовать, что на этом пути ты не один.",
        ]}
        cta="Смотреть выпуски в Медиа" onCta={() => onNav("Медиа", "media-vera")} />

      <MinistryBlock id="sl-hor" dark
        eyebrow="Музыкальное служение" icon="music" title="Детский хор" player
        paragraphs={[
          "Детский хор — это музыкальное служение нашей миссии. Дети учатся петь, дружить и вместе прославлять Бога.",
          "Хор выступает на богослужениях, праздниках и в поездках по сёлам Осетии, неся радость и надежду через песни.",
        ]}
        cta="Слушать записи в Медиа" onCta={() => onNav("Медиа", "media-audio")} />
    </div>
  );
}

Object.assign(window, { MinistryPage, MinistryBlock, MinistryPanel });