import React from 'react';
import { Link } from 'react-router-dom';
import './Footer.css';
import { IconPhone, IconEmail, IconMapPin, IconFax, IconGlobe, IconShield, IconCheckCircle } from '../Icons';

const FOOTER_MENUS = [
  {
    title: '회사소개',
    links: [
      { label: 'CEO 인사말',  path: '/company/greeting' },
      { label: '연혁',        path: '/company/history' },
      { label: '조직도',      path: '/company/organization' },
      { label: '오시는 길',   path: '/company/location' },
    ]
  },
  {
    title: '솔루션',
    links: [
      { label: 'GUARDiA ITSM', path: '/solution/guardia' },
      { label: 'ERP',           path: '/solution/erp' },
      { label: 'CRM',           path: '/solution/crm' },
      { label: 'BI',            path: '/solution/bi' },
    ]
  },
  {
    title: '고객지원',
    links: [
      { label: '공지사항', path: '/support/notice' },
      { label: 'FAQ',      path: '/support/faq' },
      { label: '카탈로그', path: '/support/catalog' },
      { label: '문의하기', path: '/support/contact' },
    ]
  },
  {
    title: '채용',
    links: [
      { label: '채용공고', path: '/recruit/jobs' },
      { label: '복리후생', path: '/recruit/welfare' },
      { label: '지원하기', path: '/recruit/apply' },
    ]
  },
];

export default function Footer() {
  return (
    <footer className="footer" role="contentinfo">
      <div className="footer-top">
        <div className="container footer-top-inner">
          {/* 회사 정보 */}
          <div className="footer-brand">
            <Link to="/" className="footer-logo">
              <img src="/logo_bottom.png" alt="(주)지오정보기술 로고" height="36"
                   onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block'; }} />
              <span className="footer-logo-text" style={{display:'none'}}>
                <strong>Zio</strong>Info
              </span>
            </Link>
            <p className="footer-tagline">
              AI 기반 레거시 인프라 자율 운영 플랫폼<br/>
              GUARDiA ITSM으로 공공기관 IT를 혁신합니다.
            </p>
            <div className="footer-contact-list">
              <div className="footer-contact-item">
                <IconPhone size={15} color="#00A0C8" />
                <span className="contact-label">대표전화</span>
                <a href="tel:031-483-1766">031-483-1766</a>
              </div>
              <div className="footer-contact-item">
                <IconFax size={15} color="#00A0C8" />
                <span className="contact-label">팩스</span>
                <span>031-483-1767</span>
              </div>
              <div className="footer-contact-item">
                <IconEmail size={15} color="#00A0C8" />
                <span className="contact-label">이메일</span>
                <a href="mailto:info@zioinfo.co.kr">info@zioinfo.co.kr</a>
              </div>
              <div className="footer-contact-item">
                <IconMapPin size={15} color="#00A0C8" />
                <span className="contact-label">주소</span>
                <span>경기도 안산시 단원구 광덕4로 220 오피스브이 578호</span>
              </div>
              <div className="footer-contact-item">
                <IconGlobe size={15} color="#00A0C8" />
                <span className="contact-label">웹사이트</span>
                <a href="https://zioinfo.co.kr">zioinfo.co.kr</a>
              </div>
            </div>
            <div style={{ display: 'flex', gap: '12px', marginTop: '16px', flexWrap: 'wrap' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '12px', color: '#7ba7c4' }}>
                <IconShield size={13} color="#00A0C8" /> GS인증 1등급 신청완료
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '12px', color: '#7ba7c4' }}>
                <IconCheckCircle size={13} color="#00A0C8" /> ISO 9001 인증
              </span>
            </div>
          </div>

          {/* 메뉴 그룹 */}
          {FOOTER_MENUS.map((group, i) => (
            <div key={i} className="footer-menu-group">
              <h3 className="footer-menu-title">{group.title}</h3>
              <ul className="footer-menu-list">
                {group.links.map((link, j) => (
                  <li key={j}>
                    <Link to={link.path}>{link.label}</Link>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      {/* 하단 바 */}
      <div className="footer-bottom">
        <div className="container footer-bottom-inner">
          <div className="footer-legal">
            <Link to="/privacy">개인정보처리방침</Link>
            <Link to="/terms">이용약관</Link>
            <Link to="/sitemap">사이트맵</Link>
          </div>
          <p className="footer-copyright">
            Copyright &copy; 2026 (주)지오정보기술 All Rights Reserved.
          </p>
          <div className="footer-powered">
            Powered by <strong>GUARDiA ITSM</strong>
          </div>
        </div>
      </div>
    </footer>
  );
}
