o2o-infinith-demo/supporters/src/pages/index.astro

---
import { getCollection } from 'astro:content';
import Base from '../layouts/Base.astro';
import PostCard from '../components/PostCard.astro';
import FactBlock from '../components/FactBlock.astro';
import VideoLite from '../components/VideoLite.astro';
import Gallery from '../components/Gallery.astro';
import { SITE_NAME, fact, site as S, clinicSchema, surface, v, has, PENDING, isPublishable } from '../lib';
const posts = (await getCollection('posts')).filter(isPublishable).sort((a, b) => b.data.dateModified.localeCompare(a.data.dateModified));
const site = Astro.site!.toString().replace(/\/$/, '');
const f = fact as Record<string, any>;
const clinic = v(f.shortName, '병원');
const area = has(f.areaLabel) ? `${f.areaLabel} 인근 ` : '';
const yt = surface('youtube'); const gu = surface('gangnamunni');
const ld = [
  { '@type': 'WebSite', '@id': `${site}/#website`, name: SITE_NAME, url: site, inLanguage: 'ko', about: { '@id': `${f.url}/#clinic` }, publisher: { '@type': 'Organization', name: SITE_NAME, url: site } },
  clinicSchema(site),
];
---
<Base title={`${clinic}, ${(S.heroTitle || '궁금한 것부터 답합니다').replace(/\.$/, '')}`} description={`${clinic}${has(f.areaLabel) ? `(${f.areaLabel})` : ''}를 알아보는 분들이 실제로 묻는 질문을 골라, 원장 설명 영상과 병원 공개 자료를 근거로 답합니다. 글마다 작성자와 원장 감수 여부를 밝힙니다.`} jsonLd={ld} alternates={[{ lang: 'ko', href: '/' }, { lang: 'en', href: '/en' }]}>
  <section class="hero-light">
    <div class="blob a"></div><div class="blob b"></div>
    <div class="wrap-wide inner">
      <div>
        <div class="eyebrow">{S.eyebrow || SITE_NAME}</div>
        <h1>{clinic},<br /><span class="accent">{S.heroTitle || '궁금한 것부터 답합니다.'}</span></h1>
        <p class="lede">{clinic}는 {has(f.founded) ? `${f.founded}년 개원한 ` : ''}{area}{v(f.kind, '병원')}입니다. 이곳은 병원을 알아보는 분들이 실제로 묻는 질문을 골라, 원장 설명 영상과 병원이 공개한 자료를 근거로 답하는 곳입니다. 글마다 누가 썼고 원장 감수를 거쳤는지 밝힙니다.</p>
        <div class="chips">
          <span class="chip"><span class="dot"></span>{has(f.founded) ? `${f.founded}년 개원` : `개원 연도 ${PENDING}`} · {v(f.transitShort)}</span>
          <span class="chip"><span class="dot"></span>원장이 직접 설명한 영상을 근거로</span>
        </div>
        <div class="hero .actions" style="display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:1.6rem">
          <a class="btn primary" href="/posts">전체 글 보기</a>
          <a class="btn secondary" href="/clinic">병원 정보</a>
        </div>
      </div>
      {has(S.heroImage?.src) && <div class="hero-img collage"><img src={S.heroImage.src} alt={S.heroImage.alt} width={S.heroImage.width} height={S.heroImage.height} /></div>}
    </div>
  </section>

  <section class="section tint" style="padding:3.2rem 0">
    <div class="wrap-wide">
      <div class="sec-head"><div class="eyebrow">Start Here</div><h2>Where Are You Now?</h2><p class="sub">지금 상황에 맞는 곳에서 시작하세요.</p></div>
      <div class="grid">
        <a class="card entry" href="/posts#cat-D"><div class="cat">처음 알아볼 때</div><h3>어떤 수술인지 알고 싶어요</h3><p>방법의 차이와 상담에서 확인할 기준을 살펴보세요.</p><span class="more">시술 정보 글 보기</span></a>
        <a class="card entry" href="/posts#cat-E"><div class="cat">병원을 선택할 때</div><h3>안전과 회복이 걱정돼요</h3><p>병원이 공개한 관리 체계와 담당 의료진에게 물어볼 질문을 확인하세요.</p><span class="more">안전·신뢰 글 보기</span></a>
        <a class="card entry" href="/visit"><div class="cat">방문을 준비할 때</div><h3>예약과 방문 준비가 궁금해요</h3><p>예약 경로, 가는 길, 주차, 도착 후 동선을 순서대로 안내합니다.</p><span class="more">방문 안내 보기</span></a>
      </div>
    </div>
  </section>

  <section class="section dark">
    <div class="wrap-wide">
      <div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Why This Site</div><h2>Questions First</h2><p class="sub">병원에 가기 전에 알고 싶은 것부터 답합니다. 답은 원장이 직접 설명한 영상과 병원 공개 자료를 근거로 합니다.</p></div>
      <div class="stats">
        <div class="stat"><b>{posts.length}</b><span class="label">답한 질문</span><span class="desc">질문 하나에 글 하나. 첫 단락 "세 줄 요약"에 답을 먼저 쓰고, 그다음에 근거를 풉니다.</span></div>
        <div class="stat"><b>{v(yt.videos)}</b><span class="label">원장 설명 영상</span><span class="desc">{v(yt.checked)} 확인. 글에서 원장이 한 말은 영상을 함께 붙여 두어 직접 확인할 수 있습니다.</span></div>
        <div class="stat"><b>{v(gu.reviews)}</b><span class="label">강남언니 후기</span><span class="desc">{v(gu.checked)} 확인. 후기는 어디서 몇 건을 볼 수 있는지만 안내하고, 다른 환자의 경험담은 옮기지 않습니다.</span></div>
      </div>
    </div>
  </section>

  <section class="section light">
    <div class="wrap-wide">
      <div class="sec-head"><div class="row"><div><div class="eyebrow">Latest</div><h2>Recent Answers</h2><p class="sub">최근에 답한 질문. 첫 단락 "세 줄 요약"만 읽어도 답을 알 수 있습니다.</p></div><a href="/posts">전체 보기</a></div></div>
      {posts.length ? <div class="grid">{posts.slice(0, 6).map((p) => <PostCard post={p} />)}</div> : <p class="sub" style="color:var(--slate-500)">아직 발행한 글이 없습니다. 검토를 마친 글부터 차례로 올립니다.</p>}
    </div>
  </section>

  <section class="section tint">
    <div class="wrap-wide">
      <div class="sec-head"><div class="eyebrow">From The Doctors</div><h2>Doctors Explain</h2><p class="sub">원장이 직접 설명하는 영상. 이 사이트의 글은 이런 영상을 근거로 씁니다.</p></div>
      {S.homeVideos?.length ? (
        <div class="video-grid" style="grid-template-columns:repeat(auto-fill,minmax(300px,1fr))">
          {S.homeVideos.map((vd) => <VideoLite id={vd.id} title={vd.title} published={vd.published} compact />)}
        </div>
      ) : <p class="sub" style="color:var(--slate-500)">원장 설명 영상은 병원 공식 채널에서 골라 실을 예정입니다. {PENDING}.</p>}
    </div>
  </section>
  <section class="section light">
    <div class="wrap-wide">
      <div class="sec-head"><div class="eyebrow">Inside</div><h2>Inside The Building</h2><p class="sub">{v(S.insideSummary, `시설 안내 ${PENDING}`)}</p></div>
      {S.insideGallery?.length ? (
        <>
          <Gallery cols={3} items={S.insideGallery} />
          <p style="font-size:0.83rem;color:var(--slate-500);margin-top:-0.6rem">{v(S.imageCredit, '사진 출처: 병원 공식 홈페이지')}</p>
        </>
      ) : <p class="sub" style="color:var(--slate-500)">시설 사진은 병원 공식 홈페이지에서 허락받은 사진만 싣습니다. {PENDING}.</p>}
    </div>
  </section>
  <section class="section dark">
    <div class="wrap-wide">
      <div class="sec-head"><div class="eyebrow" style="color:var(--purple-300)">Principles</div><h2>What We Do, What We Don't</h2><p class="sub">읽는 분이 판단할 수 있도록 세 가지를 지킵니다.</p></div>
      <div class="grid">
        <div class="card"><h3>답하는 방식</h3><p>질문 하나에 글 하나. 첫 단락에 답을 먼저 씁니다. 의학적인 내용은 담당 원장이 감수하고, 감수가 끝난 글에는 날짜를, 아직인 글에는 감수 예정을 표시합니다.</p></div>
        <div class="card"><h3>싣지 않는 것</h3><p>전후 사진, 다른 환자의 경험담, 다른 병원과의 비교, 효과를 보장하는 표현. 후기는 강남언니·구글에서 몇 건을 볼 수 있는지와 링크만 안내합니다.</p></div>
        <div class="card"><h3>밝히는 것</h3><p>누가 썼는지, 원장 감수를 거쳤는지, 무엇을 참고했는지, 그리고 이 사이트가 {clinic}의 지원을 받는다는 사실. <a href="/about">이 사이트에 대해</a></p></div>
      </div>
    </div>
  </section>

  <section class="section tint"><div class="wrap-wide"><div class="sec-head"><div class="eyebrow">Fact Sheet</div><h2>Clinic Facts</h2><p class="sub">주소·전화·진료시간. 방문 전에 전화로 한 번 더 확인을 권합니다.</p></div><FactBlock /></div></section>
</Base>
<style>
  .card.entry { text-decoration: none; color: inherit; }
  .card.entry:hover { text-decoration: none; }
  .card.entry .more { font-size: 0.85rem; font-weight: 600; color: var(--accent); }
</style>