/* 온보딩 단계 — 메인 페이지용 카드 그리드 (7개 카드만) */
const { CrewBadge: JGCrewBadge } = window.MISOComponents;

function JGCard({ step }) {
  const total = step.groups.reduce((s, g) => s + g.items.length, 0);
  const featured = step.id === 3;
  return (
    <a
      href={`journey.html#step=${step.id}`}
      className={"jg-card" + (featured ? " jg-card-featured" : "")}
      style={{ "--hue": `var(--hue-${step.id})` }}
    >
      {featured && <span className="jg-card-badge">핵심 단계</span>}
      <div className="jg-card-stripe" />
      <div className="jg-card-head">
        <div className="jg-card-num">{String(step.id + 1).padStart(2, "0")}</div>
        <div className="jg-card-eb">
          <span>{step.label}</span>
          <span className="jg-card-dot">·</span>
          <span>{step.short}</span>
        </div>
      </div>

      <h3 className="jg-card-name">{step.name}</h3>
      <p className="jg-card-desc">{step.desc}</p>

      <div className="jg-card-foot">
        <div className="jg-card-owners">
          {step.owners.map(o => <JGCrewBadge key={o} id={o} />)}
        </div>
        <div className="jg-card-foot-meta">
          <span>{total} 항목</span>
        </div>
        <span className="jg-card-arrow">자세히 →</span>
      </div>
    </a>
  );
}

function JourneyCardsGrid() {
  return (
    <section className="jg-section" id="journey">
      <div className="jg-head">
        <div>
          <div className="hero-eyebrow"><span className="pulse" />온보딩 7단계</div>
          <h2 className="jg-h2">계약부터 정착까지, <em>한 달의 항해</em>.</h2>
        </div>
        <a className="btn-secondary jg-cta" href="journey.html">
          전체 단계 펼쳐보기 →
        </a>
      </div>

      <div className="jg-grid">
        {STEPS.map(s => <JGCard key={s.id} step={s} />)}
      </div>
    </section>
  );
}

window.JourneyCardsGrid = JourneyCardsGrid;