// ─── SpamOut — 안티 스팸메일 / 이메일 보안 게이트웨이 ─────────────────────────
// 일반 보안 제품 → 솔루션 상세형 페이지 (딥 네이비 + 블루)
// Flow: HERO → PROBLEM → SOLUTION → FEATURES → COMPARISON → BENEFITS → USE CASES → PRICE → DOWNLOAD → FAQ → CTA

// 숫자 카운트업 — "184,320통" / "37.2%" / "0.8초" 같은 혼합 문자열 대응
const useCountUp = (text, run, dur = 1100) => {
  const [out, setOut] = React.useState(() => String(text).replace(/[\d][\d,.]*/g, m => m.replace(/[\d]/g, '0')));
  React.useEffect(() => {
    if (!run) return;
    const src = String(text);
    const m = src.match(/[\d][\d,.]*/);
    if (!m) { setOut(src); return; }
    const raw = m[0];
    const target = parseFloat(raw.replace(/,/g, ''));
    if (!isFinite(target)) { setOut(src); return; }
    const dec = (raw.split('.')[1] || '').length;
    const comma = raw.includes(',');
    const t0 = performance.now();
    let id = 0;
    const tick = (now) => {
      const p = Math.min(1, (now - t0) / dur);
      const e = 1 - Math.pow(1 - p, 3);
      const v = target * e;
      let str = dec ? v.toFixed(dec) : String(Math.round(v));
      if (comma) { const [i, d] = str.split('.'); str = Number(i).toLocaleString() + (d ? '.' + d : ''); }
      setOut(src.replace(raw, str));
      if (p < 1) id = requestAnimationFrame(tick);
    };
    id = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(id);
  }, [text, run, dur]);
  return out;
};

const CountValue = ({ value, run, dur, style }) => <span style={style}>{useCountUp(value, run, dur)}</span>;

const SpamOutPage = ({ lang, setPage, openQuote }) => {
  const dashRef = React.useRef(null);
  const [dashIn, setDashIn] = React.useState(false);
  const [hoverKpi, setHoverKpi] = React.useState(null);
  const [hoverSlice, setHoverSlice] = React.useState(null);
  const [hoverBar, setHoverBar] = React.useState(null);
  const [hoverRow, setHoverRow] = React.useState(null);
  React.useEffect(() => {
    const el = dashRef.current; if (!el) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setDashIn(true); return; }
    const ob = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setDashIn(true); ob.disconnect(); } }, { threshold: 0.25 });
    ob.observe(el);
    return () => ob.disconnect();
  }, []);
  const [dlOpen, setDlOpen]     = React.useState(false);
  const [igOpen, setIgOpen]     = React.useState(false);
  const [dlSent, setDlSent]     = React.useState(false);
  const [dlSending, setDlSending] = React.useState(false);
  const [dlErr, setDlErr]       = React.useState('');
  const [dlForm, setDlForm]     = React.useState({ company:'', name:'', email:'', phone:'', plan:'Cloud' });
  const [dlErrs, setDlErrs] = React.useState({});
  const dlUp = (k,v) => { setDlForm(p=>({...p,[k]:v})); if (dlErrs[k]) setDlErrs(e=>{const n={...e};delete n[k];return n;}); };
  const dlRules = [{ k:'company', type:'text' }, { k:'name', type:'text' }, { k:'email', type:'email' }, { k:'_agree', type:'agree' }];
  const [advOpen, setAdvOpen]   = React.useState(false);
  const [openFaqs, setOpenFaqs] = React.useState([0]);
  const toggleFaq = (i) => setOpenFaqs(prev => prev.includes(i) ? prev.filter(x=>x!==i) : [...prev, i]);
  const isKo = lang === 'ko';
  // 인증 정보 — 관리자에서 수정 가능 (localStorage)
  const certs = (typeof LS !== 'undefined' ? LS.get('3es_spamout_certs', null) : null) || [
    { name:'CC 인증', en:'Common Criteria', no:'인증 정보 확인 후 표시' },
    { name:'GS 인증', en:'Good Software (1등급)', no:'인증 정보 확인 후 표시' },
    { name:'조달청 디지털몰', en:'나라장터 등록', no:'조달 식별정보 확인 후 표시' },
  ];

  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('revealed'); });
    }, { threshold: 0.1 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });

  const handleDownload = async () => {
    const _v = window.validateForm(dlForm, dlRules, lang);
    if (!_v.ok) { setDlErrs(_v.errors); return; }
    setDlSending(true);
    const msg = `📥 SpamOut 자료 요청 / 리드\n회사: ${dlForm.company||'-'}\n담당자: ${dlForm.name||'-'}\n이메일: ${dlForm.email||'-'}\n연락처: ${dlForm.phone||'-'}\n관심 도입: ${dlForm.plan}\n시간: ${new Date().toLocaleString('ko-KR')}`;
    const _r = await sendTelegram(msg, { consent: dlForm._agree === true });

    if (!_r || !_r.ok) {

      setDlSending(false);

      setDlErr(isKo ? '요청 전달에 실패했습니다. sales@3es.co.kr 또는 031-212-3390 으로 연락해 주세요.' : 'Submission failed. Please email sales@3es.co.kr or call +82-31-212-3390.');

      return;

    }
    // 관리자 문의 리스트에 적재
    try {
      if (typeof LS !== 'undefined') {
        const list = LS.get('3es_inquiries', []);
        const nextId = (list.reduce((m,x)=>Math.max(m, x.id||0), 0) || 0) + 1;
        list.unshift({ id:nextId, company:dlForm.company||'-', name:dlForm.name||'-',
          date:new Date().toLocaleDateString('ko-KR').replace(/\. /g,'.').replace(/\.$/,''),
          type:'SpamOut 자료요청 ('+dlForm.plan+')', status:'new',
          message:`이메일:${dlForm.email} / 연락처:${dlForm.phone}` });
        LS.set('3es_inquiries', list);
      }
    } catch(e) {}
    setDlSending(false);
    setDlSent(true);
  };

  const NAVY  = '#0F1E3C';
  const NAVY2 = '#13294F';
  const BLUE  = '#2563EB';
  const BLUE2 = '#3B82F6';
  const CYAN  = '#06B6D4';
  const RED   = '#EF4444';
  const MINT  = '#10B981';

  const t = isKo ? {
    badge:'EMAIL SECURITY GATEWAY',
    parent:'이메일 보안',
    product:'SpamOut',
    tagline:'이메일 보안 게이트웨이',
    h1a:'메일 서버 앞단에서',
    h1b:'위협을 먼저 차단합니다',
    sub:'SpamOut은 메일 서버 앞단에서 스팸·피싱·랜섬웨어·악성 첨부파일을 차단하는 이메일 보안 게이트웨이입니다. 정상 업무 메일 흐름은 유지하고, 위협 메일은 단계별 정책으로 걸러냅니다.',
    chips:['안티 스팸','피싱 차단','랜섬웨어 대응','악성 첨부 검사','기존 메일서버 그대로 연동'],
    cta1:'도입 상담', cta2:'견적 문의', cta3:'데모 신청', cta4:'자료 요청',

    prob:{ k:'01 — PROBLEM', title:'스팸은 단순 광고가 아니라\n조직을 노리는 1차 침투 경로입니다', sub:'전체 사이버 공격의 다수가 한 통의 메일에서 시작됩니다.' },
    problems:[
      { icon:'🎯', tag:'피싱·사칭', title:'정교해지는 표적 피싱', d:'AI로 작성된 사칭 메일이 기존 필터를 우회합니다. 임원·재무 담당자를 노린 표적 공격이 늘고 있습니다.' },
      { icon:'📎', tag:'악성 첨부', title:'첨부파일 한 번에 뚫리는 내부망', d:'문서·압축파일에 숨은 악성코드가 클릭 한 번으로 실행됩니다. 랜섬웨어 감염의 주요 경로입니다.' },
      { icon:'⏱️', tag:'운영 부담', title:'스팸 처리에 소모되는 업무시간', d:'대량 스팸 분류, 오탐 복구, 사용자 문의 대응에 보안·IT 담당자의 시간이 소모됩니다.' },
    ],

    dash:{ k:'03 — DASHBOARD', title:'하루 수발신 메일이\n어떻게 처리되는지 한눈에 확인합니다',
      sub:'총 처리량, 차단 유형별 비중, 검사 단계별 처리 결과, 시간대별 추이를 하나의 화면에서 확인합니다.',
      note:'* 대시보드 구성 예시입니다. 실제 수치는 고객 환경과 메일 정책에 따라 달라집니다.',
      stats:[
        { k:'일일 수신 메일', v:'184,320통', s:'전체 검사 대상' },
        { k:'일일 발신 메일', v:'46,180통', s:'사외 발송 포함' },
        { k:'차단률', v:'37.2%', s:'스팸·피싱·악성 합계' },
        { k:'악성 첨부 차단', v:'1,842건', s:'확장자·압축·Hash' },
        { k:'평균 처리 지연', v:'0.8초', s:'게이트웨이 구간' },
        { k:'사용자 전달', v:'62.8%', s:'정상 업무 메일' },
      ],
      cls:{ k:'CLASSIFICATION', title:'처리 결과 분류', centerLabel:'정상 전달', centerValue:'62.8%',
        items:[
          { t:'정상 전달', v:'62.8%', c:'#34D399' },
          { t:'스팸', v:'21.4%', c:'#3B82F6' },
          { t:'피싱', v:'8.7%', c:'#F59E0B' },
          { t:'악성 첨부', v:'4.6%', c:'#A78BFA' },
          { t:'기타 정책', v:'2.5%', c:'#94A3B8' },
        ] },
      pipe:{ k:'INSPECTION PIPELINE', title:'수신 → 검사 → 판정 → 전달',
        rows:[
          { n:'1. 수신', s:'100%', v:'184,320통', pct:100 },
          { n:'2. SMTP·평판 검사 후', s:'18.2% 차단', v:'150,776통', pct:82 },
          { n:'3. 첨부·백신 검사 후', s:'12.4% 추가 차단', v:'127,921통', pct:69 },
          { n:'4. 사용자 전달', s:'총 37.2% 차단', v:'115,753통', pct:63 },
        ] },
      trend:{ k:'TREND', title:'시간대별 처리 추이', legend:['수신','차단','전달'], peak:'12,400통',
        hours:['00','03','06','09','12','15','18','21'],
        recv:[38,32,54,92,100,88,71,46], block:[14,12,21,36,39,34,27,18] },
    },
    sol:{ k:'02 — SOLUTION', title:'메일 서버 앞단에서\n위협을 먼저 거릅니다',
      sub:'SpamOut은 수신 메일이 사용자에게 도달하기 전, 게이트웨이 단계에서 다단계 분석으로 위협을 차단합니다.',
      flow:[
        { s:'수신 메일', d:'외부에서 들어오는 모든 메일' },
        { s:'SpamOut 게이트웨이', d:'평판·콘텐츠·첨부 다단계 분석', hot:true },
        { s:'격리 / 차단', d:'위협 메일은 격리함으로 분리' },
        { s:'정상 전달', d:'업무 메일만 받은편지함으로' },
      ] },

    feat:{ k:'04 — FEATURES', title:'핵심 기능' },
    features:[
      { icon:'🛡️', t:'다단계 스팸 필터링', d:'발신자 평판, 콘텐츠 패턴, 행위 기반 분석을 결합해 스팸을 정밀 분류합니다.' },
      { icon:'🎣', t:'피싱·사칭 탐지', d:'유사 도메인, 표시이름 위조, 본문 링크를 검사해 피싱 메일을 식별·차단합니다.' },
      { icon:'📎', t:'악성 첨부 검사', d:'첨부파일의 확장자·파일 형식·압축파일을 검사하고 Hash·백신 검사로 알려진 위협을 차단합니다.' },
      { icon:'🗂️', t:'격리함·자가 복구', d:'차단 메일은 격리함에 보관되며, 사용자가 직접 정상 메일을 복구할 수 있습니다.' },
      { icon:'⚙️', t:'정책 기반 제어', d:'부서·사용자·도메인별 차단 정책을 유연하게 설정하고 일괄 관리합니다.' },
      { icon:'📊', t:'리포트·통계', d:'차단 현황, 위협 유형, 발신 추이를 대시보드와 정기 리포트로 제공합니다.' },
    ],

    comp:{ k:'05 — COMPARISON', title:'기존 방식 vs SpamOut', sub:'왜 전용 안티 스팸 게이트웨이가 필요한지 비교해 보세요.' },
    compHead:['항목','메일 서버 기본 필터','SpamOut'],
    compRows:[
      ['스팸 탐지 정확도','기본 룰 기반, 정교한 정책 관리에 한계','다단계 분석으로 정밀 분류'],
      ['피싱·사칭 대응','제한적','유사 도메인·표시이름 위조 탐지'],
      ['악성 첨부 검사','확장자 차단 수준','확장자·형식·압축·Hash·백신 검사'],
      ['격리·복구','관리자 의존','사용자 자가 복구 지원'],
      ['정책 관리','서버별 개별 설정','부서·사용자별 통합 정책'],
      ['리포트','별도 도구 필요','내장 대시보드·정기 리포트'],
    ],

    ben:{ k:'06 — BENEFITS', title:'도입 효과' },
    benefits:[
      { n:'단계별 탐지', t:'스팸·피싱 차단', d:'정상 메일과 위협 메일을 구분할 수 있도록 단계별 탐지를 지원합니다.' },
      { n:'부담 감소', t:'운영 부담 감소', d:'스팸 분류·복구에 들이던 담당자 업무 부담을 줄입니다.' },
      { n:'위험 감소', t:'랜섬웨어 메일 유입', d:'악성 첨부·피싱 메일의 유입 위험을 메일 단계에서 낮춥니다.' },
      { n:'대응 지원', t:'감사·보안 점검', d:'메일 보안 정책·로그로 감사·보안 점검 대응을 지원합니다.' },
    ],

    uc:{ k:'07 — USE CASES', title:'이런 조직에 적합합니다', sub:'대표 적용 산업군 예시입니다.' },
    useCases:[
      { ind:'공공기관', icon:'🏛️', d:'대량 민원 메일 환경에서 피싱·사칭을 차단하고 메일 보안 규정 대응을 지원합니다.' },
      { ind:'금융', icon:'🏦', d:'고객 사칭·표적 피싱이 빈번한 환경에서 표시이름 위조와 악성 링크를 정밀 차단합니다.' },
      { ind:'제조·의료', icon:'🏭', d:'랜섬웨어 주요 표적 산업에서 악성 첨부 유입을 메일 단계에서 선제 차단합니다.' },
    ],

    price:{ k:'09 — PRICE GUIDE', title:'규모에 맞는 도입 방식', sub:'상세 견적은 상담 후 산정합니다.',
      plans:[
        { name:'Cloud', icon:'☁︎', price:'상담 후 산정', per:'10 사용자부터 시작', best:'스타트업 · 소규모 조직', features:['클라우드 게이트웨이','빠른 도입·자동 업데이트','별도 장비 불필요'] },
        { name:'구축형 SMB', icon:'🏢', price:'상담 후 산정', per:'50명 ~ 900명 규모', best:'중견·중소 기업', features:['자체 서버 구축','부서·도메인별 정책','구축형 운영 지원'], primary:true },
        { name:'구축형 Enterprise', icon:'🏛️', price:'상담 후 산정', per:'1,000명 이상 대규모', best:'대기업 · 공공기관', features:['대규모·대용량 처리','이중화·병렬처리 구성','APT 연동 지원'] },
      ],
      note:'정확한 견적은 사용자 수, 메일 처리량, 구축 방식, 이중화 여부, APT 연동 여부에 따라 산정됩니다.' },
    // ── 다단계 검사 구조
    inspect:{ k:'03 — INSPECTION', title:'7단계 다단계 검사 구조', sub:'수신 메일은 받은편지함에 닿기 전, 단계별 검사를 순차 통과합니다.',
      steps:[
        { n:'01', t:'SMTP 검사', d:'연결·발신 규격·세션 단계에서 비정상 트래픽을 1차 차단합니다.' },
        { n:'02', t:'SPF / DKIM / DMARC', d:'발신 도메인 인증으로 발신자 위조·사칭 메일을 검증합니다.' },
        { n:'03', t:'RBL / SURBL', d:'실시간 블랙리스트로 스팸 발신지와 악성 URL 도메인을 조회·차단합니다.' },
        { n:'04', t:'본문 URL · 평판 검사', d:'본문 링크와 발신 평판을 분석해 피싱·악성 URL을 식별합니다.' },
        { n:'05', t:'첨부파일 검사', d:'확장자·파일 형식·압축파일을 검사해 위험 첨부를 차단합니다.' },
        { n:'06', t:'백신 · Hash 검사', d:'백신 엔진과 Hash 대조로 알려진 악성코드를 탐지·차단합니다.' },
        { n:'07', t:'APT 연동', d:'APT 솔루션과 연동해 알려지지 않은 위협까지 확장 대응합니다.', opt:true },
      ] },
    // ── 구축 방식
    arch:{ k:'08 — ARCHITECTURE', title:'구축 방식', sub:'네트워크 환경과 메일 인프라에 맞춰 유연하게 구성합니다.',
      modes:[
        { name:'Proxy 방식', icon:'🔀', d:'메일 트래픽을 SpamOut으로 우회시켜 검사 후 전달합니다. 기존 서버 변경을 최소화합니다.' },
        { name:'Bridge 방식', icon:'🌉', d:'네트워크 경로 상에 투명하게 배치해 메일 흐름 그대로 검사합니다.' },
        { name:'Cloud 방식', icon:'☁︎', d:'클라우드 게이트웨이로 빠르게 도입하고 별도 장비 없이 운영합니다.' },
      ],
      ha:'이중화 / 병렬처리 구성으로 대용량 환경에서도 안정적으로 운영할 수 있습니다.' },
    // ── 인증
    certSec:{ k:'10 — CERTIFICATION', title:'인증 및 공공 조달', sub:'공공기관 도입에 필요한 인증과 조달 경로를 지원합니다.',
      proc:'조달청 디지털몰 / 나라장터를 통해 구매할 수 있습니다.' },

    dl:{ k:'12 — DOWNLOAD', title:'자료 요청하기',
      summary:[
        'SpamOut은 스팸·피싱·악성 첨부를 메일 서버 앞단에서 차단하는 안티 스팸 게이트웨이입니다.',
        '다단계 필터링과 격리·자가복구로 보안은 높이고 운영 부담은 줄입니다.',
        'SaaS·온프레미스 모두 지원하며, 삼에스소프트가 도입부터 운영까지 책임집니다.',
      ],
      files:[['📄','회사 이메일로 자료 요청'],['📊','제안서 요청하고 상담 연결하기']] },

    adv:{ k:'ADVANCED', title:'고급 보안 기능', sub:'보안 담당자를 위한 정밀 제어 기능을 함께 제공합니다.',
      items:[
        { t:'Grey List / Black List', d:'미검증 발신자 지연 처리 및 차단 목록 관리' },
        { t:'대량메일 제어', d:'단시간 대량 발송 트래픽을 탐지·제어' },
        { t:'Mail Bomb 차단', d:'폭탄메일·반복 발송 공격을 차단' },
        { t:'SMTP AUTH 국가 제한', d:'인증 접속의 허용·차단 국가를 설정' },
        { t:'SSL / TLS 인증서 등록', d:'전송 구간 암호화 인증서 적용' },
        { t:'정규식 필터링', d:'제목·본문·헤더에 대한 정규식 규칙 적용' },
        { t:'DCC 엔진', d:'분산 체크섬 기반 대량 스팸 식별' },
        { t:'사용자별 화이트/블랙리스트', d:'사용자 단위 허용·차단 목록 관리' },
      ] },
    maker:{ k:'11 — SUPPLY', title:'제조사 및 공급 체계', sub:'검증된 제품과 책임 있는 운영 지원을 함께 제공합니다.',
      points:[
        { icon:'🏭', t:'검증된 메일보안 제조사', d:'SpamOut은 메일보안 전문 제조사의 검증된 이메일 보안 솔루션입니다.' },
        { icon:'🤝', t:'삼에스소프트 도입·운영 파트너', d:'도입 컨설팅부터 구축, 운영 지원, 장애 대응까지 함께 제공합니다.' },
        { icon:'🛡️', t:'운영 안정화까지 책임', d:'솔루션 판매로 끝나지 않고, 도입 이후 운영 안정화까지 지속 지원합니다.' },
      ] },
    faq:{ k:'13 — FAQ', title:'자주 묻는 질문' },
    faqs:[
      { q:'기존 메일 서버를 교체해야 하나요?', a:'아니요. SpamOut은 메일 서버 앞단 게이트웨이로 동작하므로 Exchange·Microsoft 365·Google Workspace 등 기존 환경을 그대로 유지한 채 연동합니다.' },
      { q:'정상 메일이 잘못 차단되지 않나요?', a:'다단계 분석으로 오탐을 최소화하며, 차단된 메일은 격리함에 보관되어 사용자가 직접 정상 메일을 복구할 수 있습니다.' },
      { q:'도입 기간은 얼마나 걸리나요?', a:'환경에 따라 다르지만 일반적으로 연동·정책 설정까지 1~2주 내 적용됩니다. SaaS는 더 빠르게 시작할 수 있습니다.' },
      { q:'악성 첨부는 어떻게 검사하나요?', a:'첨부파일의 확장자·파일 형식·압축파일을 검사하고, Hash 대조와 백신 검사로 알려진 위협을 차단합니다. 필요 시 APT 솔루션과 연동해 대응 범위를 확장할 수 있습니다.' },
      { q:'공공기관에서 도입할 수 있나요?', a:'CC·GS 인증을 보유하고 있으며, 조달청 디지털몰·나라장터를 통해 구매할 수 있습니다. 인증·조달 절차도 함께 안내해 드립니다.' },
      { q:'도입 후 운영 지원은 어떻게 되나요?', a:'제조사(개발사)와 삼에스소프트가 협력하여 정책 튜닝, 오탐 대응, 리포트 점검, 장애 대응까지 지속 지원하며, 전담 담당자가 배정됩니다.' },
    ],

    bottom:{ title:'스팸은 입구에서 막는 것이\n가장 효율적입니다', sub:'SpamOut 도입부터 운영까지 삼에스소프트가 함께합니다.\n현재 메일 보안 환경을 무료로 진단해 드립니다.',
      a:'도입 상담 받기', b:'견적 요청하기', c:'제안서 요청', d:'데모 신청하기' },
  } : {
    badge:'EMAIL SECURITY GATEWAY',
    parent:'Email Security',
    product:'SpamOut',
    tagline:'Email Security Gateway',
    h1a:'Stop threats first,',
    h1b:'in front of your mail server',
    sub:'SpamOut is an email security gateway that blocks spam, phishing, ransomware, and malicious attachments in front of your mail server. Legitimate business mail keeps flowing, while threats are filtered out through stage-by-stage policies.',
    chips:['Anti-Spam','Phishing Block','Ransomware Defense','Attachment Inspection','Works with existing mail server'],
    cta1:'Talk to Sales', cta2:'Get Quote', cta3:'Request Demo', cta4:'Download',
    prob:{ k:'01 — PROBLEM', title:'Spam is not just ads —\nit\'s the #1 intrusion path', sub:'A large share of cyberattacks begin with a single email.' },
    problems:[
      { icon:'🎯', tag:'Phishing', title:'Increasingly Targeted Phishing', d:'AI-written impersonation emails bypass traditional filters, targeting executives and finance teams.' },
      { icon:'📎', tag:'Attachments', title:'One Attachment Breaches the Network', d:'Malware hidden in documents executes with a single click — a primary ransomware vector.' },
      { icon:'⏱️', tag:'Ops Load', title:'Time Lost to Spam Handling', d:'Bulk classification, false-positive recovery, and user tickets drain security and IT time.' },
    ],
    dash:{ k:'03 — DASHBOARD', title:'See exactly how your daily mail\nvolume is processed',
      sub:'Total volume, block-type breakdown, per-stage inspection results, and hourly trend in one view.',
      note:'* Illustrative dashboard layout. Actual figures vary by environment and mail policy.',
      stats:[
        { k:'Inbound / day', v:'184,320', s:'Total inspected' },
        { k:'Outbound / day', v:'46,180', s:'Incl. external' },
        { k:'Block rate', v:'37.2%', s:'Spam + phishing + malware' },
        { k:'Malicious attachments', v:'1,842', s:'Type · archive · hash' },
        { k:'Avg. added latency', v:'0.8s', s:'Gateway stage' },
        { k:'Delivered', v:'62.8%', s:'Legitimate mail' },
      ],
      cls:{ k:'CLASSIFICATION', title:'Processing outcome', centerLabel:'Delivered', centerValue:'62.8%',
        items:[
          { t:'Delivered', v:'62.8%', c:'#34D399' },
          { t:'Spam', v:'21.4%', c:'#3B82F6' },
          { t:'Phishing', v:'8.7%', c:'#F59E0B' },
          { t:'Malicious attachment', v:'4.6%', c:'#A78BFA' },
          { t:'Other policy', v:'2.5%', c:'#94A3B8' },
        ] },
      pipe:{ k:'INSPECTION PIPELINE', title:'Receive → Inspect → Verdict → Deliver',
        rows:[
          { n:'1. Received', s:'100%', v:'184,320', pct:100 },
          { n:'2. After SMTP · reputation', s:'18.2% blocked', v:'150,776', pct:82 },
          { n:'3. After attachment · AV', s:'12.4% more blocked', v:'127,921', pct:69 },
          { n:'4. Delivered', s:'37.2% blocked total', v:'115,753', pct:63 },
        ] },
      trend:{ k:'TREND', title:'Hourly processing trend', legend:['Received','Blocked','Delivered'], peak:'12,400',
        hours:['00','03','06','09','12','15','18','21'],
        recv:[38,32,54,92,100,88,71,46], block:[14,12,21,36,39,34,27,18] },
    },
    sol:{ k:'02 — SOLUTION', title:'Filter threats first,\nin front of your mail server', sub:'SpamOut blocks threats at the gateway stage through multi-layer analysis before mail reaches users.',
      flow:[
        { s:'Inbound Mail', d:'All mail arriving from outside' },
        { s:'SpamOut Gateway', d:'Reputation · content · attachment analysis', hot:true },
        { s:'Quarantine / Block', d:'Threats moved to quarantine' },
        { s:'Clean Delivery', d:'Only business mail reaches inboxes' },
      ] },
    feat:{ k:'04 — FEATURES', title:'Key Features' },
    features:[
      { icon:'🛡️', t:'Multi-Layer Spam Filtering', d:'Combines sender reputation, content patterns, and behavioral analysis for precise classification.' },
      { icon:'🎣', t:'Phishing & Impersonation Detection', d:'Inspects look-alike domains, display-name spoofing, and body links to identify phishing.' },
      { icon:'📎', t:'Malicious Attachment Inspection', d:'Inspects attachment extensions, file types, and archives, blocking known threats via hash and antivirus checks.' },
      { icon:'🗂️', t:'Quarantine & Self-Recovery', d:'Blocked mail is stored in quarantine; users can recover legitimate mail themselves.' },
      { icon:'⚙️', t:'Policy-Based Control', d:'Flexible block policies by team, user, and domain, managed centrally.' },
      { icon:'📊', t:'Reports & Analytics', d:'Block status, threat types, and trends via dashboard and periodic reports.' },
    ],
    comp:{ k:'05 — COMPARISON', title:'Built-in Filter vs SpamOut', sub:'See why a dedicated anti-spam gateway matters.' },
    compHead:['Item','Mail Server Default','SpamOut'],
    compRows:[
      ['Detection Accuracy','Basic rules, limited policy control','Multi-layer precise classification'],
      ['Phishing Response','Limited','Look-alike & spoof detection'],
      ['Attachment Inspection','Extension blocking only','Extension · type · archive · hash · AV'],
      ['Quarantine & Recovery','Admin-dependent','User self-recovery'],
      ['Policy Management','Per-server config','Unified per-team policy'],
      ['Reporting','Needs separate tools','Built-in dashboard & reports'],
    ],
    ben:{ k:'06 — BENEFITS', title:'Business Impact' },
    benefits:[
      { n:'Staged', t:'Spam & Phishing Block', d:'Supports stage-by-stage detection to help distinguish legitimate mail from threats.' },
      { n:'Reduced', t:'Operational Load', d:'Less time spent on spam classification and recovery.' },
      { n:'Lower Risk', t:'Ransomware Entry', d:'Reduces malicious attachment and phishing entry at the mail stage.' },
      { n:'Supported', t:'Audit & Review', d:'Mail security policy and logs support audits and reviews.' },
    ],
    uc:{ k:'07 — USE CASES', title:'Built for organizations like these', sub:'Representative industry examples.' },
    useCases:[
      { ind:'Public Sector', icon:'🏛️', d:'Blocks phishing in high-volume citizen mail environments and supports mail security compliance.' },
      { ind:'Finance', icon:'🏦', d:'Precisely blocks display-name spoofing and malicious links where customer impersonation is frequent.' },
      { ind:'Manufacturing & Healthcare', icon:'🏭', d:'Proactively blocks malicious attachments at the mail stage for top ransomware-target industries.' },
    ],
    price:{ k:'09 — PRICE GUIDE', title:'Deployment by Scale', sub:'Detailed pricing is determined after consultation.',
      plans:[
        { name:'Cloud', icon:'☁︎', price:'Quote on consult', per:'from 10 users', best:'Startups · small teams', features:['Cloud gateway','Fast rollout · auto-updates','No dedicated hardware'] },
        { name:'On-Prem SMB', icon:'🏢', price:'Quote on consult', per:'50 – 900 users', best:'Mid-market', features:['Self-hosted','Per-team/domain policy','Managed operations'], primary:true },
        { name:'On-Prem Enterprise', icon:'🏛️', price:'Quote on consult', per:'1,000+ users', best:'Enterprise · public sector', features:['High-volume processing','HA / parallel processing','APT integration'] },
      ],
      note:'Final pricing depends on user count, mail volume, deployment method, high-availability, and APT integration.' },
    inspect:{ k:'03 — INSPECTION', title:'Seven-Stage Inspection Pipeline', sub:'Inbound mail passes sequential inspection stages before reaching the inbox.',
      steps:[
        { n:'01', t:'SMTP Inspection', d:'Blocks abnormal traffic at the connection, sender-format, and session stage.' },
        { n:'02', t:'SPF / DKIM / DMARC', d:'Verifies sender domain authentication to catch spoofing and impersonation.' },
        { n:'03', t:'RBL / SURBL', d:'Queries real-time blacklists for spam sources and malicious URL domains.' },
        { n:'04', t:'Body URL & Reputation', d:'Analyzes body links and sender reputation to identify phishing and malicious URLs.' },
        { n:'05', t:'Attachment Inspection', d:'Inspects extensions, file types, and archives to block risky attachments.' },
        { n:'06', t:'Antivirus & Hash', d:'Detects known malware via antivirus engines and hash matching.' },
        { n:'07', t:'APT Integration', d:'Integrates with APT solutions to extend coverage to unknown threats.', opt:true },
      ] },
    arch:{ k:'08 — ARCHITECTURE', title:'Deployment Methods', sub:'Flexibly configured to your network and mail infrastructure.',
      modes:[
        { name:'Proxy Mode', icon:'🔀', d:'Routes mail traffic through SpamOut for inspection, minimizing changes to your server.' },
        { name:'Bridge Mode', icon:'🌉', d:'Placed transparently in the network path to inspect mail flow as-is.' },
        { name:'Cloud Mode', icon:'☁︎', d:'Deploy quickly as a cloud gateway with no dedicated hardware.' },
      ],
      ha:'High-availability and parallel-processing configurations ensure stable operation even at large scale.' },
    certSec:{ k:'10 — CERTIFICATION', title:'Certification & Public Procurement', sub:'Supports certifications and procurement paths required for public sector adoption.',
      proc:'Available through the Public Procurement Service digital mall and Nara Marketplace.' },
    dl:{ k:'12 — DOWNLOAD', title:'Request Materials',
      summary:[
        'SpamOut is an anti-spam gateway that blocks spam, phishing, and malicious attachments in front of your mail server.',
        'Multi-layer filtering with quarantine and self-recovery raises security while reducing operational load.',
        'Supports both SaaS and on-premise — 3ES Soft delivers from rollout to operations.',
      ],
      files:[['📄','Get materials via work email'],['📊','Get proposal & connect to sales']] },
    adv:{ k:'ADVANCED', title:'Advanced Security Features', sub:'Fine-grained controls for security administrators.',
      items:[
        { t:'Grey List / Black List', d:'Greylisting of unverified senders and block-list management' },
        { t:'Bulk Mail Control', d:'Detects and controls high-volume sending traffic' },
        { t:'Mail Bomb Defense', d:'Blocks mail-bomb and repeated-send attacks' },
        { t:'SMTP AUTH Geo Restriction', d:'Allow/deny authenticated access by country' },
        { t:'SSL / TLS Certificates', d:'Transport encryption certificate registration' },
        { t:'Regex Filtering', d:'Regular-expression rules on subject, body, and headers' },
        { t:'DCC Engine', d:'Distributed checksum-based bulk spam identification' },
        { t:'Per-User Allow/Block Lists', d:'User-level allow and block list management' },
      ] },
    maker:{ k:'11 — SUPPLY', title:'Manufacturer & Supply Chain', sub:'A verified product backed by accountable operational support.',
      points:[
        { icon:'🏭', t:'Verified Mail-Security Vendor', d:'SpamOut is a verified email security solution from a specialist mail-security manufacturer.' },
        { icon:'🤝', t:'3ES Soft Delivery Partner', d:'We provide consulting, deployment, operational support, and incident response together.' },
        { icon:'🛡️', t:'Committed to Stable Operations', d:'We don\'t stop at selling — we support you through to stable operations after rollout.' },
      ] },
    faq:{ k:'13 — FAQ', title:'Frequently Asked Questions' },
    faqs:[
      { q:'Do I need to replace my mail server?', a:'No. SpamOut works as a gateway in front of your mail server, integrating with Exchange, Microsoft 365, Google Workspace, and more without changes.' },
      { q:'Will legitimate mail get blocked?', a:'Multi-layer analysis minimizes false positives, and blocked mail is held in quarantine so users can recover legitimate mail themselves.' },
      { q:'How long does deployment take?', a:'Typically 1–2 weeks including integration and policy setup. SaaS can start even faster.' },
      { q:'How are malicious attachments inspected?', a:'Attachment extensions, file types, and archives are inspected, and known threats are blocked via hash matching and antivirus. APT integration can extend coverage when needed.' },
      { q:'Can public institutions adopt it?', a:'It holds CC and GS certifications and is available through the Public Procurement Service digital mall and Nara Marketplace. We guide you through certification and procurement.' },
      { q:'What about post-deployment support?', a:'The manufacturer (developer) and 3ES Soft collaborate to provide ongoing policy tuning, false-positive handling, report reviews, and incident response, with a dedicated manager assigned.' },
    ],
    bottom:{ title:'Stopping spam at the door\nis the most efficient defense', sub:'3ES Soft walks with you from SpamOut rollout to operations.\nGet a free review of your mail security environment.',
      a:'Talk to Sales', b:'Get Quote', c:'Download Proposal', d:'Request Demo' },
  };

  const Eyebrow = ({ children, light }) => (
    <div className="reveal" style={{ display:'inline-flex', alignItems:'center', gap:10, fontFamily:'DM Sans,sans-serif', fontSize:11, fontWeight:600, letterSpacing:'2.5px', color: light?CYAN:BLUE, marginBottom:18 }}>
      <span style={{ width:24, height:1, background: light?CYAN:BLUE, opacity:0.6 }}/>
      {children}
    </div>
  );
  const SectionHead = ({ k, title, sub, light, center }) => (
    <div style={{ marginBottom:52, maxWidth:760, ...(center?{marginLeft:'auto',marginRight:'auto',textAlign:'center'}:{}) }}>
      <Eyebrow light={light}>{k}</Eyebrow>
      <h2 className="reveal" style={{ fontSize:'clamp(28px,3vw,40px)', fontWeight:700, color: light?'#fff':NAVY, lineHeight:1.25, letterSpacing:'-0.6px', whiteSpace:'pre-line' }}>{title}</h2>
      {sub && <p className="reveal reveal-d1" style={{ fontSize:16, color: light?'rgba(255,255,255,0.6)':'#5A6B85', lineHeight:1.65, marginTop:14, ...(center?{marginLeft:'auto',marginRight:'auto'}:{}) }}>{sub}</p>}
    </div>
  );
  const ArrowR = ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>);

  return (
    <div style={{ paddingTop:68, background:'#fff' }}>

      {/* HERO */}
      <section style={{ background:`linear-gradient(180deg, #07101F 0%, ${NAVY} 60%, ${NAVY2} 100%)`, padding:'88px 24px 100px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(37,99,235,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,0.06) 1px,transparent 1px)', backgroundSize:'56px 56px', maskImage:'radial-gradient(ellipse at center,#000 30%,transparent 75%)', WebkitMaskImage:'radial-gradient(ellipse at center,#000 30%,transparent 75%)' }}/>
        <div style={{ position:'absolute', width:680, height:680, borderRadius:'50%', background:`radial-gradient(circle, ${BLUE}28 0%, transparent 65%)`, top:-240, right:-160, filter:'blur(60px)' }}/>
        <div style={{ position:'absolute', width:480, height:480, borderRadius:'50%', background:`radial-gradient(circle, ${CYAN}1a 0%, transparent 65%)`, bottom:-200, left:-120, filter:'blur(60px)' }}/>

        <div style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
          <div className="prod-hero-visual"><SolHeroVisual solKey="spamout" color={BLUE}/></div>
          <div onClick={()=>setPage('sol_email')} style={{ cursor:'pointer', display:'inline-flex', alignItems:'center', gap:8, color:'rgba(255,255,255,0.5)', fontSize:13, marginBottom:36 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
            {isKo?`${t.parent}으로`:`Back to ${t.parent}`}
          </div>

          <div style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'6px 13px', background:'rgba(37,99,235,0.08)', border:`1px solid ${BLUE}30`, borderRadius:100, marginBottom:22 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:CYAN, boxShadow:`0 0 12px ${CYAN}` }}/>
            <span style={{ fontFamily:'DM Sans', fontSize:11, fontWeight:600, color:CYAN, letterSpacing:'2px' }}>{t.badge}</span>
          </div>

          {/* Product name — prominent */}
          <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:14, flexWrap:'wrap', rowGap:10 }}>
            <span style={{ fontFamily:'DM Sans', fontSize:'clamp(40px,5vw,64px)', fontWeight:800, color:'#fff', letterSpacing:'-1.8px', lineHeight:1 }}>
              SpamOut<span style={{ color:CYAN }}></span>
            </span>
            <span style={{ fontSize:15, fontWeight:600, color:'rgba(255,255,255,0.55)', padding:'5px 12px', background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.12)', borderRadius:8 }}>{t.tagline}</span>
          </div>

          <h1 style={{ fontSize:'clamp(26px,3vw,38px)', fontWeight:700, color:'rgba(255,255,255,0.92)', lineHeight:1.22, letterSpacing:'-0.8px', marginBottom:20, maxWidth:820 }}>
            {t.h1a} <span style={{ background:`linear-gradient(110deg, ${CYAN} 10%, ${BLUE2} 80%)`, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent' }}>{t.h1b}</span>
          </h1>
          <p style={{ fontSize:18, color:'rgba(255,255,255,0.7)', maxWidth:680, lineHeight:1.7, marginBottom:28 }}>{t.sub}</p>

          <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:36 }}>
            {t.chips.map((c,i)=>(
              <span key={i} style={{ fontFamily:'DM Sans', fontSize:12, fontWeight:600, color: i<2?CYAN:'rgba(255,255,255,0.7)', padding:'7px 14px', background: i<2?'rgba(6,182,212,0.08)':'rgba(255,255,255,0.04)', border:`1px solid ${i<2?CYAN+'30':'rgba(255,255,255,0.1)'}`, borderRadius:8, whiteSpace:'nowrap' }}>{c}</span>
            ))}
          </div>

          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <button onClick={()=>setPage('contact')} style={{ padding:'15px 26px', background:`linear-gradient(135deg,${BLUE},#1D4ED8)`, color:'#fff', fontSize:15, fontWeight:600, borderRadius:10, border:'none', cursor:'pointer', fontFamily:'inherit', display:'inline-flex', alignItems:'center', gap:8, boxShadow:`0 12px 32px ${BLUE}40` }}>{t.cta1} <ArrowR/></button>
            <button onClick={()=>openQuote('SpamOut')} style={{ padding:'15px 22px', background:'rgba(255,255,255,0.06)', color:'#fff', fontSize:15, fontWeight:600, borderRadius:10, border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer', fontFamily:'inherit' }}>{t.cta2}</button>
            <button onClick={()=>openQuote('SpamOut')} style={{ padding:'15px 22px', background:'transparent', color:'rgba(255,255,255,0.85)', fontSize:15, fontWeight:600, borderRadius:10, border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer', fontFamily:'inherit' }}>{t.cta3}</button>
            <button onClick={()=>setIgOpen(true)} style={{ padding:'15px 22px', background:'transparent', color:'#A78BFA', fontSize:15, fontWeight:600, borderRadius:10, border:'1px solid rgba(167,139,250,0.35)', cursor:'pointer', fontFamily:'inherit' }}>{isKo?'한눈에 보기':'At a Glance'}</button>
            <button onClick={()=>setDlOpen(true)} style={{ padding:'15px 22px', background:'transparent', color:CYAN, fontSize:15, fontWeight:600, borderRadius:10, border:`1px solid ${CYAN}40`, cursor:'pointer', fontFamily:'inherit' }}>{t.cta4}</button>
          </div>
        </div>
      </section>

      {/* PROBLEM */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1240, margin:'0 auto' }}>
          <SectionHead k={t.prob.k} title={t.prob.title} sub={t.prob.sub}/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:18 }}>
            {t.problems.map((p,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#fff', border:'1px solid #E6EAF2', borderRadius:14, padding:30, transition:'all 0.25s' }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor='#FCA5A5';e.currentTarget.style.boxShadow='0 12px 32px rgba(239,68,68,0.08)';e.currentTarget.style.transform='translateY(-3px)';}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='#E6EAF2';e.currentTarget.style.boxShadow='none';e.currentTarget.style.transform='none';}}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
                  <div style={{ width:44, height:44, borderRadius:12, background:'rgba(239,68,68,0.07)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:22 }}><Ico e={p.icon} size={26}/></div>
                  <span style={{ fontSize:11, fontWeight:700, color:RED, letterSpacing:'1px', textTransform:'uppercase', padding:'3px 9px', background:'rgba(239,68,68,0.08)', borderRadius:20 }}>{p.tag}</span>
                </div>
                <div style={{ fontSize:17, fontWeight:700, color:NAVY, lineHeight:1.4, marginBottom:10 }}>{p.title}</div>
                <div style={{ fontSize:14, color:'#5A6B85', lineHeight:1.7 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SOLUTION (flow) */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:1240, margin:'0 auto' }}>
          <SectionHead k={t.sol.k} title={t.sol.title} sub={t.sol.sub}/>
          <div className="reveal" style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:0, background:'#fff', border:'1px solid #E6EAF2', borderRadius:16, overflow:'hidden', boxShadow:'0 8px 32px rgba(15,30,60,0.05)' }}>
            {t.sol.flow.map((f,i,arr)=>(
              <div key={i} style={{ padding:'28px 24px', borderRight: i<arr.length-1?'1px solid #E6EAF2':'none', background: f.hot?`linear-gradient(180deg, ${BLUE}0c, transparent)`:'#fff', position:'relative' }}>
                <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:12 }}>
                  <div style={{ width:30, height:30, borderRadius:9, background: f.hot?BLUE:'#EEF2F9', color: f.hot?'#fff':'#94A3B8', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Sans', fontSize:13, fontWeight:700 }}>{i+1}</div>
                  {f.hot && <span style={{ fontSize:9, fontWeight:700, color:BLUE, letterSpacing:'1px', padding:'2px 7px', background:`${BLUE}12`, borderRadius:4 }}>CORE</span>}
                </div>
                <div style={{ fontSize:15, fontWeight:700, color:NAVY, marginBottom:6 }}>{f.s}</div>
                <div style={{ fontSize:12.5, color:'#5A6B85', lineHeight:1.55 }}>{f.d}</div>
                {i<arr.length-1 && <div style={{ position:'absolute', right:-9, top:'50%', transform:'translateY(-50%)', width:18, height:18, borderRadius:'50%', background:'#fff', border:'1px solid #E6EAF2', display:'flex', alignItems:'center', justifyContent:'center', zIndex:2, color:'#94A3B8', fontSize:10 }}>›</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DASHBOARD */}
      <section style={{ background:'#070C18', padding:'104px 24px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', inset:0, pointerEvents:'none', opacity:.5,
          backgroundImage:'linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px)',
          backgroundSize:'52px 52px', maskImage:'radial-gradient(ellipse 90% 60% at 50% 26%,#000 30%,transparent 80%)', WebkitMaskImage:'radial-gradient(ellipse 90% 60% at 50% 26%,#000 30%,transparent 80%)' }}/>
        <div style={{ position:'absolute', width:600, height:600, borderRadius:'50%', background:`radial-gradient(circle,${BLUE}1e 0%,transparent 65%)`, top:-220, right:-140, filter:'blur(70px)' }}/>
        <div ref={dashRef} style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
          <SectionHead k={t.dash.k} title={t.dash.title} sub={t.dash.sub} light center/>

          <div className="reveal" style={{ background:'rgba(255,255,255,.022)', border:'1px solid rgba(255,255,255,.07)', borderRadius:22, padding:22 }}>
            <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1.05fr) minmax(0,1fr)', gap:16 }}>

              {/* LEFT */}
              <div style={{ display:'flex', flexDirection:'column', gap:16, minWidth:0 }}>
                <div style={{ display:'grid', gridTemplateColumns:'repeat(3,minmax(0,1fr))', gap:12 }}>
                  {t.dash.stats.map((x,i)=>{
                    const on = hoverKpi===i;
                    return (
                    <div key={i}
                      onMouseEnter={()=>setHoverKpi(i)} onMouseLeave={()=>setHoverKpi(null)}
                      style={{ background: on?'rgba(255,255,255,.055)':'rgba(255,255,255,.028)', border:`1px solid ${on?CYAN+'55':'rgba(255,255,255,.06)'}`, borderRadius:14, padding:'18px 16px', minWidth:0, cursor:'default',
                        transform: on?'translateY(-3px)':'none', boxShadow: on?`0 12px 28px ${CYAN}14`:'none', transition:'all .22s cubic-bezier(.2,.8,.3,1)' }}>
                      <div style={{ fontSize:11.5, color: on?'rgba(255,255,255,.62)':'rgba(255,255,255,.42)', marginBottom:9, letterSpacing:'.2px', transition:'color .22s' }}>{x.k}</div>
                      <CountValue value={x.v} run={dashIn} dur={1100+i*70}
                        style={{ display:'block', fontFamily:'DM Sans,sans-serif', fontSize:'clamp(19px,2.1vw,26px)', fontWeight:700, color: on?CYAN:'#fff', letterSpacing:'-.9px', lineHeight:1, marginBottom:7, transition:'color .22s' }}/>
                      <div style={{ fontSize:11, color:'rgba(255,255,255,.34)' }}>{x.s}</div>
                    </div>
                  );})}
                </div>

                {/* PIPELINE */}
                <div style={{ background:'rgba(255,255,255,.022)', border:`1px solid ${CYAN}22`, borderRadius:16, padding:'22px 22px 20px', flex:1 }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12, marginBottom:20 }}>
                    <div style={{ minWidth:0 }}>
                      <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10.5, fontWeight:700, letterSpacing:'2px', color:CYAN, marginBottom:7 }}>{t.dash.pipe.k}</div>
                      <div style={{ fontSize:17, fontWeight:700, color:'#fff', letterSpacing:'-.3px' }}>{t.dash.pipe.title}</div>
                    </div>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={CYAN} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0,opacity:.8}}>
                      <path d="M12 2 4 5v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V5z"/><path d="m9 12 2 2 4-4"/>
                    </svg>
                  </div>
                  <div style={{ display:'flex', flexDirection:'column', gap:15 }}>
                    {t.dash.pipe.rows.map((r,i)=>{
                      const on = hoverRow===i;
                      return (
                      <div key={i}
                        onMouseEnter={()=>setHoverRow(i)} onMouseLeave={()=>setHoverRow(null)}
                        className="keep-cols"
                        style={{ display:'grid', gridTemplateColumns:'minmax(88px,auto) 1fr minmax(56px,auto)', gap:12, alignItems:'center', cursor:'default',
                          opacity: hoverRow!==null && !on ? .45 : 1, transition:'opacity .22s' }}>
                        <div style={{ minWidth:0 }}>
                          <div style={{ fontSize:12.5, fontWeight:700, color: on?CYAN:'#fff', marginBottom:3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', transition:'color .22s' }}>{r.n}</div>
                          <div style={{ fontSize:10.5, color:'rgba(255,255,255,.36)' }}>{r.s}</div>
                        </div>
                        <div style={{ height: on?11:9, borderRadius:6, background:'rgba(255,255,255,.06)', overflow:'hidden', transition:'height .22s' }}>
                          <div style={{ width: dashIn?`${r.pct}%`:'0%', height:'100%', borderRadius:6, background:`linear-gradient(90deg,${CYAN},${BLUE2})`,
                            boxShadow: on?`0 0 14px ${CYAN}55`:'none', transition:`width 1s cubic-bezier(.2,.8,.3,1) ${.15+i*.13}s, box-shadow .22s` }}/>
                        </div>
                        <CountValue value={r.v} run={dashIn} dur={1200+i*120}
                          style={{ fontFamily:'DM Sans,sans-serif', fontSize:14, fontWeight:700, color: on?CYAN:'#fff', textAlign:'right', letterSpacing:'-.3px', whiteSpace:'nowrap', transition:'color .22s' }}/>
                      </div>
                    );})}
                  </div>
                </div>
              </div>

              {/* RIGHT */}
              <div style={{ display:'flex', flexDirection:'column', gap:16, minWidth:0 }}>
                {/* CLASSIFICATION */}
                <div style={{ background:'rgba(255,255,255,.022)', border:`1px solid ${MINT}22`, borderRadius:16, padding:'22px' }}>
                  <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10.5, fontWeight:700, letterSpacing:'2px', color:MINT, marginBottom:7 }}>{t.dash.cls.k}</div>
                  <div style={{ fontSize:17, fontWeight:700, color:'#fff', letterSpacing:'-.3px', marginBottom:18 }}>{t.dash.cls.title}</div>
                  <div className="keep-cols" style={{ display:'grid', gridTemplateColumns:'minmax(0,1fr) 148px', gap:16, alignItems:'center' }}>
                    <div style={{ display:'flex', flexDirection:'column', gap:7, minWidth:0 }}>
                      {t.dash.cls.items.map((c,i)=>{
                        const on = hoverSlice===i;
                        return (
                        <div key={i}
                          onMouseEnter={()=>setHoverSlice(i)} onMouseLeave={()=>setHoverSlice(null)}
                          style={{ display:'flex', alignItems:'center', gap:9, padding:'8px 11px', background: on?c.c+'1A':'rgba(255,255,255,.03)', border:`1px solid ${on?c.c+'55':'rgba(255,255,255,.05)'}`, borderRadius:9, cursor:'default',
                            transform: on?'translateX(3px)':'none', opacity: hoverSlice!==null && !on ? .5 : 1, transition:'all .2s cubic-bezier(.2,.8,.3,1)' }}>
                          <span style={{ width:8, height:8, borderRadius:'50%', background:c.c, flexShrink:0, boxShadow: on?`0 0 10px ${c.c}`:'none', transition:'box-shadow .2s' }}/>
                          <span style={{ fontSize:12.5, color: on?'#fff':'rgba(255,255,255,.76)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis', transition:'color .2s' }}>{c.t}</span>
                          <CountValue value={c.v} run={dashIn} dur={950+i*80}
                            style={{ marginLeft:'auto', flexShrink:0, whiteSpace:'nowrap', fontFamily:'DM Sans,sans-serif', fontSize:12.5, fontWeight:700, color: on?c.c:'#fff', transition:'color .2s' }}/>
                        </div>
                      );})}
                    </div>
                    <div style={{ position:'relative', width:148, height:148, justifySelf:'center' }}>
                      <svg viewBox="0 0 42 42" style={{ width:'100%', height:'100%', transform:'rotate(-90deg)' }}>
                        {(()=>{ let off=0; const R=15.9155;
                          return t.dash.cls.items.map((c,i)=>{
                            const v=parseFloat(c.v); const on=hoverSlice===i;
                            const el=(
                              <circle key={i} cx="21" cy="21" r={R} fill="none" stroke={c.c}
                                strokeWidth={on?7:5.2}
                                strokeDasharray={dashIn?`${v} ${100-v}`:`0 100`}
                                strokeDashoffset={-off}
                                opacity={hoverSlice!==null && !on ? .35 : 1}
                                onMouseEnter={()=>setHoverSlice(i)} onMouseLeave={()=>setHoverSlice(null)}
                                style={{ cursor:'default', transition:`stroke-dasharray .9s cubic-bezier(.2,.8,.3,1) ${.2+i*.1}s, stroke-width .2s, opacity .2s` }}/>
                            );
                            off+=v; return el; });
                        })()}
                      </svg>
                      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
                        <div style={{ fontSize:10.5, color:'rgba(255,255,255,.42)', marginBottom:3, transition:'color .2s', textAlign:'center', padding:'0 8px' }}>
                          {hoverSlice!==null ? t.dash.cls.items[hoverSlice].t : t.dash.cls.centerLabel}
                        </div>
                        <CountValue key={hoverSlice===null?'base':'s'+hoverSlice}
                          value={hoverSlice!==null ? t.dash.cls.items[hoverSlice].v : t.dash.cls.centerValue} run={dashIn} dur={hoverSlice!==null?420:1200}
                          style={{ fontFamily:'DM Sans,sans-serif', fontSize:22, fontWeight:700, color: hoverSlice!==null ? t.dash.cls.items[hoverSlice].c : '#fff', letterSpacing:'-.8px', transition:'color .2s' }}/>
                      </div>
                    </div>
                  </div>
                </div>

                {/* TREND */}
                <div style={{ background:'rgba(255,255,255,.022)', border:'1px solid rgba(255,255,255,.06)', borderRadius:16, padding:'22px', flex:1 }}>
                  <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:12, marginBottom:14 }}>
                    <div>
                      <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10.5, fontWeight:700, letterSpacing:'2px', color:'rgba(255,255,255,.4)', marginBottom:7 }}>{t.dash.trend.k}</div>
                      <div style={{ fontSize:17, fontWeight:700, color:'#fff', letterSpacing:'-.3px' }}>{t.dash.trend.title}</div>
                    </div>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,.4)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}>
                      <path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-5"/>
                    </svg>
                  </div>
                  <div style={{ display:'flex', gap:14, marginBottom:16, flexWrap:'wrap' }}>
                    {[[CYAN,t.dash.trend.legend[0]],['#F87171',t.dash.trend.legend[1]],[MINT,t.dash.trend.legend[2]]].map(([c,l],i)=>(
                      <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, color:'rgba(255,255,255,.5)' }}>
                        <s style={{ width:7, height:7, borderRadius:'50%', background:c, display:'block', textDecoration:'none' }}/>{l}
                      </span>
                    ))}
                    <span style={{ marginLeft:'auto', fontFamily:'DM Sans,sans-serif', fontSize:11.5, color:'rgba(255,255,255,.42)' }}>peak {t.dash.trend.peak}</span>
                  </div>
                  <div style={{ display:'flex', alignItems:'flex-end', gap:'2.4%', height:132, padding:'0 2px' }}>
                    {t.dash.trend.hours.map((h,i)=>{
                      const on = hoverBar===i;
                      return (
                      <div key={i}
                        onMouseEnter={()=>setHoverBar(i)} onMouseLeave={()=>setHoverBar(null)}
                        style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:7, minWidth:0, position:'relative', cursor:'default',
                          opacity: hoverBar!==null && !on ? .42 : 1, transition:'opacity .2s' }}>
                        {on && (
                          <div style={{ position:'absolute', bottom:'calc(100% + 6px)', left:'50%', transform:'translateX(-50%)', background:'rgba(8,14,28,.96)', border:`1px solid ${CYAN}44`, borderRadius:8, padding:'7px 10px', whiteSpace:'nowrap', zIndex:3, boxShadow:'0 8px 20px rgba(0,0,0,.5)' }}>
                            <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10, color:'rgba(255,255,255,.5)', marginBottom:4 }}>{h}:00</div>
                            <div style={{ display:'flex', gap:10 }}>
                              <span style={{ fontSize:11, color:CYAN, fontWeight:700 }}>{t.dash.trend.legend[0]} {t.dash.trend.recv[i]}%</span>
                              <span style={{ fontSize:11, color:'#F87171', fontWeight:700 }}>{t.dash.trend.legend[1]} {t.dash.trend.block[i]}%</span>
                            </div>
                          </div>
                        )}
                        <div style={{ width:'100%', display:'flex', alignItems:'flex-end', justifyContent:'center', gap:3, height:106 }}>
                          <div style={{ width:'38%', height: dashIn?`${t.dash.trend.recv[i]}%`:'0%', background:`linear-gradient(180deg,${CYAN},${CYAN}66)`, borderRadius:'3px 3px 0 0',
                            boxShadow: on?`0 0 12px ${CYAN}66`:'none', transition:`height .85s cubic-bezier(.2,.8,.3,1) ${.2+i*.06}s, box-shadow .2s` }}/>
                          <div style={{ width:'38%', height: dashIn?`${t.dash.trend.block[i]}%`:'0%', background:'linear-gradient(180deg,#F87171,#F8717166)', borderRadius:'3px 3px 0 0',
                            boxShadow: on?'0 0 12px #F8717166':'none', transition:`height .85s cubic-bezier(.2,.8,.3,1) ${.26+i*.06}s, box-shadow .2s` }}/>
                        </div>
                        <span style={{ fontFamily:'DM Sans,sans-serif', fontSize:10, color: on?CYAN:'rgba(255,255,255,.34)', transition:'color .2s' }}>{h}</span>
                      </div>
                    );})}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style={{ fontSize:11.5, color:'rgba(255,255,255,.3)', marginTop:14, textAlign:'center' }}>{t.dash.note}</div>
        </div>
      </section>

      {/* INSPECTION PIPELINE */}
      <section style={{ background:`linear-gradient(165deg, ${NAVY} 0%, ${NAVY2} 100%)`, padding:'104px 24px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', width:520, height:520, borderRadius:'50%', background:`radial-gradient(circle,${BLUE}22 0%,transparent 65%)`, top:-180, left:-100, filter:'blur(80px)' }}/>
        <div style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
          <SectionHead k={t.inspect.k} title={t.inspect.title} sub={t.inspect.sub} light/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:14 }}>
            {t.inspect.steps.map((s,i)=>(
              <div key={i} className={`reveal reveal-d${(i%4)+1}`} style={{ display:'flex', gap:16, padding:'22px 20px', background:'rgba(255,255,255,0.04)', border:`1px solid ${s.opt?CYAN+'30':'rgba(37,99,235,0.18)'}`, borderRadius:14, backdropFilter:'blur(8px)' }}>
                <div style={{ flexShrink:0, fontFamily:'DM Sans', fontSize:13, fontWeight:700, color: s.opt?CYAN:BLUE2, width:34, height:34, borderRadius:9, background: s.opt?'rgba(6,182,212,0.12)':'rgba(59,130,246,0.14)', display:'flex', alignItems:'center', justifyContent:'center' }}>{s.n}</div>
                <div style={{ minWidth:0 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                    <span style={{ fontSize:15, fontWeight:700, color:'#fff' }}>{s.t}</span>
                    {s.opt && <span style={{ fontSize:9, fontWeight:700, color:CYAN, letterSpacing:'0.5px', padding:'2px 7px', background:'rgba(6,182,212,0.12)', borderRadius:4 }}>OPTION</span>}
                  </div>
                  <div style={{ fontSize:13, color:'rgba(255,255,255,0.6)', lineHeight:1.6 }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURES */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1240, margin:'0 auto' }}>
          <SectionHead k={t.feat.k} title={t.feat.title}/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:18 }}>
            {t.features.map((f,i)=>(
              <div key={i} className={`reveal reveal-d${(i%3)+1}`} style={{ background:'#fff', border:'1px solid #E6EAF2', borderRadius:14, padding:28, transition:'all 0.25s' }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor=BLUE;e.currentTarget.style.boxShadow=`0 14px 36px ${BLUE}12`;e.currentTarget.style.transform='translateY(-4px)';}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='#E6EAF2';e.currentTarget.style.boxShadow='none';e.currentTarget.style.transform='none';}}>
                <div style={{ width:48, height:48, borderRadius:13, background:`linear-gradient(135deg,${BLUE}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:22, marginBottom:18 }}><Ico e={f.icon} size={26}/></div>
                <div style={{ fontSize:16.5, fontWeight:700, color:NAVY, marginBottom:10, letterSpacing:'-0.2px' }}>{f.t}</div>
                <div style={{ fontSize:14, color:'#5A6B85', lineHeight:1.7 }}>{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMPARISON */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <SectionHead k={t.comp.k} title={t.comp.title} sub={t.comp.sub}/>
          <div className="reveal" style={{ overflowX:'auto', borderRadius:16, boxShadow:'0 8px 32px rgba(15,30,60,0.06)' }}>
            <table style={{ width:'100%', borderCollapse:'separate', borderSpacing:0, background:'#fff', minWidth:520 }}>
              <thead>
                <tr>
                  <th style={{ background:NAVY, color:'rgba(255,255,255,0.6)', padding:'15px 20px', textAlign:'left', fontSize:12.5, fontWeight:700, letterSpacing:'0.5px' }}>{t.compHead[0]}</th>
                  <th style={{ background:NAVY, color:'rgba(255,255,255,0.6)', padding:'15px 20px', textAlign:'center', fontSize:12.5, fontWeight:700 }}>{t.compHead[1]}</th>
                  <th style={{ background:`linear-gradient(90deg,${BLUE},#1D4ED8)`, color:'#fff', padding:'15px 20px', textAlign:'center', fontSize:12.5, fontWeight:700 }}>🛡️ {t.compHead[2]}</th>
                </tr>
              </thead>
              <tbody>
                {t.compRows.map((r,i)=>(
                  <tr key={i} style={{ background: i%2?'#F8FAFC':'#fff' }}>
                    <td style={{ padding:'14px 20px', fontSize:13.5, fontWeight:600, color:NAVY, borderBottom:'1px solid #F1F5F9' }}>{r[0]}</td>
                    <td style={{ padding:'14px 20px', fontSize:13, color:'#64748B', textAlign:'center', borderBottom:'1px solid #F1F5F9' }}>{r[1]}</td>
                    <td style={{ padding:'14px 20px', fontSize:13, fontWeight:600, color:MINT, textAlign:'center', borderBottom:'1px solid #F1F5F9', background:`${BLUE}05` }}>{r[2]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* ADVANCED SECURITY (collapsible) */}
      <section style={{ background:'#fff', padding:'72px 24px' }}>
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <div onClick={()=>setAdvOpen(!advOpen)} style={{ display:'flex', alignItems:'center', justifyContent:'space-between', padding:'24px 28px', background:'#F6F8FC', border:`1px solid ${advOpen?BLUE+'40':'#E6EAF2'}`, borderRadius:16, cursor:'pointer', transition:'all 0.2s' }}>
            <div style={{ display:'flex', alignItems:'center', gap:16 }}>
              <div style={{ width:44, height:44, borderRadius:12, background:`linear-gradient(135deg,${BLUE}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', color:BLUE, flexShrink:0 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V5z"/><path d="M9 12l2 2 4-4"/></svg>
              </div>
              <div>
                <div style={{ fontFamily:'DM Sans', fontSize:11, fontWeight:600, color:BLUE, letterSpacing:'2px', marginBottom:4 }}>{t.adv.k}</div>
                <div style={{ fontSize:19, fontWeight:700, color:NAVY, letterSpacing:'-0.3px' }}>{t.adv.title}</div>
              </div>
            </div>
            <span style={{ fontSize:24, color:advOpen?BLUE:'#94A3B8', transform: advOpen?'rotate(45deg)':'none', transition:'transform 0.25s', flexShrink:0 }}>+</span>
          </div>
          {advOpen && (
            <div style={{ marginTop:18 }}>
              <p style={{ fontSize:14, color:'#5A6B85', marginBottom:20, paddingLeft:4 }}>{t.adv.sub}</p>
              <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:14 }}>
                {t.adv.items.map((a,i)=>(
                  <div key={i} style={{ display:'flex', gap:12, padding:'16px 18px', background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:12 }}>
                    <span style={{ flexShrink:0, width:22, height:22, borderRadius:6, background:`${BLUE}12`, color:BLUE, display:'flex', alignItems:'center', justifyContent:'center', marginTop:1 }}>
                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                    </span>
                    <div>
                      <div style={{ fontSize:14, fontWeight:700, color:NAVY, marginBottom:3 }}>{a.t}</div>
                      <div style={{ fontSize:13, color:'#5A6B85', lineHeight:1.55 }}>{a.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </section>

      {/* BENEFITS */}
      <section style={{ background:`linear-gradient(165deg, ${NAVY} 0%, ${NAVY2} 100%)`, padding:'104px 24px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', width:560, height:560, borderRadius:'50%', background:`radial-gradient(circle,${BLUE}22 0%,transparent 65%)`, top:-200, right:-100, filter:'blur(80px)' }}/>
        <div style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
          <SectionHead k={t.ben.k} title={t.ben.title} light/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(220px,1fr))', gap:18 }}>
            {t.benefits.map((b,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'rgba(255,255,255,0.04)', border:'1px solid rgba(37,99,235,0.18)', borderRadius:16, padding:30, backdropFilter:'blur(8px)' }}>
                <div style={{ fontFamily:'DM Sans', fontSize:'clamp(26px,2.4vw,34px)', fontWeight:700, lineHeight:1, marginBottom:14, background:`linear-gradient(135deg,${CYAN},#fff)`, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', letterSpacing:'-1px' }}>{b.n}</div>
                <div style={{ fontSize:15, fontWeight:700, color:'#fff', marginBottom:8 }}>{b.t}</div>
                <div style={{ fontSize:13, color:'rgba(255,255,255,0.55)', lineHeight:1.6 }}>{b.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* USE CASES */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1240, margin:'0 auto' }}>
          <SectionHead k={t.uc.k} title={t.uc.title} sub={t.uc.sub}/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:18 }}>
            {t.useCases.map((u,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:14, padding:30 }}>
                <div style={{ fontSize:34, marginBottom:14 }}><Ico e={u.icon} size={26}/></div>
                <div style={{ fontSize:17, fontWeight:700, color:NAVY, marginBottom:10 }}>{u.ind}</div>
                <div style={{ fontSize:14, color:'#5A6B85', lineHeight:1.7 }}>{u.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ARCHITECTURE / DEPLOYMENT METHODS */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1240, margin:'0 auto' }}>
          <SectionHead k={t.arch.k} title={t.arch.title} sub={t.arch.sub}/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:18 }}>
            {t.arch.modes.map((m,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:14, padding:30 }}>
                <div style={{ width:48, height:48, borderRadius:13, background:`linear-gradient(135deg,${BLUE}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:22, marginBottom:18 }}><Ico e={m.icon} size={26}/></div>
                <div style={{ fontSize:17, fontWeight:700, color:NAVY, marginBottom:10 }}>{m.name}</div>
                <div style={{ fontSize:14, color:'#5A6B85', lineHeight:1.7 }}>{m.d}</div>
              </div>
            ))}
          </div>
          <div className="reveal reveal-d2" style={{ marginTop:18, padding:'18px 24px', background:`linear-gradient(135deg,${BLUE}0a,${CYAN}06)`, border:`1px solid ${BLUE}22`, borderRadius:12, display:'flex', gap:14, alignItems:'center' }}>
            <span style={{ flexShrink:0, fontSize:20 }}>⚡</span>
            <span style={{ fontSize:14, color:NAVY, fontWeight:600, lineHeight:1.6 }}>{t.arch.ha}</span>
          </div>
        </div>
      </section>

      {window.SITE_CONFIG && window.SITE_CONFIG.SHOW_PRICE_GUIDE && (
        <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
          <div style={{ maxWidth:1080, margin:'0 auto' }}>
            <SectionHead k={t.price.k} title={t.price.title} sub={t.price.sub} center/>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))', gap:20 }}>
              {t.price.plans.map((p,i)=>(
                <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#fff', border:`${p.primary?2:1}px solid ${p.primary?BLUE:'#E6EAF2'}`, borderRadius:16, padding:30, position:'relative', boxShadow: p.primary?`0 14px 40px ${BLUE}14`:'0 4px 16px rgba(15,30,60,0.04)' }}>
                  {p.primary && <div style={{ position:'absolute', top:-12, left:24, padding:'4px 12px', background:BLUE, color:'#fff', fontSize:11, fontWeight:700, borderRadius:20, letterSpacing:'0.5px' }}>{isKo?'대표 구성':'Popular'}</div>}
                  <div style={{ fontFamily:'DM Sans', fontSize:26, color: p.primary?BLUE:'#64748B', marginBottom:8 }}><Ico e={p.icon} size={26}/></div>
                  <div style={{ fontSize:17, fontWeight:700, color:NAVY, marginBottom:6 }}>{p.name}</div>
                  <div style={{ fontSize:20, fontWeight:700, color: p.primary?BLUE:NAVY, marginBottom:2, letterSpacing:'-0.3px' }}>{p.price}</div>
                  <div style={{ fontSize:12.5, color:'#94A3B8', marginBottom:20 }}>{p.per}</div>
                  <div style={{ display:'flex', flexDirection:'column', gap:9, marginBottom:22 }}>
                    {p.features.map((f,fi)=>(
                      <div key={fi} style={{ display:'flex', alignItems:'center', gap:9, fontSize:13.5, color:'#475569' }}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={MINT} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>{f}
                      </div>
                    ))}
                  </div>
                  <div style={{ fontSize:11, color:'#94A3B8', marginBottom:14, padding:'8px 12px', background:'#F8FAFC', borderRadius:8 }}>BEST · {p.best}</div>
                  <button onClick={()=>openQuote('SpamOut '+p.name)} style={{ width:'100%', padding:'13px', background: p.primary?`linear-gradient(135deg,${BLUE},#1D4ED8)`:NAVY, color:'#fff', border:'none', borderRadius:10, fontSize:14, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>{isKo?'견적 문의':'Get Quote'}</button>
                </div>
              ))}
            </div>
            {/* 견적 산정 요소 */}
            <div className="reveal reveal-d2" style={{ marginTop:24, padding:'18px 22px', background:'#fff', border:'1px solid #E6EAF2', borderRadius:12, display:'flex', gap:14, alignItems:'flex-start' }}>
              <span style={{ flexShrink:0, fontSize:18, marginTop:1 }}>💡</span>
              <span style={{ fontSize:13.5, color:'#5A6B85', lineHeight:1.65 }}>{t.price.note}</span>
            </div>
          </div>
        </section>
      )}

      {/* CERTIFICATION */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1000, margin:'0 auto' }}>
          <SectionHead k={t.certSec.k} title={t.certSec.title} sub={t.certSec.sub} center/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))', gap:18, marginBottom:20 }}>
            {certs.map((c,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:14, padding:28, textAlign:'center' }}>
                <div style={{ width:52, height:52, margin:'0 auto 14px', borderRadius:14, background:`linear-gradient(135deg,${BLUE}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', color:BLUE }}>
                  <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="6"/><path d="M8.5 13.5 7 22l5-3 5 3-1.5-8.5"/></svg>
                </div>
                <div style={{ fontSize:16, fontWeight:700, color:NAVY, marginBottom:4 }}>{c.name}</div>
                <div style={{ fontSize:12.5, color:'#5A6B85', marginBottom:8 }}>{c.en}</div>
                <div style={{ fontSize:11, color:'#94A3B8', fontFamily:'DM Mono,monospace', padding:'4px 10px', background:'#fff', border:'1px solid #E6EAF2', borderRadius:6, display:'inline-block' }}>{c.no}</div>
              </div>
            ))}
          </div>
          <div className="reveal reveal-d2" style={{ padding:'16px 22px', background:`linear-gradient(135deg,${BLUE}0a,${CYAN}06)`, border:`1px solid ${BLUE}22`, borderRadius:12, display:'flex', gap:14, alignItems:'center', justifyContent:'center', textAlign:'center' }}>
            <span style={{ fontSize:18 }}>🏛️</span>
            <span style={{ fontSize:14, color:NAVY, fontWeight:600 }}>{t.certSec.proc}</span>
          </div>
        </div>
      </section>

      {/* MANUFACTURER & SUPPLY */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:1080, margin:'0 auto' }}>
          <SectionHead k={t.maker.k} title={t.maker.title} sub={t.maker.sub} center/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:18 }}>
            {t.maker.points.map((p,i)=>(
              <div key={i} className={`reveal reveal-d${i+1}`} style={{ background:'#fff', border:'1px solid #E6EAF2', borderRadius:14, padding:30, textAlign:'center' }}>
                <div style={{ width:56, height:56, margin:'0 auto 16px', borderRadius:15, background:`linear-gradient(135deg,${BLUE}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:26 }}><Ico e={p.icon} size={26}/></div>
                <div style={{ fontSize:16.5, fontWeight:700, color:NAVY, marginBottom:10 }}>{p.t}</div>
                <div style={{ fontSize:14, color:'#5A6B85', lineHeight:1.7 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DOWNLOAD */}
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:860, margin:'0 auto' }}>
          <SectionHead k={t.dl.k} title={t.dl.title} center/>
          <div className="reveal" style={{ background:`linear-gradient(165deg, ${NAVY}, ${NAVY2})`, borderRadius:18, padding:'8px 36px', marginBottom:28, boxShadow:`0 20px 50px ${NAVY}20` }}>
            {t.dl.summary.map((s,i)=>(
              <div key={i} style={{ display:'flex', gap:16, padding:'20px 0', borderBottom: i<t.dl.summary.length-1?'1px solid rgba(255,255,255,0.08)':'none', alignItems:'flex-start' }}>
                <div style={{ flexShrink:0, width:30, height:30, borderRadius:9, background:`linear-gradient(135deg,${BLUE},${CYAN})`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Sans', fontSize:13, fontWeight:700 }}>0{i+1}</div>
                <div style={{ fontSize:14.5, color:'rgba(255,255,255,0.9)', lineHeight:1.65, paddingTop:4 }}>{s}</div>
              </div>
            ))}
          </div>
          <div className="reveal reveal-d2" style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
            {t.dl.files.map((file,i)=>(
              <button key={i} onClick={()=>setDlOpen(true)} style={{ padding:22, background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:14, cursor:'pointer', fontFamily:'inherit', display:'flex', gap:14, alignItems:'center', transition:'all 0.2s' }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor=BLUE;e.currentTarget.style.background='#fff';}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='#E6EAF2';e.currentTarget.style.background='#F6F8FC';}}>
                <div style={{ width:44, height:44, borderRadius:12, background:`${BLUE}12`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, flexShrink:0 }}>{file[0]}</div>
                <div style={{ textAlign:'left' }}>
                  <div style={{ fontSize:14, fontWeight:700, color:NAVY }}>{file[1]}</div>
                  <div style={{ fontSize:12, color:'#94A3B8', marginTop:3 }}>{isKo?'회사 이메일 입력 시 담당자가 자료를 보내드립니다':'We will email the materials to you'}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* 도입 시나리오 */}
      <SolScenarios solKey="spamout" lang={lang} setPage={setPage} openQuote={openQuote}/>

      {/* 조달 등재 정보 */}
      {window.hasG2B && window.hasG2B('spamout') && (
        <section style={{ background:'#fff', padding:'72px 24px 0' }}>
          <div style={{ maxWidth:980, margin:'0 auto' }}><G2BPanel solKey="spamout" lang={lang}/></div>
        </section>
      )}

      {/* FAQ */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:780, margin:'0 auto' }}>
          <SectionHead k={t.faq.k} title={t.faq.title} center/>
          <div className="reveal" style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {t.faqs.map((f,i)=>(
              <div key={i} style={{ background:'#fff', border:`1px solid ${openFaqs.includes(i)?BLUE+'40':'#E6EAF2'}`, borderRadius:14, overflow:'hidden', transition:'all 0.2s', boxShadow: openFaqs.includes(i)?`0 8px 24px ${BLUE}10`:'none' }}>
                <div onClick={()=>toggleFaq(i)} style={{ padding:'20px 24px', display:'flex', justifyContent:'space-between', alignItems:'center', cursor:'pointer', gap:18 }}>
                  <div style={{ display:'flex', gap:14, alignItems:'center', flex:1, minWidth:0 }}>
                    <span style={{ fontFamily:'DM Sans', fontSize:13, fontWeight:700, color:BLUE, flexShrink:0 }}>Q{i+1}</span>
                    <span style={{ fontSize:15, fontWeight:600, color:NAVY, lineHeight:1.4 }}>{f.q}</span>
                  </div>
                  <span style={{ fontSize:18, color:openFaqs.includes(i)?BLUE:'#94A3B8', transform: openFaqs.includes(i)?'rotate(45deg)':'none', transition:'transform 0.2s', flexShrink:0 }}>+</span>
                </div>
                {openFaqs.includes(i) && <div style={{ padding:'0 24px 22px 60px', fontSize:14, color:'#5A6B85', lineHeight:1.7, borderTop:'1px solid #F1F5F9', paddingTop:18 }}>{f.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section data-cta-block style={{ background:`linear-gradient(165deg, ${NAVY2} 0%, #07101F 100%)`, padding:'120px 24px', position:'relative', overflow:'hidden', textAlign:'center' }}>
        <div style={{ position:'absolute', width:800, height:800, borderRadius:'50%', background:`radial-gradient(circle,${BLUE}20 0%,transparent 60%)`, top:-300, left:'50%', transform:'translateX(-50%)', filter:'blur(80px)' }}/>
        <div style={{ maxWidth:760, margin:'0 auto', position:'relative' }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:8, padding:'7px 14px', background:'rgba(37,99,235,0.10)', border:`1px solid ${BLUE}35`, borderRadius:100, marginBottom:28 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:CYAN, boxShadow:`0 0 12px ${CYAN}` }}/>
            <span style={{ fontFamily:'DM Sans', fontSize:11, fontWeight:600, color:CYAN, letterSpacing:'1.5px' }}>14 — FINAL CTA</span>
          </div>
          <h2 style={{ fontSize:'clamp(30px,3.6vw,46px)', fontWeight:700, color:'#fff', marginBottom:20, lineHeight:1.25, whiteSpace:'pre-line', letterSpacing:'-0.7px' }}>{t.bottom.title}</h2>
          <p style={{ color:'rgba(255,255,255,0.65)', marginBottom:38, fontSize:16, lineHeight:1.7, whiteSpace:'pre-line' }}>{t.bottom.sub}</p>
          <div style={{ display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap' }}>
            <button onClick={()=>setPage('contact')} style={{ padding:'15px 28px', background:`linear-gradient(135deg,${BLUE},#1D4ED8)`, color:'#fff', fontSize:15, fontWeight:600, borderRadius:10, border:'none', cursor:'pointer', fontFamily:'inherit', display:'inline-flex', alignItems:'center', gap:8, boxShadow:`0 12px 32px ${BLUE}45` }}>{t.bottom.a} <ArrowR/></button>
            <button onClick={()=>openQuote('SpamOut')} style={{ padding:'15px 24px', background:'rgba(37,99,235,0.12)', color:'#93C5FD', border:`1px solid ${BLUE}40`, fontSize:15, fontWeight:600, borderRadius:10, cursor:'pointer', fontFamily:'inherit' }}>{t.bottom.b}</button>
            <button onClick={()=>setDlOpen(true)} style={{ padding:'15px 24px', background:'rgba(255,255,255,0.06)', color:'#fff', border:'1px solid rgba(255,255,255,0.2)', fontSize:15, fontWeight:600, borderRadius:10, cursor:'pointer', fontFamily:'inherit' }}>{t.bottom.c}</button>
            <button onClick={()=>openQuote('SpamOut')} style={{ padding:'15px 24px', background:'transparent', color:'rgba(255,255,255,0.7)', border:'1px solid rgba(255,255,255,0.14)', fontSize:15, fontWeight:600, borderRadius:10, cursor:'pointer', fontFamily:'inherit' }}>{t.bottom.d}</button>
          </div>
        </div>
      </section>

      <InfographicView open={igOpen} onClose={()=>setIgOpen(false)} lang={lang}/>

      {/* DOWNLOAD MODAL */}
      {dlOpen && (
        <div style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.65)', backdropFilter:'blur(4px)', zIndex:200, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
          <div style={{ background:'#fff', borderRadius:20, maxWidth:460, width:'100%', boxShadow:'0 24px 80px rgba(0,0,0,0.3)', overflow:'hidden' }}>
            <div style={{ background:`linear-gradient(135deg, ${BLUE}, #1D4ED8)`, padding:'26px 28px 22px' }}>
              <div style={{ fontSize:20, fontWeight:700, color:'#fff', marginBottom:6 }}>{isKo?'제안서 요청하고 상담 연결하기':'Request Proposal & Connect'}</div>
              <div style={{ fontSize:13, color:'rgba(255,255,255,0.78)', lineHeight:1.5 }}>{isKo?'정보를 남겨주시면 자료와 함께 담당자가 빠르게 연락드립니다.':'Leave your details — we\'ll send materials and follow up quickly.'}</div>
            </div>
            <div style={{ padding:'24px 28px 26px' }}>
              {dlSent ? (
                <div style={{ textAlign:'center', padding:'10px 0' }}>
                  <div style={{ width:56, height:56, margin:'0 auto 14px', borderRadius:'50%', background:`${MINT}15`, color:MINT, display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                  </div>
                  <div style={{ fontWeight:700, color:NAVY, marginBottom:8 }}>{isKo?'요청이 접수되었습니다':'Request Received'}</div>
                  <div style={{ fontSize:13, color:'#5A6B85', lineHeight:1.6, whiteSpace:'pre-line' }}>{isKo?'담당자가 빠르게 연락드리겠습니다.\n관리자 알림이 발송되었습니다.':'Our team will contact you shortly.\nAn admin notification has been sent.'}</div>
                  <button onClick={()=>{setDlOpen(false);setDlSent(false);setDlForm({ company:'', name:'', email:'', phone:'', plan:'Cloud' });}} style={{ marginTop:20, padding:'10px 24px', background:BLUE, color:'#fff', border:'none', borderRadius:8, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>{isKo?'닫기':'Close'}</button>
                </div>
              ) : (
                <>
                  <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:12 }}>
                    <div>
                      <label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'회사명':'Company'}<Req/></label>
                      <input value={dlForm.company} onChange={e=>dlUp('company',e.target.value)} style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B' }}/>{dlErrs.company && <FieldErr msg={dlErrs.company}/>}
                    </div>
                    <div>
                      <label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'담당자명':'Name'}<Req/></label>
                      <input value={dlForm.name} onChange={e=>dlUp('name',e.target.value)} style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B' }}/>{dlErrs.name && <FieldErr msg={dlErrs.name}/>}
                    </div>
                  </div>
                  <div style={{ marginBottom:12 }}>
                    <label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'회사 이메일':'Work Email'}<Req/></label>
                    <input type="email" value={dlForm.email} onChange={e=>dlUp('email',e.target.value)} placeholder="name@company.com" style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B' }}/>{dlErrs.email && <FieldErr msg={dlErrs.email}/>}
                  </div>
                  <div style={{ marginBottom:12 }}>
                    <label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'연락처':'Phone'}</label>
                    <input value={dlForm.phone} onChange={e=>dlUp('phone',e.target.value)} placeholder={isKo?'010-0000-0000':'Phone'} style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B' }}/>
                  </div>
                  <div style={{ marginBottom:18 }}>
                    <label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'관심 도입 방식':'Preferred Deployment'}</label>
                    <select value={dlForm.plan} onChange={e=>dlUp('plan',e.target.value)} style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B', cursor:'pointer' }}>
                      <option value="Cloud">{isKo?'Cloud (10명~)':'Cloud (10+ users)'}</option>
                      <option value="구축형 SMB">{isKo?'구축형 SMB (50~900명)':'On-Prem SMB (50–900)'}</option>
                      <option value="구축형 Enterprise">{isKo?'구축형 Enterprise (1,000명+)':'On-Prem Enterprise (1,000+)'}</option>
                    </select>
                  </div>
                  <ConsentBlock lang={lang} value={!!dlForm._agree} onChange={v=>setDlForm({...dlForm,_agree:v})}
                    onOpenPolicy={()=>{ setDlOpen(false); setTimeout(()=>window.__goPrivacy&&window.__goPrivacy(),0); }}
                    purpose={isKo?'제안서·자료 제공 및 도입 상담 회신':undefined}/>
                  {dlErr && (
                    <div className="dl-err-banner" style={{ background:'#FEF2F2', border:'1px solid #FECACA', borderRadius:10, padding:'11px 13px', marginBottom:10, fontSize:12.5, color:'#B91C1C', lineHeight:1.6 }}>{dlErr}</div>
                  )}
                  <button onClick={handleDownload} disabled={!dlForm.email || !dlForm._agree || dlSending} style={{ width:'100%', padding:14, background: (dlForm.email&&dlForm._agree)?`linear-gradient(135deg,${BLUE},#1D4ED8)`:'#94A3B8', color:'#fff', border:'none', borderRadius:8, fontSize:15, fontWeight:600, cursor: dlForm.email?'pointer':'default', fontFamily:'inherit', marginBottom:8 }}>{dlSending?(isKo?'처리 중...':'Processing...'):(isKo?'제안서 요청하고 상담 연결':'Request Proposal & Connect')}</button>
                  <div style={{ fontSize:11, color:'#94A3B8', textAlign:'center', marginBottom:8 }}>{isKo?'📱 제출 즉시 담당자에게 알림이 발송됩니다':'📱 Our team is notified instantly on submit'}</div>
                  <button onClick={()=>setDlOpen(false)} style={{ width:'100%', padding:'8px', background:'transparent', color:'#94A3B8', border:'none', fontSize:13, cursor:'pointer', fontFamily:'inherit' }}>{isKo?'취소':'Cancel'}</button>
                </>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { SpamOutPage });