/* MISO 온보딩 — 뷰: 홈 히어로 / 크루 명단 / 지표 요약 */
const { CrewBadge, CrewWithTooltip } = window.MISOComponents;

/* ---------------- Home Hero (간결 버전) ---------------- */
function HomeHero({ onOpenWhat }) {
  return (
    <section className="hero hero-home">
      <div className="hero-eyebrow"><span className="pulse" />For PO · MISO 도입 책임자</div>
      <h1>퍼스트 펭귄을 찾아서<br></br><em>MISO</em>를 띄우는 항해</h1> 
      <p className="lede">
        MISO를 세팅할 때는 직원분들이 AI를 어떻게 경험할지도 같이 정해야 합니다.
        <br />
        우리 회사 데이터와 기본 앱을 넣어두면, 준비한 만큼 직원분들이 더욱 잘 쓰게 됩니다.
        <br />
        그 여정을 MISO 팀이 함께 돕겠습니다. 화이팅!
      </p>

      <div className="hero-cta-row">
        <button type="button" className="hero-what-btn" onClick={onOpenWhat}>
          <span className="hero-what-icon" aria-hidden="true">!</span>
          온보딩이란?
        </button>
      </div>
    </section>
  );
}

/* ---------------- Crew Roster ---------------- */
function CrewRoster() {
  const ownsByCrew = {};
  STEPS.forEach(s => {
    s.owners.forEach(o => {
      if (!ownsByCrew[o]) ownsByCrew[o] = [];
      ownsByCrew[o].push(s.label);
    });
  });

  return (
    <section className="roster" id="crew">
      <div className="hero-eyebrow"><span className="pulse" />MISO Crew</div>
      <h2 className="section-h2">PO가 만나게 될 <em>MISO 팀</em></h2>
      <div className="roster-grid">
        {Object.entries(CREWS).map(([id, c]) => (
          <div key={id} className="roster-card">
            <CrewBadge id={id} size="lg" />
            <div className="roster-info">
              <span className="n">{c.name} <span style={{ color: "var(--ink-400)", fontWeight: 400, fontSize: 12 }}>{c.ko}</span></span>
              <span className="r">{c.role}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---------------- Metrics Summary ---------------- */
function MetricsSummary() {
  return (
    <section className="metrics" id="metrics">
      <div className="hero-eyebrow"><span className="pulse" />Success Metrics</div>
      <h2 className="section-h2">도입이 잘 됐는지, <em>세 가지 축</em>으로 확인합니다.</h2>
      <p className="section-sub">사용량·만족도·성과 — 세 가지 데이터로 정착을 확인합니다.</p>

      <div className="metric-grid">
        {METRICS.map((m) => (
          <div key={m.key} className={`metric metric--${m.key}`}>
            <div className="metric-icon">{m.icon}</div>
            <div className="metric-name">
              {m.name}
              <span className="en">{m.en}</span>
            </div>
            <div className="metric-desc">{m.desc}</div>
            <ul className="metric-list">
              {m.items.map((it, i) => <li key={i}>{it}</li>)}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

window.MISOViews = { HomeHero, CrewRoster, MetricsSummary };