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

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

    const handleDownloadGuide = () => {
        alert("현재 자료를 준비 중입니다. 잠시만 기다려 주세요!");
    };

    const handleApply = () => {
        navigate('/contact');
    };

    return (
        <div className="service-container">

            {/* Header Section */}
            <div className="service-header">
                <h1 className="service-title">전문가 양성 교육</h1>
                <p className="service-subtitle">
                    Sokuree Consultant의 체계적인 교육 프로그램을 통해 실무 역량을 강화해 보세요.
                </p>
            </div>

            <div className="service-content-wrapper">

                {/* Section 1: Education Purpose (3 Cards) */}
                <div className="service-section">
                    <h2 className="section-label">교육 목적</h2>
                    <p className="section-desc">현장 중심의 실무형 인재 양성을 목표로 하고 있어요.</p>

                    <div className="purpose-grid">
                        {/* Purpose Card 1 */}
                        <div className="purpose-card">
                            <h3 className="purpose-card-title">스마트 제조 혁신 지원</h3>
                            <p className="purpose-card-text">중소기업의 스마트한<br />제조 환경 구축을 돕습니다.</p>
                            <div className="purpose-icon">🏭</div>
                        </div>

                        {/* Purpose Card 2 */}
                        <div className="purpose-card">
                            <h3 className="purpose-card-title">분야별 기술전문가 양성</h3>
                            <p className="purpose-card-text">전문 기술 역량 강화를 통한<br />핵심 인재 육성</p>
                            <div className="purpose-icon">👥</div>
                        </div>

                        {/* Purpose Card 3 */}
                        <div className="purpose-card">
                            <h3 className="purpose-card-title">현장 중심 실무 학습</h3>
                            <p className="purpose-card-text">이론과 실무를 겸비한<br />맞춤형 커리큘럼</p>
                            <div className="purpose-icon">📘</div>
                        </div>
                    </div>
                </div>


                {/* Section 2: Curriculum (4 Numbered Columns) */}
                <div className="service-section">
                    <h2 className="section-label">
                        Sokuree Consultant<br />교육과정
                    </h2>
                    <p className="section-desc">현장 전문가로 성장할 수 있는 다양한 교육 과정을 경험해보세요.</p>

                    <div className="curriculum-grid">

                        {/* Col 1 */}
                        <div className="curriculum-card">
                            <span className="curriculum-number">01</span>
                            <h3 className="curriculum-title">경영시스템<br />요구사항 해설</h3>
                            <ul className="curriculum-list">
                                <li><span className="curriculum-bullet">•</span> ISO 9001 (품질)</li>
                                <li><span className="curriculum-bullet">•</span> ISO 14001 (환경)</li>
                                <li><span className="curriculum-bullet">•</span> ISO 45001 (안전보건)</li>
                                <li><span className="curriculum-bullet">•</span> 시스템 문서화 실무</li>
                            </ul>
                        </div>

                        {/* Col 2 */}
                        <div className="curriculum-card">
                            <span className="curriculum-number">02</span>
                            <h3 className="curriculum-title">내부심사원<br />양성 과정</h3>
                            <ul className="curriculum-list">
                                <li><span className="curriculum-bullet">•</span> 심사 기법 및 절차</li>
                                <li><span className="curriculum-bullet">•</span> 체크리스트 작성</li>
                                <li><span className="curriculum-bullet">•</span> 부적합 보고서 작성</li>
                                <li><span className="curriculum-bullet">•</span> Role-Play 실습</li>
                            </ul>
                        </div>

                        {/* Col 3 */}
                        <div className="curriculum-card">
                            <span className="curriculum-number">03</span>
                            <h3 className="curriculum-title">IATF 16949<br />Core Tools</h3>
                            <ul className="curriculum-list">
                                <li><span className="curriculum-bullet">•</span> APQP / PPAP</li>
                                <li><span className="curriculum-bullet">•</span> FMEA (고장모드)</li>
                                <li><span className="curriculum-bullet">•</span> SPC (통계적공정)</li>
                                <li><span className="curriculum-bullet">•</span> MSA (측정분석)</li>
                            </ul>
                        </div>

                        {/* Col 4 */}
                        <div className="curriculum-card" style={{ justifyContent: 'space-between' }}>
                            <div>
                                <span className="curriculum-number">04</span>
                                <h3 className="curriculum-title">교육문의 및<br />신청안내</h3>
                                <ul className="curriculum-list">
                                    <li>총 32개 과정 운영 중</li>
                                    <li>맞춤형 출장 교육 가능</li>
                                </ul>
                            </div>
                            <button className="curriculum-btn" onClick={handleDownloadGuide}>
                                <span style={{ fontSize: '1.2rem' }}>📥</span> 교육안내서 보기
                            </button>
                        </div>

                    </div>
                </div>

                {/* Bottom CTA Banner */}
                <div className="cta-banner">
                    <div>
                        <h2 className="cta-title">Sokuree Consultant 교육과정을 지금 신청해 보세요.</h2>
                        <p className="cta-text">
                            전문가 양성과정 교육안내서 및 신청 방식은 아래 버튼을 통해 확인하실 수 있습니다.
                        </p>
                    </div>
                    <button className="cta-button" onClick={handleApply}>
                        교육 신청하기
                    </button>
                </div>
            </div>
        </div>
    );
};
export default ServiceDetail;
