---
import { getCollection } from 'astro:content';
import Base from '../../layouts/Base.astro';
import PostCard from '../../components/PostCard.astro';
import { CATEGORY_LABELS, SITE_NAME } from '../../lib';
const posts = (await getCollection('posts')).sort((a, b) => b.data.dateModified.localeCompare(a.data.dateModified));
const cats = Object.keys(CATEGORY_LABELS);
const site = Astro.site!.toString().replace(/\/$/, '');
const ld = { '@type': 'CollectionPage', '@id': `${site}/posts#page`, name: '전체 글', url: `${site}/posts`, inLanguage: 'ko', publisher: { '@type': 'Organization', name: SITE_NAME, url: site }, hasPart: posts.map((p) => ({ '@type': 'Article', headline: p.data.title, url: `${site}/posts/${p.id}`, dateModified: p.data.dateModified })) };
---
<Base title="전체 글" description="뷰성형외과에 대해 사람들이 묻는 질문에 서포터즈가 먼저 답한 글 목록. 카테고리별로 정리했습니다." jsonLd={ld}>
  <div class="wrap-wide" style="padding-bottom:4rem">
    <header class="article-head"><div class="eyebrow">전체 글</div><h1>질문별로 답한 글</h1><p style="color:var(--slate-600);margin-top:0.6rem">궁금한 주제를 골라 보세요. 글 하나가 질문 하나에 답합니다.</p></header>
    {cats.map((c) => {
      const list = posts.filter((p) => p.data.category === c);
      if (!list.length) return null;
      return (<section id={`cat-${c}`} style="scroll-margin-top:90px"><div class="section-title" style="margin-top:2.4rem"><h2>{c}. {CATEGORY_LABELS[c]}</h2><span style="color:var(--slate-500);font-size:0.9rem">{list.length}편</span></div><div class="grid">{list.map((p) => <PostCard post={p} />)}</div></section>);
    })}
  </div>
</Base>