// Page components for the Direction 3 standalone site.

// pages.jsx — site pages

// YouTube sometimes truncates titles with "..." in the API response; strip it
// so CSS line-clamp doesn't add a second ellipsis on top.
function stripTrailingEllipsis(s = '') {
  return s.replace(/[….]{2,}\s*$/, '').trimEnd();
}

function LatestSermonBand({ lang, t, setRoute, accent }) {
  const [latest, setLatest] = React.useState(null);

  React.useEffect(() => {
    let cancelled = false;
    ytLatestPlayableVideo(YT.uploadsPlaylistId, lang).then((v) => {
      if (!cancelled) setLatest(v);
    }).catch(() => {});
    return () => { cancelled = true; };
  }, [lang]);

  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><div className="kicker" style={{ color: accent }}>◆ 02 — {t.latest}</div></Reveal>
            <Reveal delay={80}><h2 className="display-xl">{lang === 'ko' ? '이번 주의 말씀' : 'This week, the Word'}</h2></Reveal>
          </div>
          <a className="link-underline" href="#sermons" onClick={(e) => {e.preventDefault();setRoute('sermons');}}>
            {t.misc.viewAll} →
          </a>
        </div>
        <Reveal delay={120}>
          <div className="yt-feature">
            <div className="yt-feature-video">
              {latest
                ? <YouTubeEmbed videoId={latest.videoId} />
                : <YouTubeEmbed playlistId={YT.uploadsPlaylistId} />}
            </div>
            <div className="yt-feature-meta">
              <div>
                <div className="yt-status">
                  <span className="dot" />
                  {lang === 'ko' ? '최근 업로드' : 'Latest uploads'}
                </div>
                <h3 className="display-l" style={{ marginTop: 18 }}>
                  {stripTrailingEllipsis(latest?.title) || (lang === 'ko' ? '이번 주 말씀을 들어보세요' : "Listen to this week's message")}
                </h3>
                <div className="muted" style={{ marginTop: 12 }}>
                  {latest?.publishedAt
                    ? new Date(latest.publishedAt).toLocaleDateString(lang === 'ko' ? 'ko-KR' : 'en-US', { year: 'numeric', month: 'long', day: 'numeric' })
                    : (lang === 'ko' ? '그리심소망교회 유튜브 채널' : 'Gerizim Hope YouTube channel')}
                </div>
              </div>
              <div>
                <a
                  href="#sermons"
                  onClick={(e) => {e.preventDefault();setRoute('sermons');}}
                  className="link-underline"
                  style={{ color: accent }}>

                  {lang === 'ko' ? '모든 말씀 보기' : 'All sermons'} →
                </a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

// Picked once per page load so the home strip varies between visits but
// stays put while browsing or switching language.
const HERO_PICK = { retreat: Math.random(), older: Math.random() };

function HomePage({ lang, t, setRoute, layout, accent, accentTone, seminarActive, openSeminar }) {
  const pick = (pool, r) => pool[Math.floor(r * pool.length)];
  const [heroRetreatLabel, heroRetreatSrc] = pick(t.heroRotation.retreat, HERO_PICK.retreat);
  const [heroOlderLabel, heroOlderSrc] = pick(t.heroRotation.older, HERO_PICK.older);
  return (
    <main id="main-content">
      {/* Hero variants */}
      {layout === 'fullbleed' &&
      <section className="hero-fullbleed">
          <Photo
          src="site/img/church-aerial-hero.jpg"
          label={lang === 'ko' ? '예배당 — 빛이 임하는' : 'Sanctuary — light arriving'}
          ratio="auto" />
        
          <div className="hero-fullbleed-overlay" />
          <div className="hero-fullbleed-inner container">
            <div className="kicker on-dark">{t.indicator} / 2026</div>
            <Reveal>
              <h1 className="display-mega">
                {lang === 'ko' ? '의와 영광의 빛.' : 'Light of righteousness.'}
              </h1>
            </Reveal>
            <Reveal delay={150}><div className="kicker on-dark" style={{ marginTop: 24 }}>{t.scriptures}</div></Reveal>
          </div>
        </section>
      }

      {layout === 'split' &&
      <section className="hero-split">
          <div className="hero-split-text container-fluid">
            <Reveal>
              <div className="kicker" style={{ color: accent }}>◆ {t.indicator}</div>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="display-xxxl" style={{ marginTop: 28 }}>
                {lang === 'ko' ? '의의 빛을\n발하라' : 'Shine\nthe light.'}
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <div className="hero-split-foot">
                <p className="lead">{t.tagline}</p>
                <div className="kicker" style={{ marginTop: 18 }}>{t.scriptures}</div>
              </div>
            </Reveal>
          </div>
          <div className="hero-split-image">
            <Photo
            src="site/img/church-aerial-portrait.jpg"
            label={lang === 'ko' ? '본당' : 'Sanctuary'}
            ratio="auto" />
          
          </div>
        </section>
      }

      {layout === 'poster' &&
      <section className="hero-poster">
          <div className="container">
            <div className="hero-poster-meta">
              <span>VOL. 20 — {t.indicator}</span>
              <span>NORCROSS, GA — EST. 2006</span>
            </div>
            <div className="hero-poster-body">
              <Reveal>
                <h1 className={`display-mega hero-poster-title${lang === 'ko' ? ' hero-poster-title-ko' : ''}`}>
                  {lang === 'ko' ? <>의와 영광<span style={{ color: accent }}>의</span>, 빛.</> :
                <>Right<span style={{ color: accent }}>·</span>eous.</>}
                </h1>
              </Reveal>
              <Reveal delay={150}>
                <div className="hero-poster-blurb">
                  <p className="hero-poster-blurb-text">{t.tagline}</p>
                  <div className="kicker hero-poster-scriptures">{t.scriptures}</div>
                </div>
              </Reveal>
            </div>
          </div>
          <div className="hero-poster-strip">
            <div className="hero-strip-cell hero-strip-wide">
              <Photo
              src="site/img/church-aerial-hero.jpg"
              label={lang === 'ko' ? '교회 전경' : 'Church'}
              ratio="auto" />
            
            </div>
            <div className="hero-strip-cell">
              <Photo
              src={heroRetreatSrc}
              label={heroRetreatLabel}
              ratio="3 / 4" />

            </div>
            <div className="hero-strip-cell hero-strip-hide-mobile">
              <Photo
              src={heroOlderSrc}
              label={heroOlderLabel}
              ratio="3 / 4" />
            
            </div>
          </div>
        </section>
      }

      {seminarActive &&
      <section className="section section-seminar">
          <div className="container">
            <Reveal>
              <button type="button" className="seminar-card" onClick={openSeminar} style={{ borderLeftColor: accent }}>
                <div className="seminar-card-media">
                  <img src={t.seminar.flyer} alt={t.seminar.alt} loading="lazy" />
                </div>
                <div className="seminar-card-body">
                  <div className="kicker" style={{ color: accent }}>◆ {t.seminar.badge}</div>
                  <h2 className="display-l seminar-card-title">{t.seminar.title}</h2>
                  <div className="mono seminar-card-date">{t.seminar.dateLine}</div>
                  <span className="link-underline seminar-card-link" style={{ color: accent }}>
                    {lang === 'ko' ? '자세히 보기' : 'Learn more'} →
                  </span>
                </div>
              </button>
            </Reveal>
          </div>
        </section>
      }

      {/* Welcome */}
      <section className="section section-welcome">
        <div className="container container-narrow">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ 01 — {t.welcomeTitle}</div></Reveal>
          <Reveal delay={100}>
            <p className="display-lead">{t.welcomeBody}</p>
          </Reveal>
          <Reveal delay={180}>
            <a className="btn btn-dark" href="#welcome" onClick={(e) => {e.preventDefault();setRoute('welcome');}}>
              {t.misc.forFirstTime} →
            </a>
          </Reveal>
        </div>
      </section>

      {/* Latest sermon */}
      <LatestSermonBand lang={lang} t={t} setRoute={setRoute} accent={accent} />

      {/* Services */}
      <section className="section">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ 03 — {lang === 'ko' ? '예배' : 'Worship'}</div></Reveal>
          <Reveal delay={80}>
            <h2 className="display-xxxl" style={{ marginTop: 18, marginBottom: 60 }}>
              {lang === 'ko' ? '함께 모여' : 'Gather together'}
            </h2>
          </Reveal>
          <div className="services-grid">
            {t.services.map(([name, time, room, groups], i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="service-cell">
                  <div className="service-num" style={{ color: accent }}>0{i + 1}</div>
                  <div className="service-body">
                    <div className="display-s">{name}</div>
                    <div className="mono">{time}</div>
                    <div className="muted small">{room}</div>
                  </div>
                  {groups?.length > 0 && (
                    <ul className="service-groups">
                      {groups.map(([gname, gtime]) => (
                        <li key={gname}>
                          <span className="muted small">{gname}</span>
                          <span className="mono small">{gtime}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </main>);

}

function AboutPage({ lang, t, accent, accentTone }) {
  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {t.aboutKicker} / VOL. 20</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>20년<span style={{ color: accent }}>의</span> 빛.</> : <>Twenty year<span style={{ color: accent }}>s</span>.</>}
          </h1></Reveal>
          <Reveal delay={150}><p className="lead" style={{ marginTop: 32, maxWidth: 720, fontSize: 'var(--fs-s)' }}>{t.aboutLead}</p></Reveal>
        </div>
      </section>
      <section>
        <Photo
          src="site/img/church-aerial-wide.jpg"
          label={lang === 'ko' ? '교회 외관' : 'Church'}
          ratio="21 / 9" />

      </section>
      <section className="section section-bordered">
        <div className="container container-narrow about-narrative">
          <Reveal>
            <p className="lead" style={{ fontSize: 'var(--fs-s)' }}>{t.aboutNarrative.intro}</p>
          </Reveal>
          <Reveal delay={80}>
            <p className="lead" style={{ marginTop: 28, fontSize: 'var(--fs-s)' }}>{t.aboutNarrative.origin}</p>
          </Reveal>
          <div style={{ marginTop: 72, display: 'flex', flexDirection: 'column', gap: 56 }}>
            {t.aboutNarrative.pillars.map(([heading, body], i) => (
              <Reveal key={i} delay={i * 60}>
                <div>
                  <div className="kicker" style={{ color: accent }}>◆ 0{i + 1}</div>
                  <h3 className="display-m" style={{ marginTop: 12 }}>{heading}</h3>
                  <p className="muted" style={{ marginTop: 16, fontSize: 16, lineHeight: 1.75 }}>{body}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={120}>
            <p
              className="lead"
              style={{ marginTop: 80, paddingTop: 40, borderTop: `1px solid var(--line)`, whiteSpace: 'pre-line', fontSize: 'var(--fs-s)' }}>
              {t.aboutNarrative.closing}
            </p>
          </Reveal>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {t.leadershipKicker}</div></Reveal>
          <Reveal delay={80}><h2 className="display-xxxl" style={{ marginTop: 18, marginBottom: 56 }}>{t.leadershipTitle}</h2></Reveal>
          <div className="leaders-grid leaders-grid-two">
            {t.leadership.map(([name, role, tone, bio, creds, src], i) =>
            <Reveal key={i} delay={i * 100}>
                <div className="leader-card">
                  <div className="leader-photo">
                    <Photo label={name} ratio="3 / 4" tone={tone} tag={String(i + 1).padStart(2, '0')} src={src} />
                  </div>
                  <div className="leader-meta">
                    <div className="kicker" style={{ color: accent }}>{role}</div>
                    <div className="display-m" style={{ marginTop: 10 }}>{name}</div>
                    <p className="muted" style={{ marginTop: 14, fontSize: 15, lineHeight: 1.7 }}>{bio}</p>
                    {creds && creds.length > 0 &&
                  <ul className="leader-creds">
                        {creds.map((c, j) => <li key={j}>{c}</li>)}
                      </ul>
                  }
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="values-grid">
            {[
            [lang === 'ko' ? '말씀' : 'Word', lang === 'ko' ? '구속사 강해를 통해 성경을 깊이 듣습니다.' : 'Hearing Scripture through redemptive-history exposition.'],
            [lang === 'ko' ? '기도' : 'Prayer', lang === 'ko' ? '토요 새벽 기도회로 함께 무릎 꿇습니다.' : 'Kneeling together at the Saturday dawn prayer gathering.'],
            [lang === 'ko' ? '교제' : 'Fellowship', lang === 'ko' ? '식탁과 교제 가운데 가족을 이룹니다.' : 'Becoming family around the table.']].
            map(([h, body], i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="value-cell">
                  <div className="value-num" style={{ color: accent }}>0{i + 1}</div>
                  <div className="display-m">{h}</div>
                  <p className="muted" style={{ marginTop: 12, fontSize: 15, lineHeight: 1.65 }}>{body}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
    </main>);

}

function SermonsPage({ lang, t, accent }) {
  const [activePid, setActivePid] = React.useState(YT.playlists[0].id);
  const [videos, setVideos] = React.useState(null);   // null = loading, [] = empty/no key
  const [activeVideoId, setActiveVideoId] = React.useState(null);
  const activeMeta = YT.playlists.find((p) => p.id === activePid) || YT.playlists[0];

  React.useEffect(() => {
    let cancelled = false;
    setVideos(null);
    setActiveVideoId(null);
    ytFetchPlaylistItems(activePid, 50).then((items) => {
      if (cancelled) return;
      const filtered = (items || []).filter(
        v => lang === 'ko' ? ytIsKorean(v.title) : !ytIsKorean(v.title)
      );
      setVideos(filtered);
      if (filtered.length) setActiveVideoId(filtered[0].videoId);
    }).catch(() => { if (!cancelled) setVideos([]); });
    return () => { cancelled = true; };
  }, [activePid, lang]);

  const activeVideo = videos && videos.find((v) => v.videoId === activeVideoId);

  const formatDate = (iso) => {
    if (!iso) return '';
    try {
      return new Date(iso).toLocaleDateString(lang === 'ko' ? 'ko-KR' : 'en-US', {
        year: 'numeric', month: 'short', day: 'numeric',
      });
    } catch (_) { return ''; }
  };

  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {lang === 'ko' ? '말씀영상' : 'Sermons'}</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>말씀<span style={{ color: accent }}>,</span> 깃발.</> : <>Word as banner<span style={{ color: accent }}>.</span></>}
          </h1></Reveal>
        </div>
      </section>

      {/* Featured player */}
      <section className="section-thin">
        <div className="container">
          <Reveal>
            <div className="yt-feature">
              <div className="yt-feature-video">
                {activeVideoId
                  ? <YouTubeEmbed videoId={activeVideoId} />
                  : <YouTubeEmbed playlistId={activePid} />}
              </div>
              <div className="yt-feature-meta">
                <div>
                  <div className="yt-status">
                    <span className="dot" />
                    {lang === 'ko' ? '재생목록' : 'Playlist'}
                  </div>
                  <div className="kicker" style={{ marginTop: 18, color: accent }}>
                    {lang === 'ko' ? activeMeta.ko : activeMeta.en}
                  </div>
                  <h3 className="display-l" style={{ marginTop: 10 }}>
                    {stripTrailingEllipsis(activeVideo?.title) || (lang === 'ko' ? `${activeMeta.ko} 모음` : `${activeMeta.en} sermons`)}
                  </h3>
                  <div className="muted" style={{ marginTop: 12 }}>
                    {activeVideo?.publishedAt
                      ? formatDate(activeVideo.publishedAt)
                      : (lang === 'ko'
                          ? '아래 목록에서 영상을 선택하세요.'
                          : 'Pick a video from the list below.')}
                  </div>
                </div>
                <div>
                  <a
                    href={`https://www.youtube.com/playlist?list=${activePid}`}
                    target="_blank"
                    rel="noreferrer"
                    className="link-underline"
                    style={{ color: accent }}>

                    {lang === 'ko' ? '재생목록 전체 보기' : 'Open playlist on YouTube'} ↗
                  </a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Playlist tabs */}
      <section className="section-thin section-bordered-top">
        <div className="container filter-row">
          <div className="filter-chips">
            {YT.playlists.map((p) => (
              <button
                key={p.id}
                onClick={() => setActivePid(p.id)}
                className={`chip ${activePid === p.id ? 'on' : ''}`}
                aria-pressed={activePid === p.id}>

                {lang === 'ko' ? p.ko : p.en}
              </button>
            ))}
          </div>
          <div className="kicker">
            {videos === null
              ? (lang === 'ko' ? '불러오는 중…' : 'Loading…')
              : (lang === 'ko' ? `${videos.length}개 영상` : `${videos.length} videos`)}
          </div>
        </div>
      </section>

      {/* Video grid */}
      <section className="section-thin">
        <div className="container">
          {videos === null && (
            <div className="muted" style={{ padding: '24px 0' }}>
              {lang === 'ko' ? '영상 목록을 불러오는 중입니다…' : 'Loading videos…'}
            </div>
          )}
          {videos && videos.length === 0 && (
            <div className="muted" style={{ padding: '24px 0' }}>
              {lang === 'ko' ? '영상을 표시할 수 없습니다.' : 'No videos to display.'}
            </div>
          )}
          {videos && videos.length > 0 && (
            <div className="yt-video-grid">
              {videos.map((v) => (
                <button
                  key={v.videoId}
                  type="button"
                  onClick={() => {
                    setActiveVideoId(v.videoId);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                  }}
                  className={`yt-video-card ${activeVideoId === v.videoId ? 'is-active' : ''}`}>
                  <div className="yt-video-thumb">
                    {v.thumb && <img src={v.thumb} alt="" loading="lazy" />}
                    <span className="yt-video-play" aria-hidden="true">▶</span>
                  </div>
                  <div className="yt-video-meta">
                    <div className="yt-video-title">{stripTrailingEllipsis(v.title)}</div>
                    <div className="yt-video-date mono">{formatDate(v.publishedAt)}</div>
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>);

}

function EventsPage({ lang, t, accent }) {
  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {lang === 'ko' ? '교회행사' : 'Events'} / 2026 — APR–JUN</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>함께하는 <span style={{ color: accent }}>날</span>.</> : <>Come togethe<span style={{ color: accent }}>r</span>.</>}
          </h1></Reveal>
        </div>
      </section>
      <section className="event-list">
        {t.eventsList.map(([d, day, name, time, room], i) =>
        <Reveal key={i} delay={i * 50}>
            <div className="event-row">
              <div className="event-row-date" style={{ color: accent }}>{d}</div>
              <div className="event-row-day kicker">{day}</div>
              <div className="event-row-name display-m">{name}</div>
              <div className="event-row-meta">
                <span className="mono">{time}</span>
                <span className="muted small">{room}</span>
              </div>
            </div>
          </Reveal>
        )}
      </section>
    </main>);

}

function WelcomePage({ lang, t, setRoute, accent }) {
  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {t.welcomePageKicker}</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>문은 열려있다<span style={{ color: accent }}>.</span></> : <>Th<span style={{ color: accent }}>e</span> door is open.</>}
          </h1></Reveal>
          <Reveal delay={150}>
            <p className="lead" style={{ marginTop: 32, maxWidth: 720, fontSize: 'var(--fs-s)' }}>
              {lang === 'ko' ?
              '처음 오시는 길이 어색하지 않도록, 한 걸음씩 함께 안내합니다.' :
              'So your first visit feels familiar — we walk through it with you, one step at a time.'}
            </p>
          </Reveal>
        </div>
      </section>
      <section className="section section-bordered">
        <div className="container">
          <div className="welcome-steps">
            {t.welcomeSteps.map(([h, body], i) =>
            <Reveal key={i} delay={i * 80}>
                <div className="welcome-step">
                  <div className="welcome-step-num" style={{ color: accent }}>0{i + 1}</div>
                  <div>
                    <div className="display-m">{h}</div>
                    <p className="muted" style={{ marginTop: 12, fontSize: 16, lineHeight: 1.65, maxWidth: 480 }}>{body}</p>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="welcome-quick">
            <div className="welcome-quick-cell">
              <div className="kicker">{t.misc.sundayLabel}</div>
              <div className="display-l" style={{ marginTop: 12 }}>{t.misc.sundayTime}</div>
              <div className="muted small" style={{ marginTop: 8 }}>{lang === 'ko' ? '본당' : 'Sanctuary'}</div>
            </div>
            <button type="button" className="welcome-quick-cell welcome-quick-cta" onClick={() => setRoute('contact')} style={{ background: accent }}>
              <div className="kicker on-dark">→</div>
              <div className="display-l on-dark" style={{ marginTop: 12 }}>{lang === 'ko' ? '오시는 길' : 'Get directions'}</div>
            </button>
          </div>
        </div>
      </section>
    </main>);

}

function Lightbox({ items, index, onClose, onPrev, onNext }) {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose, onPrev, onNext]);

  const [label, , tag, src] = items[index];

  return (
    <div className="lightbox" onClick={onClose} role="dialog" aria-modal="true" aria-label="Photo viewer">
      <button className="lightbox-close" onClick={onClose} aria-label="Close">✕</button>
      <button className="lightbox-arrow lightbox-prev" onClick={(e) => { e.stopPropagation(); onPrev(); }} aria-label="Previous">‹</button>
      <div className="lightbox-stage" onClick={(e) => e.stopPropagation()}>
        <img src={src} alt={label} className="lightbox-img" />
        <div className="lightbox-caption">
          <span className="lightbox-tag">{tag}</span>
          <span className="lightbox-label">{label}</span>
        </div>
      </div>
      <button className="lightbox-arrow lightbox-next" onClick={(e) => { e.stopPropagation(); onNext(); }} aria-label="Next">›</button>
    </div>
  );
}

function SeminarModal({ flyer, alt, onClose }) {
  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div className="seminar-modal" onClick={onClose} role="dialog" aria-modal="true" aria-label={alt}>
      <button className="seminar-modal-close" onClick={onClose} aria-label="Close">✕</button>
      <div className="seminar-modal-stage" onClick={(e) => e.stopPropagation()}>
        <img src={flyer} alt={alt} className="seminar-modal-img" />
      </div>
    </div>
  );
}

function GalleryPage({ lang, t, accent }) {
  const [lightboxIndex, setLightboxIndex] = React.useState(null);
  const count = t.galleryItems.length;

  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {t.galleryKicker}</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>함께한 자리<span style={{ color: accent }}>.</span></> : <>Togethe<span style={{ color: accent }}>r</span>.</>}
          </h1></Reveal>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <div className="gallery-grid">
            {t.galleryItems.map(([label, tone, tag, src], i) =>
              <Reveal key={i} delay={(i % 5) * 50} className={`gallery-cell gallery-cell-${i % 5}`}>
                <Photo label={label} ratio="auto" tone={tone} tag={tag} src={src} />
                <button className="gallery-cell-btn" onClick={() => setLightboxIndex(i)} aria-label={`Open ${label}`} />
              </Reveal>
            )}
          </div>
        </div>
      </section>
      {lightboxIndex !== null && (
        <Lightbox
          items={t.galleryItems}
          index={lightboxIndex}
          onClose={() => setLightboxIndex(null)}
          onPrev={() => setLightboxIndex((lightboxIndex - 1 + count) % count)}
          onNext={() => setLightboxIndex((lightboxIndex + 1) % count)}
        />
      )}
    </main>
  );
}

function ContactPage({ lang, t, accent }) {
  return (
    <main id="main-content">
      <section className="section page-head">
        <div className="container">
          <Reveal><div className="kicker" style={{ color: accent }}>◆ {lang === 'ko' ? '오시는 길' : 'Visit'}</div></Reveal>
          <Reveal delay={80}><h1 className="display-mega">
            {lang === 'ko' ? <>오시는 <span style={{ color: accent }}>길</span>.</> : <>Come an<span style={{ color: accent }}>d</span> visit.</>}
          </h1></Reveal>
        </div>
      </section>
      <section className="contact-grid">
        <div className="contact-map">
          <div style={{ width: '100%', aspectRatio: '4 / 3' }}>
            <iframe
              src="https://www.google.com/maps?q=631+Mitchell+Rd+Norcross+GA+30071&output=embed"
              style={{ width: '100%', height: '100%', border: 0, display: 'block' }}
              loading="lazy"
              allowFullScreen
              referrerPolicy="no-referrer-when-downgrade"
              title={lang === 'ko' ? '약도 — Mitchell Rd, Norcross GA' : 'Map — Mitchell Rd, Norcross GA'}
            />
          </div>
        </div>
        <div className="contact-meta">
          <div>
            <div className="kicker">{lang === 'ko' ? '주소' : 'Address'}</div>
            <div className="display-m" style={{ marginTop: 14 }}>{t.address}</div>
          </div>
          <div className="hr" />
          <div>
            <div className="kicker">{lang === 'ko' ? '연락' : 'Contact'}</div>
            <div className="display-m" style={{ marginTop: 14 }}>{t.email}</div>
          </div>
          <div className="hr" />
          <div>
            <div className="kicker">{lang === 'ko' ? '예배 시간' : 'Service Times'}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {t.services.map(([name, time, room, groups], i) => (
                <li key={i}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'baseline' }}>
                    <span>
                      <span className="display-s">{name}</span>
                      <span className="muted" style={{ fontSize: 14, marginLeft: 10 }}>{room}</span>
                    </span>
                    <span style={{ fontFamily: 'var(--mono)', fontSize: 14, letterSpacing: 1 }}>{time}</span>
                  </div>
                  {groups?.length > 0 && (
                    <ul className="service-groups">
                      {groups.map(([gname, gtime]) => (
                        <li key={gname}>
                          <span className="muted small">{gname}</span>
                          <span className="mono small">{gtime}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </main>);

}

Object.assign(window, { HomePage, AboutPage, SermonsPage, EventsPage, WelcomePage, GalleryPage, ContactPage, SeminarModal });