import React from 'react';
import { useNavigate } from 'react-router-dom';
import './MainPage.css';

const MainPage = () => {
  const navigate = useNavigate();

  return (
    <div className="main-page">
      <div className="main-container">
        <header className="main-header">
          <h1>TK Material Planning System</h1>
          <p>자재 계획 및 BOM 관리 시스템</p>
        </header>

        <div className="main-content">
          <div className="banner-container">
            <div 
              className="main-banner job-registration-banner"
              onClick={() => navigate('/job-registration')}
            >
              <div className="banner-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <polyline points="14,2 14,8 20,8"/>
                  <line x1="16" y1="13" x2="8" y2="13"/>
                  <line x1="16" y1="17" x2="8" y2="17"/>
                </svg>
              </div>
              <div className="banner-content">
                <h2>기본정보 등록</h2>
                <p>새로운 프로젝트의 Job No. 및 기본 정보를 등록합니다</p>
                <div className="banner-action">등록하기 →</div>
              </div>
            </div>

            <div 
              className="main-banner bom-management-banner"
              onClick={() => navigate('/project-selection')}
            >
              <div className="banner-icon">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="3" y="4" width="18" height="16" rx="2"/>
                  <path d="M7 2v4"/>
                  <path d="M17 2v4"/>
                  <path d="M14 12h.01"/>
                  <path d="M10 12h.01"/>
                  <path d="M16 16h.01"/>
                  <path d="M12 16h.01"/>
                  <path d="M8 16h.01"/>
                </svg>
              </div>
              <div className="banner-content">
                <h2>BOM 관리</h2>
                <p>기존 프로젝트의 BOM 자료를 관리하고 분석합니다</p>
                <div className="banner-action">관리하기 →</div>
              </div>
            </div>
          </div>

          <div className="feature-info">
            <div className="feature-item">
              <h3>📊 자재 분석</h3>
              <p>엑셀 파일 업로드를 통한 자동 자재 분류 및 분석</p>
            </div>
            <div className="feature-item">
              <h3>💰 구매 최적화</h3>
              <p>리비전별 자재 비교 및 구매 확정 관리</p>
            </div>
            <div className="feature-item">
              <h3>🔧 Tubing 관리</h3>
              <p>제조사별 튜빙 규격 및 품목번호 통합 관리</p>
            </div>
          </div>
        </div>

        <footer className="main-footer">
          <p>&copy; 2025 Technical Korea. All rights reserved.</p>
        </footer>
      </div>
    </div>
  );
};

export default MainPage;