import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom';
import './Common.css';
import './Support.css';

const SUB_NAV = [
  { path: '/support/notice',  label: '공지사항' },
  { path: '/support/faq',     label: 'FAQ' },
  { path: '/support/catalog', label: '카탈로그' },
  { path: '/support/contact', label: '문의하기' },
];

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

/* ── 공지사항 ── */
const NOTICES = [
  { id:1, cat:'공지',   title:'GUARDiA ITSM v2.0 정식 출시 안내',                           date:'2026.05.15', hot:true  },
  { id:2, cat:'공지',   title:'2026년 상반기 유지보수 점검 일정 안내 (6월 1일~2일)',          date:'2026.05.10', hot:false },
  { id:3, cat:'보안',   title:'Apache Log4j 취약점 긴급 패치 안내',                          date:'2026.04.28', hot:false },
  { id:4, cat:'공지',   title:'개인정보처리방침 개정 안내 (2026년 4월)',                      date:'2026.04.01', hot:false },
  { id:5, cat:'이벤트', title:'2026 공공기관 디지털전환 세미나 참가 안내 (5월 20일)',         date:'2026.03.25', hot:false },
  { id:6, cat:'공지',   title:'GUARDiA ITSM GS인증 1등급 신청 완료 안내',                   date:'2026.03.10', hot:false },
  { id:7, cat:'공지',   title:'신규 파트너사 협약 체결 — Tibero 공식 파트너 등록',           date:'2026.02.20', hot:false },
  { id:8, cat:'보안',   title:'2026년 정보보안 교육 실시 안내 (임직원 필독)',                 date:'2026.01.15', hot:false },
  { id:9, cat:'공지',   title:'2025년 사업성과 및 2026년 사업계획 발표',                     date:'2026.01.02', hot:false },
  { id:10,'cat':'공지', title:'연말연시 고객지원팀 운영시간 안내 (12/24~1/3)',                date:'2025.12.20', hot:false },
];
const CAT_COLORS = { '공지':'var(--primary)', '보안':'var(--danger)', '이벤트':'var(--accent)' };

function Notice() {
  const [selected, setSelected] = useState(null);
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="공지사항" />
      <section className="section">
        <div className="container" style={{ maxWidth: '860px' }}>
          {selected ? (
            <div className="notice-detail">
              <button className="notice-back" onClick={() => setSelected(null)}>← 목록으로</button>
              <div className="notice-detail-header">
                <span className="notice-cat" style={{ background: CAT_COLORS[selected.cat] + '18', color: CAT_COLORS[selected.cat] }}>{selected.cat}</span>
                <h2>{selected.title}</h2>
                <p className="notice-date">{selected.date}</p>
              </div>
              <div className="notice-body">
                <p>안녕하세요, (주)지오정보기술입니다.</p>
                <p>본 공지는 <strong>{selected.title}</strong>에 관한 안내입니다.</p>
                <p>자세한 사항은 고객지원팀(031-483-1766)으로 문의해 주시기 바랍니다.</p>
                <p>감사합니다.</p>
              </div>
            </div>
          ) : (
            <div className="notice-list">
              <div className="notice-header-row">
                <span>구분</span><span>제목</span><span>등록일</span>
              </div>
              {NOTICES.map(n => (
                <div key={n.id} className="notice-row" onClick={() => setSelected(n)}>
                  <span className="notice-cat" style={{ background: CAT_COLORS[n.cat] + '18', color: CAT_COLORS[n.cat] }}>{n.cat}</span>
                  <span className="notice-title-text">
                    {n.hot && <span className="notice-hot">HOT</span>}
                    {n.title}
                  </span>
                  <span className="notice-date">{n.date}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

/* ── FAQ ── */
const FAQS = [
  {
    cat: 'GUARDiA ITSM',
    items: [
      { q: 'GUARDiA ITSM은 어떤 제품인가요?', a: 'GUARDiA ITSM은 메신저 한 줄 명령으로 1,000개 이상 공공기관의 레거시 IT 인프라를 자동 운영하는 AI 기반 ChatOps 플랫폼입니다. 대상 서버에 별도 소프트웨어 설치 없이 표준 SSH/SFTP 프로토콜만으로 배포·운영·모니터링을 자동화합니다.' },
      { q: '서버에 에이전트를 설치해야 하나요?', a: '아니요. GUARDiA ITSM은 에이전트리스(Agentless) 방식으로 동작합니다. 대상 서버에 어떠한 소프트웨어도 설치할 필요가 없으며, 표준 SSH(22번 포트)만 열려 있으면 즉시 연동 가능합니다.' },
      { q: '클라우드 없이 사용할 수 있나요?', a: '예. GUARDiA ITSM은 완전한 온프레미스(On-premise) 솔루션으로, 외부 클라우드나 인터넷 연결 없이 폐쇄망 환경에서도 100% 동작합니다. AI 엔진(Ollama)도 내부 서버에서 구동됩니다.' },
      { q: '지원되는 운영체제는 무엇인가요?', a: 'GUARDiA ITSM 서버: Ubuntu 20.04+, CentOS 7+, RHEL 8+, Windows Server 2019+를 지원합니다. 관리 대상 서버: SSH가 지원되는 모든 Linux/Unix/Windows Server 환경에서 사용 가능합니다.' },
    ]
  },
  {
    cat: '도입·계약',
    items: [
      { q: '도입 비용은 어떻게 되나요?', a: '기관 규모와 관리 서버 수에 따라 맞춤 견적을 제공합니다. 7일 무료 체험판을 먼저 신청하신 후 문의 주시면 상세한 견적을 안내해 드립니다.' },
      { q: '체험판을 사용할 수 있나요?', a: '예. 7일 무료 체험판을 제공합니다. 문의하기 또는 GUARDiA 페이지의 "무료 데모 신청" 버튼을 통해 신청하시면 영업일 기준 1일 이내에 안내 드립니다.' },
      { q: '공공기관 나라장터 조달 구매가 가능한가요?', a: '예. GUARDiA ITSM은 조달청 나라장터 등록을 준비 중이며, 공공기관 입찰을 통한 구매를 지원합니다. 자세한 사항은 영업팀(031-483-1766)에 문의해 주십시오.' },
    ]
  },
  {
    cat: '기술 지원',
    items: [
      { q: '기술 지원은 어떻게 받을 수 있나요?', a: '이메일(support@zioinfo.co.kr), 전화(031-483-1766), GUARDiA ITSM 내 챗봇을 통해 기술 지원을 제공합니다. 운영 중 긴급 장애는 24시간 온콜 지원이 가능합니다.' },
      { q: '업그레이드는 어떻게 진행되나요?', a: '정기 업데이트는 연 2~4회 제공되며, 보안 패치는 즉시 제공됩니다. 업그레이드는 GUARDiA 내 자동 배포 기능을 통해 다운타임 없이 진행할 수 있습니다.' },
    ]
  },
];

function FAQ() {
  const [openIdx, setOpenIdx] = useState({});
  const toggle = (ci, qi) => setOpenIdx(p => ({ ...p, [`${ci}-${qi}`]: !p[`${ci}-${qi}`] }));
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="자주 묻는 질문" />
      <section className="section">
        <div className="container" style={{ maxWidth: '860px' }}>
          <div className="section-header">
            <span className="section-label">FAQ</span>
            <h2 className="section-title">자주 묻는 질문</h2>
          </div>
          {FAQS.map((cat, ci) => (
            <div key={ci} className="faq-cat-wrap">
              <h3 className="faq-cat-title">{cat.cat}</h3>
              {cat.items.map((item, qi) => {
                const key = `${ci}-${qi}`;
                const open = openIdx[key];
                return (
                  <div key={qi} className={`faq-item ${open ? 'open' : ''}`}>
                    <button className="faq-q" onClick={() => toggle(ci, qi)}>
                      <span className="faq-icon">{open ? '−' : '+'}</span>
                      {item.q}
                    </button>
                    {open && <div className="faq-a">{item.a}</div>}
                  </div>
                );
              })}
            </div>
          ))}
          <div className="faq-more">
            <p>원하시는 답변을 찾지 못하셨나요?</p>
            <a href="/support/contact" className="btn btn-primary">1:1 문의하기</a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── 카탈로그 ── */
const CATALOGS = [
  { title:'GUARDiA ITSM v2.0 제품 카탈로그',   desc:'GUARDiA ITSM 전체 기능 및 도입 가이드',        pages:'24p', size:'4.2MB', date:'2026.05', icon:'⚡', color:'var(--primary)' },
  { title:'GUARDiA ITSM 기술 명세서',          desc:'API 명세, 아키텍처, 보안 설계 문서',            pages:'48p', size:'8.1MB', date:'2026.05', icon:'📐', color:'#7c3aed' },
  { title:'ERP 솔루션 카탈로그',               desc:'공공·중견기업 맞춤형 ERP 모듈 소개',           pages:'16p', size:'3.5MB', date:'2026.03', icon:'💰', color:'#059669' },
  { title:'CRM 솔루션 카탈로그',               desc:'AI 기반 고객관리 플랫폼 소개',                 pages:'12p', size:'2.8MB', date:'2026.03', icon:'📞', color:'#d97706' },
  { title:'BI 솔루션 카탈로그',                desc:'경영 분석 및 대시보드 플랫폼 소개',            pages:'12p', size:'2.4MB', date:'2026.02', icon:'📊', color:'#0891b2' },
  { title:'지오정보기술 회사 소개서',           desc:'회사 연혁, 사업 영역, 주요 레퍼런스',          pages:'20p', size:'5.6MB', date:'2026.01', icon:'🏢', color:'var(--secondary)' },
];

function Catalog() {
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="카탈로그" />
      <section className="section">
        <div className="container">
          <div className="section-header">
            <span className="section-label">Catalog</span>
            <h2 className="section-title">자료실</h2>
            <p className="section-desc">제품 카탈로그 및 기술 문서를 다운로드하세요</p>
          </div>
          <div className="grid-3">
            {CATALOGS.map((c, i) => (
              <div key={i} className="card catalog-card">
                <div className="catalog-icon-wrap" style={{ background: c.color + '18' }}>
                  <span className="catalog-icon" style={{ color: c.color }}>{c.icon}</span>
                </div>
                <div className="catalog-info">
                  <h3 className="catalog-title">{c.title}</h3>
                  <p className="catalog-desc">{c.desc}</p>
                  <div className="catalog-meta">
                    <span>{c.pages}</span>
                    <span>{c.size}</span>
                    <span>{c.date}</span>
                  </div>
                </div>
                <button className="catalog-btn" onClick={() => alert('문의하기 페이지에서 카탈로그를 요청해주세요.')}>
                  📥 다운로드
                </button>
              </div>
            ))}
          </div>
          <div className="catalog-request">
            <h3>다른 자료가 필요하신가요?</h3>
            <p>NDA 자료, 기술 제안서, 가격표 등 별도 문서는 영업팀에 요청해 주십시오.</p>
            <a href="/support/contact" className="btn btn-outline btn-lg">자료 요청하기</a>
          </div>
        </div>
      </section>
    </main>
  );
}

export default function Support() {
  return (
    <Routes>
      <Route path="notice"  element={<Notice />} />
      <Route path="faq"     element={<FAQ />} />
      <Route path="catalog" element={<Catalog />} />
      <Route path="*"       element={<Notice />} />
    </Routes>
  );
}
