// ─── Infographic View — 솔루션 한눈에 보기 (시안: SpamOut) ─────────────────
// 제품 데이터 기반 세로 1장 인포그래픽 모달. PDF 브로셔 대체.
const InfographicView = ({ open, onClose, lang }) => {
  const isKo = lang !== 'en';
  if (!open) return null;
  const BLUE='#2563EB', NAVY='#0F1E3C', NAVY2='#13294F', CYAN='#06B6D4', MINT='#10B981', RED='#F87171', AMBER='#FBBF24';
  const d = isKo ? {
    product:'SpamOut', tag:'이메일 보안 게이트웨이', tagline:'메일 서버 앞단에서 위협을 먼저 차단합니다',
    probT:'왜 필요한가', probs:[['🎯','표적 피싱','AI 사칭 메일이 기존 필터 우회'],['📎','악성 첨부','클릭 한 번에 랜섬웨어 감염'],['⏱️','운영 부담','스팸 분류·오탐 복구에 시간 소모']],
    flowT:'동작 방식', flow:['수신 메일','7단계 다단계 검사','위협 차단·격리','정상 메일만 전달'],
    featT:'핵심 기능', feats:[['🛡️','다단계 스팸 필터링'],['🎣','피싱·사칭 탐지'],['🦠','악성 첨부 검사'],['🔗','URL 실시간 분석'],['⚙️','정책 기반 제어'],['📊','대시보드·리포트']],
    numT:'처리 현황 (구성 예시)', nums:[['37.2%','게이트웨이 차단율'],['184,320','일일 수신 검사'],['7단계','다단계 검사'],['99.9%','서비스 가용성']],
    planT:'도입 방식', plans:[['Cloud','10 사용자부터'],['구축형 SMB','50~900명'],['구축형 Enterprise','1,000명 이상']],
    note:'* 수치는 대시보드 구성 예시입니다. 실제 값은 고객 환경에 따라 다릅니다.',
    cta:'도입 상담하기', save:'이미지로 저장', close:'닫기',
  } : {
    product:'SpamOut', tag:'Email Security Gateway', tagline:'Stop threats in front of your mail server',
    probT:'Why it matters', probs:[['🎯','Targeted Phishing','AI-written mail bypasses filters'],['📎','Malicious Attachments','One click triggers ransomware'],['⏱️','Ops Load','Time lost to spam handling']],
    flowT:'How it works', flow:['Inbound Mail','7-Stage Inspection','Block & Quarantine','Clean Delivery'],
    featT:'Key Features', feats:[['🛡️','Multi-layer Filtering'],['🎣','Phishing Detection'],['🦠','Attachment Inspection'],['🔗','Real-time URL Analysis'],['⚙️','Policy Control'],['📊','Dashboard & Reports']],
    numT:'Processing (illustrative)', nums:[['37.2%','Gateway block rate'],['184,320','Daily inbound inspected'],['7 stages','Inspection pipeline'],['99.9%','Availability']],
    planT:'Deployment', plans:[['Cloud','from 10 users'],['On-Prem SMB','50–900 users'],['On-Prem Ent.','1,000+ users']],
    note:'* Illustrative figures. Actual values vary by environment.',
    cta:'Talk to Sales', save:'Save as Image', close:'Close',
  };
  const secK = { fontSize:11, fontWeight:800, letterSpacing:'0.14em', color:BLUE, marginBottom:12, textTransform:'uppercase' };
  return (
    <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:3000, background:'rgba(7,16,31,0.72)', backdropFilter:'blur(6px)', overflowY:'auto', padding:'40px 16px' }}>
      <div onClick={e=>e.stopPropagation()} style={{ maxWidth:640, margin:'0 auto', background:'#fff', borderRadius:20, overflow:'hidden', boxShadow:'0 32px 80px rgba(0,0,0,0.45)', animation:'igIn .45s cubic-bezier(.2,.7,.3,1) both' }}>
        <style>{`@keyframes igIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}`}</style>
        {/* HEADER */}
        <div style={{ background:`linear-gradient(135deg,${NAVY} 0%,${NAVY2} 70%)`, padding:'36px 36px 30px', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', right:-60, top:-60, width:220, height:220, borderRadius:'50%', background:`radial-gradient(circle,${BLUE}44,transparent 70%)` }}></div>
          <div style={{ display:'inline-block', fontSize:11, fontWeight:800, letterSpacing:'0.12em', color:CYAN, border:`1px solid ${CYAN}40`, borderRadius:100, padding:'4px 12px', marginBottom:14 }}>{d.tag}</div>
          <div style={{ fontSize:34, fontWeight:900, color:'#fff', letterSpacing:'-0.02em' }}>{d.product}</div>
          <div style={{ fontSize:15, color:'rgba(255,255,255,0.72)', marginTop:8 }}>{d.tagline}</div>
        </div>
        <div style={{ padding:'30px 36px 34px', display:'grid', gap:30 }}>
          {/* WHY */}
          <div><div style={secK}>{d.probT}</div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:10 }}>
              {d.probs.map(([ic,t,s],i)=>(<div key={i} style={{ background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:12, padding:'14px 12px' }}>
                <div style={{ fontSize:20 }}>{ic}</div><div style={{ fontSize:13.5, fontWeight:800, color:NAVY, margin:'6px 0 4px' }}>{t}</div><div style={{ fontSize:12, color:'#64748B', lineHeight:1.5 }}>{s}</div></div>))}
            </div></div>
          {/* FLOW */}
          <div><div style={secK}>{d.flowT}</div>
            <div style={{ display:'flex', alignItems:'stretch', gap:0 }}>
              {d.flow.map((f,i)=>(<React.Fragment key={i}>
                <div style={{ flex:1, background:i===1?`${BLUE}10`:i===2?`${RED}10`:'#F8FAFC', border:`1.5px solid ${i===1?BLUE+'55':i===2?RED+'44':'#E2E8F0'}`, borderRadius:10, padding:'12px 8px', textAlign:'center', fontSize:12.5, fontWeight:700, color:NAVY, display:'flex', alignItems:'center', justifyContent:'center', lineHeight:1.4 }}>{f}</div>
                {i<d.flow.length-1&&<div style={{ display:'flex', alignItems:'center', padding:'0 5px', color:BLUE, fontWeight:900 }}>→</div>}
              </React.Fragment>))}
            </div></div>
          {/* FEATURES */}
          <div><div style={secK}>{d.featT}</div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
              {d.feats.map(([ic,t],i)=>(<div key={i} style={{ display:'flex', alignItems:'center', gap:8, background:'#fff', border:'1px solid #E2E8F0', borderRadius:10, padding:'10px 12px' }}>
                <span style={{ fontSize:16 }}>{ic}</span><span style={{ fontSize:12.5, fontWeight:700, color:NAVY, lineHeight:1.3 }}>{t}</span></div>))}
            </div></div>
          {/* NUMBERS */}
          <div><div style={secK}>{d.numT}</div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:8 }}>
              {d.nums.map(([v,k],i)=>(<div key={i} style={{ background:`linear-gradient(160deg,${NAVY},${NAVY2})`, borderRadius:12, padding:'16px 10px', textAlign:'center' }}>
                <div style={{ fontSize:19, fontWeight:900, color:[CYAN,MINT,AMBER,'#A78BFA'][i] }}>{v}</div><div style={{ fontSize:10.5, color:'rgba(255,255,255,0.6)', marginTop:4, lineHeight:1.4 }}>{k}</div></div>))}
            </div>
            <div style={{ fontSize:10.5, color:'#94A3B8', marginTop:8 }}>{d.note}</div></div>
          {/* PLANS */}
          <div><div style={secK}>{d.planT}</div>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8 }}>
              {d.plans.map(([n,s],i)=>(<div key={i} style={{ border:`1.5px solid ${i===1?BLUE:'#E2E8F0'}`, background:i===1?`${BLUE}08`:'#fff', borderRadius:12, padding:'14px 12px', textAlign:'center' }}>
                <div style={{ fontSize:13.5, fontWeight:800, color:i===1?BLUE:NAVY }}>{n}</div><div style={{ fontSize:11.5, color:'#64748B', marginTop:4 }}>{s}</div></div>))}
            </div></div>
        </div>
        {/* FOOTER */}
        <div style={{ display:'flex', gap:10, padding:'0 36px 30px' }}>
          <button onClick={()=>{window.dispatchEvent(new CustomEvent('open-quote',{detail:'SpamOut'}));onClose();}} style={{ flex:1, background:BLUE, color:'#fff', border:'none', borderRadius:10, padding:'13px 0', fontSize:14, fontWeight:800, cursor:'pointer' }}>{d.cta}</button>
          <button onClick={onClose} style={{ padding:'13px 22px', background:'#F1F5F9', color:'#475569', border:'none', borderRadius:10, fontSize:14, fontWeight:700, cursor:'pointer' }}>{d.close}</button>
        </div>
      </div>
    </div>
  );
};
window.InfographicView = InfographicView;