/* 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>
  );
}

/* ---------- Featured Memorial banner ---------- */
function MemorialBanner() {
  return (
    <section className="jw-memorial">
      <div className="jw-memorial-media">
        <Placeholder
          ratio="16 / 7"
          tone="night"
          label="예수의 죽음을 기념하는 행사"
          radius="0"
        />
      </div>
      <div className="jw-memorial-copy">
        <div className="jw-memorial-inner">
          <p className="jw-eyebrow">추천</p>
          <h2 className="jw-memorial-title">
            양정 회중에 오신 것을 환영합니다.
          </h2>
          <p className="jw-memorial-body">이곳에 동영상 들어올 예정입니다.</p>
          <a className="jw-cta" href="#">
            더 알아보기
            <Chevron />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- 추천 자료 (3-up feature row) ---------- */
const FEATURED = [
  {
    title: "\u2018여러분은 봉사 소식을 들을 것입니다\u2019",
    kind: "연재 기사",
    tone: "night",
  },
  {
    title: "예수를 믿기만 하면 무조건 구원을 받을 수 있습니까?",
    kind: "성경 질문과 대답",
    tone: "warm",
  },
  {
    title: "고물가 시대를 헤쳐 나가는 방법",
    kind: "깨어라! 2025년 제1호",
    tone: "sand",
  },
];

function FeaturedSection() {
  return (
    <section className="jw-sec jw-sec-light">
      <div className="jw-container">
        <div className="jw-sec-head">
          <h2 className="jw-sec-title">정보 1</h2>
          <a className="jw-sec-more" href="#">
            더 보기
            <Chevron />
          </a>
        </div>
        <div className="jw-feat-grid">
          {FEATURED.map((f, i) => (
            <a className="jw-feat-card" href="#" key={i}>
              <Placeholder ratio="16 / 10" tone={f.tone} label={f.title} />
              <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">
          <Placeholder
            ratio="1 / 1"
            tone="indigo"
            label="신세계역 성경 (연구용)"
            radius="var(--yj-radius-large)"
          />
        </div>
        <div className="jw-bible-copy">
          <p className="jw-eyebrow jw-eyebrow-dark">신세계역 성경 · 연구용</p>
          <h2 className="jw-hero-title">양정회중 구역을 알아보세요.</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 (어떤 주제에 관심이 가십니까?) ---------- */
const TOPICS = [
  { title: "맛집", tone: "blue" },
  { title: "구역", tone: "warm" },
  { title: "관광", tone: "indigo" },
  { title: "운동 할만한 곳", tone: "sand" },
  { title: "주변 쇼핑", tone: "teal" },
  { title: "화장실 비밀번호", tone: "slate" },
  { title: "과학과 성경", tone: "night" },
  { title: "역사와 성경", tone: "warm" },
  { title: "양정회중에 관해 자주 하는 질문", tone: "blue" },
];

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="#" key={i}>
              <div className="jw-topic-media">
                <Placeholder
                  ratio="1 / 1"
                  tone={t.tone}
                  label={t.title}
                  radius="var(--yj-radius-standard)"
                />
              </div>
              <h3 className="jw-topic-title">{t.title}</h3>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Three-up action cards (공부, 방문, 집회) ---------- */
const ACTIONS = [
  {
    title: "정보 1",
    body: "무료로 제공되는 일대일 맞춤형 성경 공부를 신청해 보세요.",
    tone: "warm",
  },
  {
    title: "정보 2",
    body: "성경에 관해 대화를 나누거나, 여호와의 증인에 대해 더 알아보세요.",
    tone: "blue",
  },
  {
    title: "봉사 스케줄",
    body: "집회에 대해 알아보세요. 인근에 있는 집회 장소를 찾아보세요.",
    tone: "indigo",
  },
];

function ActionsSection() {
  return (
    <section className="jw-sec jw-sec-light">
      <div className="jw-container">
        <div className="jw-action-grid">
          {ACTIONS.map((a, i) => (
            <a className="jw-action-card" href="#" key={i}>
              <Placeholder
                ratio="1 / 1"
                tone={a.tone}
                label={a.title}
                radius="var(--yj-radius-large)"
              />
              <h3 className="jw-action-title">{a.title}</h3>
              <p className="jw-action-body">{a.body}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Videos carousel ---------- */
const VIDEOS = [
  {
    title: "나보다 나이가 많은 사람과 친구가 될 수 있을까?",
    sub: "어떻게 나이가 많은 사람과 친구가 될 수 있는지 알아보세요.",
    tone: "teal",
  },
  { title: "예수의 죽음을 기억하십시오", tone: "night" },
  { title: "죽은 사람에게 희망이 있습니까?", tone: "slate" },
  { title: "해마의 꼬리—진화의 산물인가?", tone: "indigo" },
  { title: "카트리는 마침내 영적 가족을 찾게 되었습니다", tone: "warm" },
  { title: "성경 공부는 어떻게 진행됩니까?", tone: "blue" },
  { title: "왕국회관은 어떤 곳입니까?", tone: "sand" },
  { title: "여호와의 증인은 어떤 사람들입니까?", 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 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">다양한 정보들</h2>
          <a className="jw-sec-more jw-sec-more-dark" href="#">
            모두 보기
            <Chevron />
          </a>
        </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}>
              <div className="jw-video-media">
                <Placeholder
                  ratio="16 / 9"
                  tone={v.tone}
                  label={v.title}
                  radius="var(--yj-radius-standard)"
                />
                <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>
    </section>
  );
}

/* ---------- About JW long-copy section ---------- */
function AboutSection() {
  return (
    <section className="jw-sec jw-sec-light jw-about">
      <div className="jw-container">
        <h1 className="jw-about-title">양정 사람들은 어떤 사람들입니까?</h1>
        <p className="jw-about-body">
          여호와의 증인은 매우 다양한 인종적·언어적 배경을 지닌 사람들로
          이루어져 있지만, 연합하여 동일한 목표를 추구합니다. 우리는 성경에
          나오는 하느님이자 모든 것의 창조주이신 <a href="#">여호와</a>를
          영예롭게 하는 일을 가장 중요하게 생각합니다. 또한{" "}
          <a href="#">예수 그리스도</a>를 본받기 위해 최선을 다하며
          <a href="#"> 그리스도인</a>이라고 불리는 것을 자랑스럽게 여깁니다.
          증인들은 모두 정기적으로 시간을 내어 사람들이 성경과
          <a href="#"> 하느님의 왕국</a>에 관해 배우도록 돕고 있습니다. 우리가{" "}
          <a href="#">여호와의 증인</a>으로 알려져 있는 이유는 여호와 하느님과
          그분의 왕국에 관해 이야기하는 증거 활동을 하기 때문입니다.
        </p>
        <p className="jw-about-body">
          이 사이트를 둘러보십시오. <a href="#">온라인 성경을 읽어 보십시오.</a>
          여호와의 증인과 <a href="#">증인들의 신앙</a>에 대해 더 알아보십시오.
        </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">
        <Placeholder
          ratio="16 / 6"
          tone="teal"
          label="여호와의 증인 두 명이 논에서 남자에게 전도하는 모습"
          radius="0"
        />
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
const FOOTER_COLS = [
  {
    title: "성경의 가르침",
    items: ["정보", "정보", "정보", "정보"],
  },
  {
    title: "라이브러리",
    items: ["정보", "정보", "정보", "정보", "정보"],
  },
  {
    title: "안내",
    items: ["정보", "정보", "정보", "정보", "정보"],
  },
  {
    title: "바로 가기",
    items: ["정보", "정보", "정보"],
  },
];

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>
          <button className="jw-footer-pref">
            보기 설정
            <svg
              viewBox="0 0 24 24"
              width="14"
              height="14"
              aria-hidden="true"
              style={{ marginLeft: 6 }}
            >
              <path
                d="M6 9l6 6 6-6"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.6"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        </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}>
                    <a href="#">{i}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div className="jw-footer-ext">
          <a href="#">테스트</a>
          <a href="#">테스트</a>
          <a href="#">
            테스트<sup>®</sup>
          </a>
          <a href="#">테스트</a>
          <a href="#">테스트</a>
          <a href="#">테스트</a>
        </div>

        <div className="jw-footer-legal">
          <p>Copyright © 2026 Sujin Lee</p>
          <p className="jw-footer-legal-links">
            <a href="#">테스트</a> <span>|</span>
            <a href="#">테스트</a> <span>|</span>
            <a href="#">테스트</a>
          </p>
        </div>
      </div>
    </footer>
  );
}

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