const { PersonaCard } = window.MyMailerDesignSystem_77208c || {};

function SelfCheck() {
  const [sel, setSel] = React.useState(null);
  const people = [
    {icon:"user",quote:"메일 담당자가 저 혼자예요",type:"A · 담당자 1인 기관",examples:"대학교 · 진흥원 · 지자체 센터 · 극장",pain:"HTML을 다룰 인력이 없고, 담당자 교체가 잦습니다."},
    {icon:"calendar-clock",quote:"매주 화요일 11시 50분, 놓치면 안 돼요",type:"B · 정기 발행 매체",examples:"신문사 · 협회 · 뉴스레터 발행사",pain:"매주·매월 반복인데 매번 손이 갑니다."},
    {icon:"briefcase",quote:"고객사 캠페인을 대신 돌려야 해요",type:"C · 대행사·에이전시",examples:"광고대행사 · 인쇄사 · 커뮤니케이션즈",pain:"클라이언트별 다건을 동시에 소화해야 합니다."}
  ];
  return (
    <div style={{display:"grid",gap:"var(--grid-gap)",gridTemplateColumns:"repeat(3,1fr)"}}>
      {people.map((p,i)=>(
        <PersonaCard key={i} {...p} selected={sel===i} onSelect={()=>setSel(sel===i?null:i)} />
      ))}
    </div>
  );
}
Object.assign(window, { SelfCheck });