import { Link } from 'react-router-dom';

const Solutions = () => {
    const services = [
        {
            id: 'education',
            title: '교육 서비스',
            description: 'ISO 내부심사원 양성, CORE-TOOLS, 직무 능력 향상 교육을 제공합니다.',
            icon: '🎓'
        },
        {
            id: 'iso-consulting',
            title: 'ISO 경영인증 컨설팅',
            description: 'ISO 9001/14001, IATF 16949 등 시스템 인증 취득 및 운영 컨설팅을 지원합니다.',
            icon: '📜'
        },
        {
            id: 'smart-factory',
            title: '스마트 제조',
            description: '데이터 수집/분석, AI 연계, 생산 효율화를 위한 지능형 공장을 구현합니다.',
            icon: '🏭'
        },
        {
            id: 'groupware',
            title: '그룹웨어 개발',
            description: '설비, 재고, 공정 관리 등 기업 환경에 최적화된 업무 시스템을 개발합니다.',
            icon: '💻'
        }
    ];

    return (
        <section id="services" className="section-padding">
            <div className="container">
                <h2 className="section-title">서비스 3대 축</h2>
                <div className="solutions-grid">
                    {services.map((item) => (
                        <div key={item.id} className="solution-card">
                            <div className="solution-icon">{item.icon}</div>
                            <h3>{item.title}</h3>
                            <p>{item.description}</p>
                            <Link to={`/services/${item.id}`} className="service-link">자세히 보기 &rarr;</Link>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Solutions;
