/* global React */

function Placeholder({
  ratio = "3 / 2",
  label,
  tone = "blue",
  radius = "var(--yj-radius-large)",
}) {
  // Non-infringing image placeholder; evokes JW.org's blue-gray illustration palette
  // without reproducing any actual artwork.
  const palettes = {
    blue: ["#4a6da7", "#8aa3c9", "#d8e1ee"],
    warm: ["#8b6b4a", "#c9a98a", "#eedec6"],
    indigo: ["#3a4a7a", "#7388b7", "#cfd6e6"],
    slate: ["#52606d", "#9aa5b1", "#cbd2d9"],
    teal: ["#2f6b6e", "#78a6a8", "#cde0e0"],
    sand: ["#b08a5b", "#d6b98a", "#f0dfc2"],
    night: ["#1d2a44", "#3d5280", "#7388b7"],
  };
  const [a, b, c] = palettes[tone] || palettes.blue;
  return (
    <div
      className="jw-ph"
      style={{
        aspectRatio: ratio,
        background: `linear-gradient(160deg, ${a} 0%, ${b} 55%, ${c} 100%)`,
        borderRadius: radius,
      }}
      role="img"
      aria-label={label || "image placeholder"}
    >
      <svg
        viewBox="0 0 100 70"
        preserveAspectRatio="xMidYMid slice"
        className="jw-ph-art"
        aria-hidden="true"
      >
        <defs>
          <radialGradient id={`g-${tone}`} cx="50%" cy="40%" r="65%">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.22" />
            <stop offset="60%" stopColor="#fff" stopOpacity="0" />
          </radialGradient>
        </defs>
        <rect width="100" height="70" fill={`url(#g-${tone})`} />
        <circle cx="72" cy="18" r="6" fill="#fff" fillOpacity="0.22" />
        <path
          d="M0 52 Q 25 42 50 50 T 100 48 L 100 70 L 0 70 Z"
          fill="#000"
          fillOpacity="0.18"
        />
        <path
          d="M0 58 Q 30 52 58 56 T 100 55 L 100 70 L 0 70 Z"
          fill="#000"
          fillOpacity="0.12"
        />
      </svg>
    </div>
  );
}

function Chevron({ size = 12 }) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 12 12"
      aria-hidden="true"
      style={{ marginLeft: 4 }}
    >
      <path
        d="M4 2l4 4-4 4"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

/* ---------- Landing motion graphic ---------- */
function MotionHero() {
  return (
    <section className="yj-motion-hero">
      <img
        className="yj-motion-hero-image"
        src="images/main/landing-composite.jpg"
        alt="광안대교가 보이는 바닷가의 출판물 전시대와 두 인물"
      />
    </section>
  );
}

/* ---------- Featured Memorial banner ---------- */
const BANNER_VIDEO = "videos/banner.mp4";

function MemorialBanner() {
  const [hasVideo, setHasVideo] = React.useState(true);

  return (
    <section
      style={{
        position: "relative",
        overflow: "hidden",
        minHeight: 560,
        display: "flex",
        alignItems: "center",
      }}
    >
      {/* 배경 동영상 */}
      {hasVideo ? (
        <video
          autoPlay
          muted
          loop
          playsInline
          onError={() => setHasVideo(false)}
          style={{
            position: "absolute",
            inset: 0,
            width: "100%",
            height: "100%",
            objectFit: "cover",
            zIndex: 0,
          }}
        >
          <source src={BANNER_VIDEO} type="video/mp4" />
        </video>
      ) : (
        <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
          <Placeholder ratio="16 / 7" tone="night" label="배경" radius="0" />
        </div>
      )}

      {/* 어두운 오버레이 */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          zIndex: 1,
          background:
            "linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%)",
        }}
      />

      {/* 텍스트 */}
      <div
        className="jw-memorial-copy"
        style={{ position: "relative", zIndex: 2, width: "100%" }}
      >
        <div className="jw-memorial-inner">
          <p className="jw-eyebrow">추천</p>
          <h2 className="jw-memorial-title" style={{ color: "#fff" }}>
            <span style={{ fontWeight: 300 }}>양정 회중에 오신 것을 </span>
            환영합니다.
          </h2>
          <p className="jw-memorial-body">부산 대도시캠페인 양정회중</p>
          <a
            href="#/회중정보/어서오이소"
            style={{
              display: "inline-block",
              background: "#446daf",
              color: "#fff",
              fontSize: "1.1rem",
              fontWeight: 600,
              padding: "11px 26px",
              borderRadius: 0,
              textDecoration: "none",
              letterSpacing: "0.02em",
            }}
          >
            더 알아보기
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 추천 자료 (3-up feature row) ---------- */
const FEATURED = [];

const WMO_ICON = (code) => {
  if (code === 0) return "☀️";
  if (code <= 2) return "⛅";
  if (code === 3) return "☁️";
  if (code <= 48) return "🌫️";
  if (code <= 55) return "🌦️";
  if (code <= 65) return "🌧️";
  if (code <= 77) return "🌨️";
  if (code <= 82) return "🌦️";
  if (code <= 86) return "🌨️";
  return "⛈️";
};
const WMO_DESC = (code) => {
  if (code === 0) return "맑음";
  if (code <= 2) return "구름 조금";
  if (code === 3) return "흐림";
  if (code <= 48) return "안개";
  if (code <= 55) return "이슬비";
  if (code <= 65) return "비";
  if (code <= 77) return "눈";
  if (code <= 82) return "소나기";
  if (code <= 86) return "눈 소나기";
  return "천둥번개";
};
const DAY_KO = ["일", "월", "화", "수", "목", "금", "토"];

function WeatherCard() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(false);
  const [view, setView] = React.useState("hourly");

  React.useEffect(() => {
    fetch(
      "https://api.open-meteo.com/v1/forecast?latitude=35.18&longitude=129.07" +
        "&current_weather=true" +
        "&hourly=temperature_2m,weathercode,precipitation_probability,relativehumidity_2m,apparent_temperature" +
        "&daily=weathercode,temperature_2m_max,temperature_2m_min,precipitation_probability_max" +
        "&timezone=Asia%2FSeoul&forecast_days=7",
    )
      .then((r) => r.json())
      .then((d) => {
        const cur = d.current_weather;
        const nowStr = cur.time.slice(0, 13);
        const nowIdx = d.hourly.time.findIndex((t) => t.startsWith(nowStr));
        const baseIdx = nowIdx >= 0 ? nowIdx : 0;

        const humidity = d.hourly.relativehumidity_2m[baseIdx] ?? "—";
        const feels = Math.round(
          d.hourly.apparent_temperature[baseIdx] ?? cur.temperature,
        );

        const hourly = d.hourly.time
          .slice(baseIdx, baseIdx + 24)
          .map((t, i) => ({
            time: t,
            hour: new Date(t).getHours(),
            temp: Math.round(d.hourly.temperature_2m[baseIdx + i]),
            code: d.hourly.weathercode[baseIdx + i],
            rain: d.hourly.precipitation_probability[baseIdx + i] ?? 0,
            isCurrent: i === 0,
          }));

        const daily = d.daily.time.map((date, i) => ({
          date,
          code: d.daily.weathercode[i],
          max: Math.round(d.daily.temperature_2m_max[i]),
          min: Math.round(d.daily.temperature_2m_min[i]),
          rain: d.daily.precipitation_probability_max[i],
        }));

        setData({ cur, humidity, feels, hourly, daily });
      })
      .catch(() => setError(true));
  }, []);

  const TabBtn = ({ id, label }) => (
    <button
      onClick={() => setView(id)}
      style={{
        background: view === id ? "#f97316" : "rgba(255,255,255,0.12)",
        color: "#fff",
        border: "none",
        borderRadius: 6,
        padding: "5px 14px",
        fontSize: "0.78rem",
        fontWeight: 600,
        cursor: "pointer",
        fontFamily: "inherit",
        transition: "background 180ms",
      }}
    >
      {label}
    </button>
  );

  return (
    <div className="yj-weather-card-wrap" style={{ gridColumn: "1 / -1" }}>
      <div
        className="yj-weather-card"
        style={{
          background:
            "linear-gradient(135deg, #0f2a4a 0%, #1a4a7a 50%, #2d7ab5 100%)",
          color: "#fff",
          padding: "28px 32px 24px",
          borderRadius: 24,
          overflow: "hidden",
        }}
      >
        {error ? (
          <p style={{ opacity: 0.8 }}>날씨 정보를 불러올 수 없습니다.</p>
        ) : !data ? (
          <p style={{ opacity: 0.7 }}>날씨 불러오는 중…</p>
        ) : (
          <>
            {/* 현재 날씨 */}
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 24,
                marginBottom: 20,
                flexWrap: "wrap",
              }}
            >
              <div style={{ fontSize: "4rem", lineHeight: 1 }}>
                {WMO_ICON(data.cur.weathercode)}
              </div>
              <div>
                <div
                  style={{ fontSize: "3rem", fontWeight: 700, lineHeight: 1 }}
                >
                  {Math.round(data.cur.temperature)}°C
                </div>
                <div style={{ fontSize: "1rem", opacity: 0.9, marginTop: 4 }}>
                  {WMO_DESC(data.cur.weathercode)}
                </div>
                <div
                  style={{
                    fontSize: "0.8rem",
                    opacity: 0.7,
                    marginTop: 4,
                    display: "flex",
                    gap: 14,
                    flexWrap: "wrap",
                  }}
                >
                  <span>체감 {data.feels}°</span>
                  <span>습도 {data.humidity}%</span>
                  <span>풍속 {data.cur.windspeed}㎞/h</span>
                </div>
              </div>
              <div
                style={{
                  marginLeft: "auto",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "flex-end",
                  gap: 8,
                }}
              >
                <span style={{ fontSize: "0.85rem", opacity: 0.6 }}>
                  부산 · 실시간
                </span>
                <div style={{ display: "flex", gap: 6 }}>
                  <TabBtn id="hourly" label="시간별" />
                  <TabBtn id="daily" label="주간" />
                </div>
              </div>
            </div>

            <div
              style={{
                borderTop: "1px solid rgba(255,255,255,0.15)",
                paddingTop: 18,
              }}
            >
              {view === "hourly" ? (
                /* 시간대별 예보 — 주간과 동일한 7칸 그리드 */
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "repeat(7, 1fr)",
                    gap: 6,
                  }}
                >
                  {data.hourly.slice(0, 7).map((h) => {
                    const isNextDay = !h.isCurrent && h.hour === 0;
                    return (
                      <div
                        key={h.time}
                        style={{
                          textAlign: "center",
                          background: h.isCurrent
                            ? "rgba(255,255,255,0.18)"
                            : isNextDay
                              ? "rgba(255,255,255,0.06)"
                              : "transparent",
                          borderRadius: 8,
                          padding: "8px 4px",
                        }}
                      >
                        <div
                          style={{
                            fontSize: "0.75rem",
                            opacity: h.isCurrent ? 1 : 0.75,
                            fontWeight: h.isCurrent ? 700 : 400,
                            marginBottom: 4,
                          }}
                        >
                          {h.isCurrent
                            ? "지금"
                            : isNextDay
                              ? "내일"
                              : h.hour + "시"}
                        </div>
                        <div style={{ fontSize: "1.5rem" }}>
                          {WMO_ICON(h.code)}
                        </div>
                        <div
                          style={{
                            fontSize: "0.85rem",
                            fontWeight: 700,
                            marginTop: 4,
                          }}
                        >
                          {h.temp}°
                        </div>
                        {h.rain > 0 && (
                          <div
                            style={{
                              fontSize: "0.7rem",
                              opacity: 0.75,
                              marginTop: 2,
                              color: "#7ecef4",
                            }}
                          >
                            💧{h.rain}%
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              ) : (
                /* 주간 예보 */
                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "repeat(7, 1fr)",
                    gap: 6,
                  }}
                >
                  {data.daily.map((d, i) => {
                    const dayName =
                      i === 0
                        ? "오늘"
                        : i === 1
                          ? "내일"
                          : DAY_KO[new Date(d.date).getDay()] + "요일";
                    return (
                      <div
                        key={d.date}
                        style={{
                          textAlign: "center",
                          background:
                            i === 0 ? "rgba(255,255,255,0.12)" : "transparent",
                          borderRadius: 8,
                          padding: "8px 4px",
                        }}
                      >
                        <div
                          style={{
                            fontSize: "0.75rem",
                            opacity: 0.75,
                            marginBottom: 4,
                          }}
                        >
                          {dayName}
                        </div>
                        <div style={{ fontSize: "1.5rem" }}>
                          {WMO_ICON(d.code)}
                        </div>
                        <div
                          style={{
                            fontSize: "0.85rem",
                            fontWeight: 700,
                            marginTop: 4,
                          }}
                        >
                          {d.max}°
                        </div>
                        <div style={{ fontSize: "0.75rem", opacity: 0.6 }}>
                          {d.min}°
                        </div>
                        {d.rain > 0 && (
                          <div
                            style={{
                              fontSize: "0.7rem",
                              opacity: 0.7,
                              marginTop: 2,
                            }}
                          >
                            💧{d.rain}%
                          </div>
                        )}
                      </div>
                    );
                  })}
                </div>
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function FeaturedSection() {
  return (
    <section
      id="busan-weather"
      className="jw-sec jw-sec-light yj-weather-section"
    >
      <div className="jw-container">
        <div className="jw-sec-head yj-weather-heading">
          <h4 className="jw-sec-title" style={{ marginBottom: 6 }}>
            날씨
          </h4>
          <p className="jw-feat-kind" style={{ margin: 0 }}>
            BUSAN LIVE WEATHER
          </p>
        </div>
        <div className="jw-feat-grid">
          <WeatherCard />
          {FEATURED.map((f, i) => (
            <a className="jw-feat-card" href="#" key={i}>
              <Placeholder
                ratio="16 / 10"
                tone={f.tone}
                label={f.title}
                radius="0"
              />
              <p className="jw-feat-kind">{f.kind}</p>
              <h3 className="jw-feat-title">{f.title}</h3>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Online Bible promo (dark cinematic) ---------- */
function BiblePromo() {
  return (
    <section className="jw-sec jw-sec-dark jw-bible-promo">
      <div className="jw-container jw-bible-inner">
        <div className="jw-bible-art">
          <img
            src="images/territory/bujeon-2-2.jpeg"
            alt="양정회중 구역"
            style={{
              width: "100%",
              aspectRatio: "1/1",
              objectFit: "cover",
              borderRadius: 0,
              display: "block",
            }}
            onError={(e) => {
              e.target.style.display = "none";
            }}
          />
        </div>
        <div className="jw-bible-copy">
          <p className="jw-eyebrow jw-eyebrow-dark">양정구역 · 추천자료</p>
          <h2 className="jw-hero-title">
            양정회중 구역<span style={{ fontWeight: 300 }}>을 알아보세요.</span>
          </h2>
          <p className="jw-bible-sub">
            양정회중 구역은 넓고 다양한 매력을 품고 있어요. 부산의 대표적인
            번화가부터, 편한 신발이 필수인 고바위 주택가까지 다양하답니다.
          </p>
          <div className="jw-cta-row">
            <a className="jw-pill-link" href="#/양정구역/호별">
              호별구역
              <Chevron />
            </a>
            <a className="jw-pill-link jw-pill-ghost" href="#/양정구역/전시대">
              전시대 구역
              <Chevron />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Topics grid (어떤 주제에 관심이 가십니까?) ---------- */
function TopicImage({ tone, title, image }) {
  const [failed, setFailed] = React.useState(false);
  if (image && !failed) {
    return (
      <img
        src={image}
        alt={title}
        onError={() => setFailed(true)}
        style={{
          width: "100%",
          aspectRatio: "1/1",
          objectFit: "cover",
          display: "block",
        }}
      />
    );
  }
  return <Placeholder ratio="1 / 1" tone={tone} label={title} radius="0" />;
}

const TOPICS = [
  {
    title: "추천카페",
    tone: "blue",
    image: "images/main/topic-1.jpeg",
    href: "#/맛집/카페",
  },
  {
    title: "추천맛집",
    tone: "warm",
    image: "images/main/topic-2.jpeg",
    href: "#/맛집/우정",
  },
  {
    title: "부산 가볼만한 곳",
    tone: "indigo",
    image: "images/main/topic-3.jpeg",
    href: "#/맛집/부산관광",
  },
  {
    title: "의료정보",
    tone: "sand",
    image: "images/main/topic-4.jpeg",
    href: "#/안내/정보2",
  },
];

function TopicsSection() {
  return (
    <section className="jw-sec jw-sec-light">
      <div className="jw-container">
        <div className="jw-sec-head">
          <h2 className="jw-sec-title">어떤 주제에 관심이 가십니까?</h2>
        </div>
        <div className="jw-topic-grid">
          {TOPICS.map((t, i) => (
            <a className="jw-topic-card" href={t.href} key={i}>
              <div className="jw-topic-media">
                <TopicImage tone={t.tone} title={t.title} image={t.image} />
              </div>
              <h3 className="jw-topic-title">{t.title}</h3>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function ActionsSection() {
  return null;
}

/* ---------- Videos carousel ---------- */
const VIDEOS = [
  {
    title: "나보다 나이가 많은 사람과 친구가 될 수 있을까?",
    sub: "어떻게 나이가 많은 사람과 친구가 될 수 있는지 알아보세요.",
    tone: "teal",
    image: "images/tour/out-bong.jpeg",
    noPlay: true,
  },
  {
    title: "화장실 비번을 기억하십시오",
    tone: "night",
    video: "videos/toilet.mp4",
  },
  { title: "양정회중 귀욤이들?", tone: "slate" },
  { title: "가족 체육대회", tone: "indigo" },
  { title: "사진 4", tone: "warm" },
  { title: "사진 5", tone: "blue" },
  { title: "사진 6", tone: "sand" },
  { title: "사진 7", tone: "night" },
];

function PlayBadge() {
  return (
    <span className="jw-play">
      <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
        <path d="M8 5v14l11-7-11-7z" fill="currentColor" />
      </svg>
    </span>
  );
}

function VideosSection() {
  const scrollerRef = React.useRef(null);
  const [modal, setModal] = React.useState(null);
  const scroll = (dir) => {
    const el = scrollerRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * el.clientWidth * 0.8, behavior: "smooth" });
  };
  return (
    <section className="jw-sec jw-sec-dark">
      <div className="jw-container">
        <div className="jw-sec-head">
          <h2 className="jw-sec-title jw-sec-title-dark">정보 or 회중사진?</h2>
        </div>
      </div>
      <div className="jw-video-rail">
        <button
          className="jw-rail-arrow jw-rail-left"
          onClick={() => scroll(-1)}
          aria-label="이전"
        >
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path
              d="M15 6l-6 6 6 6"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </button>
        <div className="jw-video-scroller" ref={scrollerRef}>
          {VIDEOS.map((v, i) => (
            <a
              className="jw-video-card"
              href="#"
              key={i}
              onClick={(e) => {
                if (v.video) {
                  e.preventDefault();
                  setModal(v);
                }
              }}
            >
              <div className="jw-video-media">
                {v.image ? (
                  <img
                    src={v.image}
                    alt={v.title}
                    style={{
                      width: "100%",
                      aspectRatio: "16/9",
                      objectFit: "cover",
                      display: "block",
                    }}
                  />
                ) : v.video ? (
                  <video
                    src={v.video}
                    muted
                    loop
                    playsInline
                    autoPlay
                    style={{
                      width: "100%",
                      aspectRatio: "16/9",
                      objectFit: "cover",
                      display: "block",
                      pointerEvents: "none",
                    }}
                  />
                ) : (
                  <Placeholder
                    ratio="16 / 9"
                    tone={v.tone}
                    label={v.title}
                    radius="0"
                  />
                )}
                {!v.noPlay && <PlayBadge />}
              </div>
              <h3 className="jw-video-title">{v.title}</h3>
              {v.sub && <p className="jw-video-sub">{v.sub}</p>}
            </a>
          ))}
        </div>
        <button
          className="jw-rail-arrow jw-rail-right"
          onClick={() => scroll(1)}
          aria-label="다음"
        >
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path
              d="M9 6l6 6-6 6"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </button>
      </div>

      {modal && (
        <div
          onClick={() => setModal(null)}
          style={{
            position: "fixed",
            inset: 0,
            zIndex: 9999,
            background: "rgba(0,0,0,0.88)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "pointer",
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{ width: "min(92vw, 860px)" }}
          >
            <video
              src={modal.video}
              controls
              autoPlay
              playsInline
              style={{ width: "100%", borderRadius: 8, display: "block" }}
            />
            <p
              style={{
                color: "#fff",
                textAlign: "center",
                marginTop: 12,
                fontSize: "0.9rem",
                opacity: 0.8,
              }}
            >
              {modal.title}
            </p>
          </div>
        </div>
      )}
    </section>
  );
}

/* ---------- About JW long-copy section ---------- */
function AboutSection() {
  return (
    <section className="jw-sec jw-sec-dark jw-about">
      <div className="jw-container">
        <h1 className="jw-about-title">양정회중 가족들은 어떤 사람들입니까?</h1>
        <p className="jw-about-body">
          부산 양정회중 가족들은 매우 다양한 연령대,성격,취미,직업을 지닌
          사람들로 이루어져 있지만, 연합하여 동일한 목표를 추구합니다. 우리는
          성경에 나오는 하느님이자 모든 것의 창조주이신 여호와를 영예롭게 하는
          일을 가장 중요하게 생각합니다.
        </p>
        <ul className="jw-about-links">
          <li>
            <a href="#/양정구역/호별">
              양정 봉사구역은 어떤 특색이 있나요?
              <Chevron />
            </a>
          </li>
          <li>
            <a href="#/맛집/우정">
              양정회중 가족들은 무엇을 좋아하나요?
              <Chevron />
            </a>
          </li>
          <li>
            <a href="#/맛집/부산관광">
              부산에 가볼만 곳은 어딘가요?
              <Chevron />
            </a>
          </li>
        </ul>
      </div>
      <div className="jw-about-image">
        <img
          src="images/yjfamily.jpg"
          alt="양정 가족"
          className="about-family-img"
          style={{ width: "100%", display: "block", objectFit: "cover" }}
          onError={(e) => {
            e.currentTarget.style.display = "none";
          }}
        />
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
const FOOTER_COLS = [
  {
    title: "맛집-핫플",
    items: [
      { label: "맛집", href: "#/맛집/우정" },
      { label: "카페", href: "#/맛집/카페" },
      { label: "구역근처 명소", href: "#/맛집/구역내명소" },
      { label: "구역외 명소", href: "#/맛집/추천관광" },
    ],
  },
  {
    title: "안내",
    items: [{ label: "의료 정보", href: "#/안내/정보2" }],
  },
];

function Footer() {
  return (
    <footer className="jw-footer">
      <div className="jw-container">
        <div className="jw-footer-top">
          <div className="jw-footer-brand">
            <span className="jw-footer-mark">
              부산 대도시캠페인 양정회중<sup>®</sup>
            </span>
            <span className="jw-footer-tag">/ 여러분을 열렬히 환영합니다.</span>
          </div>
        </div>

        <div className="jw-footer-grid">
          {FOOTER_COLS.map((col) => (
            <div className="jw-footer-col" key={col.title}>
              <h4 className="jw-footer-h">{col.title}</h4>
              <ul>
                {col.items.map((i) => (
                  <li key={i.label}>
                    <a href={i.href}>{i.label}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="jw-footer-ext">
          <a href="https://wol.jw.org/ko/wol/h/r8/lp-ko">
            JW 온라인 라이브러리
          </a>
          <span>|</span>

          <a href="https://www.jw.org/ko/">
            jw.org<sup>®</sup>
          </a>
        </div>

        <div className="jw-footer-legal">
          <p>Copyright © 2026 부산 대도시캠페인 양정회중 info</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Placeholder,
  Chevron,
  MotionHero,
  MemorialBanner,
  FeaturedSection,
  BiblePromo,
  TopicsSection,
  ActionsSection,
  VideosSection,
  AboutSection,
  Footer,
});