// ─── Demo Modal ──────────────────────────────────────────────────────────────
const DemoModal = ({ sol, onClose, lang }) => {
  const [step, setStep] = React.useState(0);
  const isKo = lang === 'ko';

  const screens = [
    {
      title: isKo ? '로그인 화면' : 'Login Screen',
      subtitle: isKo ? `${sol.title} 관리 콘솔` : `${sol.title} Management Console`,
      content: (
        <div style={{maxWidth:320,margin:'0 auto',marginTop:16}}>
          <div style={{background:'rgba(255,255,255,0.05)',border:'1px solid rgba(255,255,255,0.1)',borderRadius:12,padding:24}}>
            <div style={{textAlign:'center',marginBottom:20}}>
              <div style={{width:48,height:48,borderRadius:12,background:`linear-gradient(135deg,${sol.color},#06B6D4)`,display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 12px',fontSize:22}}>🛡️</div>
              <div style={{color:'#fff',fontWeight:700,fontSize:16}}>{sol.title}</div>
              <div style={{color:'rgba(255,255,255,0.5)',fontSize:12,marginTop:2}}>Security Console v3.2</div>
            </div>
            <div style={{marginBottom:12}}>
              <div style={{fontSize:11,color:'rgba(255,255,255,0.5)',marginBottom:6,fontWeight:600}}>ID</div>
              <div style={{background:'rgba(255,255,255,0.07)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:8,padding:'10px 14px',color:'#fff',fontSize:13}}>admin@company.com</div>
            </div>
            <div style={{marginBottom:16}}>
              <div style={{fontSize:11,color:'rgba(255,255,255,0.5)',marginBottom:6,fontWeight:600}}>{isKo?'비밀번호':'Password'}</div>
              <div style={{background:'rgba(255,255,255,0.07)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:8,padding:'10px 14px',color:'#fff',fontSize:13}}>••••••••</div>
            </div>
            <div style={{background:`${sol.color}`,borderRadius:8,padding:'11px',textAlign:'center',color:'#fff',fontWeight:700,fontSize:14,cursor:'pointer'}} onClick={()=>setStep(1)}>
              {isKo?'로그인':'Sign In'} →
            </div>
          </div>
        </div>
      )
    },
    {
      title: isKo ? '위협 탐지 대시보드' : 'Threat Detection Dashboard',
      subtitle: isKo ? '실시간 보안 이벤트 모니터링' : 'Real-time Security Event Monitoring',
      content: (
        <div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginBottom:16}}>
            {[
              {label:isKo?'오늘의 위협':'Today\'s Threats',val:'247',color:'#EF4444'},
              {label:isKo?'차단된 공격':'Blocked Attacks',val:'246',color:'#0F9650'},
              {label:isKo?'위험도':'Risk Level',val:'LOW',color:'#06B6D4'},
            ].map((s,i)=>(
              <div key={i} style={{background:'rgba(255,255,255,0.04)',border:'1px solid rgba(255,255,255,0.08)',borderRadius:10,padding:14,textAlign:'center'}}>
                <div style={{fontFamily:'DM Sans',fontSize:22,fontWeight:700,color:s.color}}>{s.val}</div>
                <div style={{fontSize:11,color:'rgba(255,255,255,0.5)',marginTop:4}}>{s.label}</div>
              </div>
            ))}
          </div>
          <div style={{background:'rgba(239,68,68,0.08)',border:'1px solid rgba(239,68,68,0.2)',borderRadius:10,padding:14,marginBottom:12}}>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:8}}>
              <span style={{width:8,height:8,borderRadius:'50%',background:'#EF4444',display:'inline-block',animation:'pulse 1s infinite'}}></span>
              <span style={{fontSize:13,fontWeight:700,color:'#EF4444'}}>{isKo?'🚨 스피어 피싱 탐지':'🚨 Spear Phishing Detected'}</span>
            </div>
            <div style={{fontSize:12,color:'rgba(255,255,255,0.6)',lineHeight:1.6}}>
              {isKo?'발신: ceo-fake@malicious.com → 수신: finance@yourcompany.com':'From: ceo-fake@malicious.com → To: finance@yourcompany.com'}<br/>
              {isKo?'악성 첨부파일 포함 — 자동 격리 완료 ✅':'Malicious attachment detected — Auto-quarantined ✅'}
            </div>
          </div>
          <div style={{background:'rgba(15,150,80,0.08)',border:'1px solid rgba(15,150,80,0.2)',borderRadius:10,padding:14}}>
            <div style={{fontSize:12,color:'#0F9650',fontWeight:600}}>✅ {isKo?'AI 엔진 자동 차단 완료 — 246/247건 처리':'AI Engine auto-blocked — 246/247 threats handled'}</div>
          </div>
        </div>
      )
    },
    {
      title: isKo ? '접근 차단 시뮬레이션' : 'Access Block Simulation',
      subtitle: isKo ? '비인가 접근 시도 실시간 대응' : 'Real-time Unauthorized Access Response',
      content: (
        <div>
          <div style={{background:'rgba(239,68,68,0.06)',border:'1px solid rgba(239,68,68,0.15)',borderRadius:12,padding:20,marginBottom:16}}>
            <div style={{fontSize:13,fontWeight:700,color:'#EF4444',marginBottom:12}}>⚠️ {isKo?'비인가 접근 시도 감지':'Unauthorized Access Attempt Detected'}</div>
            {[
              {label:'IP', val:'185.234.218.97 (Russia)'},
              {label:isKo?'대상':'Target', val:isKo?'내부 HR 시스템 /admin':'Internal HR System /admin'},
              {label:isKo?'시도 횟수':'Attempts', val:'847 times in 3min'},
              {label:isKo?'공격 유형':'Attack Type', val:'Brute Force + Credential Stuffing'},
            ].map((r,i)=>(
              <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:'1px solid rgba(255,255,255,0.05)',fontSize:12}}>
                <span style={{color:'rgba(255,255,255,0.5)'}}>{r.label}</span>
                <span style={{color:'#fff',fontWeight:600}}>{r.val}</span>
              </div>
            ))}
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:8}}>
            {[
              {action:isKo?'IP 즉시 차단':'IP Immediately Blocked', done:true},
              {action:isKo?'관리자 알림 발송':'Admin Alert Sent', done:true},
              {action:isKo?'해당 계정 임시 잠금':'Account Temporarily Locked', done:true},
              {action:isKo?'포렌식 로그 저장 중...':'Saving Forensic Logs...', done:false},
            ].map((a,i)=>(
              <div key={i} style={{display:'flex',alignItems:'center',gap:10,padding:'8px 12px',background:a.done?'rgba(15,150,80,0.08)':'rgba(255,255,255,0.04)',border:`1px solid ${a.done?'rgba(15,150,80,0.2)':'rgba(255,255,255,0.08)'}`,borderRadius:8,fontSize:13}}>
                <span>{a.done?'✅':'⏳'}</span>
                <span style={{color:a.done?'#86EFAC':'rgba(255,255,255,0.6)'}}>{a.action}</span>
              </div>
            ))}
          </div>
        </div>
      )
    },
    {
      title: isKo ? '로그 분석 & 리포트' : 'Log Analysis & Report',
      subtitle: isKo ? 'AI 기반 보안 인사이트' : 'AI-Powered Security Insights',
      content: (
        <div>
          <div style={{marginBottom:16}}>
            <div style={{fontSize:12,color:'rgba(255,255,255,0.5)',marginBottom:10,fontWeight:600}}>
              {isKo?'이번 달 보안 요약 (AI 생성)':'Monthly Security Summary (AI Generated)'}
            </div>
            {[
              {label:isKo?'총 탐지 이벤트':'Total Events', val:'12,847', bar:85, color:'#2563EB'},
              {label:isKo?'자동 차단':'Auto-blocked', val:'12,831', bar:99, color:'#0F9650'},
              {label:isKo?'수동 검토':'Manual Review', val:'16', bar:1, color:'#F59E0B'},
              {label:isKo?'침해 성공':'Breaches', val:'0', bar:0, color:'#EF4444'},
            ].map((r,i)=>(
              <div key={i} style={{marginBottom:12}}>
                <div style={{display:'flex',justifyContent:'space-between',marginBottom:5,fontSize:12}}>
                  <span style={{color:'rgba(255,255,255,0.7)'}}>{r.label}</span>
                  <span style={{color:'#fff',fontWeight:700,fontFamily:'DM Sans'}}>{r.val}</span>
                </div>
                <div style={{background:'rgba(255,255,255,0.06)',borderRadius:4,height:6}}>
                  <div style={{width:`${r.bar}%`,height:'100%',background:r.color,borderRadius:4,transition:'width 0.6s ease'}}></div>
                </div>
              </div>
            ))}
          </div>
          <div style={{background:`linear-gradient(135deg,${sol.color}20,rgba(6,182,212,0.1))`,border:`1px solid ${sol.color}30`,borderRadius:10,padding:16}}>
            <div style={{fontSize:12,fontWeight:700,color:sol.color,marginBottom:6}}>🤖 AI {isKo?'추천 조치':'Recommended Actions'}</div>
            <div style={{fontSize:12,color:'rgba(255,255,255,0.7)',lineHeight:1.7}}>
              {isKo
                ?'• 러시아 IP 대역 (185.234.x.x) 전체 차단 권장\n• 임시 잠금된 계정 2건 비밀번호 재설정 필요\n• 다음 주 정기 취약점 스캔 예약됨'
                :'• Block entire Russian IP range (185.234.x.x)\n• 2 locked accounts need password reset\n• Weekly vulnerability scan scheduled for next week'}
            </div>
          </div>
        </div>
      )
    }
  ];

  const cur = screens[step];
  return (
    <div className="demo-overlay" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="demo-box">
        <div className="demo-topbar">
          <div className="demo-dots">
            <div className="demo-dot" style={{background:'#FF5F57'}}></div>
            <div className="demo-dot" style={{background:'#FFBD2E'}}></div>
            <div className="demo-dot" style={{background:'#28CA41'}}></div>
          </div>
          <div className="demo-title-bar">{isKo?'삼에스소프트':'3ES Soft'} — {sol.title} {isKo?'인터랙티브 데모':'Interactive Demo'}</div>
          <button onClick={onClose} style={{background:'none',border:'none',color:'rgba(255,255,255,0.5)',cursor:'pointer',fontSize:18,lineHeight:1}}>✕</button>
        </div>
        <div className="demo-body">
          <div className="demo-screen">
            <div style={{marginBottom:20}}>
              <div style={{fontSize:11,fontWeight:700,color:sol.color,letterSpacing:'1px',textTransform:'uppercase',marginBottom:4}}>STEP {step+1} / {screens.length}</div>
              <div style={{fontSize:20,fontWeight:700,color:'#fff',marginBottom:4}}>{cur.title}</div>
              <div style={{fontSize:13,color:'rgba(255,255,255,0.5)'}}>{cur.subtitle}</div>
            </div>
            {cur.content}
          </div>
        </div>
        <div className="demo-step-nav">
          <button onClick={()=>setStep(Math.max(0,step-1))} disabled={step===0}
            style={{padding:'9px 18px',background:step===0?'rgba(255,255,255,0.05)':'rgba(255,255,255,0.1)',border:'1px solid rgba(255,255,255,0.12)',borderRadius:8,color:step===0?'rgba(255,255,255,0.3)':'#fff',fontSize:13,fontWeight:600,cursor:step===0?'default':'pointer',fontFamily:'inherit'}}>
            ← {isKo?'이전':'Prev'}
          </button>
          <div className="demo-step-dots">
            {screens.map((_,i)=><div key={i} className={`demo-step-dot${i===step?' active':''}`}></div>)}
          </div>
          {step < screens.length-1
            ? <button onClick={()=>setStep(step+1)}
                style={{padding:'9px 18px',background:sol.color,border:'none',borderRadius:8,color:'#fff',fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'inherit'}}>
                {isKo?'다음':'Next'} →
              </button>
            : <button onClick={onClose}
                style={{padding:'9px 18px',background:'linear-gradient(135deg,#0F9650,#06B6D4)',border:'none',borderRadius:8,color:'#fff',fontSize:13,fontWeight:600,cursor:'pointer',fontFamily:'inherit'}}>
                ✅ {isKo?'체험 완료':'Demo Complete'}
              </button>
          }
        </div>
      </div>
    </div>
  );
};

// ─── Quote Modal (고도화) ────────────────────────────────────────────────────
const QuoteModal = ({ t, onClose, solTitle, lang }) => {
  const isKo = lang === 'ko';
  const L = o => (o && (o[lang] || o.ko || o.en)) || '';
  const spec = React.useMemo(() => window.quoteSpecFor(solTitle), [solTitle]);

  const [form, setForm] = React.useState(() => {
    const init = { _scale: spec.basis.def, _deploy: L(spec.deploy[0]) };
    if (spec.line) init._line = L(spec.line.opts[0]);
    spec.fields.forEach(f => { init[f.k] = f.t === 'multi' ? [] : (f.t === 'number' ? (f.def ?? 1) : L(f.opts[0])); });
    return init;
  });
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [errs, setErrs] = React.useState({});
  const [submitErr, setSubmitErr] = React.useState('');
  const [ticket, setTicket] = React.useState('');
  const up = (k,v) => { setForm(f=>({...f,[k]:v})); if (errs[k]) setErrs(e=>{const n={...e};delete n[k];return n;}); };
  const toggle = (k,v) => setForm(f=>{ const cur = f[k]||[]; return {...f, [k]: cur.includes(v) ? cur.filter(x=>x!==v) : [...cur, v]}; });
  // 필수 입력 규칙
  const rules = [
    { k:'company', type:'text' }, { k:'name', type:'text' },
    { k:'phone', type:'phone' },  { k:'email', type:'email' },
    { k:'_agree', type:'agree' },
  ];

  const handleSubmit = async () => {
    const v = window.validateForm(form, rules, lang);
    if (!v.ok) {
      setErrs(v.errors);
      const first = document.querySelector('.modal-box .err');
      if (first) first.focus({preventScroll:true});
      return;
    }
    setSending(true);
    const detail = spec.fields.map(f => {
      const v = form[f.k];
      return `${L(f.label)}: ${Array.isArray(v) ? (v.length?v.join(', '):'-') : (v||'-')}`;
    }).join('\n');
    const msg = `새 견적 요청
솔루션: ${solTitle||'미선택'}
회사명: ${form.company||'-'}
담당자: ${form.name||'-'}
연락처: ${form.phone||'-'}
이메일: ${form.email||'-'}
${spec.line ? L(spec.line.label)+': '+form._line+'\n' : ''}${L(spec.basis.label)}: ${form._scale}${L(spec.basis.unit)}
도입 방식: ${form._deploy}
${detail}
환경: ${form.env||'-'}
${spec.g2b && spec.g2b.verified ? '조달 등재: '+L(spec.g2b.vendor)+' / 식별번호 '+spec.g2b.items.map(i=>i.id).join(', ') : ''}
문의: ${form.message||'-'}`;
    const r = await sendTelegram(msg, { consent: form._agree === true });
    setSending(false);
    if (!r || !r.ok) {
      setSubmitErr(isKo
        ? '요청 전달에 실패했습니다. sales@3es.co.kr 또는 대표전화 031-212-3390 으로 연락 주세요.'
        : 'Submission failed. Please email sales@3es.co.kr or call +82-31-212-3390.');
      return;
    }
    setTicket(r.ticket);
    setSent(true);
  };

  return (
    <div className="modal-overlay" onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div className="modal-box">
        <div className="modal-header">
          <h2>{t.quote.title}{solTitle?` — ${solTitle}`:''}</h2>
          <button className="modal-close" onClick={onClose}><IconClose/></button>
        </div>
        <div className="modal-body">
          {sent ? (
            <div style={{textAlign:'center',padding:'20px 0'}}>
              <div style={{fontSize:48,marginBottom:16}}>✅</div>
              <div className="success-banner">{t.quote.success}</div>
              {ticket && <div style={{fontSize:12,color:'#64748B',marginTop:10,fontFamily:'DM Sans,sans-serif'}}>{isKo?'접수번호':'Ref.'}: {ticket}</div>}
              <div style={{fontSize:13,color:'#64748B',marginTop:12}}>{isKo?'담당자가 확인 후 영업일 기준 1일 내에 회신드립니다.':'A specialist will review and reply within one business day.'}</div>
            </div>
          ) : (
            <>
              {/* 솔루션별 규모 · 구성 요건 */}
              <div className="quote-calc">
                <div className="quote-calc-title">{isKo?'규모 · 구성 요건':'Scale & configuration'}</div>
                <div className="qspec-grid">
                  {spec.line && (
                    <div className="form-field" style={{gridColumn:'1 / -1'}}>
                      <label>{L(spec.line.label)}</label>
                      <select value={form._line} onChange={e=>up('_line',e.target.value)}>
                        {spec.line.opts.map((o,i)=><option key={i} value={L(o)}>{L(o)}</option>)}
                      </select>
                    </div>
                  )}
                  <div className="form-field">
                    <label>{L(spec.basis.label)} <span style={{opacity:.55,fontWeight:400}}>({L(spec.basis.unit)})</span></label>
                    <input type="number" min="1" value={form._scale} onChange={e=>up('_scale',e.target.value)}/>
                  </div>
                  <div className="form-field">
                    <label>{isKo?'도입 방식':'Deployment'}</label>
                    <select value={form._deploy} onChange={e=>up('_deploy',e.target.value)}>
                      {spec.deploy.map((d,i)=><option key={i} value={L(d)}>{L(d)}</option>)}
                    </select>
                  </div>
                  {spec.fields.map(f => (
                    <div key={f.k} className="form-field" style={f.t==='multi'?{gridColumn:'1 / -1'}:null}>
                      <label>{L(f.label)}</label>
                      {f.t === 'select' && (
                        <select value={form[f.k]} onChange={e=>up(f.k,e.target.value)}>
                          {f.opts.map((o,i)=><option key={i} value={L(o)}>{L(o)}</option>)}
                        </select>
                      )}
                      {f.t === 'number' && (
                        <input type="number" min={f.min ?? 0} value={form[f.k]} onChange={e=>up(f.k,e.target.value)}/>
                      )}
                      {f.t === 'text' && (
                        <input value={form[f.k]||''} onChange={e=>up(f.k,e.target.value)}/>
                      )}
                      {f.t === 'multi' && (
                        <div className="qspec-chips">
                          {f.opts.map((o,i)=>{ const v=L(o); const on=(form[f.k]||[]).includes(v); return (
                            <button type="button" key={i} className={'qspec-chip'+(on?' on':'')} onClick={()=>toggle(f.k,v)}>{v}</button>
                          ); })}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
                <div className="qspec-note">{L(spec.note)} {isKo?'상세 금액은 요청 내용 확인 후 담당자가 산정해 회신드립니다.':'A specialist will review your request and send a tailored quote.'}</div>
              </div>

              <div className="form-hint"><Req/>{isKo?' 표시는 필수 입력 항목입니다.':(lang==='ja'?' は必須項目です。':' Required fields.')}</div>
              <div className="form-grid">
                <div className="form-field"><label>{t.quote.fields.company}<Req/></label>
                  <input className={errs.company?'err':''} value={form.company||''} onChange={e=>up('company',e.target.value)}/><FieldErr msg={errs.company}/></div>
                <div className="form-field"><label>{t.quote.fields.name}<Req/></label>
                  <input className={errs.name?'err':''} value={form.name||''} onChange={e=>up('name',e.target.value)}/><FieldErr msg={errs.name}/></div>
                <div className="form-field"><label>{t.quote.fields.phone}<Req/></label>
                  <input className={errs.phone?'err':''} value={form.phone||''} placeholder="010-0000-0000" onChange={e=>up('phone',e.target.value)}/><FieldErr msg={errs.phone}/></div>
                <div className="form-field"><label>{t.quote.fields.email}<Req/></label>
                  <input type="email" className={errs.email?'err':''} value={form.email||''} placeholder="name@company.com" onChange={e=>up('email',e.target.value)}/><FieldErr msg={errs.email}/></div>
                <div className="form-field"><label>{t.quote.fields.env}</label><input placeholder={isKo?'예: Exchange 2019, 사용자 300명':'e.g. Exchange 2019, 300 users'} onChange={e=>up('env',e.target.value)}/></div>
                <div className="form-field"><label>{t.quote.fields.url}</label><input placeholder="https://" onChange={e=>up('url',e.target.value)}/></div>
              </div>
              <div className="form-field" style={{marginBottom:20}}>
                <label>{t.quote.fields.message}</label>
                <textarea onChange={e=>up('message',e.target.value)}></textarea>
              </div>
              <ConsentBlock lang={lang} value={!!form._agree} onChange={v=>up('_agree',v)}
                onOpenPolicy={()=>{ onClose(); setTimeout(()=>window.__goPrivacy&&window.__goPrivacy(),0); }}
                purpose={isKo?'견적 요청 접수·처리 및 결과 회신':undefined}
                items={isKo?'회사명, 담당자명, 연락처, 이메일, 관심 솔루션, 예상 사용자 수, 문의 내용':undefined}/>
              <FieldErr msg={errs._agree}/>
              {submitErr && (
                <div style={{background:'#FEF2F2',border:'1px solid #FECACA',borderRadius:10,padding:'12px 14px',marginTop:10,fontSize:13,color:'#B91C1C',lineHeight:1.65}}>{submitErr}</div>
              )}
              <button className="btn-primary" style={{width:'100%',justifyContent:'center',marginTop:8}} onClick={handleSubmit} disabled={sending}>
                {sending?(isKo?'전송 중...':'Sending...'):<>{t.quote.cta} <IconArrow/></>}
              </button>
              <div style={{fontSize:11.5,color:'#64748B',textAlign:'center',marginTop:8}}>
                {isKo?'제출 즉시 담당자에게 전달되며, 영업일 기준 1일 내에 회신드립니다':'Sent to our team immediately — we reply within one business day'}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

// ─── AI ChatBot (업그레이드) ─────────────────────────────────────────────────
const ChatBot = ({ t, lang, setPage }) => {
  const [open, setOpen] = React.useState(false);
  const [msgs, setMsgs] = React.useState([{ role:'bot', text: t.chat.greeting, suggestions: true }]);
  const [input, setInput] = React.useState('');
  const [requested, setRequested] = React.useState(false);   // 담당자 연결 요청 접수 여부
  const [connecting, setConnecting] = React.useState(false);
  const [handoff, setHandoff] = React.useState(false);   // 사람 상담 전환 카드 노출
  const kakaoUrl = (window.SITE_CONFIG && window.SITE_CONFIG.KAKAO_CHANNEL_URL) || '';
  const openHours = typeof window.isBusinessHours === 'function' ? window.isBusinessHours() : true;
  const bottomRef = React.useRef(null);
  const isKo = lang === 'ko';
  const L = isKo
    ? { connect:'💬 담당자와 실시간 상담', connecting:'담당자 연결 중...', connected:tk=>`담당자에게 상담 요청을 전달했습니다. (접수번호 ${tk})\n바로 상담을 원하시면 아래 카카오톡 채널 또는 031-212-3390 으로 연락해 주세요.`,
        agent:'담당자', end:'상담 종료', ended:'상담이 종료되었습니다. 다시 궁금한 점이 있으면 언제든 문의해 주세요.',
        expired:'상담 세션이 만료되었습니다. 다시 연결해 주세요.', fail:'요청 전달에 실패했습니다. 카카오톡 채널 또는 031-212-3390 으로 연락해 주세요.',
        mode:'실시간 상담', aiMode:'AI 상담', ph:'담당자에게 보낼 메시지를 입력하세요...' }
    : lang === 'ja'
    ? { connect:'💬 担当者とリアルタイム相談', connecting:'担当者に接続中...', connected:tk=>`担当者に相談リクエストを送信しました。(受付番号 ${tk})\nお急ぎの場合は 031-212-3390 までご連絡ください。`,
        agent:'担当者', end:'相談終了', ended:'相談を終了しました。ご不明点があればいつでもお問い合わせください。',
        expired:'セッションが期限切れです。再接続してください。', fail:'リクエストの送信に失敗しました。031-212-3390 までご連絡ください。',
        mode:'リアルタイム相談', aiMode:'AI相談', ph:'担当者へのメッセージを入力...' }
    : { connect:'💬 Chat with a specialist', connecting:'Connecting...', connected:tk=>`Your request has been sent to our team. (Ref. ${tk})\nFor an immediate response, use our KakaoTalk channel or call +82-31-212-3390.`,
        agent:'Specialist', end:'End chat', ended:'Chat ended. Feel free to reach out anytime.',
        expired:'Session expired. Please reconnect.', fail:'We could not deliver your request. Please use our KakaoTalk channel or call +82-31-212-3390.',
        mode:'Live chat', aiMode:'AI chat', ph:'Message our specialist...' };

  const KEYWORD_MAP = [
    { keys:['메일','이메일','피싱','phishing','email','mail','spam'], sol:'sol_email', label:isKo?'이메일 보안':'Email Security' },
    { keys:['시스템','서버','엔드포인트','랜섬','ransomware','endpoint','server','edr','mdm'], sol:'sol_system', label:isKo?'시스템 보안':'System Security' },
    { keys:['네트워크','network','방화벽','firewall','vpn','ztna','nac'], sol:'sol_network', label:isKo?'네트워크 보안':'Network Security' },
    { keys:['ai','인공지능','이상탐지','siem','자동','automation'], sol:'sol_ai', label:isKo?'AI 보안':'AI Security' },
  ];

  const detectSol = (text) => {
    const lower = text.toLowerCase();
    for (const k of KEYWORD_MAP) {
      if (k.keys.some(kw => lower.includes(kw))) return k;
    }
    return null;
  };

  React.useEffect(() => {
    if (bottomRef.current) {
      const el = bottomRef.current.parentNode;
      el.scrollTop = el.scrollHeight;
    }
  }, [msgs]);

  // 담당자 연결 요청 — 세션 중계가 아니라 1회성 알림(메일)으로 접수한다.
  const requestAgent = async () => {
    if (requested || connecting) return;
    setConnecting(true);
    setMsgs(x => [...x, { role:'bot', text:L.connecting }]);
    try {
      let ep = (window.SITE_CONFIG && window.SITE_CONFIG.CHAT_ENDPOINT) || '/api/chat-relay.php';
      if (location.protocol === 'http:' && location.hostname !== 'localhost') ep = 'https://' + location.host + ep;
      const r = await fetch(ep, {
        method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({
          type: isKo ? '채팅 상담 요청' : 'Live chat request',
          product: (() => { const d = detectSol(msgs.filter(x=>x.role==='user').map(x=>x.text).join(' ')); return d ? d.label : '-'; })(),
          channel: isKo ? '홈페이지 채팅' : 'Website chat',
          inHours: openHours,
          history: msgs.filter(m=>m.role==='user').slice(-3).map(m=>({ role:'user', text:m.text })),
        }),
      }).then(res=>res.ok?res.json():null).catch(()=>null);
      if (!r || !r.ok || !r.ticket) {
        // 전달 실패 — 접수번호를 만들어내지 않고 대체 연락 경로를 안내한다.
        setMsgs(x => [...x.slice(0,-1), { role:'bot', text:L.fail, system:true }]);
        setHandoff(true);
        setConnecting(false);
        return;
      }
      setRequested(true);
      setMsgs(x => [...x.slice(0,-1), { role:'bot', text:L.connected(r.ticket), system:true }]);
    } catch {
      setMsgs(x => [...x.slice(0,-1), { role:'bot', text:L.fail, system:true }]);
      setHandoff(true);
    }
    setConnecting(false);
  };

  const send = async (text) => {
    const userMsg = (text || input).trim();
    if (!userMsg) return;
    setInput('');
    setMsgs(m => [...m, { role:'user', text: userMsg }]);

    // 사람 상담 의도 감지
    const HUMAN = ['사람','상담원','담당자','전화','연결','견적 상담','카톡','카카오','통화','specialist','human','agent','call me'];
    if (HUMAN.some(k => userMsg.toLowerCase().includes(k))) { setHandoff(true); }

    const detected = detectSol(userMsg);
    setMsgs(m => [...m, { role:'bot', text:'...' }]);

    // 안내형 응답 — 서버 없이도 동작한다.
    // window.claude 가 있는 환경(프리뷰)에서는 AI 응답을 우선 사용하고,
    // 없는 실제 홈페이지에서는 키워드 기반 안내로 응답한다.
    const guided = () => {
      const lower = userMsg.toLowerCase();
      const has = (...k) => k.some(x => lower.includes(x));
      if (has('견적','가격','비용','price','quote','cost'))
        return isKo ? '견적은 사용자 수·서버 대수 등 규모와 도입 방식(클라우드/구축형)에 따라 산정됩니다.\n제품 페이지의 [견적 요청]에서 구성을 입력해 주시면 담당자가 검토해 회신드립니다.'
                    : 'Pricing depends on scale (users, servers) and deployment model. Use “Request a quote” on the product page and our team will review it.';
      if (has('데모','시연','poc','demo','테스트','trial'))
        return isKo ? '데모와 기술 검증(PoC)을 지원합니다. 환경과 검증하고 싶은 항목을 알려주시면 일정을 조정해 드립니다.'
                    : 'We support demos and PoCs. Tell us your environment and what you want to validate, and we will arrange a schedule.';
      if (has('조달','나라장터','g2b','공공','입찰'))
        return isKo ? '주요 솔루션은 나라장터 디지털서비스몰에 등재되어 있어 공공기관에서 조달 구매가 가능합니다.\n필요한 품목과 수량을 알려주시면 식별번호와 함께 안내드립니다.'
                    : 'Our main solutions are listed on the public procurement mall. Tell us the items and quantities you need.';
      if (has('isms','인증','컴플라이언스','개인정보보호법','감사','compliance','audit'))
        return isKo ? 'ISMS-P·개인정보보호법·전자금융감독규정 대응을 지원합니다. 어떤 항목을 준비 중인지 알려주시면 필요한 구성을 제안드립니다.'
                    : 'We support ISMS-P, privacy law and financial regulation readiness. Tell us which requirements you are preparing for.';
      const d = detectSol(userMsg);
      if (d) return isKo ? `${d.label} 영역으로 안내드릴 수 있습니다. 아래 버튼에서 솔루션 구성을 확인하시고, 환경(사용자 수·현재 사용 제품)을 알려주시면 더 정확히 제안드립니다.`
                         : `This falls under ${d.label}. Check the solutions below, and tell us your environment for a more precise recommendation.`;
      return isKo ? '문의 내용을 담당자에게 전달해 드릴 수 있습니다.\n아래에서 상담 유형을 선택하시거나, 사용 중인 환경과 고민하시는 과제를 적어주시면 맞는 솔루션을 안내드리겠습니다.'
                  : 'We can pass this to a specialist. Pick a topic below, or describe your environment and the problem you are trying to solve.';
    };

    const attach = (text) => {
      const botMsg = { role:'bot', text };
      if (detected) botMsg.link = { label: `${detected.label} ${isKo?'솔루션 보기':'Solutions'}`, page: detected.sol };
      setMsgs(m=>[...m.slice(0,-1), botMsg]);
    };

    if (window.claude && typeof window.claude.complete === 'function') {
      try {
        const systemPrompt = `You are a security consultant chatbot for 3ES Soft (삼에스소프트), a Korean B2B IT security company offering email, system, network, endpoint, data, privacy and AI security solutions. Be concise and professional, answer in the user's language, never invent prices or customer references, and end by offering to connect them with a specialist.`;
        const reply = await window.claude.complete({ messages:[{role:'user', content:userMsg}], system: systemPrompt });
        attach(reply);
        return;
      } catch { /* 아래 안내형으로 대체 */ }
    }
    attach(guided());
  };

  // 카카오톡 전환 · 문의 남기기 시 내부 알림 (개인정보 없이 최소 정보만)
  const notifyHandoff = async (kind) => {
    const asked = msgs.filter(m=>m.role==='user').slice(-3).map(m=>m.text).join(' / ');
    try {
      await window.submitLead({
        type: kind || '카카오톡 상담 전환',
        product: (detectSol(asked)||{}).label || '-',
        company: '(AI 상담)', name: '(미입력)', email: 'chat@3es.co.kr',
        message: (isKo?'AI 상담 중 사람 상담 전환 요청':'Handoff requested from AI chat') + (asked ? '\n최근 질문: ' + asked : ''),
        extra: { channel: kind || 'kakao', businessHours: openHours },
      });
    } catch {}
  };

  const quickReplies = isKo
    ? ['우리 회사에 맞는 솔루션 찾기', '견적 · PoC 문의', '보안 문제 상담']
    : ['Find the right solution', 'Quote / PoC inquiry', 'Security problem'];
  const talkLabel = isKo ? '담당자와 상담하기' : 'Talk to a specialist';

  return (
    <>
      {open && (
        <div className="chat-window">
          <div className="chat-header">
            <div className="chat-header-avatar"><Ico name="shield" size={20}/></div>
            <div className="chat-header-info">
              <h4>{isKo?'삼에스소프트 AI 보안 상담':'AI Security Chat'}</h4>
              <span style={{color: openHours ? '#86EFAC' : '#FCD34D'}}>
                {openHours ? (isKo?'상담 가능':'Available now') : (isKo?'상담 접수 가능':'Leave a message')}
              </span>
            </div>
            <button className="chat-close-btn" onClick={()=>setOpen(false)}><IconClose/></button>
          </div>
          <div className="chat-messages">
            {msgs.map((m,i)=>(
              <div key={i} style={{display:'flex',flexDirection:'column',alignItems:m.role==='user'?'flex-end':'flex-start',gap:4}}>
                {m.agentName && <span style={{fontSize:10,fontWeight:700,color:'#0EA5E9',letterSpacing:'.3px',marginLeft:2}}>🎧 {m.agentName}</span>}
                <div className={`chat-msg ${m.role}`} style={m.system?{background:'rgba(37,99,235,0.06)',border:'1px solid rgba(37,99,235,0.15)',color:'#475569',whiteSpace:'pre-line',maxWidth:'92%'}:(m.agentName?{background:'rgba(14,165,233,0.10)',border:'1px solid rgba(14,165,233,0.22)',color:'#0F1E3C'}:undefined)}>{m.text}</div>
                {m.suggestions && (
                  <div style={{display:'flex',flexDirection:'column',gap:4,width:'100%'}}>
                    {quickReplies.map((q,qi)=>(
                      <button key={qi} className="chat-suggestion" onClick={()=>send(q)}>{q}</button>
                    ))}
                    <button className="chat-suggestion talk" onClick={()=>setHandoff(true)}>
                      <Ico name="chat" size={14}/> {talkLabel}
                    </button>
                  </div>
                )}
                {m.link && (
                  <button className="chat-suggestion" onClick={()=>{setOpen(false);setPage(m.link.page);}}>
                    {m.link.label}
                  </button>
                )}
              </div>
            ))}
            {!requested && handoff && (
              <div className="chat-handoff">
                <div className="ch-t">{isKo?'보안 전문가에게 연결해드릴까요?':'Connect with a specialist?'}</div>
                <div className="ch-d">{isKo?'지금까지 문의하신 내용을 기준으로 상담을 이어갈 수 있습니다.':'We can continue from what you have asked so far.'}</div>
                {!openHours && <div className="ch-off">{isKo?'지금은 업무시간이 아닙니다. 남겨주시면 다음 영업일에 확인 후 연락드립니다.':'Outside business hours — we will reply on the next business day.'}</div>}
                {kakaoUrl ? (
                  <a className="ch-kakao" href={kakaoUrl} target="_blank" rel="noopener noreferrer" onClick={notifyHandoff}>
                    <Ico name="chat" size={16}/> {isKo?'카카오톡으로 상담하기':'Chat on KakaoTalk'}
                  </a>
                ) : (
                  <div className="ch-kakao off" title="window.SITE_CONFIG.KAKAO_CHANNEL_URL">
                    <Ico name="alert" size={16}/> KAKAO_CHANNEL_URL {isKo?'설정 필요':'not configured'}
                  </div>
                )}
                <div className="ch-alt">
                  <button onClick={()=>{ notifyHandoff('문의 남기기'); setOpen(false); setPage && setPage('contact'); }}>
                    {isKo?'문의 남기기':'Leave an inquiry'}
                  </button>
                  <button onClick={requestAgent} disabled={connecting}>
                    {connecting ? L.connecting : (isKo?'담당자 연결 요청':'Request a callback')}
                  </button>
                </div>
              </div>
            )}
            <div ref={bottomRef}></div>
          </div>
          {!requested && !handoff && (
            <button onClick={()=>setHandoff(true)} className="chat-talk-btn">
              <Ico name="chat" size={15}/> {talkLabel}
            </button>
          )}
          <div className="chat-input-area">
            <input className="chat-input" placeholder={t.chat.placeholder} value={input}
              onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==='Enter'&&send()}/>
            <button className="chat-send" onClick={()=>send()}>{t.chat.send}</button>
          </div>
        </div>
      )}
      <button className="chat-btn" onClick={()=>setOpen(!open)} title={isKo?'AI 보안 상담':'AI Security Chat'}>
        {open?<IconClose/>:<IconChat/>}
      </button>
    </>
  );
};

// ─── Floating CTA Bar ────────────────────────────────────────────────────────
// 원칙: 고정 바는 한 가지 행동만 묻는다.
//  - 히어로를 지난 뒤에만 나타남
//  - 페이지 하단 CTA 섹션이 화면에 보이면 숨김 (그 순간에는 완전한 중복)
const FloatingCTA = ({ t, lang, setPage, openQuote, openDemo, solTitle, sol }) => {
  const [visible, setVisible] = React.useState(false);
  const isKo = lang === 'ko';

  React.useEffect(() => {
    let ctaInView = false;
    const update = () => setVisible(window.scrollY > 400 && !ctaInView);

    // 하단 CTA 섹션(문의 유도 블록)을 찾아 화면에 들어오면 바를 숨긴다
    const targets = () => [...document.querySelectorAll('[data-screen-label="Contact"], .ab-cta, [data-cta-block]')];
    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver(entries => {
        ctaInView = entries.some(e => e.isIntersecting);
        update();
      }, { rootMargin: '0px 0px -10% 0px' });
      targets().forEach(el => io.observe(el));
    }
    window.addEventListener('scroll', update, { passive: true });
    update();
    return () => { window.removeEventListener('scroll', update); if (io) io.disconnect(); };
  }, [solTitle]);

  return (
    <div className={`floating-cta ${visible?'visible':''}`}>
      <button className="btn-primary" style={{padding:'11px 26px',fontSize:13.5}} onClick={()=>setPage('contact')}>
        {isKo?'보안 상담 요청':(lang==='ja'?'セキュリティ相談':'Talk to a specialist')} <IconArrow/>
      </button>
    </div>
  );
};

Object.assign(window, { DemoModal, QuoteModal, ChatBot, FloatingCTA });