// ─── App Root ────────────────────────────────────────────────────────────────
const App = () => {
  const [lang, setLang]         = React.useState('ko');
  const [page, setPage]         = React.useState('home');
  const [quoteOpen, setQuoteOpen] = React.useState(false);
  const [quoteSol,  setQuoteSol]  = React.useState(null);
  const [demoOpen,  setDemoOpen]  = React.useState(false);
  const [demoSol,   setDemoSol]   = React.useState(null);

  const t = T[lang];

  const openQuote = (solTitle) => { setQuoteSol(typeof solTitle === 'string' ? solTitle : null); setQuoteOpen(true); };
  const openDemo  = (sol) => { setDemoSol((sol && sol.title) ? sol : t.solutions.items[0]); setDemoOpen(true); };

  // 현재 보고 있는 솔루션 — 플로팅 CTA가 해당 솔루션 전용 견적 폼을 열도록
  const curSol = React.useMemo(() => {
    if (!page || page.indexOf('sol_') !== 0) return null;
    const key = page.slice(4);
    return (t.solutions.items || []).find(i => i.key === key) || { key, title: key };
  }, [page, t]);

  // Lock scroll + hide floating UI while any modal is open
  // 매 렌더마다 실제 상태로 재조정 (언마운트 타이밍에 클래스가 남는 문제 방지)
  React.useEffect(()=>{
    const on = quoteOpen || demoOpen;
    document.body.classList.toggle('modal-open', on);
    if (on) document.body.style.overflow = 'hidden';
    else if (!document.body.classList.contains('nav-open')) document.body.style.overflow = '';
  });
  React.useEffect(()=>()=>{ document.body.classList.remove('modal-open'); document.body.style.overflow=''; },[]);

  // SEO: title/meta/JSON-LD + URL 동기화
  useSEO(page, lang);

  // ESC closes modals
  React.useEffect(()=>{
    window.__goPrivacy = () => setPage('privacy');
    window.__goNews = () => setPage('news');
    window.__goAdmin = () => setPage('admin');
    // #admin 해시로 직접 진입 (로그인 게이트가 접근을 통제)
    const applyHash = () => { if (location.hash === '#admin') setPage('admin'); };
    applyHash();
    // 검색엔진이 색인한 실제 URL(/solutions/<key>/)로 직접 들어온 경우 해당 화면을 연다
    const initial = window.pageForPath(location.pathname);
    if (initial) setPage(initial);
    const onPop = () => { const p = window.pageForPath(location.pathname); if (p) setPage(p); };
    const onScroll = () => { const el = document.querySelector('.nav-wrap'); if (el) el.classList.toggle('scrolled', window.scrollY > 12); };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('popstate', onPop);
    window.addEventListener('hashchange', applyHash);
    const onKey = e => { if (e.key==='Escape') { setQuoteOpen(false); setDemoOpen(false); } };
    window.addEventListener('keydown', onKey);
    return ()=>{ window.removeEventListener('keydown', onKey); window.removeEventListener('hashchange', applyHash); window.removeEventListener('popstate', onPop); window.removeEventListener('scroll', onScroll); };
  },[]);

  // Inject global CSS once
  React.useEffect(() => {
    const el = document.createElement('style');
    el.id = 'global-styles-3es';
    el.textContent = globalStyles + interactionStyles + topoStyles + topoModeStyles + landingStyles + casesStyles;
    if (!document.getElementById('global-styles-3es')) document.head.appendChild(el);
    initInteractions();
    return () => { const e = document.getElementById('global-styles-3es'); if(e) e.remove(); };
  }, []);

  // Scroll to top on page change
  React.useEffect(() => {
    if (page !== 'admin') window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [page]);

  // 페이지 전환마다 reveal 옵저버 재실행 (전용 페이지에서 opacity:0 으로 남는 문제 방지)
  React.useEffect(() => {
    let obs;
    const run = () => {
      const els = document.querySelectorAll('.reveal:not(.revealed)');
      if (!els.length) return;
      obs = new IntersectionObserver(entries => {
        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('revealed'); obs.unobserve(e.target); } });
      }, { threshold: 0.05 });
      els.forEach(el => obs.observe(el));
      // 안전망: 뷰포트 안이지만 관찰이 늦는 경우 강제 표시
      setTimeout(() => {
        document.querySelectorAll('.reveal:not(.revealed)').forEach(el => {
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('revealed');
        });
      }, 600);
    };
    const t = setTimeout(run, 60);
    return () => { clearTimeout(t); if (obs) obs.disconnect(); };
  }, [page, lang]);

  const solKey = page.startsWith('sol_') ? page.replace('sol_','') : null;
  const showChrome = page !== 'admin';

  // Wrapper for pages that need a top spacer
  const PageWrap = ({ children, heroBg }) => (
    <div style={{ paddingTop: heroBg ? 0 : 68 }}>
      {!heroBg && (
        <div style={{ background:'#0F1E3C', padding:'80px 24px 60px' }}>
          <div style={{ maxWidth:1280, margin:'0 auto' }}>{heroBg}</div>
        </div>
      )}
      {children}
    </div>
  );

  return (
    <>
      {showChrome && <Nav t={t} lang={lang} setLang={setLang} page={page} setPage={setPage}/>}

      <main>
        {/* HOME */}
        {page==='home' && <HomePage t={t} lang={lang} setPage={setPage} openQuote={openQuote} openDemo={openDemo}/>}

        {/* SOLUTION DETAIL: privacy → CatchSecu, arch5 → Arch5, spamout/checkout → dedicated, email → hub */}
        {(solKey === 'privacy' || solKey === 'catchsecu') && (
          <CatchSecuPage lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title || '캐치시큐')}/>
        )}
        {solKey === 'arch5' && (
          <Arch5Page lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title || 'Arch5')}/>
        )}
        {(solKey === 'edr' || solKey === 'mdr' || solKey === 'sniper' || solKey === 'genian' || solKey === 'mailinsight' || solKey === 'cce' || solKey === 'cve' || solKey === 'eset' || solKey === 'netwitness' || solKey === 'dbsafer') && (
          <ProductPage pkey={solKey} lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title)}/>
        )}
        {solKey === 'spamout' && (
          <SpamOutPage lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title || 'SpamOut')}/>
        )}
        {solKey === 'checkout' && (
          <CheckOutPage lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title || 'CheckOut')}/>
        )}
        {solKey === 'email' && (
          <EmailSecurityHub lang={lang} setPage={setPage}
            openQuote={(title)=>openQuote(title || '이메일 보안')}/>
        )}
        {solKey && !['privacy','arch5','spamout','checkout','email','edr','mdr','sniper','genian','mailinsight','cce','cve','eset','netwitness','dbsafer'].includes(solKey) && (
          <div style={{paddingTop:68}}>
            <SolutionDetailPage t={t} solKey={solKey} setPage={setPage}
              openQuote={()=>openQuote(t.solutions.items.find(s=>s.key===solKey)?.title)}
              openDemo={()=>openDemo(t.solutions.items.find(s=>s.key===solKey))}
              lang={lang}/>
          </div>
        )}

        {/* TOPOLOGY */}
        {page==='topology' && <TopologyPage lang={lang} setPage={setPage} openQuote={openQuote} openDemo={openDemo}/>}

        {/* ABOUT */}
        {page==='about' && <div style={{paddingTop:68}}><AboutPage t={t} lang={lang} setPage={setPage}/></div>}

        {/* SOLUTIONS LIST */}
        {page==='solutions' && (
          <div style={{paddingTop:68}}>
            <div style={{background:'#0F1E3C',padding:'80px 24px 60px'}}>
              <div style={{maxWidth:1280,margin:'0 auto'}}>
                <h1 style={{fontSize:'clamp(32px,3vw,48px)',fontWeight:700,color:'#fff'}}>{t.solutions.title}</h1>
                <p style={{color:'rgba(255,255,255,0.65)',marginTop:12,fontSize:18}}>{t.solutions.sub}</p>
              </div>
            </div>
            <div style={{padding:'80px 24px'}}><div style={{maxWidth:1280,margin:'0 auto'}}><Solutions t={t} setPage={setPage}/></div></div>
          </div>
        )}

        {/* NEWS BOARD */}
        {page==='news' && <NewsBoard lang={lang} setPage={setPage} openArticle={(id)=>setPage('article_'+id)}/>}
        {page.startsWith('article_') && <NewsArticle articleId={page.replace('article_','')} lang={lang} setPage={setPage} goList={()=>setPage('news')}/>}

        {/* PARTNER */}
        {page==='partner' && <PartnerPage lang={lang} setPage={setPage} openQuote={openQuote}/>}


        {/* SUPPORT */}
        {page==='support' && <SupportPage t={t} lang={lang} setPage={setPage}/>}

        {/* CUSTOM */}
        {page==='custom' && (
          <div style={{paddingTop:68}}>
            <div style={{background:'#0F1E3C',padding:'80px 24px 60px'}}>
              <div style={{maxWidth:1280,margin:'0 auto'}}>
                <h1 style={{fontSize:'clamp(32px,3vw,48px)',fontWeight:700,color:'#fff'}}>{t.custom.title}</h1>
                <p style={{color:'rgba(255,255,255,0.65)',marginTop:12,fontSize:18}}>{t.custom.sub}</p>
              </div>
            </div>
            <CustomSection t={t} lang={lang}/>
          </div>
        )}

        {/* CONTACT */}
        {page==='contact' && (
          <div style={{paddingTop:68}}>
            <div style={{background:'#0F1E3C',padding:'80px 24px 60px'}}>
              <div style={{maxWidth:1280,margin:'0 auto'}}>
                <h1 style={{fontSize:'clamp(32px,3vw,48px)',fontWeight:700,color:'#fff'}}>{t.contact.title}</h1>
                <p style={{color:'rgba(255,255,255,0.65)',marginTop:12,fontSize:18}}>{t.contact.sub}</p>
              </div>
            </div>
            <ContactSection t={t} lang={lang} setPage={setPage} bare={true}/>
          </div>
        )}

        {/* PRIVACY POLICY */}
        {page==='privacy' && <PrivacyPage lang={lang} setPage={setPage}/>}

        {/* ADMIN */}
        {page==='admin' && <AdminPage t={t} lang={lang} setPage={setPage}/>}
      </main>

      {/* FOOTER & GLOBAL UI */}
      {showChrome && page!=='admin' && <Footer t={t} setPage={setPage} lang={lang}/>}
      {showChrome && <ChatBot t={t} lang={lang} setPage={setPage}/>}
      {showChrome && page!=='admin' && <FloatingCTA t={t} lang={lang} setPage={setPage} openQuote={openQuote} openDemo={openDemo} solTitle={curSol?curSol.title:null} sol={curSol}/>}

      {/* 크롤러·AI 검색용 시맨틱 인덱스 (시각적으로는 숨김) */}
      {showChrome && <SEOIndex lang={lang} setPage={setPage}/>}

      {/* MODALS */}
      {quoteOpen && <QuoteModal t={t} lang={lang} onClose={()=>setQuoteOpen(false)} solTitle={quoteSol}/>}
      {demoOpen  && demoSol && <DemoModal sol={demoSol} lang={lang} onClose={()=>setDemoOpen(false)}/>}
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);