import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom';
import './Common.css';
import './Business.css';

const SUB_NAV = [
  { path: '/business/reference', label: '구축 레퍼런스' },
  { path: '/business/partner',   label: '파트너' },
];

function SubNav({ title }) {
  return (
    <>
      <div className="page-hero">
        <div className="container">
          <span className="section-label">Business</span>
          <h1 className="page-hero-title">{title}</h1>
        </div>
      </div>
      <nav className="sub-nav">
        <div className="container">
          {SUB_NAV.map(n => (
            <NavLink key={n.path} to={n.path}
              className={({ isActive }) => 'sub-nav-item' + (isActive ? ' active' : '')}>
              {n.label}
            </NavLink>
          ))}
        </div>
      </nav>
    </>
  );
}

/* ── 레퍼런스 데이터 ── */
const REFS = [
  { period:'24.12~25.02', client:'엠로',             project:'DELL 차세대 CRM 구축',            role:'DBA',  tech:'Oracle 19C, SQL/PLSQL, Java',         category:'금융·제조' },
  { period:'24.09~25.10', client:'삼성전자',          project:'삼성전자 차세대 CRM 구축',          role:'DB튜너',tech:'JBOSS, EDB, SQL/PLSQL, Java',          category:'대기업' },
  { period:'24.03~24.06', client:'서울신용보증재단',  project:'소상공인 컨설팅시스템 구축',        role:'PM',   tech:'JSP/Java, Websquare, Spring, Oracle',  category:'공공기관' },
  { period:'23.11~24.02', client:'국민연금관리공단',  project:'국민연금 차세대 시스템 구축',       role:'AA',   tech:'JSP/Java, Nexacro, Spring, CI/CD',     category:'공공기관' },
  { period:'23.08~23.10', client:'헌법재판소',        project:'헌법재판소 포털시스템 구축',        role:'PM',   tech:'Java, Egov, Spring, JEUS',             category:'공공기관' },
  { period:'22.08~23.07', client:'서울신용보증재단',  project:'재단 모바일앱 구축',                role:'PM',   tech:'Java, Nexacro, Spring, EDB',           category:'공공기관' },
  { period:'22.01~22.07', client:'에이텍에이피',      project:'통합유지보수관리시스템 개발',       role:'PM',   tech:'Java, Nexacro, Spring, Tomcat',        category:'IT서비스' },
  { period:'21.10~21.12', client:'헌법재판소',        project:'통합보안관제시스템 구축 / DB이관',  role:'PM',   tech:'Java, Spring, JEUS, Oracle 12c',       category:'공공기관' },
  { period:'20.05~21.09', client:'현대백화점',        project:'현대백화점 HKOS 시스템 개발',      role:'PM',   tech:'Java, Nexacro, Spring, Pro*C',         category:'유통·물류' },
  { period:'20.12~21.04', client:'서울시립대',        project:'대학행정정보시스템 성능개선',       role:'PL',   tech:'Java, Spring, JMeter, JEUS, OZ',       category:'교육기관' },
  { period:'20.07~20.11', client:'에이텍에이피',      project:'WMS 공통 프레임워크 구축',         role:'PM',   tech:'Java, Spring, Nexacro, Oracle',        category:'IT서비스' },
  { period:'20.01~20.06', client:'농협하나로마트',    project:'농협 하나로마트 ESL시스템',        role:'PM',   tech:'C#, Java Spring Batch, REST API',      category:'유통·물류' },
  { period:'19.07~19.12', client:'장보고식자재마트',  project:'정산시스템 구축',                  role:'PM',   tech:'Java, Spring, Xplatform, Oracle',      category:'유통·물류' },
  { period:'19.01~19.06', client:'한화갤러리아',      project:'갤러리아백화점 PDA 정산시스템',    role:'PM',   tech:'Java, Spring, Xplatform, Oracle',      category:'유통·물류' },
  { period:'18.07~18.12', client:'이마트',            project:'이마트 정산시스템 프로젝트',       role:'DA',   tech:'Java, Spring, Xplatform, Oracle',      category:'유통·물류' },
  { period:'18.11~18.06', client:'우정사업정보센터',  project:'우체국금융 스마트ATM 도입',        role:'PMO',  tech:'Visual C/C++, TCP/IP 소켓통신',        category:'공공기관' },
  { period:'18.02~18.10', client:'현대백화점',        project:'무인POS시스템 구축',              role:'PM',   tech:'Java, Spring, Xplatform, Oracle',      category:'유통·물류' },
  { period:'17.11~18.01', client:'KOCES',             project:'KocesICPos 자동업데이트 런처',    role:'개발',  tech:'C# .NET, Java/JSP, C/PRO*C',          category:'금융·제조' },
  { period:'15.12~17.10', client:'LG U+',             project:'LG U+ VAN 고도화',               role:'AA',   tech:'Anylink/Tmax, WebLogic, C/PRO*C',     category:'통신·금융' },
  { period:'15.07~15.11', client:'한화S&C',           project:'한화그룹 4사 통합 HR시스템',      role:'PL',   tech:'Java/JSP, Web Service (SOAP), IBSheet',category:'대기업' },
  { period:'14.11~15.03', client:'참좋은여행',        project:'콜센터 어플리케이션 구축',         role:'PL',   tech:'ASP/.NET, Visual Studio 2012',         category:'서비스' },
  { period:'14.07~14.10', client:'현대캐피탈',        project:'현대캐피탈 차세대시스템',         role:'PL',   tech:'Java/JSP, Web Service, XPlatform',     category:'금융·제조' },
  { period:'14.02~14.06', client:'중소기업청',        project:'중소기업 1357 통합콜센터',        role:'PL',   tech:'Java, Spring, XPlatform, 전자정부FW',  category:'공공기관' },
  { period:'13.08~13.12', client:'삼성전자',          project:'삼성전자 품질관리시스템(QWINGS)', role:'PM',   tech:'Java, Weblogic, Web Service, MiPlatform',category:'대기업' },
  { period:'13.03~13.07', client:'대우증권',          project:'대우증권 통합인프라시스템',       role:'DBA',  tech:'Java, Spring, XPlatform, Oracle',      category:'통신·금융' },
  { period:'12.04~13.02', client:'삼성전자서비스',    project:'eZone Renewal 프로젝트',          role:'PL',   tech:'Java, Weblogic, PRO*C, Android',       category:'대기업' },
  { period:'12.01~12.04', client:'농수산식품유통공사',project:'무역통계시스템 구축',             role:'DBA',  tech:'Java, Spring, Hibernate, 전자정부FW',  category:'공공기관' },
  { period:'11.02~11.12', client:'현대모비스',        project:'원가관리시스템 구축',             role:'DBA',  tech:'Java, Spring, Hibernate, MiPlatform',  category:'대기업' },
  { period:'10.07~11.01', client:'한국전기안전공사',  project:'전기안전포털시스템 구축',         role:'DBA',  tech:'Java, Spring, Hibernate, XPlatform',   category:'공공기관' },
  { period:'09.09~10.04', client:'엽연초생산협동조합',project:'엽연초경작통합시스템 구축',       role:'PM',   tech:'Java, Struts, i-Batis, Spring',        category:'공공기관' },
  { period:'09.02~09.08', client:'한국전기안전공사',  project:'안전점검 고도화',                role:'DBA',  tech:'Java, Weblogic, 전자정부FW',           category:'공공기관' },
  { period:'08.09~08.12', client:'국민은행',          project:'국민은행 차세대 포탈',           role:'PL',   tech:'Java, AquaLogic, Struts/i-Batis',      category:'통신·금융' },
  { period:'08.06~08.08', client:'한국원자력연료',    project:'인사정보(HMS)시스템',            role:'DBA',  tech:'Java/JSP/JSF, 자체 프레임워크',        category:'공공기관' },
];

const CATEGORIES = ['전체', '공공기관', '대기업', '유통·물류', '통신·금융', '금융·제조', '교육기관', 'IT서비스', '서비스'];

const CAT_COLOR = {
  '공공기관': '#0051A2', '대기업': '#7c3aed', '유통·물류': '#059669',
  '통신·금융': '#d97706', '금융·제조': '#dc2626', '교육기관': '#0891b2',
  'IT서비스': '#6366f1', '서비스': '#db2777',
};

function Reference() {
  const [cat, setCat] = useState('전체');
  const filtered = cat === '전체' ? REFS : REFS.filter(r => r.category === cat);

  return (
    <main id="main-content" className="inner-page">
      <SubNav title="구축 레퍼런스" />
      <section className="section">
        <div className="container">
          <div className="section-header">
            <span className="section-label">Reference</span>
            <h2 className="section-title">구축 실적</h2>
            <p className="section-desc">2008년부터 현재까지 국내 주요 기관·기업 {REFS.length}개 프로젝트 성공 수행</p>
          </div>

          {/* 통계 */}
          <div className="grid-4" style={{ marginBottom: '40px' }}>
            {[
              { val: `${REFS.length}+`, label: '총 프로젝트', color: 'var(--primary)' },
              { val: '20+', label: '년 경력', color: 'var(--accent)' },
              { val: '15+', label: '공공기관', color: '#7c3aed' },
              { val: '10+', label: '대기업·금융', color: '#059669' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: '24px', textAlign: 'center' }}>
                <div style={{ fontSize: '32px', fontWeight: '900', color: s.color }}>{s.val}</div>
                <p style={{ fontSize: '13px', color: 'var(--gray-500)', marginTop: '6px' }}>{s.label}</p>
              </div>
            ))}
          </div>

          {/* 카테고리 필터 */}
          <div className="ref-filters">
            {CATEGORIES.map(c => (
              <button key={c} className={`ref-filter-btn ${cat === c ? 'active' : ''}`}
                onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>

          {/* 테이블 */}
          <div className="ref-table-wrap">
            <table className="ref-table">
              <thead>
                <tr>
                  <th>기간</th><th>고객사</th><th>프로젝트명</th>
                  <th>역할</th><th>주요기술</th><th>분야</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((r, i) => (
                  <tr key={i}>
                    <td className="ref-period">{r.period}</td>
                    <td className="ref-client">{r.client}</td>
                    <td className="ref-project">{r.project}</td>
                    <td><span className="ref-role">{r.role}</span></td>
                    <td className="ref-tech">{r.tech}</td>
                    <td>
                      <span className="ref-cat-badge"
                        style={{ background: CAT_COLOR[r.category] + '18', color: CAT_COLOR[r.category] }}>
                        {r.category}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 파트너 ── */
const PARTNERS = [
  { name: 'Oracle',          img: '/logos/partners/oracle.png',      desc: 'Oracle DB 공식 파트너 — Oracle 19c 전문 DBA 인증',         tier: 'Gold' },
  { name: 'Red Hat',         img: '/logos/partners/redhat.png',      desc: 'RHEL·OpenShift 파트너 — 리눅스 인프라 구축',              tier: 'Silver' },
  { name: 'TmaxSoft (JEUS)', img: '/logos/partners/tmaxsoft.png',    desc: '국산 WAS JEUS/Tmax 공식 파트너',                          tier: 'Gold' },
  { name: 'Tibero',          img: '/logos/partners/tibero.svg',      desc: 'Tibero DBMS 공식 파트너 — 공공기관 DB 전환',              tier: 'Gold' },
  { name: 'Samsung SDS',     img: '/logos/partners/samsung_sds.png', desc: '삼성SDS 협력사 — 삼성전자 CRM/품질 시스템 공동 수행',      tier: 'Partner' },
  { name: 'Nexacro',         img: '/logos/partners/nexacro.svg',     desc: '투비소프트 Nexacro 공식 파트너 — UI 개발 전문',            tier: 'Silver' },
  { name: 'OZ Report',       img: '/logos/partners/forcs.png',       desc: 'OZ e-Form 공식 파트너 — 공공 전자문서 솔루션',             tier: 'Silver' },
  { name: 'Ollama',          img: '/logos/partners/ollama.svg',      desc: '온프레미스 LLM 파트너 — GUARDiA AI 엔진 공급사',           tier: 'Tech' },
];

const TIER_COLOR = { Gold:'#d97706', Silver:'#6b7280', Partner:'#0051A2', Tech:'#7c3aed' };

function Partner() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="파트너" />
      <section className="section">
        <div className="container">
          <div className="section-header">
            <span className="section-label">Partners</span>
            <h2 className="section-title">기술 파트너</h2>
            <p className="section-desc">최고의 기술 파트너와 함께 최선의 솔루션을 제공합니다</p>
          </div>
          <div className="grid-4">
            {PARTNERS.map((p, i) => (
              <div key={i} className="card partner-card">
                <div className="partner-logo">
                  <img src={p.img} alt={p.name}
                       style={{maxWidth:'100px',maxHeight:'40px',objectFit:'contain'}}
                       onError={e=>{e.target.style.display='none';e.target.nextSibling.style.display='block';}}/>
                  <span style={{display:'none',fontSize:'13px',fontWeight:'700',color:'#003366'}}>{p.name}</span>
                </div>
                <div className="partner-tier" style={{ background: TIER_COLOR[p.tier] + '1a', color: TIER_COLOR[p.tier] }}>
                  {p.tier} Partner
                </div>
                <h3 className="partner-name">{p.name}</h3>
                <p className="partner-desc">{p.desc}</p>
              </div>
            ))}
          </div>

          {/* 협력 안내 */}
          <div className="partner-cta">
            <h3>파트너십 문의</h3>
            <p>지오정보기술과 기술 파트너십을 맺고 싶으신 기업은 아래로 연락 주십시오.</p>
            <a href="/support/contact?type=사업제안" className="btn btn-primary btn-lg">
              파트너십 제안하기
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}

export default function Business() {
  return (
    <Routes>
      <Route path="reference" element={<Reference />} />
      <Route path="partner"   element={<Partner />} />
      <Route path="*"         element={<Reference />} />
    </Routes>
  );
}
