import React from 'react';
import './Cases.css';

const Cases = () => {
    const caseStudies = [
        {
            id: 'case-sqc',
            category: '교육 / Education',
            title: 'Core Tools - SQC 강의 사례',
            image: '/sqc_case.jpg',
            result: '현장 데이터 분석 역량 강화',
            details: '통계적 공정관리(SPC)의 핵심 이론과 실습을 통해 현장에서 발생하는 데이터의 변동을 이해하고, 이를 분석하여 공정 능력을 지속적으로 개선할 수 있는 전문가를 양성했습니다.'
        },
        {
            id: 'case-fmea',
            category: '교육 / Education',
            title: 'FMEA (고장모드예측) 강의 사례',
            image: '/fmea_case.jpg',
            result: '리스크 기반 사고 및 예방 관리 체계 확립',
            details: '제품 및 공정 개발 단계에서 발생할 수 있는 잠재적 고장 모드를 사전에 식별하고, 위험 우선순위(RPN) 분석을 통해 효과적인 개선 대책을 수립하는 실무 역량을 확보했습니다.'
        },
        {
            id: 1,
            category: '스마트 제조 / Smart Factory',
            title: 'H사 - 자동차 부품 제조 공정 데이터 수집 시스템',
            // Placeholder image or remove image requirement for old items?
            // Let's use a subtle background color or pattern if no image, or a placeholder.
            image: null,
            result: '불량률 50% 감소, 실시간 설비 모니터링 구현',
            details: '기존 수기 작성 작업일보를 태블릿 기반의 MES로 전환하여 데이터 누락을 방지하고, 설비 PLC와 연동하여 가동률을 실시간으로 집계했습니다.'
        },
        {
            id: 2,
            category: 'ISO 컨설팅 / Consulting',
            title: 'D사 - 통합경영시스템 인증 획득',
            image: null,
            result: '해외 수출 판로 개척 성공 (유럽 CE 인증 연계)',
            details: '품질 매뉴얼 및 절차서 제정을 넘어, 실제 현장에서 지킬 수 있는 프로세스를 정립하고 내부 심사원 교육을 통해 자생력을 확보했습니다.'
        }
    ];

    return (
        <div className="cases-container">
            <div className="cases-content-wrapper">
                <div className="cases-header">
                    <h1 className="cases-title">프로젝트 / 성공 사례</h1>
                    <p className="cases-subtitle">Sokuree Consultant가 만들어낸 변화의 기록입니다.</p>
                </div>

                <div className="cases-grid">
                    {caseStudies.map(study => (
                        <div key={study.id} className="case-card">
                            {/* Image Section */}
                            {study.image ? (
                                <div className="case-image-wrapper">
                                    <img
                                        src={study.image}
                                        alt={study.title}
                                        className="case-image"
                                    />
                                    <div className="case-category-badge">
                                        {study.category.split('/')[0]}
                                    </div>
                                </div>
                            ) : (
                                <div className="case-bar"></div>
                            )}

                            {/* Content Section */}
                            <div className="case-content">
                                {!study.image && (
                                    <div className="case-category-text">
                                        {study.category}
                                    </div>
                                )}
                                <h3 className="case-card-title">{study.title}</h3>
                                <div>
                                    <span className="case-result-badge">
                                        성과: {study.result}
                                    </span>
                                </div>
                                <p className="case-details">
                                    {study.details}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
};
export default Cases;
