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

const SUB_NAV = [
  { path: '/solution/guardia', label: 'GUARDiA ITSM', badge: 'NEW' },
  { path: '/solution/erp',     label: 'ERP' },
  { path: '/solution/crm',     label: 'CRM' },
  { path: '/solution/bi',      label: 'BI' },
];

function SubNav({ title }) {
  return (
    <>
      <div className="page-hero">
        <div className="container">
          <span className="section-label">Solution</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}
              {n.badge && <span className="badge badge-new" style={{ marginLeft: '6px', fontSize: '10px' }}>{n.badge}</span>}
            </NavLink>
          ))}
        </div>
      </nav>
    </>
  );
}

/* ── ERP ── */
function ERP() {
  const modules = [
    { icon: '💰', name: '재무·회계', desc: '전표처리, 결산, 세무신고, 원가계산 자동화' },
    { icon: '🏭', name: '생산관리', desc: 'BOM 관리, 생산계획, 공정관리, 품질관리' },
    { icon: '📦', name: '구매·재고', desc: '발주, 입출고, 재고 현황, 협력사 포털' },
    { icon: '👥', name: '인사·급여', desc: '근태관리, 급여계산, 조직도, 인사평가' },
    { icon: '🛒', name: '영업·물류', desc: '수주관리, 배송, 매출 분석, 고객 관리' },
    { icon: '📊', name: '경영 분석', desc: 'KPI 대시보드, 예산 vs 실적, 경영 보고서' },
  ];
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="ERP 솔루션" />
      <section className="section">
        <div className="container">
          <div className="sol-hero-grid">
            <div>
              <span className="section-label">Enterprise Resource Planning</span>
              <h2 className="sol-title">공공·중견기업 맞춤형<br /><em>통합 ERP 솔루션</em></h2>
              <p className="sol-desc">
                20년 이상 현대모비스, 한화그룹, 이마트 등 국내 주요 기업의 핵심 업무 시스템을 구축한 경험을 바탕으로,
                고객사의 업무 프로세스에 최적화된 맞춤형 ERP를 제공합니다.
              </p>
              <div className="sol-features">
                {['공공기관 표준 회계 기준 적용', 'Oracle / Tibero DB 지원', '모바일 결재·보고 지원', '기존 레거시 시스템 연계'].map((f, i) => (
                  <div key={i} className="sol-feature-item">
                    <span className="sol-check">✓</span> {f}
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">무료 데모 신청</Link>
                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그 다운로드</Link>
              </div>
            </div>
            <div className="sol-visual erp-visual">
              <div className="sol-screen">
                <div className="sol-screen-header"><span />재무 대시보드</div>
                <div className="sol-chart-bar-wrap">
                  {[80, 65, 90, 72, 88, 55, 95].map((h, i) => (
                    <div key={i} className="sol-chart-bar" style={{ height: h + '%' }} />
                  ))}
                </div>
                <div className="sol-stat-row">
                  <div className="sol-stat"><strong>₩12.4억</strong><span>이번달 매출</span></div>
                  <div className="sol-stat"><strong>98.2%</strong><span>예산 집행률</span></div>
                  <div className="sol-stat"><strong>+18%</strong><span>전월 대비</span></div>
                </div>
              </div>
            </div>
          </div>

          {/* 모듈 */}
          <div style={{ marginTop: '80px' }}>
            <div className="section-header">
              <span className="section-label">Modules</span>
              <h2 className="section-title">6대 핵심 모듈</h2>
            </div>
            <div className="grid-3">
              {modules.map((m, i) => (
                <div key={i} className="card sol-module-card">
                  <div className="sol-module-icon">{m.icon}</div>
                  <h3>{m.name}</h3>
                  <p>{m.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── CRM ── */
function CRM() {
  const features = [
    { icon: '📇', name: '고객 360˚', desc: '고객 정보, 구매이력, 상담이력, 선호도를 단일 뷰로 통합' },
    { icon: '📞', name: '멀티채널 상담', desc: '전화·이메일·채팅·SNS 통합 인입, 상담 이력 자동 기록' },
    { icon: '🎯', name: '영업 파이프라인', desc: '리드 발굴부터 계약까지 전 단계 시각화 관리' },
    { icon: '📨', name: '마케팅 자동화', desc: '고객 세그먼트별 자동 캠페인, 이메일·SMS 발송' },
    { icon: '🤖', name: 'AI 상담 추천', desc: 'Ollama LLM 기반 최적 답변 자동 추천 및 요약' },
    { icon: '📈', name: '성과 분석', desc: '상담사별·채널별 KPI, 고객 만족도, 전환율 리포트' },
  ];
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="CRM 솔루션" />
      <section className="section">
        <div className="container">
          <div className="sol-hero-grid">
            <div>
              <span className="section-label">Customer Relationship Management</span>
              <h2 className="sol-title">AI 기반<br /><em>고객 관계 관리 플랫폼</em></h2>
              <p className="sol-desc">
                삼성전자 차세대 CRM, LG U+ VAN 고도화, 현대캐피탈 차세대 시스템 등
                국내 최대 규모 CRM 프로젝트를 성공적으로 수행한 전문 역량으로 구축합니다.
                온프레미스 AI(Ollama) 연동으로 데이터 외부 유출 없이 지능형 상담을 실현합니다.
              </p>
              <div className="sol-features">
                {['삼성전자·LG·현대 구축 레퍼런스', '온프레미스 AI 상담 추천', 'CTI 연동 (콜센터 솔루션)', '공공기관 개인정보보호법 준수'].map((f, i) => (
                  <div key={i} className="sol-feature-item">
                    <span className="sol-check">✓</span> {f}
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
              </div>
            </div>
            <div className="sol-visual crm-visual">
              <div className="sol-screen">
                <div className="sol-screen-header"><span />고객 상담 현황</div>
                <div className="crm-items">
                  {[
                    { name: '김민준', type: '제품문의', status: '처리중', color: '#f59e0b' },
                    { name: '이서연', type: '기술지원', status: '완료',   color: '#10b981' },
                    { name: '박지후', type: '불만접수', status: '대기',   color: '#ef4444' },
                    { name: '최수아', type: '데모신청', status: '완료',   color: '#10b981' },
                  ].map((c, i) => (
                    <div key={i} className="crm-item">
                      <div className="crm-avatar">{c.name[0]}</div>
                      <div className="crm-info">
                        <strong>{c.name}</strong>
                        <span>{c.type}</span>
                      </div>
                      <span className="crm-status" style={{ color: c.color }}>{c.status}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: '80px' }}>
            <div className="section-header">
              <span className="section-label">Features</span>
              <h2 className="section-title">주요 기능</h2>
            </div>
            <div className="grid-3">
              {features.map((f, i) => (
                <div key={i} className="card sol-module-card">
                  <div className="sol-module-icon">{f.icon}</div>
                  <h3>{f.name}</h3>
                  <p>{f.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ── BI ── */
function BI() {
  const charts = [
    { icon: '📊', name: '경영 대시보드', desc: '실시간 KPI 모니터링, 부서별 성과 지표, 경영진 요약 보고' },
    { icon: '📉', name: '매출·비용 분석', desc: '기간별·제품별·채널별 매출 트렌드, 비용 구조 분석' },
    { icon: '🗺️', name: '지역별 분석', desc: '지도 기반 시각화, 공공기관 지역별 서비스 현황' },
    { icon: '🔮', name: 'AI 예측 분석', desc: '머신러닝 기반 수요 예측, 이상 패턴 자동 탐지' },
    { icon: '📋', name: '자동 보고서', desc: '일·주·월 보고서 자동 생성, 이메일·메신저 배포' },
    { icon: '🔗', name: 'ETL 파이프라인', desc: 'Oracle, SAP, 공공DB 등 다양한 소스 데이터 연계' },
  ];
  return (
    <main id="main-content" className="inner-page">
      <SubNav title="BI 솔루션" />
      <section className="section">
        <div className="container">
          <div className="sol-hero-grid">
            <div>
              <span className="section-label">Business Intelligence</span>
              <h2 className="sol-title">데이터 기반<br /><em>의사결정 플랫폼</em></h2>
              <p className="sol-desc">
                OZ Report, MiPlatform, JasperReports 등 다양한 보고 도구와의 연동 경험을 바탕으로,
                공공기관·중견기업 맞춤형 BI 플랫폼을 구축합니다.
                기존 레거시 DB에서 실시간 데이터를 수집해 경영 인사이트를 제공합니다.
              </p>
              <div className="sol-features">
                {['OZ·MiPlatform·JasperReport 연동', '실시간 대시보드 (WebSocket)', 'Oracle·Tibero·PostgreSQL 지원', '공공기관 표준 보고서 양식'].map((f, i) => (
                  <div key={i} className="sol-feature-item">
                    <span className="sol-check">✓</span> {f}
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: '12px', marginTop: '32px', flexWrap: 'wrap' }}>
                <Link to="/support/contact?type=데모 신청" className="btn btn-primary btn-lg">데모 신청</Link>
                <Link to="/support/catalog" className="btn btn-outline btn-lg">카탈로그</Link>
              </div>
            </div>
            <div className="sol-visual bi-visual">
              <div className="sol-screen">
                <div className="sol-screen-header"><span />경영 대시보드</div>
                <div className="bi-kpis">
                  {[
                    { label:'매출', val:'₩48.2억', up:true,  delta:'+12%' },
                    { label:'비용', val:'₩31.7억', up:false, delta:'-3%' },
                    { label:'이익', val:'₩16.5억', up:true,  delta:'+28%' },
                    { label:'고객', val:'1,240명',  up:true,  delta:'+8%' },
                  ].map((k, i) => (
                    <div key={i} className="bi-kpi">
                      <span className="bi-kpi-label">{k.label}</span>
                      <strong className="bi-kpi-val">{k.val}</strong>
                      <span className="bi-kpi-delta" style={{ color: k.up ? '#10b981' : '#ef4444' }}>
                        {k.delta}
                      </span>
                    </div>
                  ))}
                </div>
                <div className="bi-bar-chart">
                  {['1Q','2Q','3Q','4Q'].map((q, i) => (
                    <div key={i} className="bi-bar-group">
                      <div className="bi-bar-pair">
                        <div className="bi-bar revenue" style={{ height: [60, 75, 85, 100][i] + '%' }} />
                        <div className="bi-bar cost"    style={{ height: [70, 65, 60, 55][i] + '%' }} />
                      </div>
                      <span>{q}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div style={{ marginTop: '80px' }}>
            <div className="section-header">
              <span className="section-label">Features</span>
              <h2 className="section-title">주요 기능</h2>
            </div>
            <div className="grid-3">
              {charts.map((c, i) => (
                <div key={i} className="card sol-module-card">
                  <div className="sol-module-icon">{c.icon}</div>
                  <h3>{c.name}</h3>
                  <p>{c.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

export default function SolutionPage() {
  return (
    <Routes>
      <Route path="erp" element={<ERP />} />
      <Route path="crm" element={<CRM />} />
      <Route path="bi"  element={<BI />} />
    </Routes>
  );
}
