const { Card, Badge } = window.MyMailerDesignSystem_77208c || {};

function Cases() {
  const cases = [
    {tag:"정기 발행 매체",title:"10회 패키지 반복 구매",body:"매주 정해진 시간에 뉴스레터를 발행합니다. 회차 패키지를 선구매하고, 발행일마다 소재만 전달하면 나머지는 대행합니다.",metric:"주 1회 · 10회 팩 반복"},
    {tag:"대행사",title:"클라이언트별 다건 운영",body:"고객사마다 다른 발신 도메인과 주소록을 씁니다. 전담 담당자가 이력을 관리해 매번 설명할 필요가 없습니다.",metric:"20회 팩 · 다건 병행"},
    {tag:"대용량 단발",title:"13회 분할 발송 설계",body:"수신 서버 부하를 고려해 발송을 13회로 나눠 시차 발송했습니다. 시나리오별 발송 시각을 사전에 확정했습니다.",metric:"1캠페인 · 13회 분할"}
  ];
  return (
    <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"repeat(3,1fr)"}}>
      {cases.map((c,i)=>(
        <Card key={i} interactive>
          <div style={{display:"grid",gap:14}}>
            <Badge size="sm">{c.tag}</Badge>
            <h4 style={{font:"var(--type-h4)",letterSpacing:"var(--tracking-tight)"}}>{c.title}</h4>
            <p style={{font:"var(--type-body-sm)",color:"var(--text-secondary)",lineHeight:"var(--leading-relaxed)"}}>{c.body}</p>
            <div style={{paddingTop:14,borderTop:"1px solid var(--border-subtle)",font:"var(--type-data)",letterSpacing:"var(--tracking-wide)",color:"var(--signal-600)"}}>{c.metric}</div>
          </div>
        </Card>
      ))}
    </div>
  );
}
Object.assign(window, { Cases });