// ─── Landing sections (재구성) ────────────────────────────────────────────────
// 01 Hero · 02 Security Domains · 03 Blueprint preview · 04 How we work
// 05 Featured solutions · 06 Partner · 07 Industry · 08 Insights · 09 Contact
// 제품 나열 대신 "영역 → 구조 → 방식 → 대표 제품" 순으로 좁혀 들어간다.

// ── 02. SECURITY DOMAINS ─────────────────────────────────────────────────────
const SecurityDomains = ({ lang, setPage }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const domains = [
    { k:'email',   n:'Email Security',    c:'#22D3EE', ic:'mail',
      t:L('이메일 보안','Email Security','メールセキュリティ'),
      d:L('침해의 대부분이 시작되는 경로를 수신·발신 양방향에서 차단합니다.','Block the path most breaches start from — inbound and outbound.'),
      tags:['SpamOut','CheckOut','Arch5'] },
    { k:'system',  n:'System Security',   c:'#38BDF8', ic:'server',
      t:L('시스템 보안','System Security','システムセキュリティ'),
      d:L('서버 접근 경로를 일원화하고 설정·취약점을 상시 점검합니다.','Consolidate server access and continuously assess configuration.'),
      tags:['SolidStep CCE','SolidStep CVE'] },
    { k:'network', n:'Network Security',  c:'#6366F1', ic:'network',
      t:L('네트워크 보안','Network Security','ネットワーク'),
      d:L('단말 접근을 통제하고 트래픽의 사각지대를 없앱니다.','Control device access and remove blind spots in traffic.'),
      tags:['Genian NAC','SNIPER ONE-d','NetWitness NDR'] },
    { k:'edr',     n:'Endpoint Security', c:'#34D399', ic:'shield',
      t:L('엔드포인트 보안','Endpoint Security','エンドポイント'),
      d:L('행위 기반으로 위협을 탐지하고 감염 단말을 즉시 격리합니다.','Detect behaviorally and isolate compromised endpoints at once.'),
      tags:['Genian Insights E','Genian MDR','ESET PROTECT'] },
    { k:'dbsafer', n:'Data & Privacy',    c:'#F472B6', ic:'db',
      t:L('데이터 · 개인정보','Data & Privacy','データ・個人情報'),
      d:L('DB 접근을 통제·감사하고 개인정보 전 주기를 자동화합니다.','Govern database access and automate the personal-data lifecycle.'),
      tags:['DBSAFER DB','CatchSecu'] },
    { k:'mailinsight', n:'AI & Automation', c:'#A78BFA', ic:'ai',
      t:L('AI · 자동화','AI & Automation','AI・自動化'),
      d:L('보안 데이터를 분석해 판단과 대응을 자동화합니다.','Analyze security data to automate judgment and response.'),
      tags:['Mail Insight','RAG Search'] },
  ];
  return (
    <section className="section ld-sec" data-screen-label="Domains">
      <div className="section-inner">
        <div className="ld-head">
          <div className="section-badge">SECURITY DOMAINS</div>
          <h2 className="ld-h2 reveal">{L('여섯 개 영역, 하나의 체계','Six domains, one system','6領域を一つの体系に')}</h2>
        </div>
        <div className="ld-dom">
          {domains.map((d,i)=>(
            <button key={d.k} className={`ld-dom-i reveal reveal-d${(i%3)+1}`} style={{'--c':d.c}}
              onClick={()=>setPage('sol_'+d.k)}>
              <span className="ld-dom-ic"><Ico name={d.ic} size={26}/></span>
              <span className="ld-dom-n">{d.n}</span>
              <span className="ld-dom-t">{d.t}</span>
              <span className="ld-dom-d">{d.d}</span>
              <span className="ld-dom-tags">{d.tags.map(x=><i key={x}>{x}</i>)}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── 03. SECURITY BLUEPRINT (프리뷰) ───────────────────────────────────────────
const BlueprintPreview = ({ lang, setPage }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const [hov, setHov] = React.useState(null);
  const layers = [
    { k:'edge',  x:70,   c:'#6366F1', t:L('경계','Edge'),        n:L('방화벽 · SNIPER ONE-d','Firewall · SNIPER ONE-d') },
    { k:'mail',  x:250,  c:'#22D3EE', t:L('메일','Mail'),        n:'SpamOut · CheckOut · Arch5' },
    { k:'app',   x:430,  c:'#38BDF8', t:L('업무 서버','App'),    n:L('서버 접근제어 · SolidStep','Access control · SolidStep') },
    { k:'net',   x:610,  c:'#6366F1', t:L('내부망','Internal'),  n:'Genian NAC · NetWitness' },
    { k:'end',   x:790,  c:'#34D399', t:L('엔드포인트','Endpoint'), n:'Genian Insights E · ESET' },
    { k:'data',  x:970,  c:'#F472B6', t:L('데이터','Data'),      n:'DBSAFER · CatchSecu' },
    { k:'ai',    x:1150, c:'#A78BFA', t:L('AI 운영','AI Ops'),   n:'Mail Insight · MDR' },
  ];
  return (
    <section className="section ld-bp" data-screen-label="Blueprint">
      <div className="section-inner">
        <div className="ld-head">
          <div className="section-badge" style={{background:'rgba(103,232,249,.09)',borderColor:'rgba(103,232,249,.28)',color:'#67E8F9'}}>SECURITY BLUEPRINT</div>
          <h2 className="ld-h2 on-dark reveal">{L('인프라 전 구간에 보안을 배치합니다','Security placed across the whole path','インフラ全体にセキュリティを配置')}</h2>
          <p className="ld-sub on-dark reveal">{L('인터넷에서 데이터까지, 각 구간에 어떤 솔루션이 놓이는지 한눈에 확인하세요.','From the internet to your data — see which solution sits at each stage.')}</p>
        </div>
        <div className="ld-bp-map reveal">
          <svg viewBox="0 0 1240 210" aria-hidden="true">
            <line x1="70" y1="86" x2="1150" y2="86" stroke="rgba(148,197,255,.18)" strokeWidth="1.5"/>
            <line x1="70" y1="86" x2="1150" y2="86" stroke="#67E8F9" strokeWidth="1.5" strokeDasharray="10 1230" className="ld-bp-run"/>
            {layers.map((l,i)=>{
              const on = hov === l.k;
              return (
                <g key={l.k} className={'ld-bp-n'+(hov&&!on?' dim':'')} onMouseEnter={()=>setHov(l.k)} onMouseLeave={()=>setHov(null)}>
                  <circle cx={l.x} cy="86" r={on?21:17} fill={on?l.c+'33':'rgba(255,255,255,.05)'} stroke={l.c} strokeWidth={on?2.2:1.4}/>
                  <circle cx={l.x} cy="86" r="5" fill={l.c}/>
                  <text x={l.x} y="132" textAnchor="middle" className="ld-bp-t">{l.t}</text>
                  <text x={l.x} y="154" textAnchor="middle" className="ld-bp-s">{l.n}</text>
                  <text x={l.x} y="52" textAnchor="middle" className="ld-bp-no">{String(i+1).padStart(2,'0')}</text>
                </g>
              );
            })}
          </svg>
        </div>
        <div className="ld-bp-cta reveal">
          <button className="btn-outline" onClick={()=>setPage('topology')}>{L('전체 보안 토폴로지 보기','View the full topology','全体トポロジーを見る')} <IconArrow/></button>
        </div>
      </div>
    </section>
  );
};

// ── 04. HOW WE WORK ────────────────────────────────────────────────────────
const HowWeWork = ({ lang }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const steps = [
    ['ANALYZE', L('환경 분석','Analyze'), L('고객의 시스템과 보안 요구사항을 먼저 이해합니다.','We start by understanding your systems and requirements.')],
    ['SELECT',  L('솔루션 선정','Select'), L('여러 제조사의 검증된 솔루션 가운데 적합한 제품을 선정합니다.','We select the right fit from proven solutions across vendors.')],
    ['BUILD',   L('구축 · 연동','Build'),  L('고객 환경에 맞춰 설치·연동하고 안정적으로 전환합니다.','We install, integrate and migrate without disruption.')],
    ['OPERATE', L('운영 · 기술지원','Operate'), L('정책 변경, 장애 대응, 업그레이드와 확장까지 함께합니다.','Policy changes, incidents, upgrades and scaling — with you.')],
  ];
  return (
    <section className="section ld-sec alt" data-screen-label="How">
      <div className="section-inner">
        <div className="ld-head">
          <div className="section-badge">HOW WE WORK</div>
          <h2 className="ld-h2 reveal">{L('좋은 솔루션을 선택하고, 제대로 구축하고, 끝까지 운영합니다','Choose well, build properly, operate to the end')}</h2>
        </div>
        <div className="ld-flow">
          {steps.map(([k,t,d],i)=>(
            <div key={k} className={`ld-flow-i reveal reveal-d${i+1}`}>
              <div className="ld-flow-k">{String(i+1).padStart(2,'0')} · {k}</div>
              <div className="ld-flow-t">{t}</div>
              <div className="ld-flow-d">{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── 05. FEATURED SOLUTIONS ───────────────────────────────────────────────────
const FeaturedSolutions = ({ lang, setPage }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const items = [
    ['spamout','SpamOut','#2563EB', L('수신 메일 보안 게이트웨이','Inbound email gateway')],
    ['arch5','Arch5','#F59E0B', L('메일 원본 보존 · 감사 대응','Email archiving & audit')],
    ['genian','Genian NAC','#0EA5E9', L('단말 식별 · 네트워크 접근제어','Device visibility & access control')],
    ['edr','Genian Insights E','#EF4444', L('행위 기반 엔드포인트 탐지·대응','Behavioral endpoint detection')],
    ['mdr','Genian MDR','#38BDF8', L('관리형 탐지·대응 서비스','Managed detection & response')],
    ['netwitness','NetWitness NDR','#6366F1', L('풀패킷 네트워크 탐지·포렌식','Full-packet network forensics')],
    ['dbsafer','DBSAFER DB','#7C3AED', L('DB 접근제어 · SQL 감사','Database access control & audit')],
    ['mailinsight','Mail Insight','#06B6D4', L('AI · RAG 기반 메일 인텔리전스','AI/RAG email intelligence')],
  ];
  return (
    <section className="section ld-sec" data-screen-label="Featured">
      <div className="section-inner">
        <div className="ld-head">
          <div className="section-badge">FEATURED SOLUTIONS</div>
          <h2 className="ld-h2 reveal">{L('삼에스소프트 주요 솔루션','Featured security solutions')}</h2>
        </div>
        <div className="ld-feat">
          {items.map(([k,n,c,d],i)=>(
            <button key={k} className={`ld-feat-i reveal reveal-d${(i%4)+1}`} style={{'--c':c}} onClick={()=>setPage('sol_'+k)}>
              <span className="ld-feat-n">{n}</span>
              <span className="ld-feat-d">{d}</span>
              <span className="ld-feat-go">→</span>
            </button>
          ))}
        </div>
        <div className="ld-bp-cta reveal">
          <button className="btn-ghost" onClick={()=>setPage('solutions')}>{L('전체 솔루션 보기','All solutions')} <IconArrow/></button>
        </div>
      </div>
    </section>
  );
};

// ── 06. PARTNER (축약) ───────────────────────────────────────────────────────
const PartnerBrief = ({ lang, setPage }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const cats = [['Email','#22D3EE'],['Network','#6366F1'],['Endpoint','#34D399'],['Data','#F472B6'],['AI','#A78BFA']];
  return (
    <section className="section ld-sec alt" data-screen-label="Partner">
      <div className="section-inner ld-pn">
        <div>
          <div className="section-badge">PARTNER NETWORK</div>
          <h2 className="ld-h2 reveal" style={{marginTop:12}}>{L('검증된 기술을, 고객 환경에 맞게 연결합니다','Proven technology, matched to your environment')}</h2>
          <p className="ld-sub reveal">{L('국내외 보안 제조사 및 기술 파트너와 협업해 고객에게 적합한 솔루션을 설계하고 공급합니다.','We work with domestic and global security vendors to design and supply what fits.')}</p>
          <div className="ld-pn-cats reveal">
            {cats.map(([c,col])=><span key={c} style={{'--c':col}}>{c}</span>)}
          </div>
          <button className="btn-ghost reveal" style={{marginTop:24}} onClick={()=>setPage('partner')}>{L('파트너 협업 보기','Partnership')} <IconArrow/></button>
        </div>
      </div>
    </section>
  );
};

// ── 07. INDUSTRY EXPERIENCE ──────────────────────────────────────────────────
const IndustryExperience = ({ lang }) => {
  const isKo = lang === 'ko', isJa = lang === 'ja';
  const L = (ko, en, ja) => isKo ? ko : (isJa ? (ja || en) : en);
  const inds = [
    [L('제조','Manufacturing'), L('생산 시스템과 기술자료를 보호하는 통합 보안 환경 구축','Protecting production systems and technical assets'), '#38BDF8'],
    [L('금융','Finance'), L('접근통제·이메일·엔드포인트 보안을 통한 감사 및 컴플라이언스 대응','Access control, email and endpoint security for audit readiness'), '#34D399'],
    [L('공공','Public sector'), L('메일·개인정보·시스템 보안 운영','Email, privacy and system security operations'), '#6366F1'],
    [L('의료','Healthcare'), L('민감정보와 의료 시스템 보호','Protecting sensitive data and clinical systems'), '#F472B6'],
    [L('교육','Education'), L('대규모 계정과 이메일 보안 운영','Operating email security at account scale'), '#22D3EE'],
    [L('IT · 서비스','IT & Services'), L('서비스 가용성과 네트워크 보안 강화','Service availability and network hardening'), '#A78BFA'],
  ];
  return (
    <section className="section ld-sec" data-screen-label="Industry">
      <div className="section-inner">
        <div className="ld-head">
          <div className="section-badge">INDUSTRY EXPERIENCE</div>
          <h2 className="ld-h2 reveal">{L('산업별 경험','Experience by industry')}</h2>
        </div>
        <div className="ld-ind">
          {inds.map(([n,d,c],i)=>(
            <div key={n} className={`ld-ind-i reveal reveal-d${(i%3)+1}`} style={{'--c':c}}>
              <div className="ld-ind-n">{n}</div>
              <div className="ld-ind-d">{d}</div>
            </div>
          ))}
        </div>
        <p className="ld-note">{L('고객사명과 로고는 공개 승인을 받은 경우에만 표시합니다.','Customer names and logos are shown only with written consent.')}</p>
      </div>
    </section>
  );
};

const landingStyles = `
.ld-sec{padding:96px 0}
.ld-sec.alt{background:#F7F9FC}
.ld-head{margin-bottom:38px}
.ld-h2{font-size:clamp(25px,2.9vw,38px);font-weight:700;color:#0F1E3C;letter-spacing:-1.1px;line-height:1.35;margin:12px 0 0;max-width:820px;text-wrap:pretty}
.ld-h2.on-dark{color:#fff}
.ld-sub{font-size:15px;color:#64748B;line-height:1.8;max-width:680px;margin-top:14px}
.ld-sub.on-dark{color:rgba(255,255,255,.58)}
.ld-note{font-size:12.5px;color:#94A3B8;margin-top:20px}
/* domains */
.ld-dom{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ld-dom-i{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;cursor:pointer;font-family:inherit;
  background:#fff;border:1px solid #E4E9F0;border-radius:18px;padding:28px 26px 24px;transition:border-color .22s,transform .22s,box-shadow .22s}
.ld-dom-i:hover{border-color:var(--c);transform:translateY(-3px);box-shadow:0 16px 40px -22px var(--c)}
.ld-dom-ic{color:var(--c);margin-bottom:18px}
.ld-dom-n{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:var(--c);text-transform:uppercase}
.ld-dom-t{font-size:18px;font-weight:700;color:#0F1E3C;letter-spacing:-.4px;margin-top:7px}
.ld-dom-d{font-size:13.5px;color:#64748B;line-height:1.7;margin-top:9px}
.ld-dom-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;opacity:.45;transition:opacity .22s}
.ld-dom-i:hover .ld-dom-tags{opacity:1}
.ld-dom-tags i{font-style:normal;font-size:11px;font-weight:600;color:#475569;background:#F1F5F9;border-radius:100px;padding:4px 10px;white-space:nowrap}
/* blueprint */
.ld-bp{background:linear-gradient(150deg,#081227,#0F1E3C 60%,#0d2a4a);padding:96px 0;position:relative;overflow:hidden}
.ld-bp::after{content:'';position:absolute;width:680px;height:680px;border-radius:50%;top:-320px;right:-200px;
  background:radial-gradient(circle,rgba(37,99,235,.2),transparent 70%);pointer-events:none}
.ld-bp .section-inner{position:relative}
.ld-bp-map{border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.02);padding:12px 8px;overflow-x:auto}
.ld-bp-map svg{width:100%;min-width:900px;aspect-ratio:1240/210;height:auto;display:block}
.ld-bp-n{cursor:default;transition:opacity .2s}
.ld-bp-n.dim{opacity:.3}
.ld-bp-t{font-size:13px;font-weight:700;fill:#fff;font-family:'Pretendard',sans-serif}
.ld-bp-s{font-size:10.5px;fill:rgba(255,255,255,.45);font-family:'Pretendard',sans-serif}
.ld-bp-no{font-size:10px;font-weight:700;fill:rgba(255,255,255,.3);letter-spacing:1.2px;font-family:'DM Sans',sans-serif}
.ld-bp-run{animation:ldRun 6s linear infinite}
@keyframes ldRun{from{stroke-dashoffset:1240}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.ld-bp-run{animation:none;opacity:0}}
.ld-bp-cta{margin-top:30px;text-align:center}
/* how */
.ld-flow{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #E2E8F0;border-radius:18px;overflow:hidden;background:#fff}
.ld-flow-i{padding:30px 26px;border-right:1px solid #E2E8F0}
.ld-flow-i:last-child{border-right:none}
.ld-flow-k{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.6px;color:#2563EB;margin-bottom:14px}
.ld-flow-t{font-size:16px;font-weight:700;color:#0F1E3C;margin-bottom:8px}
.ld-flow-d{font-size:13.5px;color:#64748B;line-height:1.7}
/* featured */
.ld-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ld-feat-i{position:relative;text-align:left;cursor:pointer;font-family:inherit;background:#fff;border:1px solid #E4E9F0;
  border-top:2px solid var(--c);border-radius:14px;padding:22px 20px 20px;transition:transform .2s,box-shadow .2s}
.ld-feat-i:hover{transform:translateY(-3px);box-shadow:0 14px 34px -20px rgba(15,30,60,.5)}
.ld-feat-n{display:block;font-size:15.5px;font-weight:700;color:#0F1E3C;letter-spacing:-.3px}
.ld-feat-d{display:block;font-size:12.5px;color:#64748B;line-height:1.6;margin-top:7px}
.ld-feat-go{position:absolute;right:18px;bottom:16px;font-size:14px;color:var(--c);opacity:0;transition:opacity .2s,transform .2s}
.ld-feat-i:hover .ld-feat-go{opacity:1;transform:translateX(3px)}
/* partner */
.ld-pn-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ld-pn-cats span{font-size:12.5px;font-weight:600;color:var(--c);background:#fff;border:1px solid #E2E8F0;border-radius:100px;padding:8px 16px}
/* industry */
.ld-ind{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ld-ind-i{background:#fff;border:1px solid #E4E9F0;border-left:3px solid var(--c);border-radius:12px;padding:22px 22px 20px}
.ld-ind-n{font-size:16px;font-weight:700;color:#0F1E3C}
.ld-ind-d{font-size:13px;color:#64748B;line-height:1.7;margin-top:8px}
@media(max-width:960px){
  .ld-sec,.ld-bp{padding:64px 0}
  .ld-dom,.ld-ind{grid-template-columns:1fr 1fr}
  .ld-feat{grid-template-columns:1fr 1fr}
  .ld-flow{grid-template-columns:1fr 1fr}
  .ld-flow-i:nth-child(2){border-right:none}
  .ld-flow-i:nth-child(-n+2){border-bottom:1px solid #E2E8F0}
}
@media(max-width:600px){
  .ld-sec,.ld-bp{padding:44px 0}
  .ld-dom,.ld-ind,.ld-feat,.ld-flow{grid-template-columns:1fr}
  .ld-flow-i{border-right:none;border-bottom:1px solid #E2E8F0}
  .ld-flow-i:last-child{border-bottom:none}
  .ld-feat-go{display:none}

  /* ── 모바일: 읽는 양 줄이기 ─────────────────────────────────────────
     PC에서 보이던 보조 설명·부가 섹션을 접고, 핵심 정보만 남긴다.  */
  .ld-h2{font-size:22px;line-height:1.4}
  .ld-sub{font-size:13.5px}

  /* 보안 영역 — 카드 설명은 감추고 제목만 (제목만으로 의미 전달됨) */
  .ld-dom-d{display:none}
  .ld-dom-i{padding:16px 16px}

  /* 일하는 방식 — 단계명만, 설명 문단 생략 */
  .ld-flow-d{display:none}
  .ld-flow-i{padding:14px 0}

  /* 산업별 경험 — 업종명만 나열 (설명은 PC에서) */
  .ld-ind{grid-template-columns:1fr 1fr;gap:0 12px}
  .ld-ind-d{display:none}
  .ld-ind-i{padding:12px 0}
  .ld-ind-n{font-size:14.5px}

  /* 보안 토폴로지 프리뷰 — 모바일에선 토폴로지 자체가 비활성이라 숨김 */
  .ld-bp{display:none}

  /* 파트너 — 헤드라인과 버튼만 */
  .ld-pn-cats{display:none}
  .ld-pn .ld-sub{display:none}
}
`;

Object.assign(window, { SecurityDomains, BlueprintPreview, HowWeWork, FeaturedSolutions, PartnerBrief, IndustryExperience, landingStyles });