import React, { useState, useEffect } from 'react';
import { IconTarget, IconBolt, IconHandshake, IconLeaf, IconPhone, IconEmail, IconMapPin, IconClock, IconBuilding, IconUser, IconAI, IconCheckCircle } from '../components/Icons';
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="/zioinfo-ceo.png"
                  alt="(주)지오정보기술 대표이사"
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }}
                />
              </div>
            </div>
            <div className="ceo-text">
              <h2>안녕하십니까,<br />(주)지오정보기술 대표이사 홍영택입니다.</h2>
              <div className="divider divider-left" style={{ margin: '20px 0 28px' }} />
              {[
                '안녕하세요, (주)지오정보기술 대표이사 홍영택입니다.',
                '비즈니스의 현장에서 수많은 프로젝트를 마주하며 얻은 한 가지 확실한 진리가 있습니다. 1억짜리 프로젝트건, 1조짜리 프로젝트건, 결국 고객의 요구사항은 대동소이하다는 점입니다. 규모의 차이는 있을지언정 모든 고객의 본질적인 염원은 단 하나, ‘가장 안전하고 편리하게, 내가 신경 쓰지 않아도 완벽하게 인프라가 작동하는 것’입니다.',
                '하지만 현실의 시스템 관리는 여전히 고단합니다. 쏟아지는 메트릭을 감시하느라 밤을 지새우고, 보안 취약점과 시스템 데드락(Deadlock) 앞에서 늘 긴장해야 하는 것이 관리자들의 일상입니다. 거창한 AI 혁명을 외치면서도 결국 사람이 밤새 설정과 프롬프트를 붙잡고 있다면, 그것은 진정한 진보가 아닙니다.',
                '그래서 저희 지오정보기술은 규모를 불문하고 모든 고객의 본질적인 갈증을 해소할 지능형 시스템 관리 솔루션, ‘가디아(Guardia)’를 선보입니다. 가디아가 지향하는 가치는 명확합니다.',
                '“일은 AI가 하고, 사람은 오직 확인만 한다.”',
                '가디아는 Ollama 온프레미스 sLLM을 기반으로, 철저한 폐쇄망 환경 속에서도 스스로 생각하고 움직입니다. 메신저 한 줄로 자동 배포와 운영을 완결하며, RAG 하이브리드 검색과 Text-to-SQL 기술을 통해 "이번 달 HIGH SR 건수?"라는 자연어 질문 하나로 ITSM DB를 관통하는 명쾌한 답을 제시합니다.',
                '디도스(DDoS) 공격과 구성 드리프트(Drift)의 실시간 차단, llava 비전 모델을 통한 에러 화면 분석, 나라장터 조달 연동부터 주간 보고서 자동 생성까지—그동안 인간의 영혼을 소모시키던 모든 복잡한 데이터 노가다는 가디아의 AI 에이전트들이 24시간 내내 완벽하게 처리해 놓을 것입니다.',
                '이제 최고관리자의 역할은 모니터 앞의 초조한 감시자가 아닙니다. 출근길 따뜻한 커피 한 잔과 함께, 가디아가 결점 없이 차려놓은 대시보드를 읽으며 [확인] 버튼 하나를 품위 있게 누르는 지적인 여유를 누리십시오. AI가 시스템 수호의 99%를 완벽하게 빌드하고, 인간은 단 1%의 핵심 결정권으로 거대한 인프라를 통제하는 최첨단 아키텍처가 여기에 있습니다.',
                '프로젝트의 규모가 얼마이든 관계없습니다. 복잡하고 위험한 시스템의 안녕은 가디아(Guardia)에게 완벽히 일임하시고, 사람은 그 안정성과 여유를 확신하기만 하는 위대한 특이점을 경험해 보십시오. 지오정보기술이 당신의 비즈니스를 가장 품격 있는 미래로 연결해 드리겠습니다. 감사합니다.',
                '“위대한 기술은 인간을 더 바쁘게 만드는 것이 아니라, 기계가 완벽히 수호하는 성벽 위에서 인간이 최고의 여유를 누리게 하는 것이며, 여러분에게 완벽한 여유를 선물하는 것. 그것이 지오정보기술이 존재하는 이유입니다.”',
              ].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: <IconTarget size={40} color="#00A0C8" />, title: '고객 중심', desc: '고객의 성공을 최우선으로 생각하며 최적의 솔루션을 제공합니다' },
                { icon: <IconBolt size={40} color="#00A0C8" />, title: '기술 혁신', desc: 'AI·클라우드 최신 기술로 고객의 디지털 전환을 선도합니다' },
                { icon: <IconHandshake size={40} color="#00A0C8" />, title: '신뢰와 책임', desc: '20년 이상 축적된 신뢰로 책임감 있는 서비스를 제공합니다' },
                { icon: <IconLeaf size={40} color="#00A0C8" />, title: '지속 성장', desc: '구성원과 고객이 함께 성장하는 지속 가능한 파트너십을 추구합니다' },
              ].map((v, i) => (
                <div key={i} className="card" style={{ padding: '32px 24px', textAlign: 'center' }}>
                  <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'center' }}>{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>
  );
}

/* ── 연혁 (API에서 로드) ── */
function useHistory() {
  const [history, setHistory] = useState([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    fetch('/api/history')
      .then(r => r.json())
      .then(data => setHistory(data))
      .catch(() => setHistory([]))
      .finally(() => setLoading(false));
  }, []);
  return { history, loading };
}

/* ── 연혁 (정적 폴백 — API 실패 시) ── */
const HISTORY_FALLBACK = [
  {
    year: '2026', items: [
      'GUARDiA ITSM v2.0 출시 — AI ChatOps 오케스트레이션 플랫폼',
    ]
  },
  {
    year: '2000', items: [
      '(주)지오정보기술 창립',
      '공공기관 IT 인프라 서비스 개시',
    ]
  },
];
const HISTORY = HISTORY_FALLBACK;

function History() {
  const { history, loading } = useHistory();
  const data = history.length > 0 ? history : HISTORY_FALLBACK;

  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>
          {loading ? (
            <div style={{ textAlign: 'center', padding: '40px', color: 'var(--gray-400)' }}>
              연혁을 불러오는 중...
            </div>
          ) : (
            <div className="timeline">
              {data.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>
  );
}

/* ── 조직도 ── */
const DEPTS = [
  {
    name: '개발본부', color: '#0051A2', icon: '💻',
    teams: [
      { name: 'AI개발팀',     ai: true  },
      { name: '플랫폼개발팀', ai: true  },
      { name: '프론트엔드팀', ai: true  },
    ]
  },
  {
    name: '기술본부', color: '#0891b2', icon: '⚙️',
    teams: [
      { name: '인프라팀', ai: true  },
      { name: 'DBA팀',    ai: true  },
      { name: '보안팀',   ai: true  },
    ]
  },
  {
    name: 'PM본부', color: '#7c3aed', icon: '📋',
    teams: [
      { name: 'SI사업팀',  ai: true  },
      { name: 'SM운영팀',  ai: true  },
      { name: 'PMO팀',     ai: true  },
    ]
  },
  {
    name: '경영지원본부', color: '#059669', icon: '🏢',
    teams: [
      { name: '경영기획팀', ai: false },
      { name: '영업팀',     ai: false },
      { name: '인사·총무팀',ai: false },
    ]
  },
];

const LINE = '#c7d2da';

function Organization() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="조직도" />
      <section className="section">
        <div className="container" style={{ maxWidth: '1000px' }}>
          <div className="section-header">
            <span className="section-label">Organization</span>
            <h2 className="section-title">조직 구성</h2>
            <p className="section-desc">
              🤖 표시는 <strong>AI Agent</strong>가 담당하는 팀입니다 — 24시간 자율 운영
            </p>
          </div>

          {/* ── 조직도 ── */}
          <div style={{ textAlign: 'center', userSelect: 'none' }}>

            {/* 대표이사 */}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{
                background: 'var(--secondary)', color: '#fff',
                padding: '14px 48px', borderRadius: '10px',
                fontWeight: '800', fontSize: '17px', letterSpacing: '.5px',
                boxShadow: '0 4px 14px rgba(0,81,162,.25)'
              }}>
                👤 대표이사
              </div>
            </div>

            {/* CEO → 수평선 연결 수직선 */}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <div style={{ width: '2px', height: '36px', background: LINE }} />
            </div>

            {/* 수평 연결선 + 각 본부 수직 드롭 */}
            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
              {/* 수평 연결선 (본부들을 가로지름) */}
              <div style={{
                position: 'absolute', top: '0', left: '12.5%', right: '12.5%',
                height: '2px', background: LINE,
              }} />

              {/* 본부 컬럼들 */}
              <div style={{
                display: 'flex', justifyContent: 'center',
                gap: '0', width: '100%',
              }}>
                {DEPTS.map((dept, i) => (
                  <div key={i} style={{
                    flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center',
                  }}>
                    {/* 수평선 → 본부 수직 드롭 */}
                    <div style={{ width: '2px', height: '36px', background: LINE }} />

                    {/* 본부 박스 */}
                    <div style={{
                      border: `2px solid ${dept.color}`, color: dept.color,
                      background: dept.color + '0d',
                      padding: '10px 16px', borderRadius: '8px',
                      fontWeight: '700', fontSize: '14px', whiteSpace: 'nowrap',
                      width: '90%', maxWidth: '160px',
                    }}>
                      {dept.icon} {dept.name}
                    </div>

                    {/* 본부 → 팀 수직선 */}
                    <div style={{ width: '2px', height: '24px', background: LINE }} />

                    {/* 팀 목록 — 세로 연결선 포함 */}
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0', width: '100%' }}>
                      {dept.teams.map((team, j) => (
                        <div key={j} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                          {j > 0 && <div style={{ width: '2px', height: '10px', background: LINE }} />}
                          <div style={{
                            background: team.ai ? '#eff6ff' : '#f8fafc',
                            border: `1.5px solid ${team.ai ? '#bfdbfe' : '#e2e8f0'}`,
                            color: team.ai ? '#1d4ed8' : '#475569',
                            padding: '7px 12px', borderRadius: '6px',
                            fontSize: '13px', fontWeight: '600', whiteSpace: 'nowrap',
                            display: 'flex', alignItems: 'center', gap: '5px',
                            minWidth: '110px', justifyContent: 'center',
                          }}>
                            {team.ai ? '🤖' : '👤'} {team.name}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* AI Agent 범례 */}
          <div style={{
            marginTop: '48px', padding: '20px 28px',
            background: '#eff6ff', borderRadius: '12px',
            border: '1px solid #bfdbfe',
            display: 'flex', gap: '32px', flexWrap: 'wrap', justifyContent: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '20px' }}>🤖</span>
              <div>
                <div style={{ fontWeight: '700', fontSize: '14px', color: '#1d4ed8' }}>AI Agent 팀</div>
                <div style={{ fontSize: '12px', color: '#3b82f6' }}>Ollama 온프레미스 · 24시간 자율 운영</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '20px' }}>👤</span>
              <div>
                <div style={{ fontWeight: '700', fontSize: '14px', color: '#475569' }}>인간 담당 팀</div>
                <div style={{ fontSize: '12px', color: '#94a3b8' }}>전략 결정 · 최종 승인</div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', paddingLeft: '16px', borderLeft: '1px solid #bfdbfe' }}>
              <span style={{ fontSize: '22px', fontWeight: '900', color: '#1d4ed8' }}>75%</span>
              <div style={{ fontSize: '13px', color: '#3b82f6', fontWeight: '600' }}>AI Agent 운영 비율</div>
            </div>
          </div>

          {/* 인원 현황 */}
          <div className="grid-4" style={{ marginTop: '40px' }}>
            {[
              { label: 'AI Agent', value: '50+', unit: '개', icon: '🤖' },
              { label: 'AI 운영 비율', value: '75', unit: '%', icon: '⚡' },
              { label: '평균 응답시간', value: '0.3', unit: '초', icon: '🚀' },
              { label: '운영 가용성', value: '99.9', unit: '%', icon: '🛡️' },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: '28px', textAlign: 'center' }}>
                <div style={{ fontSize: '28px', marginBottom: '6px' }}>{s.icon}</div>
                <div style={{ fontSize: '32px', fontWeight: '900', color: 'var(--primary)' }}>
                  {s.value}<span style={{ fontSize: '16px' }}>{s.unit}</span>
                </div>
                <p style={{ marginTop: '6px', color: 'var(--gray-600)', fontSize: '13px' }}>{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="/zioinfo-logo.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="/zioinfo-logo-dark.png"
                  alt="(주)지오정보기술 로고 (다크 배경용)"
                  style={{ maxWidth: '320px', width: '100%', objectFit: 'contain' }}
                />
                <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" style={{display:'flex',alignItems:'center',gap:'8px'}}><IconMapPin size={20} color="#00A0C8"/>본사</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" style={{display:'flex',alignItems:'center',gap:'8px'}}><IconBuilding size={20} color="#00A0C8"/>교통 안내</h3>
              <div className="transport-list">
                {[
                  { type: '지하철', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="18" rx="3"/><path d="M9 22v-2M15 22v-2M5 10h14M9 6h6"/><circle cx="9" cy="14" r="1.2" fill="#00A0C8" stroke="none"/><circle cx="15" cy="14" r="1.2" fill="#00A0C8" stroke="none"/></svg>, lines: ['4호선 중앙역 2번 출구 도보 10분', '수인분당선 중앙역 이용 가능'] },
                  { type: '버스',   icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="14" rx="3"/><path d="M3 10h18M7 18v2M17 18v2"/><circle cx="8" cy="14" r="1.2" fill="#00A0C8" stroke="none"/><circle cx="16" cy="14" r="1.2" fill="#00A0C8" stroke="none"/></svg>, lines: ['안산 32, 51, 52번 — 광덕사거리 하차', '직행 3100번 — 안산역 환승 후 이동'] },
                  { type: '자가용', icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00A0C8" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 11l1.5-5h11L19 11"/><rect x="3" y="11" width="18" height="8" rx="2"/><circle cx="7.5" cy="19" r="2"/><circle cx="16.5" cy="19" r="2"/><path d="M3 15h18"/></svg>, 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)' }}>
                <span style={{display:'flex',alignItems:'center',gap:'6px'}}><IconMapPin size={13} color="#00A0C8"/>네이버 지도에서 <strong>"오피스브이 안산"</strong> 검색</span>
              </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>
  );
}