import Hero from '../components/Hero';
import Solutions from '../components/Solutions';
import Contact from '../components/Contact';
import { Link } from 'react-router-dom';
import { usePosts } from '../hooks/usePosts';
import PostCard from '../components/PostCard';

const Home = () => {
    return (
        <>
            <Hero />

            {/* Why Us Section */}
            <section className="section-padding">
                <div className="container">
                    <h2 className="section-title">Why Sokuree?</h2>
                    <div className="solutions-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
                        <div className="solution-card">
                            <div className="solution-icon">🏆</div>
                            <h3>전문성</h3>
                            <p>품질/ISO 기반의 검증된 컨설팅</p>
                        </div>
                        <div className="solution-card">
                            <div className="solution-icon">🏭</div>
                            <h3>현장 중심</h3>
                            <p>제조 현장에 최적화된 맞춤형 솔루션</p>
                        </div>
                        <div className="solution-card">
                            <div className="solution-icon">🚀</div>
                            <h3>실행력</h3>
                            <p>데이터 시스템의 실질적 구현과 안착</p>
                        </div>
                    </div>
                </div>
            </section>

            <Solutions />

            {/* Process Section */}
            <section className="section-padding bg-light">
                <div className="container">
                    <h2 className="section-title">진행 프로세스</h2>
                    <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', textAlign: 'center', gap: '20px' }}>
                        {['진단', '설계', '실행', '정착', '고도화'].map((step, index) => (
                            <div key={index} style={{ flex: 1, minWidth: '120px', background: 'white', padding: '20px', borderRadius: '10px', boxShadow: '0 4px 6px rgba(0,0,0,0.1)' }}>
                                <div style={{ fontSize: '2rem', marginBottom: '10px', color: '#0056b3' }}>{index + 1}</div>
                                <h3>{step}</h3>
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* Cases Preview */}
            <section className="section-padding">
                <div className="container">
                    <h2 className="section-title">성공 사례</h2>
                    <div className="solutions-grid">
                        <div className="solution-card">
                            <h3>H사 스마트공장 구축</h3>
                            <p>생산성 30% 향상, 불량률 50% 감소</p>
                        </div>
                        <div className="solution-card">
                            <h3>D사 ISO 인증 획득</h3>
                            <p>내부 심사원 양성 및 프로세스 정립</p>
                        </div>
                        <div className="solution-card">
                            <h3>K사 그룹웨어 도입</h3>
                            <p>재고 관리 자동화 및 업무 효율화</p>
                        </div>
                    </div>
                    <div style={{ textAlign: 'center', marginTop: '40px' }}>
                        <Link to="/cases" className="btn btn-primary">사례 더 보기</Link>
                    </div>
                </div>
            </section>

            {/* Latest News Section */}
            <LatestNewsSection />

            <Contact />
        </>
    );
};

const LatestNewsSection = () => {
    const { posts, loading, error } = usePosts(1, 3); // Fetch 3 latest posts

    if (loading) return null;
    if (error) return null;
    if (posts.length === 0) return null;

    return (
        <section className="section-padding bg-light">
            <div className="container">
                <div className="flex justify-between items-end mb-8">
                    <h2 className="section-title mb-0">최신 소식</h2>
                    <Link to="/news" className="text-primary font-semibold hover:underline">
                        전체 보기 →
                    </Link>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {posts.map((post) => (
                        <PostCard key={post.id} post={post} />
                    ))}
                </div>
            </div>
        </section>
    );
}

export default Home;
