import React from 'react';
import { Routes, Route, NavLink, useNavigate } from 'react-router-dom';
import './Common.css';
import './Company.css';
import { useSeoMeta } from '../hooks/useSeoMeta';

/* ── 서브 네비 ── */
const SUB_NAV = [
  { path: '/company/greeting',     label: 'CEO 인사말' },
  { path: '/company/history',      label: '연혁' },
  { path: '/company/organization', label: '조직도' },
  { path: '/company/ci',           label: 'CI 소개' },
  { path: '/company/location',     label: '오시는 길' },
];

function SubNav({ title }) {
  return (
    <>
      <div className="page-hero">
        <div className="container">
          <span className="section-label">Company</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>
    </>
  );
}

/* ── CEO 인사말 ── */
function Greeting() {
  useSeoMeta({ title: 'CEO 인사말 — 홍영택 대표이사', description: '(주)지오정보기술 홍영택 대표이사의 인사말. 20년 이상 공공기관 IT 전문 서비스 기업으로 성장한 지오정보기술의 비전을 소개합니다.', path: '/company/greeting' });
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="CEO 인사말" />
      <section className="section">
        <div className="container" style={{ maxWidth: '860px' }}>
          <div className="ceo-wrap">
            <div className="ceo-photo">
              <div className="ceo-avatar">
                <span>CEO</span>
              </div>
              <p className="ceo-name">홍영택</p>
              <p className="ceo-sign">대표이사</p>
            </div>
            <div className="ceo-text">
              <h2>안녕하십니까,<br />(주)지오정보기술 대표이사 홍영택입니다.</h2>
              <div className="divider divider-left" style={{ margin: '20px 0 28px' }} />
              {[
                '저희 (주)지오정보기술은 2000년 창립 이래 20년 이상 공공기관 및 대기업 IT 전문 서비스 기업으로 성장해 왔습니다. 삼성전자, 현대백화점, 국민연금, 헌법재판소 등 국내 주요 기관·기업의 핵심 시스템을 성공적으로 구축·운영한 풍부한 경험을 보유하고 있습니다.',
                '최근에는 GUARDiA ITSM 플랫폼을 통해 "AI 기반 인프라 자율 운영"이라는 새로운 패러다임을 제시하고 있습니다. 메신저 한 줄 명령으로 1,000개 이상의 관공서 레거시 인프라를 자동화하는 혁신적인 솔루션으로, 대상 서버에 별도 소프트웨어 설치 없이 표준 SSH/SFTP 프로토콜만으로 운영 자동화를 실현합니다.',
                '앞으로도 고객의 성공이 곧 저희의 성공이라는 신념 아래, 최고의 기술력과 서비스로 보답하겠습니다. 언제나 여러분 곁에서 디지털 혁신의 파트너가 되겠습니다.',
                '감사합니다.',
              ].map((p, i) => (
                <p key={i} className="ceo-para">{p}</p>
              ))}
            </div>
          </div>

          {/* 핵심 가치 */}
          <div style={{ marginTop: '72px' }}>
            <div className="section-header">
              <span className="section-label">Core Values</span>
              <h2 className="section-title">핵심 가치</h2>
            </div>
            <div className="grid-4">
              {[
                { icon: '🎯', title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' },
                { icon: '🚀', title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' },
                { icon: '🤝', title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' },
                { icon: '🌱', title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' },
              ].map((v, i) => (
                <div key={i} className="card" style={{ padding: '32px 24px', textAlign: 'center' }}>
                  <div style={{ fontSize: '40px', marginBottom: '16px' }}>{v.icon}</div>
                  <h3 style={{ fontSize: '18px', fontWeight: '700', marginBottom: '12px' }}>{v.title}</h3>
                  <p style={{ fontSize: '14px', color: 'var(--gray-600)', lineHeight: '1.7' }}>{v.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 연혁 ── */
const HISTORY = [
  {
    year: '2026', items: [
      'GUARDiA ITSM v2.0 출시 — AI ChatOps 오케스트레이션 플랫폼',
      'GS인증 1등급 신청 준비 완료 (TTA 심사 예정)',
      '공공기관 1,000개 이상 멀티테넌트 지원 목표 달성',
    ]
  },
  {
    year: '2025', items: [
      '삼성전자 차세대 CRM 구축 (DB Migration / DA / 튜닝)',
      'GUARDiA ITSM v1.0 베타 서비스 개시',
      'AI 기반 인프라 자동화 특허 출원',
    ]
  },
  {
    year: '2024', items: [
      'DELL 차세대 CRM 구축 — DBA 역할 수행 (엠로)',
      '소상공인컨설팅시스템 구축 (서울신용보증재단, PM)',
      '국민연금 차세대 시스템 구축 (AA)',
    ]
  },
  {
    year: '2023', items: [
      '헌법재판소 포털시스템 구축 (PM)',
      '서울신용보증재단 모바일앱 구축 완료 (PM)',
    ]
  },
  {
    year: '2022', items: [
      '에이텍에이피 통합유지보수관리시스템 개발 (PM)',
      '헌법재판소 통합보안관제시스템 구축 (PM)',
    ]
  },
  {
    year: '2020–2021', items: [
      '현대백화점 HKOS 시스템 개발/구축 (PM)',
      '서울시립대 대학행정정보시스템 성능 개선 (PL)',
      '농협 하나로마트 ESL 시스템 구축 (PM)',
    ]
  },
  {
    year: '2018–2019', items: [
      '이마트 정산시스템 프로젝트 (DA)',
      '우체국금융 스마트ATM 도입 (PMO)',
      '현대백화점 무인POS시스템 구축 (PM)',
      '갤러리아백화점 PDA 정산시스템 (PM)',
    ]
  },
  {
    year: '2015–2017', items: [
      'LG U+ VAN 고도화 — 승인시스템 개발 FEP/AP/BEP (AA)',
      '한화그룹 4사 통합 HR시스템 구축 (PL)',
      '참좋은여행 콜센터 어플리케이션 구축 (PL)',
    ]
  },
  {
    year: '2013–2014', items: [
      '삼성전자 품질관리시스템(QWINGS) 구축 (PM)',
      '대우증권 통합인프라시스템 (DBA)',
      '현대캐피탈 차세대시스템 (PL)',
      '중소기업 1357 통합콜센터 구축 (PL)',
    ]
  },
  {
    year: '2010–2012', items: [
      '삼성전자서비스 eZone 갱신 (PL)',
      '현대모비스 원가관리시스템 (DBA)',
      '한국전기안전공사 전기안전포털시스템 (DBA)',
    ]
  },
  {
    year: '2008–2009', items: [
      '국민은행 차세대 포탈 구축 (PL)',
      '한국원자력연료 인사정보(HMS)시스템 (DBA)',
      '한국전기안전공사 안전점검 고도화 (DBA)',
    ]
  },
  {
    year: '2000', items: [
      '(주)지오정보기술 창립',
      '공공기관 IT 인프라 서비스 개시',
    ]
  },
];

function History() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="연혁" />
      <section className="section">
        <div className="container" style={{ maxWidth: '900px' }}>
          <div className="section-header">
            <span className="section-label">History</span>
            <h2 className="section-title">20년+ 성장의 역사</h2>
            <p className="section-desc">2000년 창립 이래 국내 주요 기관·기업과 함께 성장해 왔습니다</p>
          </div>
          <div className="timeline">
            {HISTORY.map((h, i) => (
              <div key={i} className="timeline-row">
                <div className="timeline-year">{h.year}</div>
                <div className="timeline-dot" />
                <div className="timeline-content">
                  {h.items.map((item, j) => (
                    <div key={j} className="timeline-item">
                      <span className="timeline-bullet" />
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 조직도 ── */
function Organization() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="조직도" />
      <section className="section">
        <div className="container" style={{ maxWidth: '960px' }}>
          <div className="section-header">
            <span className="section-label">Organization</span>
            <h2 className="section-title">조직 구성</h2>
          </div>
          <div className="org-chart">
            {/* 대표이사 */}
            <div className="org-top">
              <div className="org-box ceo">대표이사</div>
            </div>
            <div className="org-line-v" />
            {/* 본부 */}
            <div className="org-depts">
              {[
                {
                  name: '개발본부', color: 'var(--primary)',
                  teams: ['AI개발팀', '플랫폼개발팀', '프론트엔드팀']
                },
                {
                  name: '기술본부', color: 'var(--accent)',
                  teams: ['인프라팀', 'DBA팀', '보안팀']
                },
                {
                  name: 'PM본부', color: '#7c3aed',
                  teams: ['SI사업팀', 'SM운영팀', 'PMO팀']
                },
                {
                  name: '경영지원본부', color: '#059669',
                  teams: ['경영기획팀', '영업팀', '인사·총무팀']
                },
              ].map((dept, i) => (
                <div key={i} className="org-dept-col">
                  <div className="org-line-h" />
                  <div className="org-line-v-short" />
                  <div className="org-box dept" style={{ borderColor: dept.color, color: dept.color }}>
                    {dept.name}
                  </div>
                  <div className="org-teams">
                    {dept.teams.map((t, j) => (
                      <div key={j} className="org-box team">{t}</div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 인원 현황 */}
          <div className="grid-4" style={{ marginTop: '64px' }}>
            {[
              { label: '전체 임직원', value: '50+', unit: '명' },
              { label: '개발 인력', value: '70', unit: '%' },
              { label: '평균 경력', value: '8', unit: '년+' },
              { label: '국가 공인 자격', value: '30+', unit: '개' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: '32px', textAlign: 'center' }}>
                <div style={{ fontSize: '36px', fontWeight: '900', color: 'var(--primary)' }}>
                  {s.value}<span style={{ fontSize: '18px' }}>{s.unit}</span>
                </div>
                <p style={{ marginTop: '8px', color: 'var(--gray-600)', fontSize: '14px' }}>{s.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── CI 소개 ── */
function CI() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="CI 소개" />
      <section className="section">
        <div className="container" style={{ maxWidth: '900px' }}>
          <div className="section-header">
            <span className="section-label">Corporate Identity</span>
            <h2 className="section-title">브랜드 아이덴티티</h2>
            <p className="section-desc">지오정보기술의 브랜드는 신뢰·혁신·전문성을 상징합니다</p>
          </div>

          {/* 로고 */}
          <div className="ci-section">
            <h3 className="ci-title">로고 시스템</h3>
            <div className="ci-logo-wrap">
              <div className="ci-logo-box dark">
                <div className="ci-logo-text-wrap">
                  <span className="ci-logo-mark">GEO</span>
                  <span className="ci-logo-sub">정보기술</span>
                </div>
                <p className="ci-logo-label">다크 배경용</p>
              </div>
              <div className="ci-logo-box light">
                <div className="ci-logo-text-wrap">
                  <span className="ci-logo-mark" style={{ color: 'var(--primary)' }}>GEO</span>
                  <span className="ci-logo-sub" style={{ color: 'var(--gray-700)' }}>정보기술</span>
                </div>
                <p className="ci-logo-label" style={{ color: 'var(--gray-500)' }}>라이트 배경용</p>
              </div>
            </div>
          </div>

          {/* 브랜드 컬러 */}
          <div className="ci-section">
            <h3 className="ci-title">브랜드 컬러</h3>
            <div className="ci-colors">
              {[
                { name: 'Primary Blue', hex: '#0051A2', cmyk: 'C100 M50 Y0 K37', usage: '주요 UI·버튼·강조' },
                { name: 'Accent Blue',  hex: '#00A3E0', cmyk: 'C100 M28 Y0 K12', usage: '포인트·링크·아이콘' },
                { name: 'Dark Navy',    hex: '#1A1A2E', cmyk: 'C40 M40 Y0 K82',  usage: '헤더·배경·텍스트' },
                { name: 'Pure White',   hex: '#FFFFFF', cmyk: 'C0 M0 Y0 K0',     usage: '배경·반전 텍스트' },
              ].map((c, i) => (
                <div key={i} className="ci-color-card">
                  <div className="ci-color-swatch" style={{ background: c.hex, border: c.hex === '#FFFFFF' ? '1px solid #eee' : 'none' }} />
                  <div className="ci-color-info">
                    <strong>{c.name}</strong>
                    <span className="ci-hex">{c.hex}</span>
                    <span className="ci-cmyk">{c.cmyk}</span>
                    <span className="ci-usage">{c.usage}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 슬로건 */}
          <div className="ci-section">
            <h3 className="ci-title">브랜드 슬로건</h3>
            <div className="ci-slogan-wrap">
              <p className="ci-slogan-main">"공공기관 IT, 지오정보기술과 함께"</p>
              <p className="ci-slogan-sub">20년 신뢰의 기술력으로 AI 인프라 혁신을 이끕니다</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 오시는 길 ── */
function Location() {
  useSeoMeta({ title: '오시는 길 — 경기도 안산시 단원구', description: '(주)지오정보기술 찾아오시는 방법. 경기도 안산시 단원구 광덕4로 220 오피스브이 578호. 전화: 031-483-1766', path: '/company/location', keywords: '지오정보기술 주소, 지오정보기술 위치, 안산 IT기업' });
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="오시는 길" />
      <section className="section">
        <div className="container" style={{ maxWidth: '960px' }}>
          <div className="section-header">
            <span className="section-label">Location</span>
            <h2 className="section-title">오시는 길</h2>
          </div>

          {/* 네이버 지도 */}
          <div className="map-wrap">
            <iframe
              title="(주)지오정보기술 오시는 길"
              src="https://map.naver.com/v5/embed?type=address&query=%EA%B2%BD%EA%B8%B0%EB%8F%84+%EC%95%88%EC%82%B0%EC%8B%9C+%EB%8B%A8%EC%9B%90%EA%B5%AC+%EA%B4%91%EB%8D%954%EB%A1%9C+220&zoom=17&maptype=normal"
              style={{ width: '100%', height: '420px', border: 'none', borderRadius: '12px', display: 'block' }}
              allowFullScreen
              loading="lazy"
            />
          </div>

          <div className="location-grid">
            {/* 본사 */}
            <div className="card" style={{ padding: '36px' }}>
              <h3 className="loc-office-title">📍 본사</h3>
              <table className="loc-table">
                <tbody>
                  <tr><th>회사명</th><td>(주)지오정보기술</td></tr>
                  <tr><th>대표이사</th><td>홍영택</td></tr>
                  <tr><th>주소</th><td>경기도 안산시 단원구 광덕4로 220<br />오피스브이 578호</td></tr>
                  <tr><th>대표전화</th><td><a href="tel:031-483-1766">031-483-1766</a></td></tr>
                  <tr><th>이메일</th><td><a href="mailto:info@zioinfo.co.kr">info@zioinfo.co.kr</a></td></tr>
                  <tr><th>운영시간</th><td>평일 09:00 ~ 18:00 (점심 12:00~13:00)</td></tr>
                </tbody>
              </table>
            </div>

            {/* 교통 안내 */}
            <div className="card" style={{ padding: '36px' }}>
              <h3 className="loc-office-title">🚇 교통 안내</h3>
              <div className="transport-list">
                {[
                  { type: '지하철', icon: '🚇', lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] },
                  { type: '버스',   icon: '🚌', lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] },
                  { type: '자가용', icon: '🚗', lines: ['서해안고속도로 비봉IC → 안산방면 → 광덕4로', '주차 가능 (방문 전 사전 연락 권장)'] },
                ].map((t, i) => (
                  <div key={i} className="transport-item">
                    <div className="transport-header">
                      <span>{t.icon}</span>
                      <strong>{t.type}</strong>
                    </div>
                    {t.lines.map((l, j) => <p key={j}>{l}</p>)}
                  </div>
                ))}
              </div>
              <div style={{ marginTop: '20px', padding: '12px 16px', background: 'var(--gray-50)', borderRadius: '8px', fontSize: '13px', color: 'var(--gray-500)' }}>
                📌 네이버 지도에서 <strong>"오피스브이 안산"</strong> 검색
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 라우터 ── */
export default function Company() {
  return (
    <Routes>
      <Route path="greeting"     element={<Greeting />} />
      <Route path="history"      element={<History />} />
      <Route path="organization" element={<Organization />} />
      <Route path="ci"           element={<CI />} />
      <Route path="location"     element={<Location />} />
      <Route path="*"            element={<Greeting />} />
    </Routes>
  );
}