// ─── Generic Product Detail Page (EDR · MDR) ─────────────────────────────────
// 데이터 기반 렌더러. SpamOut/CheckOut/Arch5와 동일 디자인 체계.
// PRODUCTS[key] = { accent, accent2, badge, product, tagline, hero..., sections... }

const ProductPage = ({ pkey, lang, setPage, openQuote }) => {
  // 데이터 파생 — 훅보다 먼저 (훅 아님 → 안전)
  const D   = (window.PRODUCTS && window.PRODUCTS[pkey]) ? window.PRODUCTS[pkey] : null;
  const t   = D ? (D[lang] || D.en) : null;
  const ACC = D ? D.accent : '#2563EB';
  const ACC2= D ? D.accent2 : '#60A5FA';
  const label = D ? D.product : '';
  const hasDash = !!(t && t.dash);

  const [dlOpen, setDlOpen]     = 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:'', users:'', message:'' });
  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 [openFaqs, setOpenFaqs] = React.useState([0]);
  const toggleFaq = (i) => setOpenFaqs(prev => prev.includes(i) ? prev.filter(x=>x!==i) : [...prev, i]);
  const isKo = lang === 'ko';

  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 dashRef = React.useRef(null);
  const [dashIn, setDashIn] = React.useState(false);
  const [hKpi, setHKpi] = React.useState(null);
  const [hSlice, setHSlice] = React.useState(null);
  const [hRow, setHRow] = React.useState(null);
  const [hBar, setHBar] = React.useState(null);
  React.useEffect(() => {
    setDashIn(false);
    if (!hasDash) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setDashIn(true); return; }
    let ob = null, raf = 0;
    const fire = () => { setDashIn(true); cleanup(); };
    const check = () => {
      const el = dashRef.current; if (!el) return false;
      const r = el.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.85 && r.bottom > 0) { fire(); return true; }
      return false;
    };
    const cleanup = () => {
      if (ob) { ob.disconnect(); ob = null; }
      window.removeEventListener('scroll', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; check(); }); };
    // ref 부착을 기다린 뒤 옵저버 연결 (센티넬 없이 threshold 0 + rootMargin 사용)
    const attach = () => {
      const el = dashRef.current;
      if (!el) { raf = requestAnimationFrame(attach); return; }
      if (check()) return;
      ob = new IntersectionObserver(es => { if (es.some(e => e.isIntersecting)) fire(); },
        { threshold: 0, rootMargin: '0px 0px -15% 0px' });
      ob.observe(el);
      window.addEventListener('scroll', onScroll, { passive: true });
    };
    attach();
    return cleanup;
  }, [pkey, hasDash]);

  const NAVY='#0F1E3C', NAVY2='#13294F', CYAN='#06B6D4';
  if (!D || !t) return null;

  const handleDownload = async () => {
    const _v = window.validateForm(dlForm, dlRules, lang);
    if (!_v.ok) { setDlErrs(_v.errors); return; }
    setDlSending(true);
    const msg = `🗂️ ${label} 자료 요청 / 리드\n회사: ${dlForm.company||'-'}\n담당자: ${dlForm.name||'-'}\n이메일: ${dlForm.email||'-'}\n연락처: ${dlForm.phone||'-'}\n예상 규모: ${dlForm.users||'-'}\n문의: ${dlForm.message||'-'}\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:label+' 자료요청', status:'new',
          message:`이메일:${dlForm.email} / 연락처:${dlForm.phone} / 규모:${dlForm.users} / ${dlForm.message}` });
        LS.set('3es_inquiries', list);
      }
    } catch(e) {}
    setDlSending(false);
    setDlSent(true);
  };

  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?ACC2:ACC, marginBottom:18 }}>
      <span style={{ width:24, height:1, background: light?ACC2:ACC, opacity:0.6 }}/>{children}
    </div>
  );

  // 숫자 카운트업
  const useCU = (text, run, dur = 1100) => {
    const [out, setOut] = React.useState(() => String(text).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], target = parseFloat(raw.replace(/,/g,''));
      if (!isFinite(target)) { setOut(src); return; }
      const dec = (raw.split('.')[1]||'').length, comma = raw.includes(',');
      const t0 = performance.now(); let id = 0;
      const tick = (now) => {
        const pr = Math.min(1,(now-t0)/dur), e = 1-Math.pow(1-pr,3), 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 (pr < 1) id = requestAnimationFrame(tick);
      };
      id = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(id);
    }, [text, run, dur]);
    return out;
  };
  const CV = ({ value, run, dur, style }) => <span style={style}>{useCU(value, run, dur)}</span>;
  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>);
  const Check = ({c=ACC}) => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={c} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></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(${ACC}0f 1px,transparent 1px),linear-gradient(90deg,${ACC}0f 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, ${ACC}26 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}16 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={pkey} color={ACC}/></div>
          <div onClick={()=>setPage('solutions')} style={{ cursor:'pointer', display:'flex', width:'fit-content', 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?'솔루션으로':'Back to Solutions'}
          </div>
          <div style={{ display:'inline-flex', alignItems:'center', gap:10, padding:'7px 14px', background:`${ACC}14`, border:`1px solid ${ACC}30`, borderRadius:100, marginBottom:22 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:ACC2, boxShadow:`0 0 12px ${ACC2}` }}/>
            <span style={{ fontFamily:'DM Sans', fontSize:11, fontWeight:600, color:ACC2, letterSpacing:'2px' }}>{t.badge}</span>
          </div>
          <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:14, flexWrap:'wrap', rowGap:10 }}>
            <span style={{ fontFamily:'DM Sans', fontSize:'clamp(36px,4.4vw,58px)', fontWeight:800, color:'#fff', letterSpacing:'-1.6px', lineHeight:1 }}>{D.product}</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, display:'inline-block', lineHeight:1.4, whiteSpace:'nowrap' }}>{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:840 }}>
            {t.h1a} <span style={{ background:`linear-gradient(110deg, ${ACC2} 10%, ${CYAN} 90%)`, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent' }}>{t.h1b}</span>
          </h1>
          <p style={{ fontSize:18, color:'rgba(255,255,255,0.7)', maxWidth:700, 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?ACC2:'rgba(255,255,255,0.7)', padding:'7px 14px', background: i<2?`${ACC}14`:'rgba(255,255,255,0.04)', border:`1px solid ${i<2?ACC+'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,${ACC},${D.accentDark})`, 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 ${ACC}40` }}>{isKo?'도입 상담':'Talk to Sales'} <ArrowR/></button>
            <button onClick={()=>openQuote(label)} 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' }}>{isKo?'견적 문의':'Get Quote'}</button>
            <button onClick={()=>setDlOpen(true)} style={{ padding:'15px 22px', background:'transparent', color:ACC2, fontSize:15, fontWeight:600, borderRadius:10, border:`1px solid ${ACC}40`, cursor:'pointer', fontFamily:'inherit' }}>{isKo?'자료 요청':'Download'}</button>
          </div>
        </div>
      </section>

      {/* 01 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(260px,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:28, 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:'#EF4444', letterSpacing:'1px', padding:'3px 9px', background:'rgba(239,68,68,0.08)', borderRadius:20 }}>{p.tag}</span>
                </div>
                <div style={{ fontSize:16.5, fontWeight:700, color:NAVY, lineHeight:1.4, marginBottom:10 }}>{p.title}</div>
                <div style={{ fontSize:13.5, color:'#5A6B85', lineHeight:1.7 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 02 SOLUTION */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:1080, margin:'0 auto' }}>
          <SectionHead k={t.sol.k} title={t.sol.title} sub={t.sol.sub}/>
          <div className="reveal" style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))', gap:14 }}>
            {t.sol.points.map((p,i)=>(
              <div key={i} style={{ display:'flex', gap:12, padding:'18px 20px', background:'#fff', border:'1px solid #E6EAF2', borderRadius:12, alignItems:'center' }}>
                <span style={{ flexShrink:0, width:26, height:26, borderRadius:8, background:`${ACC}14`, color:ACC, display:'flex', alignItems:'center', justifyContent:'center' }}><Check/></span>
                <span style={{ fontSize:14.5, fontWeight:600, color:NAVY }}>{p}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 03 CONSOLE DASHBOARD (t.dash 있을 때만) */}
      {t.dash && (
      <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,${ACC}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:'flex', alignItems:'center', gap:10, paddingBottom:16, marginBottom:18, borderBottom:'1px solid rgba(255,255,255,.06)' }}>
              <div style={{ display:'flex', gap:6 }}>
                {['#F87171','#F59E0B','#34D399'].map((c,i)=><span key={i} style={{ width:9, height:9, borderRadius:'50%', background:c, opacity:.7 }}/>)}
              </div>
              <span style={{ fontFamily:'DM Sans,sans-serif', fontSize:11.5, color:'rgba(255,255,255,.4)', letterSpacing:'.4px' }}>{label} · Management Console</span>
              <span style={{ marginLeft:'auto', display:'inline-flex', alignItems:'center', gap:6, fontSize:11, color:'#34D399' }}>
                <s style={{ width:6, height:6, borderRadius:'50%', background:'#34D399', display:'block', textDecoration:'none' }}/>LIVE
              </span>
            </div>

            <div className="demo-disclaimer" style={{ fontSize:12, color:'rgba(255,255,255,.55)', lineHeight:1.65, marginBottom:14 }}>
              {isKo?'※ 아래 화면은 기능 이해를 돕기 위한 시뮬레이션이며, 실제 제품 UI 및 수치와 다를 수 있습니다.'
                   :'* The panel below is a functional simulation and may differ from the actual product UI and figures.'}
            </div>
            <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 = hKpi===i; return (
                    <div key={i} onMouseEnter={()=>setHKpi(i)} onMouseLeave={()=>setHKpi(null)}
                      style={{ background: on?'rgba(255,255,255,.055)':'rgba(255,255,255,.028)', border:`1px solid ${on?ACC+'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 ${ACC}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, transition:'color .22s' }}>{x.k}</div>
                      <CV 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?ACC2:'#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>

                {/* MODULES */}
                <div style={{ background:'rgba(255,255,255,.022)', border:`1px solid ${ACC}22`, borderRadius:16, padding:'22px', 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:ACC2, marginBottom:7 }}>{t.dash.mod.k}</div>
                      <div style={{ fontSize:17, fontWeight:700, color:'#fff', letterSpacing:'-.3px' }}>{t.dash.mod.title}</div>
                    </div>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={ACC2} 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.mod.rows.map((r,i)=>{ const on = hRow===i; return (
                      <div key={i} className="keep-cols" onMouseEnter={()=>setHRow(i)} onMouseLeave={()=>setHRow(null)}
                        style={{ display:'grid', gridTemplateColumns:'minmax(88px,auto) 1fr minmax(56px,auto)', gap:12, alignItems:'center', cursor:'default',
                          opacity: hRow!==null && !on ? .45 : 1, transition:'opacity .22s' }}>
                        <div style={{ minWidth:0 }}>
                          <div style={{ fontSize:12.5, fontWeight:700, color: on?ACC2:'#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,${ACC},${ACC2})`,
                            boxShadow: on?`0 0 14px ${ACC}55`:'none', transition:`width 1s cubic-bezier(.2,.8,.3,1) ${.15+i*.12}s, box-shadow .22s` }}/>
                        </div>
                        <CV value={r.v} run={dashIn} dur={1200+i*110}
                          style={{ fontFamily:'DM Sans,sans-serif', fontSize:14, fontWeight:700, color: on?ACC2:'#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 }}>
                {/* THREAT BREAKDOWN */}
                <div style={{ background:'rgba(255,255,255,.022)', border:'1px solid rgba(255,255,255,.07)', borderRadius:16, padding:'22px' }}>
                  <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10.5, fontWeight:700, letterSpacing:'2px', color:'rgba(255,255,255,.4)', 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 = hSlice===i; return (
                        <div key={i} onMouseEnter={()=>setHSlice(i)} onMouseLeave={()=>setHSlice(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: hSlice!==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>
                          <CV 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;
                          const n=t.dash.cls.items.length;
                          const vals=t.dash.cls.items.map(c=>{
                            const raw=(typeof c.pct==='number')?c.pct:parseFloat(c.v);
                            return isFinite(raw)?raw:100/n;
                          });
                          return t.dash.cls.items.map((c,i)=>{
                            const v=vals[i], on=hSlice===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={hSlice!==null && !on ? .35 : 1}
                              onMouseEnter={()=>setHSlice(i)} onMouseLeave={()=>setHSlice(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, textAlign:'center', padding:'0 10px', lineHeight:1.3 }}>
                          {hSlice!==null ? t.dash.cls.items[hSlice].t : t.dash.cls.centerLabel}
                        </div>
                        <CV key={hSlice===null?'base':'s'+hSlice}
                          value={hSlice!==null ? t.dash.cls.items[hSlice].v : t.dash.cls.centerValue} run={dashIn} dur={hSlice!==null?420:1200}
                          style={{ fontFamily:'DM Sans,sans-serif', fontSize:22, fontWeight:700, color: hSlice!==null ? t.dash.cls.items[hSlice].c : '#fff', letterSpacing:'-.8px', transition:'color .2s' }}/>
                      </div>
                    </div>
                  </div>
                </div>

                {/* TREND + COMPLIANCE */}
                <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>
                    <span style={{ fontFamily:'DM Sans,sans-serif', fontSize:11.5, color:'rgba(255,255,255,.42)', whiteSpace:'nowrap' }}>peak {t.dash.trend.peak}</span>
                  </div>
                  <div style={{ display:'flex', gap:14, marginBottom:14, flexWrap:'wrap' }}>
                    {[[ACC2,t.dash.trend.legend[0]],['#F87171',t.dash.trend.legend[1]]].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>
                    ))}
                  </div>
                  <div style={{ display:'flex', alignItems:'flex-end', gap:'2.4%', height:118, padding:'0 2px', marginBottom:18 }}>
                    {t.dash.trend.hours.map((h,i)=>{ const on = hBar===i; return (
                      <div key={i} onMouseEnter={()=>setHBar(i)} onMouseLeave={()=>setHBar(null)}
                        style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:7, minWidth:0, position:'relative', cursor:'default',
                          opacity: hBar!==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 ${ACC}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:ACC2, 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:94 }}>
                          <div style={{ width:'38%', height: dashIn?`${t.dash.trend.recv[i]}%`:'0%', background:`linear-gradient(180deg,${ACC2},${ACC2}66)`, borderRadius:'3px 3px 0 0',
                            boxShadow: on?`0 0 12px ${ACC2}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?ACC2:'rgba(255,255,255,.34)', transition:'color .2s' }}>{h}</span>
                      </div>
                    );})}
                  </div>
                  {t.dash.compliance && (
                    <div style={{ paddingTop:16, borderTop:'1px solid rgba(255,255,255,.06)' }}>
                      <div style={{ fontFamily:'DM Sans,sans-serif', fontSize:10.5, fontWeight:700, letterSpacing:'2px', color:'rgba(255,255,255,.4)', marginBottom:12 }}>{t.dash.compliance.k}</div>
                      {(()=>{ const total = t.dash.compliance.items.reduce((a,b)=>a+b.v,0); return (
                        <>
                          <div style={{ display:'flex', height:9, borderRadius:6, overflow:'hidden', background:'rgba(255,255,255,.06)', marginBottom:12 }}>
                            {t.dash.compliance.items.map((c,i)=>(
                              <div key={i} style={{ width: dashIn?`${(c.v/total*100).toFixed(1)}%`:'0%', background:c.c, transition:`width .9s cubic-bezier(.2,.8,.3,1) ${.3+i*.1}s` }}/>
                            ))}
                          </div>
                          <div style={{ display:'grid', gridTemplateColumns:'repeat(2,minmax(0,1fr))', gap:'7px 12px' }}>
                            {t.dash.compliance.items.map((c,i)=>(
                              <div key={i} style={{ display:'flex', alignItems:'center', gap:7, fontSize:11.5, minWidth:0 }}>
                                <s style={{ width:7, height:7, borderRadius:'50%', background:c.c, display:'block', textDecoration:'none', flexShrink:0 }}/>
                                <span style={{ color:'rgba(255,255,255,.6)', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{c.t}</span>
                                <CV value={String(c.v)} run={dashIn} dur={1000+i*90}
                                  style={{ marginLeft:'auto', fontFamily:'DM Sans,sans-serif', fontWeight:700, color:'#fff', whiteSpace:'nowrap' }}/>
                              </div>
                            ))}
                          </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>
      )}

      {/* 03 HOW IT WORKS */}
      {t.flow && (
      <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,${ACC}1c 0%,transparent 65%)`, top:-180, right:-100, filter:'blur(80px)' }}/>
        <div style={{ maxWidth:1080, margin:'0 auto', position:'relative' }}>
          <SectionHead k={t.flow.k} title={t.flow.title} sub={t.flow.sub} light/>
          <div style={{ position:'relative' }}>
            <div style={{ position:'absolute', left:23, top:10, bottom:10, width:2, background:`linear-gradient(180deg, ${ACC}, ${CYAN})`, opacity:0.35 }}/>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {t.flow.steps.map((s,i)=>(
                <div key={i} className={`reveal reveal-d${(i%4)+1}`} style={{ display:'flex', gap:20, alignItems:'flex-start', position:'relative' }}>
                  <div style={{ flexShrink:0, width:48, height:48, borderRadius:14, background:`linear-gradient(135deg,${ACC},${D.accentDark})`, color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:'DM Sans', fontSize:15, fontWeight:700, boxShadow:`0 0 0 6px ${NAVY}`, zIndex:1 }}>{s.n}</div>
                  <div style={{ flex:1, background:'rgba(255,255,255,0.04)', border:`1px solid ${ACC}30`, borderRadius:12, padding:'18px 22px' }}>
                    <div style={{ fontSize:16, fontWeight:700, color:'#fff', marginBottom:6 }}>{s.t}</div>
                    <div style={{ fontSize:13.5, color:'rgba(255,255,255,0.6)', lineHeight:1.6 }}>{s.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      )}

      {/* 04 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(260px,1fr))', gap:18 }}>
            {t.features.map((f,i)=>(
              <div key={i} className={`reveal reveal-d${(i%4)+1}`} style={{ background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:14, padding:26, transition:'all 0.25s' }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor=ACC;e.currentTarget.style.boxShadow=`0 14px 36px ${ACC}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:46, height:46, borderRadius:12, background:`linear-gradient(135deg,${ACC}14,${CYAN}0c)`, display:'flex', alignItems:'center', justifyContent:'center', fontSize:20, marginBottom:16 }}><Ico e={f.icon} size={26}/></div>
                <div style={{ fontSize:16, fontWeight:700, color:NAVY, marginBottom:8 }}>{f.t}</div>
                <div style={{ fontSize:13.5, color:'#5A6B85', lineHeight:1.65 }}>{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 05 COMPARISON */}
      <section style={{ background:'#F6F8FC', padding:'104px 24px' }}>
        <div style={{ maxWidth:1080, 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:560 }}>
              <thead><tr>
                {t.compHead.map((h,i)=>(<th key={i} style={{ background: i===t.compHead.length-1?`linear-gradient(90deg,${ACC},${D.accentDark})`:NAVY, color: i===t.compHead.length-1?'#fff':'rgba(255,255,255,0.6)', padding:'15px 18px', textAlign: i===0?'left':'center', fontSize:12.5, fontWeight:700 }}>{h}</th>))}
              </tr></thead>
              <tbody>
                {t.compRows.map((r,i)=>(
                  <tr key={i} style={{ background: i%2?'#F8FAFC':'#fff' }}>
                    {r.map((cell,ci)=>(<td key={ci} style={{ padding:'13px 18px', fontSize: ci===0?13:12.5, fontWeight: ci===0||ci===r.length-1?600:400, color: ci===0?NAVY:(ci===r.length-1?ACC:'#94A3B8'), textAlign: ci===0?'left':'center', borderBottom:'1px solid #F1F5F9', background: ci===r.length-1?`${ACC}08`:'transparent' }}>{cell}</td>))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* 06 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,${ACC}18 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(210px,1fr))', gap:18 }}>
            {t.benefits.map((b,i)=>(
              <div key={i} className={`reveal reveal-d${(i%4)+1}`} style={{ background:'rgba(255,255,255,0.04)', border:`1px solid ${ACC}30`, borderRadius:16, padding:28, backdropFilter:'blur(8px)' }}>
                <div style={{ fontFamily:'DM Sans', fontSize:'clamp(20px,1.8vw,24px)', fontWeight:700, lineHeight:1.1, marginBottom:14, background:`linear-gradient(135deg,${ACC2},#fff)`, WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', letterSpacing:'-0.5px' }}>{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>

      {/* 07 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(230px,1fr))', gap:18 }}>
            {t.useCases.map((u,i)=>(
              <div key={i} className={`reveal reveal-d${(i%4)+1}`} style={{ background:'#F8FAFC', border:'1px solid #E6EAF2', borderRadius:14, padding:28 }}>
                <div style={{ fontSize:32, marginBottom:14 }}><Ico e={u.icon} size={26}/></div>
                <div style={{ fontSize:16, fontWeight:700, color:NAVY, marginBottom:10 }}>{u.ind}</div>
                <div style={{ fontSize:13.5, color:'#5A6B85', lineHeight:1.7 }}>{u.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ARCHITECTURE (t.arch 있을 때만) */}
      {t.arch && (
      <section style={{ background:'#fff', padding:'104px 24px' }}>
        <div style={{ maxWidth:1180, margin:'0 auto' }}>
          <SectionHead k={t.arch.k} title={t.arch.title} sub={t.arch.sub} center/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))', gap:18 }}>
            {t.arch.groups.map((g,gi)=>(
              <div key={gi} className={`reveal reveal-d${gi+1}`} style={{ background:'#F6F8FC', border:`1px solid ${gi===0?ACC+'33':'#E6EAF2'}`, borderRadius:16, padding:26 }}>
                <div style={{ display:'flex', alignItems:'baseline', gap:9, marginBottom:6 }}>
                  <span style={{ fontSize:16, fontWeight:700, color:gi===0?ACC:'#0F1E3C', letterSpacing:'-.3px' }}>{g.t}</span>
                </div>
                <div style={{ fontSize:12, color:'#94A3B8', marginBottom:18 }}>{g.s}</div>
                <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                  {g.items.map((it,ii)=>(
                    <div key={ii} style={{ background:'#fff', border:'1px solid #E6EAF2', borderRadius:11, padding:'14px 16px' }}>
                      <div style={{ fontSize:13.5, fontWeight:700, color:ACC, marginBottom:5 }}>{it.n}</div>
                      <div style={{ fontSize:12.5, color:'#5A6B85', lineHeight:1.6 }}>{it.d}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          {t.arch.note && (
            <div className="reveal reveal-d2" style={{ marginTop:24, padding:'18px 22px', background:'#F6F8FC', 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.arch.note}</span>
            </div>
          )}
        </div>
      </section>
      )}

      {/* AI ANALYST (t.ai 있을 때만) */}
      {t.ai && (
      <section style={{ background:'#0B1120', padding:'104px 24px', position:'relative', overflow:'hidden' }}>
        <div style={{ position:'absolute', width:560, height:560, borderRadius:'50%', background:`radial-gradient(circle,${ACC}1c 0%,transparent 66%)`, top:-200, left:-120, filter:'blur(70px)' }}/>
        <div style={{ maxWidth:1180, margin:'0 auto', position:'relative' }}>
          <SectionHead k={t.ai.k} title={t.ai.title} sub={t.ai.sub} light center/>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))', gap:18 }}>
            {t.ai.blocks.map((b,bi)=>(
              <div key={bi} className={`reveal reveal-d${bi+1}`} style={{ background:'rgba(255,255,255,.03)', border:`1px solid ${bi===0?ACC+'44':'rgba(255,255,255,.08)'}`, borderRadius:16, padding:26 }}>
                <div style={{ width:38, height:38, borderRadius:10, background:`${ACC}22`, border:`1px solid ${ACC}44`, display:'flex', alignItems:'center', justifyContent:'center', marginBottom:16, fontSize:17 }}>
                  {['🛰️','💬','🤖'][bi] || '✨'}
                </div>
                <div style={{ fontSize:15.5, fontWeight:700, color:ACC2, marginBottom:9, letterSpacing:'-.2px' }}>{b.t}</div>
                <div style={{ fontSize:13, color:'rgba(255,255,255,.62)', lineHeight:1.72, marginBottom:b.items&&b.items.length?16:0 }}>{b.d}</div>
                {b.items && b.items.length>0 && (
                  <div style={{ display:'flex', flexDirection:'column', gap:8, paddingTop:14, borderTop:'1px solid rgba(255,255,255,.07)' }}>
                    {b.items.map((x,xi)=>(
                      <div key={xi} style={{ display:'flex', gap:9, fontSize:12.5, color:'rgba(255,255,255,.76)', lineHeight:1.55 }}>
                        <span style={{ color:ACC2, flexShrink:0, fontWeight:700 }}>✓</span>{x}
                      </div>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </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?ACC:'#E6EAF2'}`, borderRadius:16, padding:30, position:'relative', boxShadow: p.primary?`0 14px 40px ${ACC}14`:'0 4px 16px rgba(15,30,60,0.04)' }}>
                  {p.primary && <div style={{ position:'absolute', top:-12, left:24, padding:'4px 12px', background:ACC, color:'#fff', fontSize:11, fontWeight:700, borderRadius:20 }}>{isKo?'추천':'Popular'}</div>}
                  <div style={{ fontFamily:'DM Sans', fontSize:26, marginBottom:8 }}><Ico e={p.icon} size={26}/></div>
                  <div style={{ fontSize:17, fontWeight:700, color:NAVY, marginBottom:4 }}>{p.name}</div>
                  <div style={{ fontSize:18, fontWeight:700, color: p.primary?ACC:NAVY, marginBottom:2 }}>{isKo?'상담 후 산정':'Quote on consult'}</div>
                  <div style={{ fontSize:12, color:'#94A3B8', marginBottom:18 }}>BEST · {p.best}</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' }}><Check/>{f}</div>))}
                  </div>
                  <button onClick={()=>openQuote(label+' '+p.name)} style={{ width:'100%', padding:'13px', background: p.primary?`linear-gradient(135deg,${ACC},${D.accentDark})`: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>
      )}

      {/* 09 SUPPLY */}
      <section style={{ background:'#fff', 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:'#F8FAFC', 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,${ACC}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>

      {/* 10 DOWNLOAD */}
      <section style={{ background:'#F6F8FC', 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,${ACC},${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:'#fff', 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=ACC;e.currentTarget.style.boxShadow=`0 8px 24px ${ACC}12`;}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='#E6EAF2';e.currentTarget.style.boxShadow='none';}}>
                <div style={{ width:44, height:44, borderRadius:12, background:`${ACC}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={pkey} lang={lang} setPage={setPage} openQuote={openQuote}/>

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

      {/* 11 FAQ */}
      <section style={{ background:'#fff', 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)?ACC+'40':'#E6EAF2'}`, borderRadius:14, overflow:'hidden', transition:'all 0.2s', boxShadow: openFaqs.includes(i)?`0 8px 24px ${ACC}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:ACC, 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)?ACC:'#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>

      {/* 12 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,${ACC}1a 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:`${ACC}1a`, border:`1px solid ${ACC}35`, borderRadius:100, marginBottom:28 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:ACC2, boxShadow:`0 0 12px ${ACC2}` }}/>
            <span style={{ fontFamily:'DM Sans', fontSize:11, fontWeight:600, color:ACC2, letterSpacing:'1.5px' }}>3ES SOFT · {label.toUpperCase()}</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,${ACC},${D.accentDark})`, 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 ${ACC}45` }}>{isKo?'도입 상담 받기':'Talk to Sales'} <ArrowR/></button>
            <button onClick={()=>openQuote(label)} style={{ padding:'15px 24px', background:`${ACC}1f`, color:ACC2, border:`1px solid ${ACC}40`, fontSize:15, fontWeight:600, borderRadius:10, cursor:'pointer', fontFamily:'inherit' }}>{isKo?'견적 요청하기':'Get Quote'}</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' }}>{isKo?'자료 요청':'Download'}</button>
          </div>
        </div>
      </section>

      {/* DOWNLOAD / LEAD 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%', maxHeight:'90vh', overflowY:'auto', boxShadow:'0 24px 80px rgba(0,0,0,0.3)' }}>
            <div style={{ background:`linear-gradient(135deg, ${ACC}, ${D.accentDark})`, 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.85)', 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:`${ACC}15`, color:ACC, 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:'', users:'', message:'' });}} style={{ marginTop:20, padding:'10px 24px', background:ACC, 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={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginBottom:18 }}>
                    <div><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><label style={{ fontSize:12, fontWeight:600, color:'#5A6B85', display:'block', marginBottom:6 }}>{isKo?'예상 규모':'Scale'}</label>
                      <input value={dlForm.users} onChange={e=>dlUp('users',e.target.value)} placeholder={isKo?'예: 200':'e.g. 200'} style={{ width:'100%', padding:'11px 13px', background:'#F6F8FC', border:'1px solid #E6EAF2', borderRadius:8, fontSize:14, fontFamily:'inherit', outline:'none', color:'#1E293B' }}/></div>
                  </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,${ACC},${D.accentDark})`:'#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, { ProductPage });