// 시안 B — A 구조 + C 톤 (혼합형)
// Classic의 모든 콘텐츠 구조를 그대로 사용하되,
// C(Devotional)의 부드러운 배경·라운드 톤·민트 강조를 입힌 버전.
const { useState, useEffect, useRef, useMemo } = React;
const { useScrollSpy, NAV_ITEMS, scrollToId, Icon, LogoLockup, CrossPattern, PhotoSlot,
  SectionTitle, YouTubeCard, YouTubeArchive, ArchiveList, CrossBadge,
  IllustratedMap, KakaoEmbedMap, copyText, useCopyButton } = window;

function BlendedNav() {
  const active = useScrollSpy(NAV_ITEMS.map((i) => i.id));
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 30);
    fn();
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={scrolled ? "blended-nav scrolled" : "blended-nav"} style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "color-mix(in oklab, var(--paper) 92%, transparent)" : "transparent",
      backdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px) saturate(140%)" : "none",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all .25s ease",
    }}>
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 32px" }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); scrollToId("home"); }} style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none" }} className="blended-nav-logo">
          <LogoLockup variant="blue" height={170} />
        </a>
        <div className="nav-scroll-wrap" style={{ position: "relative", minWidth: 0 }}>
          <nav className="desk-nav" style={{ display: "flex", gap: 4, alignItems: "center" }}>
          {NAV_ITEMS.map((item) =>
            <button key={item.id}
              onClick={() => scrollToId(item.id)}
              style={{
                // C안 스타일: 민트 라운드 강조
                border: 0,
                background: item.accent
                  ? "var(--mint-deep)"
                  : (active === item.id ? "var(--mint-soft)" : "transparent"),
                color: item.accent
                  ? "white"
                  : (active === item.id ? "var(--ink)" : "var(--ink-3)"),
                padding: item.accent ? "9px 18px" : "8px 14px",
                marginLeft: item.accent ? 6 : 0,
                borderRadius: 999,
                fontFamily: "var(--font-sans)",
                fontSize: 14,
                fontWeight: item.accent ? 700 : 500,
                transition: "all .15s ease",
                display: "inline-flex", alignItems: "center", gap: 6,
                boxShadow: item.accent ? "0 6px 18px -8px rgba(78,164,159,0.5)" : "none",
              }}>
              {item.accent && <span style={{ width: 5, height: 5, borderRadius: 999, background: "white" }} />}
              {item.label}
            </button>
          )}
          <a href="#" onClick={(e) => { e.preventDefault(); scrollToId("media"); }} className="btn" style={{
            marginLeft: 8, padding: "9px 16px", fontSize: 13,
            background: "var(--primary)", color: "white", border: "1px solid var(--primary)"
          }}>
            <Icon.youtube size={16} /> 온라인 예배
          </a>
        </nav>
          {/* 모바일에서 우측 페이드 + 화살표 힌트 — 더 많은 메뉴가 있다는 시그널 */}
          <span className="nav-scroll-hint" aria-hidden="true">›</span>
        </div>
        <button className="mob-toggle" onClick={() => setOpen(!open)} style={{ display: "none", border: 0, background: "transparent", color: "var(--ink)" }}>
          {open ? <Icon.close /> : <Icon.menu />}
        </button>
      </div>
      {open &&
        <div className="mob-panel" style={{ borderTop: "1px solid var(--line)", padding: "12px 20px", background: "var(--card)" }}>
          {NAV_ITEMS.map((item) =>
            <button key={item.id} onClick={() => { scrollToId(item.id); setOpen(false); }} style={{
              display: item.accent ? "flex" : "block",
              alignItems: "center",
              gap: 8,
              width: "100%",
              textAlign: "left",
              padding: item.accent ? "14px 16px" : "12px 6px",
              marginTop: item.accent ? 10 : 0,
              border: 0,
              background: item.accent ? "var(--mint-deep)" : "transparent",
              color: item.accent ? "white" : "var(--ink)",
              fontFamily: "var(--font-sans)",
              fontSize: 15,
              fontWeight: item.accent ? 700 : 500,
              borderRadius: item.accent ? 10 : 0,
              boxShadow: item.accent ? "0 8px 22px -10px rgba(78,164,159,0.5)" : "none",
            }}>
              {item.accent && <span style={{ width: 6, height: 6, borderRadius: 999, background: "white" }} />}
              {item.label}
              {item.accent && <span style={{ marginLeft: "auto", fontSize: 12, opacity: 0.85 }}>→</span>}
            </button>
          )}
        </div>
      }
      <style>{`
        /* nav-scroll-wrap 기본 — desktop: 단순 컨테이너 */
        .nav-scroll-wrap { flex-shrink: 0; }
        .nav-scroll-hint { display: none; }

        /* 로고 사이즈 transition (모바일 스크롤에 따라 변화) */
        .blended-nav-logo img, .blended-nav-logo svg { transition: height .25s ease; width: auto !important; }
        .blended-nav .container { transition: padding .25s ease; }

        @media (max-width: 880px) {
          /* 컨테이너 — 로고와 nav 사이 간격 */
          header.blended-nav > .container {
            padding: 14px 16px !important;
            gap: 8px;
            flex-wrap: nowrap !important;
          }
          /* nav-scroll-wrap: 메뉴 + 페이드 힌트 컨테이너 */
          .nav-scroll-wrap {
            flex: 1 1 0%;
            min-width: 0;
            position: relative;
          }
          /* 메뉴 strip — 가로 스크롤 */
          .blended-nav-logo { flex-shrink: 0; }
          .blended-nav-logo img { height: 80px !important; } .blended-nav-logo svg { height: 80px !important; width: auto !important; }
          .desk-nav {
            display: flex !important;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            gap: 2px !important;
            flex-wrap: nowrap;
            padding-right: 24px; /* 페이드 영역 확보 */
          }
          .desk-nav::-webkit-scrollbar { display: none; }
          .desk-nav > button {
            padding: 6px 10px !important;
            font-size: 12px !important;
            flex-shrink: 0;
            white-space: nowrap;
          }
          .desk-nav > a.btn { display: none !important; }
          /* 우측 페이드 + 화살표 힌트 */
          .nav-scroll-hint {
            display: inline-flex !important;
            position: absolute;
            right: 0; top: 50%;
            transform: translateY(-50%);
            width: 26px; height: 100%;
            align-items: center; justify-content: flex-end;
            padding-right: 4px;
            color: var(--ink-3);
            font-size: 18px; font-weight: 700;
            pointer-events: none;
            background: linear-gradient(to right, transparent 0%, var(--paper) 60%);
            z-index: 2;
          }
          header.blended-nav.scrolled .nav-scroll-hint {
            background: linear-gradient(to right, transparent 0%, color-mix(in oklab, var(--paper) 92%, transparent) 60%);
          }
          .mob-toggle {
            display: inline-flex !important;
            flex-shrink: 0;
          }

          /* 스크롤된 상태: 로고 축소, 헤더 컴팩트화 */
          header.blended-nav.scrolled .blended-nav-logo img { height: 40px !important; } header.blended-nav.scrolled .blended-nav-logo svg { height: 40px !important; width: auto !important; }
          header.blended-nav.scrolled > .container {
            padding: 8px 16px !important;
          }
        }
        @media (max-width: 520px) {
          .blended-nav-logo img { height: 64px !important; } .blended-nav-logo svg { height: 64px !important; width: auto !important; }
          header.blended-nav.scrolled .blended-nav-logo img { height: 36px !important; } header.blended-nav.scrolled .blended-nav-logo svg { height: 36px !important; width: auto !important; }
          .desk-nav > button {
            padding: 5px 8px !important;
            font-size: 11px !important;
          }
        }
      `}</style>
    </header>);
}

// C안의 부드러운 빛 배경 (재현)
function SoftLightBackground({ intensity = 0.6 }) {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none", zIndex: 0 }}>
      <div style={{
        position: "absolute", top: "-10%", left: "-10%", width: "60%", height: "60%",
        background: "radial-gradient(circle, rgba(127,193,190,0.45) 0%, transparent 60%)",
        filter: "blur(80px)", opacity: intensity,
      }} />
      <div style={{
        position: "absolute", bottom: "-20%", right: "-10%", width: "70%", height: "70%",
        background: "radial-gradient(circle, rgba(108,138,184,0.35) 0%, transparent 60%)",
        filter: "blur(90px)", opacity: intensity,
      }} />
      <div style={{
        position: "absolute", top: "30%", right: "15%", width: "30%", height: "30%",
        background: "radial-gradient(circle, rgba(182,222,219,0.45) 0%, transparent 60%)",
        filter: "blur(70px)", opacity: intensity,
      }} />
    </div>
  );
}

// C안 톤의 헌금 안내 (Blended Giving)
function BlendedGiving() {
  const c = window.CHURCH;
  const [copied, copy] = useCopyButton();
  return (
    <section style={{ padding: "32px 0", background: "var(--paper)", position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ position: "relative", maxWidth: 1240 }}>
        <div style={{
          background: "linear-gradient(135deg, var(--mint-soft) 0%, var(--card) 100%)",
          borderRadius: 18, padding: 24,
          border: "1px solid var(--line)",
          display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 20, alignItems: "center",
        }} className="b-giving-grid">
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <div className="eyebrow" style={{ color: "var(--mint-deep)", marginBottom: 6 }}>Offering · 헌금 안내</div>
            <h3 className="b-giving-h3" style={{ fontSize: 20, margin: "0 0 6px", fontWeight: 500, lineHeight: 1.3, color: "var(--ink)" }}>
              온라인으로도 헌금을 드릴 수 있습니다.
            </h3>
            <p style={{ fontFamily: "var(--font-sans)", color: "var(--ink-3)", fontSize: 14, margin: 0 }}>
              <span className="b-giving-sub-full">십일조·감사·선교·구제 등 모든 헌금은 아래 계좌로 송금하실 수 있습니다.</span>
              <span className="b-giving-sub-short">십일조·감사·선교·구제 등 모든 헌금</span>
            </p>
          </div>
          <div className="b-giving-card" style={{
            background: "white", borderRadius: 14, padding: "8px 16px",
            boxShadow: "0 8px 24px -12px rgba(20,30,60,0.15)",
            display: "flex", flexDirection: "column", justifyContent: "center",
            fontFamily: "var(--font-sans)", alignSelf: "center",
          }}>
            <div style={{ fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--ink-3)", fontWeight: 700 }}>온라인 헌금 계좌</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 4 }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 600, color: "var(--ink)", whiteSpace: "nowrap" }}>
                신한 100-034-146193
              </div>
              <button className="btn" style={{
                background: copied ? "var(--mint-soft)" : "var(--mint-deep)",
                color: copied ? "var(--mint-deep)" : "white",
                border: "none", fontSize: 12, padding: "5px 12px",
                flexShrink: 0,
                transition: "all .2s ease",
              }} onClick={() => { const acct = ((c.bankAccount||'').match(/\d[\d\-]+\d/)?.[0] || c.bankAccount || '').replace(/-/g, ''); copy(acct); }}>
                {copied ? "✓ 복사됨" : "계좌번호 복사"}
              </button>
            </div>
            <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 2, paddingLeft: 4 }}>예금주: 한국기독교장로회 세광교회</div>
          </div>
        </div>
      </div>
      <style>{`
        .b-giving-sub-short { display: none; }
        @media (max-width: 880px) {
          .b-giving-grid { grid-template-columns: 1fr !important; padding: 20px !important; gap: 14px !important; }
          .b-giving-h3 { display: none !important; }
          .b-giving-sub-full { display: none !important; }
          .b-giving-sub-short { display: inline !important; }
          .b-giving-card { width: fit-content; margin: 0 auto; }
        }
      `}</style>
    </section>
  );
}

// 메인 — Classic의 콘텐츠 컴포넌트를 그대로 재활용하되 배경·헌금만 교체
function VariantBlended({ heroExtra = "sermon", weeklyVer = 0 }) {
  return (
    <div className="blended-root" style={{ background: "var(--paper)", position: "relative", minHeight: "100vh" }}>
      {/* C안 풍의 부드러운 빛 배경 (전역) */}
      <div style={{ position: "fixed", inset: 0, pointerEvents: "none", zIndex: 0 }}>
        <SoftLightBackground intensity={0.6}/>
      </div>
      <div style={{ position: "relative", zIndex: 1 }}>
        <BlendedNav/>
        <main>
          <ClassicHero heroExtra={heroExtra}/>
          <ClassicMission/>
          <ClassicAbout/>
          <ClassicWorship/>
          <ClassicThisWeek weeklyVer={weeklyVer}/>
          <ClassicMedia/>
          <ClassicPrayer/>
          <BlendedVisitWrap/>
          <BlendedGiving/>
          <SegyangGallery/>
        </main>
        <ClassicFooter/>
      </div>
      {/* Classic 섹션들의 자체 배경 무효화 — C안 톤이 전체에 깔리도록 */}
      <style>{`
        .blended-root section { background: transparent !important; }
        .blended-root section > * { position: relative; z-index: 1; }
        /* paper-2/paper-3 카드 자체는 유지하되, 섹션 백그라운드만 투명 */
        .blended-root footer { background: rgba(235, 231, 221, 0.65) !important; backdrop-filter: blur(8px); }
        .blended-root #media { background: transparent !important; }
      `}</style>
    </div>);
}

// 오시는 길은 ClassicVisit을 사용하되, 안쪽의 자체 헌금 카드는 숨김
// (B안에서는 BlendedGiving을 별도 섹션으로 분리해 사용하므로 중복 방지)
function BlendedVisitWrap() {
  return (
    <div className="b-hide-classic-giving">
      <ClassicVisit/>
      <style>{`
        /* ⚠️ 유지 필수 — ClassicVisit 내부의 헌금 카드 중복 노출 방지 */
        .b-hide-classic-giving .giving-grid {
          display: none !important;
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { VariantBlended });
