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

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

  /* ── Values Accordion ────────────────────── */
  function ValueAccordion() {
    const [openIdx, setOpenIdx] = useState(null);

    const toggle = (i) => setOpenIdx(openIdx === i ? null : i);

    return (
      <section className="sec">
        <span className="sec-label">core values</span>
        <div>
          {D.coreValues.map((v, i) => (
            <div
              key={v.en}
              className="value-item"
              onClick={() => toggle(i)}
            >
              <div className="value-header">
                <div className="value-header-left">
                  <span className="value-num">0{i + 1}</span>
                  <span className="value-en">{v.en}</span>
                </div>
                <span className="value-toggle">{openIdx === i ? '−' : '+'}</span>
              </div>
              {openIdx === i && (
                <div className="value-body">{v.ko}</div>
              )}
            </div>
          ))}
        </div>
      </section>
    );
  }

  /* ── Jobs CTA ────────────────────────────── */
  function CultureJobsCta({ onNavigate }) {
    return (
      <GNBSCtaBanner
        eyebrow="GNB COMMUNITY"
        headline={"GNB Community가 만들어 나갈\n미래에 당신도\n함께 하시겠습니까?"}
        body={"7가지 핵심 가치를 공유하는\n사람들과 함께 성장할 기회를 찾고 있습니다."}
        ctaLabel="JOBS →"
        onCta={() => onNavigate('jobs')}
      />
    );
  }

  /* ── Page ────────────────────────────────── */
  function GNBSCulture({ onNavigate }) {
    return (
      <main>
        <CultureHero />
        <ValueAccordion />
        <CultureJobsCta onNavigate={onNavigate} />
      </main>
    );
  }

  window.GNBSCulture = GNBSCulture;
})();