import React from 'react';
import { Link } from 'react-router-dom';
import { navLinks } from '../../routes.jsx';
import { getBlogPosts } from '../../data/blog';
import myPhoto from '../../assets/myPhoto.jpg';
import './Home.css';

const Home = () => {
    const posts = getBlogPosts().slice(0, 3);
    const highlights = navLinks.filter((link) => link.id !== 'home');

    return (
        <div className="home">
            <section className="home-hero">
                <div className="home-hero__text">
                    <p className="home-hero__kicker">Personal Archive</p>
                    <h1>기록을 모으고, 이야기를 이어붙이는 작은 집.</h1>
                    <p className="home-hero__lead">
                        개발 실험, 여행 스냅, 그리고 생각을 모아두는 공간입니다. 블로그 글은
                        마크다운으로 작성해 계속 추가할 수 있어요.
                    </p>
                    <div className="home-hero__actions">
                        <Link className="button primary" to="/blog">
                            블로그 둘러보기
                        </Link>
                        <Link className="button ghost" to="/travel">
                            여행 갤러리 열기
                        </Link>
                    </div>
                </div>
                <div className="home-hero__card">
                    <p className="home-hero__card-title">이번 달 집중 테마</p>
                    <div className="home-hero__card-body">
                        <h2>느린 기록, 깊은 회고</h2>
                        <p>
                            빠르게 업데이트하는 대신, 한 번쯤 되돌아보며 기록하는 걸 목표로
                            합니다. 글은 매주 한 편씩 추가될 예정이에요.
                        </p>
                    </div>
                    <div className="home-hero__stats">
                        <div>
                            <p className="stat-label">게시 글</p>
                            <p className="stat-value">{posts.length}편</p>
                        </div>
                        <div>
                            <p className="stat-label">다음 업데이트</p>
                            <p className="stat-value">이번 주말</p>
                        </div>
                    </div>
                </div>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>공간 둘러보기</h2>
                    <p>확장 가능한 구조로 구성해 이후에도 쉽게 페이지를 추가할 수 있습니다.</p>
                </div>
                <div className="home-grid">
                    {highlights.map((item) => (
                        <Link key={item.id} to={item.path} className="home-card">
                            <div>
                                <p className="home-card__title">{item.label}</p>
                                <p className="home-card__desc">{item.description}</p>
                            </div>
                            <span className="home-card__cta">열기</span>
                        </Link>
                    ))}
                </div>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>최근 블로그</h2>
                    <p>마크다운 파일을 추가하면 자동으로 목록에 반영됩니다.</p>
                </div>
                <div className="home-posts">
                    {posts.map((post) => (
                        <Link key={post.slug} to="/blog" className="home-post">
                            <p className="home-post__title">{post.title}</p>
                            <p className="home-post__excerpt">{post.excerpt}</p>
                            <span className="home-post__meta">{post.date || '작성일 미정'}</span>
                        </Link>
                    ))}
                </div>
            </section>

            <section className="home-section">
                <div className="home-section__header">
                    <h2>Profile</h2>
                    <p>페이지 주인 소개 영역입니다.</p>
                </div>
                <div className="home-profile">
                    <div className="home-profile__card">
                        <div className="home-profile__identity">
                            <img
                                className="home-profile__avatar"
                                src={myPhoto}
                                alt="Profile"
                            />
                            <div>
                                <p className="home-profile__role">Server Developer</p>
                                <p className="home-profile__name">박 재 오</p>
                            </div>
                        </div>
                        <p className="home-profile__bio">
                            주변 동료와 함께 소통하며 성장하는걸 좋아합니다. <br />
                            성능 최적화, 인프라 자동화를 중요하게 생각합니다. <br />
                            여행과 사진, 새로운 기술 탐구를 좋아합니다.
                        </p>
                        <div className="home-profile__timeline">
                            <p className="home-profile__section-title">연혁</p>
                            <ul>
                                <li>
                                    <span>2023.02 - 현재</span>
                                    <strong>Server Developer</strong>
                                    <span>내비 TIS 교통 서버/현대오토에버</span>
                                </li>
                                <li>
                                    <span>2020.01 - 2023.02</span>
                                    <strong>Embedded Device SW Developer</strong>
                                    <span>캐시비 단말기 개발/롯데정보통신</span>
                                </li>
                                <li>
                                    <span>2019.07 - 2019.12</span>
                                    <strong>SSAFY - 삼성 SW Academy</strong>
                                    <span>SSAFY</span>
                                </li>
                            </ul>
                        </div>
                        <div className="home-profile__tags">
                            <span>C++</span>
                            <span>Git</span>
                            <span>AWS</span>
                            <span>Jira</span>
                            <span>MySQL</span>
                            <span>Docker</span>
                            <span>Kubernetes</span>
                            <span>Linux</span>
                        </div>
                        <div className="home-profile__actions">
                            <button className="button ghost">프로필 수정</button>
                            <a className="button primary" href="mailto:bgg8988@gmail.com">
                                연락하기
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
};

export default Home;