import consultantProfile from '../assets/consultant_profile.png';

const About = () => {
    return (
        <div className="container" style={{ marginTop: '70px', minHeight: '80vh' }}>
            {/* Intro Section with Background */}
            <section className="about-hero">
                <h1 className="section-title" style={{ marginBottom: '30px' }}>회사 소개</h1>
                <div className="about-intro">
                    <p>
                        Sokuree Consultant는 현장의 목소리(데이터)에서 필요한 정보를 <br className="hidden md:block" />
                        시스템(System)화 하여 기업의 지속 가능한 성장을 지원합니다.
                    </p>
                </div>
            </section>

            <section className="vision-mission-grid">
                <div className="vision-card">
                    <h3>Vision</h3>
                    <p>누구나 쉽게 스마트 경영을 실현하는 세상</p>
                </div>
                <div className="vision-card">
                    <h3>Mission</h3>
                    <p>복잡한 기술을 현장에 맞게 단순화하고, 실질적인 성과를 창출하는 것</p>
                </div>
            </section>

            <section className="expert-profile">
                <h2 className="section-title">대표 컨설턴트</h2>
                <div className="profile-wrapper">
                    <div className="profile-image-container">
                        <img
                            src={consultantProfile}
                            alt="대표 컨설턴트"
                            className="profile-image"
                        />
                    </div>
                    <div className="profile-content-container">
                        <div className="profile-card">
                            <ul className="profile-list">
                                <li className="flex items-center">
                                    <span style={{ marginRight: '10px' }}>✅</span>
                                    품질관리 기술사
                                </li>
                                <li className="flex items-center">
                                    <span style={{ marginRight: '10px' }}>✅</span>
                                    ISO/9001/14001/45001 국제심사원
                                </li>
                                <li className="flex items-center">
                                    <span style={{ marginRight: '10px' }}>✅</span>
                                    IATF16949 Core Tools 강의
                                </li>
                                <li className="flex items-center">
                                    <span style={{ marginRight: '10px' }}>✅</span>
                                    스마트공장 구축 지원사업 수행
                                </li>
                                <li className="flex items-center">
                                    <span style={{ marginRight: '10px' }}>✅</span>
                                    경기테크노파크 기술닥터
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
};
export default About;