/* GNBS prototype v2026.04.30 — jobs */
(function () {
  const { useState } = React;
  const D = window.GNBS_DATA;
  const GNBSPageHero = window.GNBSPageHero;

  const FILTERS = [
    { value: 'ALL',    label: '전체' },
    { value: 'JOBS',   label: '채용' },
    { value: 'NEWS',   label: '뉴스' },
    { value: 'NOTICE', label: '공지' },
  ];
  const CAT_LABEL = { JOBS: '채용', NEWS: '뉴스', NOTICE: '공지' };

  /* ── Hero ────────────────────────────────── */
  function JobsHero() {
    return <GNBSPageHero />;
  }

  /* ── Board ───────────────────────────────── */
  function JobsBoard() {
    const [filter, setFilter] = useState('ALL');

    const items = filter === 'ALL'
      ? D.jobs
      : D.jobs.filter((j) => j.cat === filter);

    return (
      <section className="sec">
        <span className="sec-label">board</span>

        <div className="board-filters">
          {FILTERS.map((f) => (
            <button
              key={f.value}
              className={`btn btn--sm ${filter === f.value ? 'btn--primary' : 'btn--outline'}`}
              onClick={() => setFilter(f.value)}
            >
              {f.label}
            </button>
          ))}
        </div>

        <div>
          {items.length === 0 && (
            <div className="board-empty">등록된 게시물이 없습니다.</div>
          )}
          {items.map((j) => (
            <div key={j.id} className="board-row">
              <span className="board-cat">{CAT_LABEL[j.cat] || j.cat}</span>
              <span className="board-date">{j.date}</span>
              <div>
                <div className="board-title">{j.title}</div>
                <div className="board-summary">{j.summary}</div>
              </div>
              <span className="board-arrow">→</span>
            </div>
          ))}
        </div>

        <div className="open-app-card">
          <p className="open-app-title">원하는 포지션이 없으신가요?</p>
          <p className="open-app-desc">지앤바이오솔루션의 가치에 공감하신다면 언제든지 지원해주세요.</p>
          <button className="btn btn--primary">이메일로 지원하기 →</button>
        </div>
      </section>
    );
  }

  /* ── Page ────────────────────────────────── */
  function GNBSJobs() {
    return (
      <main>
        <JobsHero />
        <JobsBoard />
      </main>
    );
  }

  window.GNBSJobs = GNBSJobs;
})();