const AgentExpansion = () => {
  const [mode, setMode] = React.useState(2); // 0: on-prem, 1: api, 2: hybrid

  const options = [
    {
      key:'ON-PREM',
      title:'On-Premise',
      sub:'고객 내부망 · 완전 격리',
      when:'금융·제조·공공 등 데이터 반출이 불가한 환경',
      pros:['모든 추론·데이터 내부 처리', '감사·규정 대응 용이', '장기 TCO 최적화'],
      cons:['초기 셋업 기간 필요', '하드웨어·모델 관리 책임'],
      color:'#34D399',
    },
    {
      key:'API',
      title:'API-based',
      sub:'클라우드 모델 활용 · 빠른 시작',
      when:'빠른 시장 검증, 내부 데이터 민감도가 낮은 영역',
      pros:['최신 모델 즉시 활용', '인프라 부담 최소', '수요에 따른 유연한 확장'],
      cons:['외부 API 의존성', '단가 관리 필요'],
      color:'#38BDF8',
    },
    {
      key:'HYBRID',
      title:'Hybrid',
      sub:'민감 데이터는 내부, 범용은 API',
      when:'대부분의 기업 환경 — 현실적인 기본값',
      pros:['데이터 민감도별 분리 처리', '비용·보안의 균형', '단계적 내재화 가능'],
      cons:['아키텍처 설계 난이도', '운영 정책 정교화'],
      color:'#818CF8',
    },
  ];

  const o = options[mode];

  return (
    <section className="section" id="agent" style={{background:'var(--surface)', borderTop:'1px solid var(--border)', borderBottom:'1px solid var(--border)'}}>
      <div className="container">
        <div className="section-header">
          <div style={{display:'flex', gap:24, alignItems:'center', marginBottom:24}}>
            <span className="section-number">§ 07 — AX</span>
            <div style={{flex:1, height:1, background:'var(--border)'}}/>
          </div>
          <div className="eyebrow" style={{marginBottom:20}}>[ AI TRANSFORMATION ]</div>
          <h2 className="h-section">
            검증된 곳에서부터<br/>
            <span style={{color:'var(--text-muted)'}}>AI를 조직에 안착시킵니다</span>
          </h2>
          <p className="lead" style={{marginTop:24}}>
            30일 MVP가 효과를 증명하면, 같은 하네스 위에서 인접 업무·인접 부서로 AI를 단계적으로 확장합니다. 데이터 민감도·규정·내부 인프라에 따라 On-prem · API · Hybrid 중 가장 현실적인 형태로 운영합니다. AX는 거대한 한 번이 아니라, 검증된 작은 성공의 누적입니다.
          </p>
        </div>

        {/* Decision guard banner */}
        <div style={{
          marginBottom:48,
          padding:'20px 28px',
          border:'1px solid var(--border-strong)',
          borderLeft:'2px solid var(--warn)',
          background:'var(--bg)',
          display:'flex', alignItems:'center', gap:24, flexWrap:'wrap'
        }}>
          <div style={{display:'flex', alignItems:'center', gap:14}}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M10 2v6M10 12v2M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" stroke="var(--warn)" strokeWidth="1.3"/>
            </svg>
            <span className="mono" style={{color:'var(--warn)'}}>PRINCIPLE</span>
          </div>
          <div style={{fontSize:15, color:'var(--text)', flex:1, minWidth:280}}>
            Agent는 만들기보다 <span style={{color:'var(--accent)'}}>어디에 도입할지</span>가 먼저입니다. FDE·하네스 단계에서 분석한 pain-point가 Agent 도입을 요구할 때만 정밀하게 배치합니다. 단순 자동화·RAG·워크플로우로 충분한 곳은 거기서 마무리합니다.
          </div>
        </div>

        {/* Tabs */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', border:'1px solid var(--border-strong)'}}>
          {options.map((x, i) => (
            <button key={i} onClick={() => setMode(i)} style={{
              padding:'24px 28px',
              textAlign:'left',
              borderRight: i<2 ? '1px solid var(--border-strong)' : 'none',
              background: mode === i ? 'var(--accent-soft)' : 'transparent',
              borderBottom: mode === i ? '2px solid var(--accent)' : '2px solid transparent',
              transition:'all 0.2s'
            }}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:12}}>
                <span className="mono" style={{color: mode===i ? 'var(--accent)' : 'var(--text-dim)'}}>OPT.0{i+1}</span>
                <span className="mono" style={{color:'var(--text-dim)', fontSize:10}}>{x.key}</span>
              </div>
              <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.02em', color: mode===i ? 'var(--text)' : 'var(--text-muted)'}}>{x.title}</div>
              <div style={{fontSize:12, color:'var(--text-dim)', marginTop:4}}>{x.sub}</div>
            </button>
          ))}
        </div>

        {/* Detail */}
        <div style={{
          border:'1px solid var(--border-strong)', borderTop:'none',
          padding:48, background:'var(--bg)',
          display:'grid', gridTemplateColumns:'1fr 1fr', gap:64
        }}>
          <div>
            <div className="label-key" style={{marginBottom:16}}>WHEN TO CHOOSE</div>
            <div style={{fontSize:18, lineHeight:1.6, color:'var(--text)', marginBottom:32, paddingBottom:24, borderBottom:'1px solid var(--border)'}}>
              {o.when}
            </div>

            <div className="label-key" style={{marginBottom:16}}>STRENGTHS</div>
            <div style={{display:'flex', flexDirection:'column', gap:10, marginBottom:32}}>
              {o.pros.map((p, i) => (
                <div key={i} style={{display:'flex', gap:12, fontSize:14, color:'var(--text)'}}>
                  <span style={{color:o.color}}>✓</span>{p}
                </div>
              ))}
            </div>

            <div className="label-key" style={{marginBottom:16}}>TRADE-OFFS</div>
            <div style={{display:'flex', flexDirection:'column', gap:10}}>
              {o.cons.map((c, i) => (
                <div key={i} style={{display:'flex', gap:12, fontSize:14, color:'var(--text-muted)'}}>
                  <span style={{color:'var(--text-dim)'}}>—</span>{c}
                </div>
              ))}
            </div>
          </div>

          {/* Right: deployment schematic */}
          <AgentDiagram mode={mode} color={o.color}/>
        </div>
      </div>
    </section>
  );
};

const AgentDiagram = ({mode, color}) => {
  return (
    <div style={{
      border:'1px solid var(--border)',
      background:'var(--surface)',
      padding:20,
      position:'relative',
      aspectRatio:'1/1'
    }}>
      <div style={{display:'flex', justifyContent:'space-between', marginBottom:12, fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text-dim)'}}>
        <span>DEPLOYMENT.svg</span>
        <span>MODE.0{mode+1}</span>
      </div>
      <svg viewBox="0 0 400 400" style={{width:'100%', height:'calc(100% - 32px)'}}>
        <defs>
          <marker id={`ar-${mode}`} markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
            <path d="M0,0 L6,3 L0,6" fill={color}/>
          </marker>
        </defs>
        {[0,1,2,3,4,5,6,7,8,9].map(i =>
          <line key={i} x1={i*40} y1="0" x2={i*40} y2="400" stroke="rgba(148,163,184,0.04)"/>
        )}

        {mode === 0 && (
          <g>
            {/* Customer boundary */}
            <rect x="30" y="40" width="340" height="320" fill="none" stroke={color} strokeDasharray="4 4"/>
            <text x="40" y="32" fill={color} fontSize="10" fontFamily="var(--font-mono)">CUSTOMER NETWORK · CLOSED</text>

            <rect x="60" y="70" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="120" y="92" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">User</text>
            <text x="120" y="107" textAnchor="middle" fill="var(--text-muted)" fontSize="9">내부 사용자</text>

            <rect x="220" y="70" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="280" y="92" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">내부 DB</text>
            <text x="280" y="107" textAnchor="middle" fill="var(--text-muted)" fontSize="9">정책·문서·이력</text>

            <rect x="60" y="160" width="280" height="80" fill="rgba(52,211,153,0.08)" stroke={color} strokeWidth="1.2"/>
            <text x="200" y="190" textAnchor="middle" fill="var(--text)" fontSize="14" fontWeight="600">Agent Runtime</text>
            <text x="200" y="210" textAnchor="middle" fill={color} fontSize="10" fontFamily="var(--font-mono)">on-prem GPU · vLLM / TGI</text>
            <text x="200" y="226" textAnchor="middle" fill="var(--text-muted)" fontSize="10">모델 · 벡터 · 오케스트레이션</text>

            <rect x="60" y="280" width="280" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="200" y="302" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Observability · Audit</text>
            <text x="200" y="318" textAnchor="middle" fill="var(--text-muted)" fontSize="9">감사 로그 · 권한 · 메트릭</text>

            <line x1="120" y1="120" x2="150" y2="160" stroke={color} strokeWidth="1" markerEnd={`url(#ar-${mode})`}/>
            <line x1="280" y1="120" x2="250" y2="160" stroke={color} strokeWidth="1" markerEnd={`url(#ar-${mode})`}/>
            <line x1="200" y1="240" x2="200" y2="278" stroke="var(--border-strong)"/>

            <text x="200" y="380" textAnchor="middle" fill="var(--text-dim)" fontSize="9" fontFamily="var(--font-mono)">NO EXTERNAL TRAFFIC · 100% INTERNAL</text>
          </g>
        )}

        {mode === 1 && (
          <g>
            <rect x="30" y="60" width="150" height="280" fill="none" stroke="var(--border-strong)" strokeDasharray="4 4"/>
            <text x="40" y="52" fill="var(--text-dim)" fontSize="10" fontFamily="var(--font-mono)">CUSTOMER</text>

            <rect x="220" y="60" width="150" height="280" fill="none" stroke={color} strokeDasharray="4 4"/>
            <text x="230" y="52" fill={color} fontSize="10" fontFamily="var(--font-mono)">CLOUD (API)</text>

            <rect x="55" y="100" width="100" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="105" y="122" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">App</text>
            <text x="105" y="138" textAnchor="middle" fill="var(--text-muted)" fontSize="9">사용자 UI</text>

            <rect x="55" y="180" width="100" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="105" y="202" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Harness</text>
            <text x="105" y="218" textAnchor="middle" fill="var(--text-muted)" fontSize="9">권한·감사·평가</text>

            <rect x="55" y="260" width="100" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="105" y="282" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Business DB</text>

            <rect x="245" y="120" width="100" height="50" fill="rgba(56,189,248,0.08)" stroke={color}/>
            <text x="295" y="142" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">LLM API</text>
            <text x="295" y="158" textAnchor="middle" fill={color} fontSize="9" fontFamily="var(--font-mono)">GPT · Claude</text>

            <rect x="245" y="220" width="100" height="50" fill="rgba(56,189,248,0.08)" stroke={color}/>
            <text x="295" y="242" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Vector DB</text>
            <text x="295" y="258" textAnchor="middle" fill={color} fontSize="9" fontFamily="var(--font-mono)">managed</text>

            {/* arrows */}
            <line x1="105" y1="150" x2="105" y2="180" stroke="var(--border-strong)"/>
            <line x1="155" y1="205" x2="245" y2="145" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>
            <line x1="155" y1="210" x2="245" y2="245" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>
            <line x1="105" y1="230" x2="105" y2="260" stroke="var(--border-strong)"/>

            <text x="200" y="390" textAnchor="middle" fill="var(--text-dim)" fontSize="9" fontFamily="var(--font-mono)">TLS · PII MASKED · AUDIT LOGGED</text>
          </g>
        )}

        {mode === 2 && (
          <g>
            <rect x="20" y="60" width="360" height="280" fill="none" stroke="var(--border-strong)"/>
            <line x1="200" y1="60" x2="200" y2="340" stroke="var(--border-strong)" strokeDasharray="3 3"/>

            <text x="30" y="52" fill={color} fontSize="10" fontFamily="var(--font-mono)">SENSITIVE · INTERNAL</text>
            <text x="370" y="52" fill={color} fontSize="10" fontFamily="var(--font-mono)" textAnchor="end">GENERAL · API</text>

            {/* Router */}
            <rect x="150" y="160" width="100" height="50" fill="rgba(129,140,248,0.1)" stroke={color} strokeWidth="1.5"/>
            <text x="200" y="182" textAnchor="middle" fill="var(--text)" fontSize="12" fontWeight="600">Router</text>
            <text x="200" y="198" textAnchor="middle" fill={color} fontSize="9" fontFamily="var(--font-mono)">policy-based</text>

            {/* Left side: on-prem */}
            <rect x="40" y="90" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="100" y="112" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">On-prem LLM</text>
            <text x="100" y="127" textAnchor="middle" fill="var(--text-muted)" fontSize="9">내부 데이터 질의</text>

            <rect x="40" y="240" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="100" y="262" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Secure Store</text>
            <text x="100" y="278" textAnchor="middle" fill="var(--text-muted)" fontSize="9">PII · 계약 · 규정</text>

            {/* Right side: api */}
            <rect x="240" y="90" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="300" y="112" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">LLM API</text>
            <text x="300" y="127" textAnchor="middle" fill="var(--text-muted)" fontSize="9">범용 작업</text>

            <rect x="240" y="240" width="120" height="50" fill="var(--bg)" stroke="var(--border-strong)"/>
            <text x="300" y="262" textAnchor="middle" fill="var(--text)" fontSize="11" fontWeight="600">Managed Vector</text>
            <text x="300" y="278" textAnchor="middle" fill="var(--text-muted)" fontSize="9">공개 도메인</text>

            {/* arrows */}
            <line x1="150" y1="175" x2="100" y2="140" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>
            <line x1="150" y1="195" x2="100" y2="240" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>
            <line x1="250" y1="175" x2="300" y2="140" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>
            <line x1="250" y1="195" x2="300" y2="240" stroke={color} strokeDasharray="3 3" markerEnd={`url(#ar-${mode})`}/>

            <text x="200" y="390" textAnchor="middle" fill="var(--text-dim)" fontSize="9" fontFamily="var(--font-mono)">DATA SENSITIVITY → ROUTING POLICY</text>
          </g>
        )}
      </svg>
    </div>
  );
};

window.AgentExpansion = AgentExpansion;
