const { ModuleCard, Tag } = window.MyMailerDesignSystem_77208c || {};

function Modules() {
  const mods = [
    {icon:"file-code-2",title:"소재 제작·변환",description:"이미지·PPT·워드 무엇을 주셔도 메일용 HTML로 변환합니다. 반응형·네이버 호환까지 처리합니다."},
    {icon:"list-filter",title:"주소록 정제",description:"중복·오류 주소·수신거부자를 제거하고, 실제 발송 대상 수를 발송 전에 확정해 알려드립니다."},
    {icon:"scan-search",title:"발신 환경 진단",description:"발신 도메인의 SPF·DKIM 설정을 점검합니다. 네이버·Gmail 정책에 걸리는 구성은 사전에 잡습니다."},
    {icon:"shield-check",title:"테스트 컨펌",description:"실제 메일함에 테스트를 보내 확인받습니다. 승인 전에는 실발송하지 않습니다."},
    {icon:"calendar-clock",title:"예약·분할 발송",description:"원하는 일시에 정확히. 대용량은 수신 서버 부하를 고려해 회차를 나눠 보냅니다."},
    {icon:"activity",title:"발송 모니터링",description:"발송 중 실시간 확인. 반송·지연 감지 시 담당자가 즉시 대응합니다."},
    {icon:"chart-no-axes-column",title:"결과 리포트",description:"발송·도달·오픈·클릭·수신거부를 정리해 회신합니다. 다음 회차 개선 포인트를 함께 제안합니다."},
    {icon:"user-check",title:"전담 담당자",description:"매번 처음부터 설명하지 않으셔도 됩니다. 지난 회차 이력을 아는 담당자가 붙습니다."}
  ];
  const options = ["디자인 신규 제작","다국어 발송(국·영·일·중)","첨부파일 발송","링크별 통계 분석 커스텀","설문 연동","기프티콘 발송","문자 동시 발송"];
  return (
    <div style={{display:"grid",gap:32}}>
      <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"repeat(4,1fr)"}}>
        {mods.map((m,i)=><ModuleCard key={i} index={i+1} {...m} />)}
      </div>
      <div style={{display:"grid",gap:14,padding:"22px 24px",borderRadius:"var(--radius-lg)",background:"var(--surface-card)",border:"1px solid var(--border-subtle)"}}>
        <div style={{font:"var(--type-data)",letterSpacing:"var(--tracking-wide)",color:"var(--text-muted)"}}>추가 옵션 · 별도 견적</div>
        <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>{options.map(o=><Tag key={o}>{o}</Tag>)}</div>
      </div>
    </div>
  );
}
Object.assign(window, { Modules });