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

const About = () => {
    return (
        <div className="container" style={{ marginTop: '70px', minHeight: '80vh' }}>
            {/* Intro Section with Background */}
            <section style={{
                marginBottom: '60px',
                textAlign: 'center',
                padding: '80px 20px',
                background: `linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.8)), url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80')`,
                backgroundSize: 'cover',
                backgroundPosition: 'center',
                borderRadius: '20px',
                boxShadow: '0 10px 30px rgba(0,0,0,0.05)'
            }}>
                <h1 className="section-title" style={{ marginBottom: '30px' }}>회사 소개</h1>
                <div className="about-intro" style={{ maxWidth: '800px', margin: '0 auto' }}>
                    <p style={{ fontSize: '1.2rem', lineHeight: '1.8', fontWeight: '500', color: '#333' }}>
                        Sokuree Consultant는 현장의 목소리(데이터)에서 필요한 정보를 <br className="hidden md:block" />
                        시스템(System)화 하여 기업의 지속 가능한 성장을 지원합니다.
                    </p>
                </div>
            </section>

            <section className="vision-mission" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginBottom: '80px' }}>
                <div style={{ padding: '30px', background: '#f8f9fa', borderRadius: '10px' }}>
                    <h3>Vision</h3>
                    <p>누구나 쉽게 스마트 경영을 실현하는 세상</p>
                </div>
                <div style={{ padding: '30px', background: '#f8f9fa', borderRadius: '10px' }}>
                    <h3>Mission</h3>
                    <p>복잡한 기술을 현장에 맞게 단순화하고, 실질적인 성과를 창출하는 것</p>
                </div>
            </section>

            <section className="expert-profile" style={{ marginBottom: '80px' }}>
                <h2 className="section-title">대표 컨설턴트</h2>
                <div style={{ display: 'flex', gap: '50px', alignItems: 'center', flexWrap: 'wrap', justifyContent: 'center' }}>
                    <div style={{ flex: '0 0 350px' }}>
                        <img
                            src={consultantProfile}
                            alt="대표 컨설턴트"
                            style={{
                                width: '100%',
                                borderRadius: '20px',
                                boxShadow: '0 15px 30px rgba(0,0,0,0.1)'
                            }}
                        />
                    </div>
                    <div style={{ flex: '1', minWidth: '300px' }}>
                        <div style={{ background: 'white', padding: '30px', borderRadius: '20px', border: '1px solid #eee' }}>
                            <ul style={{ listStyle: 'none', padding: 0, lineHeight: '2.5', fontSize: '1.1rem' }}>
                                <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;
