import Link from "next/link";
import { getAllPosts, type PostType } from "../../lib/content";

export const metadata = { title: "콘텐츠 허브 | PROS·ON", description: "의지와 보행에 관한 가이드, 제작 사례, PROS·ON 소식을 한곳에서 확인하세요." };

const sections: Array<{ type: PostType; label: string; description: string }> = [
  { type: "guide", label: "기본 가이드", description: "처음 의지를 알아보는 분들을 위한 핵심 정보를 정리했습니다." },
  { type: "case", label: "제작 사례", description: "상담부터 설계, 제작과 적응까지 실제 과정을 소개합니다." },
  { type: "news", label: "PROS·ON 소식", description: "새로운 소식과 움직임을 전합니다." },
];

export default async function HubPage() {
  const posts = await getAllPosts();
  return <main className="hub-page section">
    <div className="section-label"><span>PROS·ON CONTENT HUB</span><span>{String(posts.length).padStart(2, "0")} POSTS</span></div>
    <div className="hub-heading"><p className="eyebrow">FIND YOUR NEXT STEP</p><h1>필요한 정보를<br /><em>한곳에서 찾아보세요.</em></h1><p>의지와 보행에 대한 기본 지식부터 실제 제작 사례와 PROS·ON의 소식까지, 목적에 맞는 콘텐츠를 선택해 확인할 수 있습니다.</p></div>
    <div className="hub-sections">{sections.map((section, index) => { const sectionPosts = posts.filter((post) => post.type === section.type); return <section className="hub-section" key={section.type}><div className="hub-section-heading"><div><span className="hub-number">{String(index + 1).padStart(2, "0")}</span><h2>{section.label}</h2></div><p>{section.description}</p></div>{sectionPosts.length > 0 ? <div className="hub-posts">{sectionPosts.map((post) => <Link className="hub-post" href={`/blog/${post.urlSlug}`} key={post.urlSlug}><span>{post.category}</span><h3>{post.title}</h3><p>{post.description}</p><small>{post.publishedAt}</small><b aria-hidden="true">→</b></Link>)}</div> : <p className="hub-empty">아직 등록된 콘텐츠가 없습니다.</p>}</section>; })}</div>
  </main>;
}