/* ============================================================
   mode-entry.jsx — 모드 선택 진입 화면
   사용자가 어떤 워크플로로 시작할지 고른다.
     A 타입: 작업된 정방형 배너 1장 → 4종 사이즈로 확장
     B 타입: 상품 이미지 N장 → 각 상품마다 4종 배너 일괄 생성
   ============================================================ */

const ModeEntry = ({ onPick }) => {
  return (
    <div className="mode-entry" style={{ fontFamily: "-apple-system" }}>
      <div className="mode-entry-inner">
        <header className="mode-entry-hero">
          <div className="mode-entry-mark" />
          <h1>Banner Forge</h1>
          <p>4–5종 배너 자동 생성 워크플로. 시작 방식을 골라주세요.</p>
        </header>

        <div className="mode-cards">
          {/* ============================= A 타입 ============================= */}
          <button className="mode-card" onClick={() => onPick("a")}>
            <div className="mode-card-head">
              <span className="mode-card-tag tag-a">A 타입</span>
              <span className="mode-card-status">Stable</span>
            </div>

            <div className="mode-card-visual visual-a">
              <div className="va-source" />
              <div className="va-arrow">→</div>
              <div className="va-grid">
                <div style={{ aspectRatio: "375 / 540" }} />
                <div style={{ aspectRatio: "335 / 335" }} />
                <div style={{ aspectRatio: "150 / 332" }} />
                <div style={{ aspectRatio: "197 / 482" }} />
              </div>
            </div>

            <div className="mode-card-title">이미 작업된 배너 → 4종 확장</div>
            <div className="mode-card-desc">
              디자이너가 작업한 정방형 메인 배너 1장을 업로드하면, AI가 배경을
              자연스럽게 확장해서 4가지 사이즈로 만들어줘요.
            </div>
            <ul className="mode-card-bullets">
              <li>입력: 정방형 배너 이미지 1장</li>
              <li>출력: 4종 배너</li>
              <li>일관된 톤·라이팅 유지가 강점</li>
            </ul>
            <div className="mode-card-cta">A 타입 시작하기 →</div>
          </button>

          {/* ============================= B 타입 ============================= */}
          <button className="mode-card" onClick={() => onPick("b")}>
            <div className="mode-card-head">
              <span className="mode-card-tag tag-b">B 타입</span>
              <span className="mode-card-status beta">Beta</span>
            </div>

            <div className="mode-card-visual visual-b">
              <div className="vb-products">
                <div />
                <div />
                <div />
                <div className="more">+N</div>
              </div>
              <div className="vb-arrow">→</div>
              <div className="vb-grid">
                <div style={{ aspectRatio: "375 / 540" }} />
                <div style={{ aspectRatio: "335 / 335" }} />
                <div style={{ aspectRatio: "150 / 332" }} />
                <div style={{ aspectRatio: "197 / 482" }} />
              </div>
            </div>

            <div className="mode-card-title">상품 이미지 → 합성 1장 + 4종 배너</div>
            <div className="mode-card-desc">
              배너 작업 없이 상품 컷이 여러 장 있을 때. AI가 N장을 한 장의 정방형
              합성 이미지로 만들고, 이를 포함해 총 5종 배너를 만들어줘요.
              승인 게이트가 있어 합성본이 마음에 들 때만 배너가 호출돼요.
            </div>
            <ul className="mode-card-bullets">
              <li>입력: 상품 이미지 N장</li>
              <li>출력: 합성본 1 + outpaint 4 = 5종 배너</li>
              <li>승인 후에만 배너 생성 · 크레디트 절약</li>
            </ul>
            <div className="mode-card-cta">B 타입 시작하기 →</div>
          </button>
        </div>

        <footer className="mode-entry-foot">
          나중에 좌측 상단 로고를 눌러 모드를 다시 바꿀 수 있어요.
        </footer>
      </div>
    </div>);

};

window.ModeEntry = ModeEntry;