const { PriceCard, PackageCard, Callout, Card } = window.MyMailerDesignSystem_77208c || {};

function PricingSection() {
  const [pack, setPack] = React.useState(2);
  const tiers = [
    {family:"managed",unitLabel:"캠페인 1회당",name:"베이직",audience:"HTML이 이미 준비된 경우",price:"100,000원",priceNote:"캠페인 1회 기준 · VAT 별도",ctaLabel:"견적 문의",
     features:[{label:"주소록 정제 기본"},{label:"테스트 컨펌",note:"1회"},{label:"예약 발송"},{label:"결과 리포트",note:"기본 수치"},{label:"소재 HTML 변환",included:false},{label:"분할 발송 설계",included:false},{label:"급행(당일) 발송",included:false}]},
    {family:"managed",unitLabel:"캠페인 1회당 · 구독 아님",name:"풀케어",audience:"소재부터 통째로 맡기는 경우",price:"250,000원",priceNote:"캠페인 1회 기준 · VAT 별도 · 가안",recommended:true,ctaLabel:"풀케어 견적받기",
     features:[{label:"소재 HTML 변환",note:"1종"},{label:"주소록 정제 + 사전 진단 리포트",emphasis:true},{label:"발신 도메인 진단",note:"최초 1회"},{label:"테스트 컨펌 · 수정 3회까지",emphasis:true},{label:"분할 발송 설계"},{label:"담당자 해설 리포트 + 개선 제안",emphasis:true},{label:"전담 담당자 지정",emphasis:true},{label:"디자인 신규 제작",included:false,note:"옵션"}]},
    {family:"managed",unitLabel:"연간 계약 · 월 정액",name:"매니지드",audience:"정기 발행·다건 운영",price:"월 800,000원~",priceNote:"연간 계약 기준 · VAT 별도 · 가안",ctaLabel:"상담 요청",
     features:[{label:"소재 HTML 변환",note:"월 N종"},{label:"주소록 정기 클렌징"},{label:"발신 도메인 점검",note:"분기 1회"},{label:"테스트 컨펌 무제한"},{label:"월간 리뷰 미팅",emphasis:true},{label:"전담 + 백업 담당자"},{label:"급행 발송",note:"월 N회 무할증"}]}
  ];
  const packs = [
    {count:"1회",label:"단건",validity:"3개월"},
    {count:"5회",label:"5회 팩",discount:"5% 할인",validity:"12개월"},
    {count:"10회",label:"10회 팩",discount:"10% 할인",validity:"12개월",note:"가장 많이 선택"},
    {count:"20회+",label:"협의",discount:"별도",validity:"24개월",note:"대행사·다건 운영"}
  ];
  const opts = [
    ["디자인 신규 제작","건당","외주 디자인 연동, 시안 2회 포함"],
    ["다국어 추가 발송","언어당","국·영·일·중"],
    ["첨부파일 발송","건당","용량 제한 별도 안내"],
    ["급행(당일) 발송","건당","스케줄 협의 후 가능"],
    ["링크별 통계 커스텀","건당","통계 삭제/부분 적용 포함"],
    ["설문 연동","건당","수신자별 코드 부여 포함"],
    ["기프티콘 발송","건당 + 상품가",""],
    ["문자(SMS/LMS) 동시 발송","건당 + 발송비",""]
  ];
  return (
    <div style={{display:"grid",gap:44}}>
      <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"repeat(3,1fr)",alignItems:"start"}}>
        {tiers.map((t,i)=><PriceCard key={i} {...t} href="https://cheom.zendesk.com/hc/ko/requests/new" />)}
      </div>
      <Callout tone="warning" title="표기 금액은 가안입니다">
        베이직 기준가는 실제 운영 이력에서 확인된 단가이며, 풀케어·매니지드 금액은 인건비 원가 산정 후 확정됩니다.
      </Callout>

      <div style={{display:"grid",gap:18}}>
        <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:16,flexWrap:"wrap"}}>
          <h3 style={{font:"var(--type-h3)",letterSpacing:"var(--tracking-display)"}}>회차 패키지로 미리 구매하면 더 저렴합니다</h3>
          <span style={{font:"var(--type-body-sm)",color:"var(--text-muted)"}}>선구매 후 회차 소진 · 만료 30일 전 알림</span>
        </div>
        <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"repeat(4,1fr)"}}>
          {packs.map((p,i)=><PackageCard key={i} {...p} selected={pack===i} onSelect={()=>setPack(i)} />)}
        </div>
      </div>

      <Card padding="0" style={{overflow:"hidden"}}>
        <table>
          <thead>
            <tr style={{background:"var(--surface-sunken)"}}>
              {["옵션","단위","비고"].map(h=>(
                <th key={h} style={{padding:"13px 20px",font:"var(--type-data)",letterSpacing:"var(--tracking-wide)",color:"var(--text-muted)",borderBottom:"1px solid var(--border-subtle)"}}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {opts.map((o,i)=>(
              <tr key={i}>
                <td style={{padding:"14px 20px",font:"var(--weight-medium) var(--text-base)/1.4 var(--font-sans)",borderBottom:"1px solid var(--border-subtle)"}}>{o[0]}</td>
                <td style={{padding:"14px 20px",font:"var(--type-data)",color:"var(--signal-600)",borderBottom:"1px solid var(--border-subtle)"}}>{o[1]}</td>
                <td style={{padding:"14px 20px",font:"var(--type-body-sm)",color:"var(--text-muted)",borderBottom:"1px solid var(--border-subtle)"}}>{o[2] || "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div>
  );
}
Object.assign(window, { PricingSection });