const { ComparisonTable, Button, Icon } = window.MyMailerDesignSystem_77208c || {};

/* §7-4 — 공용 컴포넌트. 풀케어 탭과 전용서버 탭 양쪽에 동일하게 삽입됩니다. */
function ChoiceTable() {
  return (
    <div style={{display:"grid",gap:32}}>
      <ComparisonTable
        rowLabelWidth={160}
        columns={[
          {label:"전용서버",family:"infra",eyebrow:"월 구독"},
          {label:"풀케어 발송",family:"managed",eyebrow:"캠페인 1회당",highlight:true}
        ]}
        rows={[
          {label:"파는 것",cells:["발송 능력",{text:"발송 작업",emphasis:true}]},
          {label:"단위",cells:[{text:"월 구독",emphasis:true},{text:"캠페인 1회당",emphasis:true}]},
          {label:"발송 주체",cells:["고객사 담당자",{text:"처음소프트",emphasis:true}]},
          {label:"HTML 제작",cells:["고객사",{text:"포함",emphasis:true}]},
          {label:"필요 인력",cells:["메일 담당자 1인 이상",{text:"없어도 됨",emphasis:true}]},
          {label:"적합한 경우",cells:["월 수십 회 이상 상시 발송, API 연동, 자체 시스템 통합","월 1~4회 정기 발행, 담당 인력 부재, 단발 캠페인"]},
          {label:"시작 비용",cells:["초기설치비 + 월 정액",{text:"캠페인 1건 비용만",emphasis:true}]}
        ]}
      />
      <div style={{display:"grid",gap:12,gridTemplateColumns:"repeat(3,1fr)"}}>
        {[
          {copy:"월 10회 넘게, 직접 보내신다면",cta:"전용서버 보기",variant:"secondary"},
          {copy:"월 몇 번, 맡기고 싶으시다면",cta:"풀케어 견적받기",variant:"primary"},
          {copy:"둘 다 애매하다면",cta:"상담 요청",variant:"outline"}
        ].map((b,i)=>(
          <div key={i} style={{display:"grid",gap:12,padding:"20px 22px",borderRadius:"var(--radius-lg)",background:"var(--surface-card)",border:"1px solid var(--border-subtle)"}}>
            <span style={{font:"var(--type-body-sm)",color:"var(--text-secondary)"}}>{b.copy}</span>
            <Button href={i === 0 ? "https://www.mymailer.kr/" : "https://cheom.zendesk.com/hc/ko/requests/new"} variant={b.variant} fullWidth iconRight={<Icon name="arrow-right" size={16}/>}>{b.cta}</Button>
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { ChoiceTable });