/* =====================================================================
 * Afflix Subscriber SaaS — 5 화면 mock (디팀 v1.0)
 * ---------------------------------------------------------------------
 * 어드민 v12 시스템 위에 SaaS 분위기로 — 같은 SSOT, 다른 얼굴
 * 5 화면: Dashboard / Setup / TemplateGrid / TemplateDetail / Performance
 * SSOT: v12/saas-tokens.json + v12/thumb-slots.json
 * 의존: v12/thumb-t01a.jsx (window.ThumbT01A)
 * ===================================================================== */

const { useState: uSs, useMemo: uMs } = React;

/* ===== Mock 데이터 ===== */
const SAAS_TEMPLATES = [
  { id:'T01_A', name:'가성비 비교 BEST 3', desc:'3개 상품을 한눈에 비교하는 랭킹형',
    cats:['전자','생활'], purpose:'비교형', tone:'친근',
    char:'C07', color:'#D7263D', perf:'CTR 5.8%', recent:1842 },
  { id:'T02_A', name:'카테고리 가이드',     desc:'카테고리 입문자용 친절 가이드',
    cats:['뷰티','건강'], purpose:'가이드형', tone:'설명',
    char:'C12', color:'#1F5D4C', perf:'CTR 4.2%', recent:1230 },
  { id:'T03_A', name:'TOP 10 랭킹',       desc:'10종을 한 줄로 빠르게 훑는 랭킹',
    cats:['전자','패션','생활'], purpose:'랭킹형', tone:'단호',
    char:'C03', color:'#1E3A5F', perf:'CTR 6.1%', recent:2104 },
  { id:'T04_A', name:'FAQ 모음',          desc:'자주 묻는 질문을 묶은 정보형',
    cats:['건강','금융'], purpose:'FAQ형', tone:'중립',
    char:'C09', color:'#7A4A2B', perf:'CTR 3.4%', recent:642 },
  { id:'T05_A', name:'대결 비교',          desc:'2개 상품 1:1 정면 비교',
    cats:['전자','뷰티'], purpose:'비교형', tone:'단호',
    char:'C15', color:'#5D2E8C', perf:'CTR 5.2%', recent:1410 },
  { id:'T06_A', name:'스토리텔링 리뷰',    desc:'사용 경험 중심의 서사형 리뷰',
    cats:['뷰티','패션','생활'], purpose:'가이드형', tone:'친근',
    char:'C18', color:'#C2185B', perf:'CTR 4.8%', recent:980 },
];

const SAAS_USER = { name:'운영 예시', plan:'Basic', month_publish:142, quota:300, recent_revenue:'₩2,840,000', trial_days_left:21, payment_registered:false, is_demo:true };
// 2026-05-26 2기 개발팀장 정정 (CFO 결재 ⑤ P0 마감 · 감사 결재 5/25 의무 적용):
//   - name '운영 예시' 추가 (직전 hardcoded '정태우 님' 제거 양식)
//   - is_demo:true (가상 사용자 명시)

/* ===== 사이드바 라인 아이콘 ===== */
const SI = ({c}) => (<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">{c}</svg>);
const SAAS_ICONS = {
  dash:   <SI c={<><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></>}/>,
  gear:   <SI c={<><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>}/>,
  layers: <SI c={<><path d="M12 3 2 8l10 5 10-5-10-5z"/><path d="M2 13l10 5 10-5"/><path d="M2 18l10 5 10-5"/></>}/>,
  bar:    <SI c={<><line x1="4" y1="20" x2="4" y2="14"/><line x1="10" y1="20" x2="10" y2="8"/><line x1="16" y1="20" x2="16" y2="11"/><line x1="2" y1="20" x2="22" y2="20"/></>}/>,
  star:   <SI c={<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>}/>,
  card:   <SI c={<><rect x="2" y="6" width="20" height="14" rx="2"/><line x1="2" y1="11" x2="22" y2="11"/><line x1="6" y1="16" x2="10" y2="16"/></>}/>,
  gauge:  <SI c={<><path d="M3 12a9 9 0 1 1 18 0"/><line x1="12" y1="12" x2="16" y2="8"/><circle cx="12" cy="12" r="1.2" fill="currentColor"/></>}/>,
  slider: <SI c={<><line x1="4" y1="7" x2="20" y2="7"/><circle cx="9" cy="7" r="2.4" fill="currentColor"/><line x1="4" y1="13" x2="20" y2="13"/><circle cx="15" cy="13" r="2.4" fill="currentColor"/><line x1="4" y1="19" x2="20" y2="19"/><circle cx="11" cy="19" r="2.4" fill="currentColor"/></>}/>,
};

/* ===== 공통 셸 ===== */
window.SaasShell = function({ route, setRoute, children, theme, setTheme, onLogout }){
  const [navOpen, setNavOpen] = React.useState(false);
  const menu = [
    { id:'home',     label:'대시보드',       icon:SAAS_ICONS.dash },
    { id:'setup',    label:'발행 설정',       icon:SAAS_ICONS.gear },
    { id:'grid',     label:'템플릿 패키지',   icon:SAAS_ICONS.layers },
    { id:'perf',     label:'성과 참고',       icon:SAAS_ICONS.bar },
  ];
  const mgmt = [
    { id:'sub', label:'내 구독',     emoji:'💎', soon:false, active:true },
    { id:'pay', label:'결제·플랜',   emoji:'💳', soon:true },
    { id:'use', label:'사용량',       emoji:'📊', soon:true },
    { id:'set', label:'설정',         emoji:'⚙️', soon:true },
  ];
  const click = (id) => { setRoute(id); setNavOpen(false); };

  return (
    <div className="saas-shell">
      <div className={'saas-side-backdrop' + (navOpen?' is-open':'')} onClick={()=>setNavOpen(false)}/>
      <aside className={'saas-side' + (navOpen?' is-open':'')}>
        <div className="saas-logo">AFFLIX<span>SaaS</span></div>
        <nav className="saas-nav">
          {menu.map(m => (
            <button key={m.id}
              className={'saas-nav-item' + (route===m.id?' is-active':'')}
              onClick={()=>click(m.id)}>
              <span className="saas-nav-ico">{m.icon}</span>{m.label}
            </button>
          ))}

          <div className="saas-mgmt">
            <div className="saas-mgmt-head"><span className="saas-mgmt-title">관리</span></div>
            <ul className="saas-mgmt-list">
              {mgmt.filter(m=>!m.soon).map(m => (
                <li key={m.id}>
                  <button
                    className={'saas-mgmt-item' + (route===m.id?' is-active':'')}
                    onClick={()=>click(m.id)}>
                    <span className="saas-mgmt-emoji" aria-hidden="true">{m.emoji}</span>
                    <span className="saas-mgmt-item-label">{m.label}</span>
                    <span className="saas-mgmt-item-chip">활성</span>
                  </button>
                </li>
              ))}
            </ul>
            <div className="saas-mgmt-divider"><span>곧 출시</span></div>
            <ul className="saas-mgmt-list is-soon">
              {mgmt.filter(m=>m.soon).map(m => (
                <li key={m.id}>
                  <div className="saas-mgmt-item is-locked" aria-disabled="true">
                    <span className="saas-mgmt-emoji" aria-hidden="true">{m.emoji}</span>
                    <span className="saas-mgmt-item-label">{m.label}</span>
                    <span className="saas-mgmt-item-chip is-soon">2차</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </nav>
        <div className="saas-side-foot">
          <div className="saas-status">
            <div className="saas-status-row">
              <span className="saas-status-pill">무료체험 중</span>
              <span className="saas-status-days">{SAAS_USER.trial_days_left}일 남음</span>
            </div>
            <div className="saas-status-bar"><div style={{width:Math.round((30-SAAS_USER.trial_days_left)/30*100)+'%'}}></div></div>
            <div className="saas-status-meta">
              {SAAS_USER.payment_registered
                ? <><span className="saas-status-dot is-ok"></span>결제 카드 등록 완료</>
                : <><span className="saas-status-dot is-warn"></span>결제 카드 미등록 — 종료 전 등록</>}
            </div>
            <div className="saas-status-quota">이번 달 발행 {SAAS_USER.month_publish} / {SAAS_USER.quota}</div>
          </div>
        </div>
      </aside>
      <div className="saas-main">
        <header className="saas-top">
          <button className="saas-mobile-trigger" onClick={()=>setNavOpen(true)} aria-label="메뉴">≡</button>
          <div className="saas-top-search">
            <input placeholder="템플릿·카테고리·키워드 검색"/>
          </div>
          <div className="saas-top-actions">
            <div className="saas-theme-toggle" role="group" aria-label="테마">
              <button className={theme==='light'?'is-on':''} onClick={()=>setTheme('light')} title="라이트">☀</button>
              <button className={theme==='dark'?'is-on':''} onClick={()=>setTheme('dark')} title="다크">☾</button>
            </div>
            <button className="saas-icon-btn" title="알림">◔</button>
            <button className="saas-icon-btn" title="로그아웃" onClick={onLogout}>↪</button>
            <div className="saas-profile"><div className="saas-avatar">정</div></div>
          </div>
        </header>
        <main className="saas-canvas">{children}</main>
      </div>
    </div>
  );
};

/* ===== INTRO (랜딩) ===== */
window.SaasIntro = function({ go, theme, setTheme }){
  return (
    <div className="saas-intro">
      <div className="saas-intro-bg"/>
      <div className="saas-intro-bg-grid"/>
      <nav className="saas-intro-nav">
        <div className="saas-logo">AFFLIX<span>SaaS</span></div>
        <div className="saas-intro-nav-right">
          <button className="saas-intro-nav-link" onClick={()=>{const el=document.getElementById('lp-features');if(el)el.scrollIntoView({behavior:'smooth',block:'start'});}}>콘텐츠 예시</button>
          <button className="saas-intro-nav-link" onClick={()=>{const el=document.getElementById('lp-cases');if(el)el.scrollIntoView({behavior:'smooth',block:'start'});}}>성과 사례</button>
          <button className="saas-intro-nav-link" onClick={()=>{const el=document.getElementById('lp-pricing');if(el)el.scrollIntoView({behavior:'smooth',block:'start'});}}>가격</button>
          <div className="saas-theme-toggle">
            <button className={theme==='light'?'is-on':''} onClick={()=>setTheme('light')}>☀</button>
            <button className={theme==='dark'?'is-on':''} onClick={()=>setTheme('dark')}>☾</button>
          </div>
          <button className="saas-intro-nav-link" onClick={()=>go('login')}>로그인</button>
          <button className="saas-btn-primary saas-intro-nav-link is-cta" onClick={()=>go('signup')} style={{color:'#fff'}}>1개월 무료</button>
        </div>
      </nav>

      <section className="saas-intro-hero">
        <div>
          <div className="saas-intro-eyebrow">
            <span className="saas-intro-eyebrow-pulse"></span>AI 제휴 자동화 SaaS
          </div>
          <h1 className="saas-intro-h1">퇴근 후에도, 잠든 사이에도<br/>본업은 그대로 두고<br/><em>제휴 수익 자산은 쌓입니다</em></h1>
          <p className="saas-intro-lede">
            상품 선정부터 글 작성, 썸네일 생성, 발행까지 — 반복되는 작업은 AI가 맡습니다.<br/>
            본인 인증 계정 하나만 연결하시면, 제휴 수익 자산은 자동으로 쌓이기 시작합니다.
          </p>
          <div className="saas-intro-cta">
            <button className="saas-btn saas-btn-primary saas-btn-lg" onClick={()=>go('signup')}>1개월 무료 시작</button>
          </div>
          <div className="saas-intro-trust">
            <span className="saas-intro-trust-dot"></span>카드 등록 없이 1개월
            <span className="saas-intro-trust-dot"></span>언제든 해지
            <span className="saas-intro-trust-dot"></span>AI 추천 콘텐츠 발행
          </div>
        </div>

        <div className="saas-intro-flow">
          <div className="saas-flow-orbit"></div>
          <div className="saas-flow-orbit is-mid"></div>
          <div className="saas-flow-orbit is-inner"></div>
          <div className="saas-flow-core">
            <div className="saas-flow-core-ico">◆</div>
            <div className="saas-flow-core-label">AFFLIX AI</div>
            <div className="saas-flow-core-sub">자동화 코어</div>
          </div>
          <div className="saas-flow-node n1">
            <span className="saas-flow-node-ico">▤</span>
            <span className="saas-flow-node-body">상품 수집<span className="saas-flow-node-meta">쿠팡 · 11번가</span></span>
          </div>
          <div className="saas-flow-node n2">
            <span className="saas-flow-node-ico">◐</span>
            <span className="saas-flow-node-body">메타 완성<span className="saas-flow-node-meta">LLM · 자동</span></span>
          </div>
          <div className="saas-flow-node n3">
            <span className="saas-flow-node-ico">◇</span>
            <span className="saas-flow-node-body">템플릿 매칭<span className="saas-flow-node-meta">AI 추천</span></span>
          </div>
          <div className="saas-flow-node n4">
            <span className="saas-flow-node-ico">◷</span>
            <span className="saas-flow-node-body">발행·추적<span className="saas-flow-node-meta">운영 라인 기준</span></span>
          </div>
          <div className="saas-flow-node n5">
            <span className="saas-flow-node-ico">◎</span>
            <span className="saas-flow-node-body">썸네일 생성<span className="saas-flow-node-meta">600 · 1200</span></span>
          </div>
        </div>
      </section>

      <div style={{maxWidth:1280,margin:'0 auto',padding:'0 48px',width:'100%'}}>
        <div className="saas-intro-stats">
          <div className="saas-intro-stat-card">
            <svg className="saas-intro-stat-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
            <div className="saas-intro-stat-num">반복 작업</div>
            <div className="saas-intro-stat-label">AI 자동 처리</div>
          </div>
          <div className="saas-intro-stat-card">
            <svg className="saas-intro-stat-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polygon points="12 2 22 8.5 12 15 2 8.5 12 2"/><polyline points="2 15.5 12 22 22 15.5"/><polyline points="2 12 12 18.5 22 12"/></svg>
            <div className="saas-intro-stat-num">10가지</div>
            <div className="saas-intro-stat-label">AI 추천 콘텐츠 형식</div>
          </div>
          <div className="saas-intro-stat-card">
            <svg className="saas-intro-stat-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
            <div className="saas-intro-stat-num">1개월 무료</div>
            <div className="saas-intro-stat-label">카드 등록 없이 시작</div>
          </div>
          <div className="saas-intro-stat-card">
            <svg className="saas-intro-stat-icon" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
            <div className="saas-intro-stat-num">본업은 그대로</div>
            <div className="saas-intro-stat-label">자동 발행 운영</div>
          </div>
        </div>
      </div>

      <section className="saas-intro-pipeline">
        <div className="saas-pipe-head">
          <h2>4단계로 끝나는 자동화</h2>
          <p>가입 → 카테고리 선택 → 자동 발행 시작. 손은 비어둡니다.</p>
        </div>
        <div className="saas-pipe-row">
          <div className="saas-pipe-step">
            <span className="saas-pipe-step-num">STEP 01</span>
            <span className="saas-pipe-step-title">가입 · 1개월 무료</span>
            <span className="saas-pipe-step-body">카드 등록 없이 가입. 본인 인증 계정 하나 연결로 시작합니다.</span>
          </div>
          <div className="saas-pipe-step">
            <span className="saas-pipe-step-num">STEP 02</span>
            <span className="saas-pipe-step-title">카테고리 1개</span>
            <span className="saas-pipe-step-body">가전·뷰티·식품 등 대표 카테고리 1개만 정해주세요.</span>
          </div>
          <div className="saas-pipe-step">
            <span className="saas-pipe-step-num">STEP 03</span>
            <span className="saas-pipe-step-title">발행 시간 1개</span>
            <span className="saas-pipe-step-body">매일 오전 9시·오후 12시 등 자동 발행 시간 설정.</span>
          </div>
          <div className="saas-pipe-step">
            <span className="saas-pipe-step-num">STEP 04</span>
            <span className="saas-pipe-step-title">30일 후, 자산이 누적됩니다</span>
            <span className="saas-pipe-step-body">매일 1편씩 누적된 글이 색인되어, 손을 덜 대도 흐름이 이어지기 시작합니다.</span>
          </div>
        </div>
      </section>

      <section className="saas-intro-features" id="lp-features">
        <div className="saas-intro-features-head">
          <div className="saas-intro-features-eyebrow">CORE FEATURES</div>
          <h2 className="saas-intro-features-title">시작만 정하면<br/>반복 작업은 AI가 맡습니다</h2>
          <p className="saas-intro-features-sub">카테고리별로 검증된 10가지 발행 형식 + AI 자동 매칭으로, 매일 발행이 끊기지 않습니다.</p>
        </div>
        <div className="saas-intro-features-inner">
          <div className="saas-feature-card">
            <div className="saas-feature-num">1</div>
            <div className="saas-feature-title">핵심 자동화 흐름</div>
            <div className="saas-feature-body">상품 선정부터 글 작성, 썸네일 생성, 발행까지 — 반복되는 작업은 AI가 맡습니다.</div>
            <div className="saas-feature-benefit">→ 직접 챙기지 않아도 발행은 이어집니다</div>
          </div>
          <div className="saas-feature-card">
            <div className="saas-feature-num">2</div>
            <div className="saas-feature-title">검증된 10가지 콘텐츠 형식</div>
            <div className="saas-feature-body">가성비 비교·단일 추천·계절 모음 등 카테고리별로 검증된 10가지 발행 형식. 카테고리에 맞춰 자동 매칭됩니다.</div>
            <div className="saas-feature-benefit">→ 형식 고민 없이 바로 시작할 수 있습니다</div>
          </div>
          <div className="saas-feature-card">
            <div className="saas-feature-num">3</div>
            <div className="saas-feature-title">성과는 흐름으로</div>
            <div className="saas-feature-body">개별 글 CTR이 아니라 7일·30일 흐름과 카테고리 비교. 다음 발행에 자연스럽게 반영됩니다.</div>
            <div className="saas-feature-benefit">→ 다음 발행이 자연스럽게 더 좋아집니다</div>
          </div>
        </div>
      </section>

      {/* ===== PRICING (LP 내장) ===== */}
      <section className="saas-intro-pricing" id="lp-pricing">
        <div className="saas-intro-pricing-head">
          <div className="saas-intro-features-eyebrow">PRICING</div>
          <h2 className="saas-intro-features-title">지금 필요한 운영 규모부터 시작하세요</h2>
          <p className="saas-intro-features-sub">첫 1개월 무료 · 셋업 3개월 30%↓ · 약정 1년 최대 25%↓ · 발행량은 베이스라인 누적 후 확정됩니다.</p>
        </div>
        <div className="saas-intro-pricing-grid">
          {[
            {tier:'Basic', price:'99,000', tag:'입문용', cat:'카테고리 1개', vol:'베이스라인 누적 후 확정', tmpl:'AI 추천 콘텐츠 형식 10가지', noti:'이메일 알림', sup:'일반 지원'},
            {tier:'Standard', price:'199,000', tag:'표준', cat:'카테고리 2~3개', vol:'추정 Basic ×1.5~2', tmpl:'AI 추천 콘텐츠 형식 10가지', noti:'이메일 + 슬랙', sup:'일반 지원', hot:true},
            {tier:'Premium', price:'399,000', tag:'대규모 운영', cat:'카테고리 무제한', vol:'추정 Standard ×2 이상', tmpl:'AI 추천 콘텐츠 형식 10가지 + 베타', noti:'이메일 + 슬랙 + 카카오톡', sup:'우선 기술 지원 (영업일 24h)'},
          ].map(p=>(
            <div key={p.tier} className={'saas-intro-plan'+(p.hot?' is-hot':'')}>
              {p.hot && <div className="saas-intro-plan-pin">가장 인기</div>}
              <div className="saas-intro-plan-tag">{p.tag}</div>
              <div className="saas-intro-plan-name">{p.tier}</div>
              <div className="saas-intro-plan-price"><b>₩{p.price}</b><span>/월</span></div>
              <div className="saas-intro-plan-bullets">
                <span>· {p.cat}</span>
                <span>· 월 발행량 — {p.vol}</span>
                <span>· {p.tmpl}</span>
                <span>· {p.noti}</span>
                <span>· {p.sup}</span>
              </div>
              <button className={'saas-btn '+(p.hot?'saas-btn-primary':'saas-btn-ghost')} onClick={()=>go('signup')}>1개월 무료 시작</button>
            </div>
          ))}
        </div>
        <div className="saas-intro-pricing-foot">결제 시점은 무료 1개월 종료 직전 카드 등록 후 시작 · 언제든 해지 가능 · VAT 별도</div>
      </section>

      {/* ===== CASES (가상 샘플 3종) ===== */}
      <section className="saas-intro-cases" id="lp-cases">
        <div className="saas-intro-pricing-head">
          <div className="saas-intro-features-eyebrow">SAMPLE SCENARIOS</div>
          <h2 className="saas-intro-features-title">처음 시작하면 이렇게 쌓입니다</h2>
          <p className="saas-intro-features-sub">아래는 운영 가정에 기반한 <b>운영 예시</b>입니다. Beta 운영 누적 후 실 케이스로 교체할 예정이며, 실제 결과는 카테고리·시점·운영 방식에 따라 달라질 수 있습니다.</p>
        </div>
        <div className="saas-intro-cases-grid">
          {[
            {plan:'Basic', cat:'가전 단일 카테고리', m1:'발행 30건', m2:'색인 18건', m3:'유입 흐름 형성 시작', note:'카테고리 1개로 베이스라인 형성 · 셋업 3개월 후 안정 구간 진입'},
            {plan:'Standard', cat:'뷰티 + 식품 2 카테고리', m1:'발행 60~80건', m2:'색인 35건+', m3:'카테고리 비교 가능', note:'2~3 카테고리 운영 시 흐름 비교가 가능해지며 다음 발행 품질이 누적됩니다'},
            {plan:'Premium', cat:'다 카테고리 + 베타', m1:'발행 150건+', m2:'색인 70건+', m3:'운영 라인 안정', note:'대규모 운영에서 자산 누적 + 우선 기술 지원으로 운영 라인이 안정됩니다'},
          ].map(c=>(
            <div key={c.plan} className="saas-intro-case">
              <div className="saas-intro-case-head">
                <span className="saas-intro-case-pill">운영 예시</span>
                <b>{c.plan}</b>
                <span className="saas-intro-case-cat">{c.cat}</span>
              </div>
              <div className="saas-intro-case-metrics">
                <div><span>30일 누적</span><b>{c.m1}</b></div>
                <div><span>색인된 글</span><b>{c.m2}</b></div>
                <div><span>현재 상태</span><b>{c.m3}</b></div>
              </div>
              <div className="saas-intro-case-note">{c.note}</div>
            </div>
          ))}
        </div>
        <div className="saas-intro-cases-foot">※ 위 수치는 가상 시나리오이며 수익 보장이 아닙니다. 실수익은 카테고리·시점·운영 방식에 따라 다릅니다.</div>
      </section>

      {/* ===== FAQ ===== */}
      <section className="saas-intro-faq">
        <div className="saas-intro-pricing-head">
          <div className="saas-intro-features-eyebrow">FAQ</div>
          <h2 className="saas-intro-features-title">시작 전에 가장 많이 묻는 10가지</h2>
        </div>
        <div className="saas-intro-faq-grid">
          {[
            ['1개월 무료가 끝나면 언제 결제되나요?','가입 시 카드 등록은 받지 않습니다. 무료 1개월이 끝나기 전 결제 카드를 등록하지 않으면 자동 결제는 발생하지 않으며, 발행만 일시 정지됩니다.'],
            ['해지는 어디서 하나요?','로그인 후 [결제·플랜] 화면에서 1클릭으로 해지할 수 있으며, 별도 전화·메일 절차가 없습니다.'],
            ['해지 후 발행한 글과 자산은 어떻게 되나요?','이미 발행된 글·썸네일·메타 자산은 사용자 블로그에 그대로 남습니다. SaaS 측에서 회수하지 않습니다.'],
            ['카드 등록은 언제 필요한가요?','무료 1개월 종료 직전, 다음 달 결제를 원하실 때 등록합니다. 무료 기간 내에는 어떠한 결제도 발생하지 않습니다.'],
            ['카테고리는 나중에 바꿀 수 있나요?','환경설정에서 언제든 카테고리 추가/변경이 가능합니다. 단 색인 누적 흐름 보존을 위해 기존 카테고리는 일정 기간 유지하시는 것을 권장합니다.'],
            ['어떤 콘텐츠 형식이 자동 선택되나요?','카테고리·키워드·계절·과거 흐름을 기반으로 AI가 추천하는 10가지 콘텐츠 형식 중 가장 적합한 것이 자동 매칭됩니다. 사용자가 수동으로 고정하는 것도 가능합니다.'],
            ['처음 설정에 얼마나 걸리나요?','평균 5~10분입니다. 가입 → 카테고리 1개 → 발행 시간 1개 입력으로 끝납니다.'],
            ['Beta 종료 후 내 데이터는 어떻게 되나요?','발행한 글·썸네일·메타 자산은 사용자 블로그에 그대로 남습니다. SaaS 측은 운영 데이터(발행 이력·템플릿 사용 로그)를 사용자 동의 범위 내에서만 보관하며, 사용자가 요청하면 표준 양식으로 내보내(export) 드립니다.'],
            ['환불 규정은 어디서 확인하나요?','월 단위 결제는 다음 결제일 기준 해지 시점부터 결제가 중단됩니다. 일할 환불은 진행하지 않으며, 약정 1년 플랜의 환불 조건은 결제·플랜 화면 하단 [환불 규정] 링크에서 확인할 수 있습니다.'],
            ['운영이 잘 안 되면 어떻게 하나요?','셋업 3개월 동안은 색인·SEO 누적 구간이라 흐름이 약할 수 있습니다. 진행현황 화면에서 추천 액션이 안내되며, Premium은 우선 기술 지원으로 영업일 24h 이내 회신됩니다.'],
          ].map(([q,a],i)=>(
            <details key={i} className="saas-intro-faq-item">
              <summary>{q}</summary>
              <div className="saas-intro-faq-a">{a}</div>
            </details>
          ))}
        </div>
      </section>

      {/* ===== TRUST 시그널 ===== */}
      <section className="saas-intro-trust-band">
        <div className="saas-intro-trust-grid">
          <div><b>회사 정보</b><span>주식회사 Afflix · 사업자번호 등록 후 게재</span></div>
          <div><b>개인정보</b><span>개인정보처리방침 / 데이터 보관 · 파기 정책 명시</span></div>
          <div><b>보안</b><span>HTTPS 전구간 암호화 · 카드정보 PG사 토큰화 · 자체 저장 X</span></div>
          <div><b>해지·환불</b><span>1클릭 해지 · 환불 규정은 이용약관 §7 명시</span></div>
        </div>
      </section>

      <section className="saas-intro-cta-band">
        <h2>오늘부터 발행은 AI에 맡기세요</h2>
        <p>가입 즉시 1개월 무료 · 카드 등록 없이 시작 · 언제든 해지</p>
        <button className="saas-btn saas-btn-primary saas-btn-lg" onClick={()=>go('signup')}>1개월 무료 시작</button>
      </section>

      <footer className="saas-intro-foot">
        <div>© 2026 Afflix · Subscriber SaaS</div>
        <div>이용약관 · 개인정보 · 문의</div>
      </footer>
    </div>
  );
};

/* ===== LOGIN ===== */
window.SaasLogin = function({ go }){
  return (
    <div className="saas-auth">
      <div className="saas-auth-left">
        <div className="saas-auth-brand">AFFLIX</div>
        <div className="saas-auth-pitch">
          <h2>다시 오셨네요.<br/>오늘 발행 준비됐어요.</h2>
          <p>로그인하면 어제 자동 발행 1건의 반응과 오늘 추천 템플릿이 먼저 보입니다.</p>
        </div>
        <div className="saas-auth-quote">
          <span className="saas-intro-case-pill">운영 예시</span>
          "본인 인증 계정을 연결해두면 다음 날 글이 자동으로 올라오는 흐름을 가정한 예시입니다."
          <b>— 가전 카테고리 운영 가정 · Beta 운영 누적 후 실 사례로 교체 예정</b>
        </div>
      </div>
      <div className="saas-auth-right">
        <form className="saas-auth-form" onSubmit={(e)=>{e.preventDefault();go('home');}}>
          <h1>로그인</h1>
          <p className="saas-auth-sub">오늘 발행을 이어가시려면 로그인하세요.</p>
          <div className="saas-field">
            <label>이메일</label>
            <input type="email" placeholder="you@afflix.com" defaultValue="taewoo@afflix.com"/>
          </div>
          <div className="saas-field">
            <label>비밀번호</label>
            <input type="password" placeholder="비밀번호" defaultValue="********"/>
          </div>
          <div className="saas-auth-row">
            <label style={{display:'flex',alignItems:'center',gap:6,fontWeight:600,color:'var(--saas-t2)'}}>
              <input type="checkbox" defaultChecked/> 로그인 유지
            </label>
            <button type="button">비밀번호 찾기</button>
          </div>
          <button className="saas-auth-cta" type="submit">로그인</button>
          <div className="saas-auth-divider">또는</div>
          <div className="saas-auth-social">
            <button type="button">G · 구글로 계속</button>
            <button type="button">N · 네이버로 계속</button>
          </div>
          <div className="saas-auth-foot">
            계정이 없으신가요? <button onClick={()=>go('signup')}>1개월 무료 시작</button>
          </div>
        </form>
      </div>
    </div>
  );
};

/* ===== SIGNUP ===== */
window.SaasSignup = function({ go }){
  return (
    <div className="saas-auth">
      <div className="saas-auth-left">
        <div className="saas-auth-brand">AFFLIX</div>
        <div className="saas-auth-pitch">
          <h2>1개월 무료.<br/>카드 없이 시작합니다.</h2>
          <p>본인 인증 계정 하나만 연결하면, 내일 아침 첫 자동 발행이 도착합니다.</p>
        </div>
        <div className="saas-auth-quote">
          <span className="saas-intro-case-pill">운영 예시</span>
          "본인 인증 계정을 연결해두면 며칠 뒤부터 자동 발행이 이어지는 흐름을 가정한 예시입니다."
          <b>— 뷰티 카테고리 운영 가정 · Beta 운영 누적 후 실 사례로 교체 예정</b>
        </div>
      </div>
      <div className="saas-auth-right">
        <form className="saas-auth-form" onSubmit={(e)=>{e.preventDefault();go('setup');}}>
          <h1>1개월 무료 시작</h1>
          <p className="saas-auth-sub">신용카드 등록 없이 1개월 — 언제든 해지할 수 있습니다.</p>
          <div className="saas-field">
            <label>이름</label>
            <input type="text" placeholder="홍길동"/>
          </div>
          <div className="saas-field">
            <label>이메일</label>
            <input type="email" placeholder="you@afflix.com"/>
          </div>
          <div className="saas-field-row">
            <div className="saas-field">
              <label>비밀번호</label>
              <input type="password" placeholder="8자 이상"/>
            </div>
            <div className="saas-field">
              <label>비밀번호 확인</label>
              <input type="password" placeholder="다시 입력"/>
            </div>
          </div>
          <div className="saas-field">
            <label>블로그 카테고리 (대표 1개)</label>
            <input type="text" placeholder="가전 / 뷰티 / 식품 등"/>
            <div className="saas-field-hint">가입 후 추가 카테고리는 환경설정에서 늘릴 수 있습니다.</div>
          </div>
          <label style={{display:'flex',alignItems:'flex-start',gap:8,fontSize:13,color:'var(--saas-t2)',lineHeight:1.5}}>
            <input type="checkbox" defaultChecked style={{marginTop:3}}/>
            <span><b style={{color:'var(--saas-t1)'}}>이용약관·개인정보 처리방침</b>에 동의하며, 마케팅 수신에 동의합니다 (선택).</span>
          </label>
          <button className="saas-auth-cta" type="submit">1개월 무료 시작</button>
          <div className="saas-auth-foot">
            이미 계정이 있으신가요? <button onClick={()=>go('login')}>로그인</button>
          </div>
        </form>
      </div>
    </div>
  );
};

/* ===== 1. Dashboard ===== */
window.SaasDashboard = function({ go }){
  const today = SAAS_TEMPLATES[0];
  return (
    <div className="saas-page">
      <div className="saas-greeting">
        <div className="saas-kicker">오늘 추천</div>
        <h1 className="saas-display">{SAAS_USER.name} 님, 오늘은 이 템플릿이 잘 맞을 것 같아요</h1>
        <p className="saas-lead">최근 7일 반응과 카테고리 흐름을 보고 골랐습니다. 그대로 발행하거나 살짝 바꿀 수 있어요.</p>
      </div>

      <section className="saas-hero-today">
        <div className="saas-hero-thumb">
          <window.ThumbT01A size={600} slots={{
            post_id:'p_demo', template_id:today.id, char_id:today.char,
            theme_color:today.color, title_main:'무선청소기 BEST 3',
            title_sub:'10만원대 가성비 비교', badge_text:'추천',
            highlight_price:'₩89,000~',
            product_image_1:'https://picsum.photos/seed/d1/480/480',
            product_image_2:'https://picsum.photos/seed/d2/360/360',
            product_image_3:'https://picsum.photos/seed/d3/360/360',
            product_label_1:'BEST 1', product_label_2:'BEST 2', product_label_3:'BEST 3',
            brand_mark:'AFFLIX'
          }}/>
        </div>
        <div className="saas-hero-side">
          <div className="saas-tag-row">
            <span className="saas-tag">{today.id}</span>
            <span className="saas-tag saas-tag-soft">{today.purpose}</span>
            <span className="saas-tag saas-tag-soft">{today.cats.join(' · ')}</span>
          </div>
          <h2 className="saas-h2">{today.name}</h2>
          <p className="saas-body-lg">{today.desc}. 최근 7일 평균 CTR {today.perf}, 반응 {today.recent}건.</p>
          <ul className="saas-bullets">
            <li>3개 상품 비교 — BEST 1·2·3 시각 위계</li>
            <li>가성비 가격 강조 (₩ 칩)</li>
            <li>친근 톤 · {today.cats[0]} 카테고리 적합</li>
          </ul>
          <div className="saas-hero-cta">
            <button className="saas-btn saas-btn-primary" onClick={()=>go('setup')}>이 템플릿으로 발행 설정</button>
            <button className="saas-btn saas-btn-ghost"  onClick={()=>go('grid')}>다른 템플릿 보기</button>
          </div>
        </div>
      </section>

      <section className="saas-section">
        <div className="saas-section-head"><h3 className="saas-h3">빠른 진입</h3></div>
        <div className="saas-quick">
          <QuickCard title="발행 설정" sub="방식 · 카테고리 · 템플릿" tone="accent" onClick={()=>go('setup')}/>
          <QuickCard title="템플릿 패키지" sub="T01~T10 비교·선택" tone="warm" onClick={()=>go('grid')}/>
          <QuickCard title="성과 참고" sub="수익 · CTR · 추천" tone="soft" onClick={()=>go('perf')}/>
          <QuickCard title="내 구독" sub="플랜 · 결제일" tone="muted" disabled/>
        </div>
      </section>

      <section className="saas-section">
        <div className="saas-section-head">
          <h3 className="saas-h3">이번 달 사용량</h3>
          <span className="saas-section-meta">{SAAS_USER.month_publish} / {SAAS_USER.quota} 발행</span>
        </div>
        <div className="saas-usage">
          <div className="saas-usage-bar"><div style={{width: (SAAS_USER.month_publish/SAAS_USER.quota*100)+'%'}}/></div>
          <div className="saas-usage-meta">
            <span>최근 30일 수익 <b>{SAAS_USER.recent_revenue}</b></span>
            <span>남은 발행 <b>{SAAS_USER.quota - SAAS_USER.month_publish}건</b></span>
          </div>
        </div>
      </section>
    </div>
  );
};

function QuickCard({ title, sub, tone, onClick, disabled }){
  return (
    <button className={'saas-quick-card saas-tone-'+(tone||'soft')+(disabled?' is-disabled':'')}
            onClick={onClick} disabled={disabled}>
      <div className="saas-quick-title">{title}</div>
      <div className="saas-quick-sub">{sub}</div>
      {!disabled && <span className="saas-quick-arrow">→</span>}
      {disabled && <span className="saas-quick-soon">2차 공개</span>}
    </button>
  );
}

/* ===== 2. Setup — 한 화면 + 실시간 요약 ===== */
window.SaasSetup = function({ go, templates }){
  // ===== 발행 설정 보강 (디팀 v3 · 2026-06-14) — UI + hook 호출부 / API 배선=개발 =====
  const _pubSaved = (typeof window!=='undefined' && window.afflixLoadSelection) ? (window.afflixLoadSelection() || {}) : {};
  const [mode, setMode] = uSs(_pubSaved.mode || 'auto');   // 기본 auto (기존 'ai' → 요청서 기본값 정합)
  const [cat, setCat]   = uSs(_pubSaved.category || '전자');
  const [theme, setTheme] = uSs(_pubSaved.theme || '가성비');
  const [tmpl, setTmpl] = uSs(_pubSaved.template_id || 'T01_A');
  const [char, setChar] = uSs(_pubSaved.char_id || 'C07');
  const [saveMsg, setSaveMsg] = uSs(null);
  const tmplObj = SAAS_TEMPLATES.find(t=>t.id===tmpl) || SAAS_TEMPLATES[0];
  // 등급(tier)별 템플릿 — 개발이 props.templates 또는 window.AFFLIX_TEMPLATES 주입. 없으면 기존 견본.
  const PUB_TIER = ((window.SAAS_USER2 && window.SAAS_USER2.plan_kind) || 'basic').split('_')[0];
  const PUB_TIER_COUNT = { basic:10, standard:20, premium:30 }[PUB_TIER] || 10;
  const PUB_TPLS = (templates && templates.length) ? templates
    : (typeof window!=='undefined' && window.AFFLIX_TEMPLATES && window.AFFLIX_TEMPLATES.length) ? window.AFFLIX_TEMPLATES
    : null;
  const PUB_TPL_LIST = PUB_TPLS || SAAS_TEMPLATES.slice(0,4).map(t=>({ id:t.id, name:t.name, format:t.desc, tier:PUB_TIER }));
  const PUB_IS_SAMPLE = !PUB_TPLS;
  function pubSave(){
    const payload = { mode, template_id:(mode==='auto'?null:tmpl), category:cat, theme, char_id:char };
    try { if (window.afflixSaveSelection) window.afflixSaveSelection(payload); } catch(e){}
    setSaveMsg('저장됐습니다. 이대로 발행됩니다.');
  }

  return (
    <div className="saas-page saas-setup">
      <div className="saas-greeting">
        <div className="saas-kicker">발행 설정</div>
        <h1 className="saas-display">어떻게 발행할지 정해볼까요</h1>
        <p className="saas-lead">관리자 발행설정과 동일한 구성 — 방식·템플릿을 고르고 저장하면 다음 발행부터 적용됩니다.</p>
      </div>

      {/* ===== admin 발행설정(SaasOptions) 동일 단일컬럼 이식 (2026-06-15 V8) ===== */}
      <Field label="발행 방식" hint="자동·AI·직접 중 한 가지">
        <div className="saas-sel-grid saas-sel-grid-3">
          <SelectorCard active={mode==='auto'} onClick={()=>{setMode('auto');setSaveMsg(null);}}
            title="🤖 자동 (기본·권장)" desc="시스템이 카테고리·템플릿·캐릭터를 모두 결정 — 손 안 대도 매일 발행"/>
          <SelectorCard active={mode==='ai'} onClick={()=>{setMode('ai');setSaveMsg(null);}}
            title="✨ 반자동 (큐봇)" desc="큐봇이 추천하면 내가 가볍게 조정"/>
          <SelectorCard active={mode==='manual'} onClick={()=>{setMode('manual');setSaveMsg(null);}}
            title="⚙️ 수동" desc="카테고리·테마·템플릿·캐릭터를 직접 선택"/>
        </div>
      </Field>

      {mode !== 'auto' && (<>
      <Field label="카테고리" hint="발행할 분야">
        <div className="saas-chip-row">
          {['전자','생활','뷰티','패션','건강','금융'].map(c=>(
            <button key={c} className={'saas-chip'+(cat===c?' is-active':'')} onClick={()=>{setCat(c);setSaveMsg(null);}}>{c}</button>
          ))}
        </div>
      </Field>
      <Field label="테마" hint="콘텐츠 분위기">
        <div className="saas-chip-row">
          {['가성비','프리미엄','입문자','전문가','트렌드'].map(c=>(
            <button key={c} className={'saas-chip'+(theme===c?' is-active':'')} onClick={()=>{setTheme(c);setSaveMsg(null);}}>{c}</button>
          ))}
        </div>
      </Field>
      <Field label="캐릭터" hint="작성자 페르소나">
        <div className="saas-chip-row">
          {['C07','C12','C03','C09','C15','C18'].map(c=>(
            <button key={c} className={'saas-chip'+(char===c?' is-active':'')} onClick={()=>{setChar(c);setSaveMsg(null);}}>{c}</button>
          ))}
        </div>
      </Field>
      </>)}

      <Field label={'템플릿 패키지 전시 — 내 등급 '+PUB_TIER+' · '+PUB_TIER_COUNT+'종'} hint="구독자가 선택하는 상품형 자산 (관리자 디자인 갤러리 동일)">
        <div className="saas-sel-grid saas-sel-grid-2" id="pub-template-grid">
          {PUB_TPL_LIST.map(t=>{
            const _tc = ({basic:'#64748b',standard:'#2563eb',premium:'#d97706',curation:'#f2384a'})[String(t.tier||'').toLowerCase()] || '#64748b';
            const _on = tmpl===t.id;
            return (
            <button key={t.id} type="button" data-tpl-id={t.id} onClick={()=>{setTmpl(t.id);setSaveMsg(null);}}
              style={{ textAlign:'left', padding:0, borderRadius:14, overflow:'hidden', cursor:'pointer', display:'block', width:'100%',
                border:'2px solid '+(_on?_tc:'var(--saas-border,#2a2f3a)'), background:'var(--saas-card,#15181f)',
                boxShadow:_on?('0 0 0 3px '+_tc+'22'):'none', transition:'.15s' }}>
              <div style={{ position:'relative', minHeight:58, background:'linear-gradient(135deg,'+_tc+'18,'+_tc+'33)', padding:'10px 12px 10px 16px' }}>
                <span style={{ position:'absolute', left:0, top:0, bottom:0, width:4, background:_tc }}></span>
                <div style={{ fontSize:11, fontWeight:800, letterSpacing:.5, color:_tc, fontFamily:'monospace' }}>{t.id}</div>
                <div style={{ fontSize:12, color:'var(--saas-t2,#9aa3b2)', marginTop:4, lineHeight:1.4 }}>{t.feat||''}</div>
              </div>
              <div style={{ padding:'10px 12px' }}>
                <div style={{ fontSize:14, fontWeight:700, color:'var(--saas-t1,#e8eaed)' }}>{t.name||t.id}</div>
                <div style={{ display:'flex', gap:6, marginTop:8, alignItems:'center' }}>
                  {t.format && <span style={{ fontSize:11, padding:'2px 8px', borderRadius:20, background:'var(--saas-bg2,#0f1218)', color:'var(--saas-t2,#9aa3b2)' }}>{t.format}</span>}
                  {t.tier && <span style={{ fontSize:11, padding:'2px 8px', borderRadius:20, border:'1px solid '+_tc, color:_tc }}>{String(t.tier).toUpperCase()}</span>}
                  {_on && <span style={{ marginLeft:'auto', fontSize:12, fontWeight:700, color:'var(--saas-ok,#34d399)' }}>✓ 선택됨</span>}
                </div>
              </div>
            </button>
            );
          })}
        </div>
        {PUB_IS_SAMPLE && <div className="saas-field-hint" style={{marginTop:8}}>※ 형식 견본입니다. 실제 목록은 내 등급({PUB_TIER}·{PUB_TIER_COUNT}종)에 맞춰 자동 표시됩니다.</div>}
      </Field>

      <div style={{margin:'4px 0 20px'}}>
        <button className="saas-btn saas-btn-primary saas-btn-block" id="pub-save" onClick={pubSave}>설정 저장하기</button>
        {saveMsg && <div id="pub-save-msg" style={{marginTop:10,fontSize:13,fontWeight:700,color:'#10B981',textAlign:'center'}}>{saveMsg}</div>}
      </div>

      <Field label="선팀 성과 참고 정보" hint="구독자 선택 보조 — 일방적 느낌 방지">
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
          {[['최근 30일 수익','₩8.4M','전체 평균'],['평균 CTR','3.82%','시장 평균 +1.2%p'],['전환율','1.31%',''],['시즌 추천','환절기','패딩·이불']].map((s,i)=>(
            <div key={i} style={{background:'var(--saas-card,#15181f)',border:'1px solid var(--saas-border,#2a2f3a)',borderRadius:12,padding:'14px 16px'}}>
              <div style={{fontSize:12,color:'var(--saas-t2,#9aa3b2)'}}>{s[0]}</div>
              <div style={{fontSize:22,fontWeight:800,color:'var(--saas-t1,#e8eaed)',marginTop:4}}>{s[1]}</div>
              {s[2] && <div style={{fontSize:11,color:'var(--saas-t3,#6b7280)',marginTop:2}}>{s[2]}</div>}
            </div>
          ))}
        </div>
      </Field>
    </div>
  );
};

function Field({ label, hint, children }){
  return (
    <div className="saas-field">
      <div className="saas-field-head">
        <div className="saas-field-label">{label}</div>
        {hint && <div className="saas-field-hint">{hint}</div>}
      </div>
      {children}
    </div>
  );
}
function SelectorCard({ active, onClick, title, desc }){
  return (
    <button className={'saas-selector'+(active?' is-active':'')} onClick={onClick}>
      <div className="saas-selector-mark">{active?'◉':'○'}</div>
      <div className="saas-selector-body">
        <div className="saas-selector-title">{title}</div>
        <div className="saas-selector-desc">{desc}</div>
      </div>
    </button>
  );
}

/* ===== 3. Template Grid ===== */
window.SaasGrid = function({ go, setSelected }){
  const [filter, setFilter] = uSs('전체');
  const list = filter==='전체' ? SAAS_TEMPLATES : SAAS_TEMPLATES.filter(t=>t.purpose===filter);
  return (
    <div className="saas-page">
      <div className="saas-greeting">
        <div className="saas-kicker">템플릿 패키지</div>
        <h1 className="saas-display">고를 수 있는 골격 6종</h1>
        <p className="saas-lead">같은 슬롯 시스템 — 골격은 고정, 안에 들어가는 내용만 바뀝니다.</p>
      </div>
      <div className="saas-filter-bar">
        {['전체','비교형','랭킹형','가이드형','FAQ형'].map(f=>(
          <button key={f} className={'saas-filter'+(filter===f?' is-active':'')}
            onClick={()=>setFilter(f)}>{f}</button>
        ))}
      </div>
      <div className="saas-thumb-grid">
        {list.map(t=>(
          <article key={t.id} className="saas-thumb-card">
            <div className="saas-thumb-card-img">
              <window.ThumbT01A size={600} slots={{
                post_id:'p_'+t.id, template_id:t.id, char_id:t.char,
                theme_color:t.color, title_main:t.name,
                title_sub:t.cats[0]+' · '+t.purpose,
                badge_text:t.tone, highlight_price:'₩89,000~',
                product_image_1:'https://picsum.photos/seed/'+t.id+'1/480/480',
                product_image_2:'https://picsum.photos/seed/'+t.id+'2/360/360',
                product_image_3:'https://picsum.photos/seed/'+t.id+'3/360/360',
                product_label_1:'1위', product_label_2:'2위', product_label_3:'3위',
                brand_mark:'AFFLIX'
              }}/>
            </div>
            <div className="saas-thumb-card-body">
              <div className="saas-tag-row">
                <span className="saas-tag">{t.id}</span>
                <span className="saas-tag saas-tag-soft">{t.purpose}</span>
              </div>
              <h3 className="saas-thumb-card-title">{t.name}</h3>
              <p className="saas-thumb-card-desc">{t.desc}</p>
              <div className="saas-thumb-card-cta">
                <button className="saas-btn saas-btn-ghost"
                  onClick={()=>{ setSelected(t.id); go('detail'); }}>상세 보기</button>
                <button className="saas-btn saas-btn-primary"
                  onClick={()=>go('setup')}>선택</button>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
};

/* ===== 4. Template Detail ===== */
window.SaasDetail = function({ go, selected }){
  const t = SAAS_TEMPLATES.find(x=>x.id===selected) || SAAS_TEMPLATES[0];
  return (
    <div className="saas-page">
      <button className="saas-back" onClick={()=>go('grid')}>← 패키지 전시로</button>
      <div className="saas-detail-hero">
        <div className="saas-detail-thumb">
          <window.ThumbT01A size={600} slots={{
            post_id:'p_dt', template_id:t.id, char_id:t.char,
            theme_color:t.color, title_main:t.name,
            title_sub:t.cats[0]+' · '+t.purpose,
            badge_text:t.tone, highlight_price:'₩89,000~',
            product_image_1:'https://picsum.photos/seed/dt1/480/480',
            product_image_2:'https://picsum.photos/seed/dt2/360/360',
            product_image_3:'https://picsum.photos/seed/dt3/360/360',
            product_label_1:'1위', product_label_2:'2위', product_label_3:'3위',
            brand_mark:'AFFLIX'
          }}/>
        </div>
        <div className="saas-detail-meta">
          <div className="saas-tag-row">
            <span className="saas-tag">{t.id}</span>
            <span className="saas-tag saas-tag-soft">{t.purpose}</span>
            <span className="saas-tag saas-tag-soft">{t.tone}</span>
          </div>
          <h1 className="saas-h1">{t.name}</h1>
          <p className="saas-body-lg">{t.desc}</p>
          <dl className="saas-meta-list">
            <div><dt>추천 상황</dt><dd>{t.cats.join(', ')} 카테고리에서 가성비 비교가 필요할 때</dd></div>
            <div><dt>적용 카테고리</dt><dd>{t.cats.join(', ')}</dd></div>
            <div><dt>추천 캐릭터</dt><dd>{t.char} · 친근한 설명형</dd></div>
            <div><dt>최근 반응</dt><dd>CTR {t.perf} · {t.recent}건</dd></div>
          </dl>
        </div>
      </div>

      <section className="saas-section">
        <h3 className="saas-h3">구조 설명</h3>
        <div className="saas-anatomy">
          <AnatomyItem n="1" title="제목 방식" body="≤22자 · 2줄 · 강조 헤드 + 보조 부제 1줄"/>
          <AnatomyItem n="2" title="비교 구조" body="3개 상품 — BEST 1 큰 카드, 2·3 작은 카드"/>
          <AnatomyItem n="3" title="CTA 위치" body="하단 좌측 가격 강조 칩 + 우하단 워터마크"/>
        </div>
      </section>

      <section className="saas-section">
        <h3 className="saas-h3">성과 참고</h3>
        <div className="saas-detail-perf">
          <PerfTile label="평균 CTR" value={t.perf} sub="최근 30일"/>
          <PerfTile label="반응 수" value={t.recent.toLocaleString()+'건'} sub="최근 30일"/>
          <PerfTile label="잘 맞는 카테고리" value={t.cats[0]} sub="다른 분야도 가능"/>
          <PerfTile label="추천 톤" value={t.tone} sub="캐릭터 {t.char}와 호흡"/>
        </div>
      </section>

      <div className="saas-detail-cta">
        <button className="saas-btn saas-btn-ghost" onClick={()=>go('grid')}>다른 템플릿 비교</button>
        <button className="saas-btn saas-btn-primary saas-btn-lg" onClick={()=>go('setup')}>이 템플릿 선택하기</button>
      </div>
    </div>
  );
};
function AnatomyItem({ n, title, body }){
  return (
    <div className="saas-anatomy-item">
      <div className="saas-anatomy-num">{n}</div>
      <div className="saas-anatomy-title">{title}</div>
      <div className="saas-anatomy-body">{body}</div>
    </div>
  );
}
function PerfTile({ label, value, sub }){
  return (
    <div className="saas-perf-tile">
      <div className="saas-perf-label">{label}</div>
      <div className="saas-perf-value">{value}</div>
      <div className="saas-perf-sub">{sub}</div>
    </div>
  );
}

/* ===== 5. Performance ===== */
window.SaasPerf = function({ go }){
  const kpis = [
    { label:'최근 30일 수익', value:'₩2,840,000', sub:'+18.2% vs 전월', tone:'accent' },
    { label:'평균 CTR',      value:'5.4%',         sub:'템플릿 평균',    tone:'warm'   },
    { label:'평균 전환율',    value:'2.1%',         sub:'장바구니 도달',   tone:'soft'   },
    { label:'발행 수',        value:'142건',        sub:'한도 300건',     tone:'soft'   },
  ];
  const top = SAAS_TEMPLATES.slice().sort((a,b)=>b.recent-a.recent);
  return (
    <div className="saas-page">
      <div className="saas-greeting">
        <div className="saas-kicker">성과 참고</div>
        <h1 className="saas-display">선택을 도와줄 숫자만 모았어요</h1>
        <p className="saas-lead">세부 분석은 어드민에서 확인 — 여기서는 다음 발행에 도움 될 정보만 보여드립니다.</p>
      </div>

      <section className="saas-perf-kpis">
        {kpis.map(k=>(
          <div key={k.label} className={'saas-kpi saas-tone-'+k.tone}>
            <div className="saas-kpi-label">{k.label}</div>
            <div className="saas-kpi-value">{k.value}</div>
            <div className="saas-kpi-sub">{k.sub}</div>
          </div>
        ))}
      </section>

      <section className="saas-section saas-perf-grid">
        <div className="saas-card">
          <h3 className="saas-h3">추천 카테고리</h3>
          <ul className="saas-rec-list">
            <li><b>전자</b> · CTR 6.1% · 반응 2,104건</li>
            <li><b>생활</b> · CTR 5.2% · 반응 1,842건</li>
            <li><b>뷰티</b> · CTR 4.8% · 반응 980건</li>
          </ul>
        </div>
        <div className="saas-card">
          <h3 className="saas-h3">템플릿별 상대 성과</h3>
          <div className="saas-bars">
            {top.map(t=>(
              <div key={t.id} className="saas-bar-row">
                <span className="saas-bar-label">{t.id}</span>
                <div className="saas-bar-track">
                  <div className="saas-bar-fill" style={{width: (t.recent/2104*100)+'%', background:t.color}}/>
                </div>
                <span className="saas-bar-val">{t.recent.toLocaleString()}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="saas-card">
          <h3 className="saas-h3">최근 반응 요약</h3>
          <ul className="saas-rec-list">
            <li>구독자 평균 체류 <b>1분 24초</b> (+12s)</li>
            <li>가장 클릭 많은 슬롯 <b>BEST 1</b> (62%)</li>
            <li>이탈 가장 적은 톤 <b>친근</b></li>
            <li>가성비 키워드 <b>CTR +0.8%p</b></li>
            <li>리워드 발행 시 반응 <b>+22%</b></li>
          </ul>
        </div>
      </section>
    </div>
  );
};