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

import { routePath } from "../../contracts/routes.js";
import { PageHeader } from "../components/page-header.jsx";

const READINESS_ITEMS = Object.freeze([
  {
    title: "실행 계약",
    description: "런타임 설정, 릴리스 정합성, 오류 경계가 마운트 전에 검증됩니다.",
  },
  {
    title: "교체 가능한 연동",
    description: "인증, HTTP, 캐시, 저장소, 텔레메트리가 포트 뒤에 분리되어 있습니다.",
  },
  {
    title: "접근 가능한 화면",
    description: "키보드 탐색, 포커스 이동, 반응형 앱 셸의 기본 동작이 준비되어 있습니다.",
  },
]);

export default function HomePage() {
  return (
    <section className="ui-page">
      <PageHeader
        eyebrow="프로젝트 시작점"
        title="Clean Architecture Frontend"
        description="도메인을 추가하기 전에 실행 구조와 범용 사용자 경험을 확인할 수 있는 중립적인 스켈레톤입니다."
      />
      <div className="readiness-grid" aria-label="구현 준비 상태">
        {READINESS_ITEMS.map((item) => (
          <article className="ui-panel" key={item.title}>
            <h2>{item.title}</h2>
            <p>{item.description}</p>
          </article>
        ))}
      </div>
      <section className="ui-panel starter-actions" aria-labelledby="starter-title">
        <div>
          <h2 id="starter-title">준비된 화면 살펴보기</h2>
          <p>공통 구성요소와 비동기 화면 상태를 예제 라우트에서 확인하세요.</p>
        </div>
        <div className="button-row">
          <Link className="ui-button" to={routePath("EXAMPLES_UI")}>
            UI 구성요소 보기
          </Link>
          <Link
            className="ui-button ui-button--secondary"
            to={routePath("EXAMPLES_STATES")}
          >
            화면 상태 보기
          </Link>
        </div>
      </section>
    </section>
  );
}