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" style={{ overflow: 'hidden', background: 'none', padding: 0 }}>
                <img
                  src="/지오정보기술사옥전경.png"
                  alt="(주)지오정보기술 사옥 전경"
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </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() {
  useSeoMeta({ title: 'CI 소개 — 브랜드 아이덴티티', description: '(주)지오정보기술 CI 소개. AI와 첨단 정보 기술을 기반으로 연결되고 확장되는 미래를 상징하는 기업 이미지를 확인하세요.', path: '/company/ci' });
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="CI 소개" />
      <section className="section">
        <div className="container" style={{ maxWidth: '960px' }}>
          <div className="section-header">
            <span className="section-label">Corporate Identity</span>
            <h2 className="section-title">(주)지오정보기술 CI 소개</h2>
            <p className="section-desc">
              인공지능(AI)과 첨단 정보 기술을 기반으로 연결되고 확장되는 미래를 상징합니다
            </p>
          </div>

          {/* 메인 로고 */}
          <div className="ci-section">
            <h3 className="ci-title">메인 로고</h3>
            <div className="ci-logo-showcase">
              <div className="ci-logo-box light" style={{ flex: 1, minHeight: '200px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '16px' }}>
                <img
                  src="/지오정보기술로고.png"
                  alt="(주)지오정보기술 로고"
                  style={{ maxWidth: '320px', width: '100%', objectFit: 'contain' }}
                />
                <p className="ci-logo-label" style={{ color: 'var(--gray-500)' }}>라이트 배경용</p>
              </div>
              <div className="ci-logo-box dark" style={{ flex: 1, minHeight: '200px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '16px' }}>
                <img
                  src="/지오정보기술로고.png"
                  alt="(주)지오정보기술 로고 (다크)"
                  style={{ maxWidth: '320px', width: '100%', objectFit: 'contain', filter: 'brightness(0) invert(1)' }}
                />
                <p className="ci-logo-label">다크 배경용</p>
              </div>
            </div>
          </div>

          {/* CI 심볼 */}
          <div className="ci-section">
            <h3 className="ci-title">CI 심볼 디자인</h3>
            <div style={{ display: 'flex', gap: '40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <div style={{ flex: '0 0 auto' }}>
                <img
                  src="/CI.jpg"
                  alt="지오정보기술 CI 심볼"
                  style={{ width: '280px', borderRadius: '12px', boxShadow: '0 4px 24px rgba(0,0,0,0.10)', display: 'block' }}
                />
              </div>
              <div style={{ flex: 1, minWidth: '260px' }}>
                <h4 style={{ fontSize: '17px', fontWeight: '700', marginBottom: '16px', color: 'var(--gray-800)' }}>디자인 콘셉트 및 상징성</h4>
                <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                  <div style={{ padding: '16px 20px', background: 'var(--gray-50)', borderRadius: '10px', borderLeft: '4px solid var(--primary)' }}>
                    <strong style={{ display: 'block', fontSize: '14px', color: 'var(--primary)', marginBottom: '6px' }}>구조적 결합</strong>
                    <p style={{ fontSize: '14px', color: 'var(--gray-600)', lineHeight: '1.7', margin: 0 }}>
                      기하학적 도형들이 서로 맞물려 있는 형태는 인공지능 알고리즘과 데이터의 정교한 결합, 시스템 간의 통합, 그리고 기술을 통해 구축되는 견고한 지능형 네트워크를 의미합니다.
                    </p>
                  </div>
                  <div style={{ padding: '16px 20px', background: 'var(--gray-50)', borderRadius: '10px', borderLeft: '4px solid var(--accent)' }}>
                    <strong style={{ display: 'block', fontSize: '14px', color: 'var(--accent)', marginBottom: '6px' }}>지향점</strong>
                    <p style={{ fontSize: '14px', color: 'var(--gray-600)', lineHeight: '1.7', margin: 0 }}>
                      서로 다른 방향을 가리키는 도형의 배치는 기존의 틀을 깨고 AI 기술을 통해 끊임없이 확장해 나가는 기업의 도전 정신과 변화하는 디지털 환경을 선도하겠다는 의지를 투영합니다.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* CI 색상 체계 */}
          <div className="ci-section">
            <h3 className="ci-title">CI 색상 체계 및 의미</h3>
            <p style={{ fontSize: '14px', color: 'var(--gray-500)', marginBottom: '24px', lineHeight: '1.7' }}>
              (주)지오정보기술의 색상 팔레트는 기술적 가치와 미래 지향적 철학을 시각화합니다.
            </p>
            <div className="ci-colors">
              {[
                {
                  name: '딥 블루 (Deep Blue)',
                  hex: '#0D2B6E',
                  label: '신뢰와 전문성',
                  desc: '로고의 구조적 중심을 이루는 이 색상은 IT 기업의 핵심 가치인 신뢰와 안정감을 상징합니다. 고객의 데이터를 안전하게 보호하고 흔들림 없는 서비스를 제공하겠다는 기업의 약속입니다.',
                },
                {
                  name: '라이트 블루 (Light Blue)',
                  hex: '#4DA6D9',
                  label: '혁신과 창의성',
                  desc: '다이내믹하게 교차하는 하늘색 계열은 AI 기술로 열어갈 지능형 미래와 혁신을 상징합니다. 끊임없이 새로운 가치를 창출하고 확장해 나가는 진취적인 기업 정신을 투영합니다.',
                },
                {
                  name: '그레이 (Gray)',
                  hex: '#8C9BAA',
                  label: '안정과 균형',
                  desc: '회색조의 배치 면은 기술과 비즈니스 사이의 중립적 균형을 의미합니다. 복잡한 데이터를 명확하고 논리적으로 분석하는 데이터 전문 기업의 이성적 판단력과 솔루션의 완성도를 대변합니다.',
                },
              ].map((c, i) => (
                <div key={i} className="ci-color-card" style={{ alignItems: 'flex-start' }}>
                  <div className="ci-color-swatch" style={{ background: c.hex, borderRadius: '10px', flexShrink: 0 }} />
                  <div className="ci-color-info">
                    <strong style={{ fontSize: '15px' }}>{c.name}</strong>
                    <span className="ci-hex" style={{ background: 'var(--gray-100)', borderRadius: '4px', padding: '2px 8px', display: 'inline-block', marginTop: '4px' }}>{c.hex}</span>
                    <span style={{ fontSize: '13px', fontWeight: '600', color: 'var(--primary)', marginTop: '6px', display: 'block' }}>[{c.label}]</span>
                    <p style={{ fontSize: '13px', color: 'var(--gray-600)', lineHeight: '1.65', margin: '6px 0 0' }}>{c.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* 경영 철학 및 AI 비전 */}
          <div className="ci-section">
            <h3 className="ci-title">경영 철학 및 AI 비전</h3>
            <div style={{ padding: '32px 36px', background: 'linear-gradient(135deg, #f0f6ff 0%, #e8f4fd 100%)', borderRadius: '16px', borderLeft: '5px solid var(--primary)', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: '-20px', right: '-20px', width: '120px', height: '120px', background: 'rgba(0,81,162,0.05)', borderRadius: '50%' }} />
              <p style={{ fontSize: '15px', color: 'var(--gray-700)', lineHeight: '1.85', margin: 0 }}>
                (주)지오정보기술은 CI가 담고 있는 <strong>결합과 확장의 철학</strong>을 바탕으로, 단순한 정보 처리를 넘어 인공지능이 더해진 최적화된 솔루션을 제공합니다.
                우리는 기술과 기술, 사람과 AI가 조화롭게 연결되는 지점에서 새로운 가치를 창출하며, AI 기반의 안정적이고 효율적인 정보 인프라로 미래의 가능성을 실현해 나갑니다.
              </p>
              <p style={{ fontSize: '15px', color: 'var(--gray-700)', lineHeight: '1.85', margin: '16px 0 0' }}>
                이러한 시각적 정체성을 통해 (주)지오정보기술은 단순한 IT 기술 공급자를 넘어,
                <strong> 고객의 비즈니스에 지능형 가치를 더하는 파트너</strong>로서의 입지를 공고히 합니다.
              </p>
            </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>
  );
}