import React from 'react';
import { Link } from 'react-router-dom';
import './Common.css';

const MAP = [
  {
    title: '홈', icon: '🏠',
    links: [{ label: '메인 홈페이지', path: '/' }],
  },
  {
    title: '회사소개', icon: '🏢',
    links: [
      { label: 'CEO 인사말',  path: '/company/greeting' },
      { label: '연혁',        path: '/company/history' },
      { label: '조직도',      path: '/company/organization' },
      { label: 'CI 소개',     path: '/company/ci' },
      { label: '오시는 길',   path: '/company/location' },
    ],
  },
  {
    title: '솔루션', icon: '🛡️',
    links: [
      { label: 'GUARDiA ITSM', path: '/solution/guardia', badge: 'NEW' },
      { label: 'ERP 솔루션',   path: '/solution/erp' },
      { label: 'CRM 솔루션',   path: '/solution/crm' },
      { label: 'BI 솔루션',    path: '/solution/bi' },
    ],
  },
  {
    title: '사업실적', icon: '📊',
    links: [
      { label: '구축 레퍼런스', path: '/business/reference' },
      { label: '파트너',        path: '/business/partner' },
    ],
  },
  {
    title: '고객지원', icon: '💬',
    links: [
      { label: '공지사항',  path: '/support/notice' },
      { label: 'FAQ',       path: '/support/faq' },
      { label: '카탈로그',  path: '/support/catalog' },
      { label: '문의하기',  path: '/support/contact' },
    ],
  },
  {
    title: '채용', icon: '👥',
    links: [
      { label: '채용공고',  path: '/recruit/jobs' },
      { label: '복리후생',  path: '/recruit/welfare' },
      { label: '지원하기',  path: '/recruit/apply' },
    ],
  },
  {
    title: '뉴스', icon: '📰',
    links: [
      { label: '뉴스룸',      path: '/news/newsroom' },
      { label: '기술 블로그', path: '/news/blog' },
    ],
  },
  {
    title: '회원', icon: '🔑',
    links: [
      { label: '로그인 / 회원가입', path: '/login' },
    ],
  },
  {
    title: '정책', icon: '📋',
    links: [
      { label: '개인정보처리방침', path: '/privacy' },
      { label: '이용약관',        path: '/terms' },
      { label: '사이트맵',        path: '/sitemap' },
    ],
  },
];

export default function Sitemap() {
  return (
    <main id="main-content" className="inner-page">
      <section className="section">
        <div className="container" style={{ maxWidth: '960px' }}>
          <div className="section-header">
            <span className="section-label">Sitemap</span>
            <h1 className="section-title">사이트맵</h1>
            <p className="section-desc">(주)지오정보기술 홈페이지 전체 메뉴 안내</p>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
            gap: '24px',
            marginTop: '40px',
          }}>
            {MAP.map((section, i) => (
              <div key={i} style={{
                background: '#fff',
                borderRadius: '12px',
                padding: '24px',
                boxShadow: '0 2px 12px rgba(0,0,0,.06)',
                border: '1px solid var(--gray-200)',
              }}>
                <h2 style={{
                  fontSize: '16px', fontWeight: '700', color: 'var(--gray-900)',
                  marginBottom: '16px', display: 'flex', alignItems: 'center', gap: '8px',
                }}>
                  <span>{section.icon}</span> {section.title}
                </h2>
                <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '10px' }}>
                  {section.links.map((link, j) => (
                    <li key={j}>
                      <Link to={link.path} style={{
                        color: 'var(--primary)',
                        textDecoration: 'none',
                        fontSize: '14px',
                        display: 'flex',
                        alignItems: 'center',
                        gap: '6px',
                      }}>
                        <span style={{ color: 'var(--gray-400)', fontSize: '12px' }}>›</span>
                        {link.label}
                        {link.badge && (
                          <span style={{
                            fontSize: '10px', padding: '1px 6px',
                            background: 'var(--accent)', color: '#fff',
                            borderRadius: '8px', fontWeight: '700',
                          }}>
                            {link.badge}
                          </span>
                        )}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}