<script setup>
const posts = [
  {
    title: 'sori.studio를 직접 만들기 시작하며',
    excerpt: '블로그와 포털의 경계에 있는 개인 공간을 직접 구축하기 위한 첫 기록입니다.',
    tag: 'NOTE',
    publishedAt: '2026.04.29',
    to: '/posts/hello-sori-studio'
  },
  {
    title: '글쓰기 도구는 왜 직접 만들게 되는가',
    excerpt: '네이버 블로그, 티스토리, 워드프레스, Ghost를 거쳐 남은 취향의 빈칸을 정리합니다.',
    tag: 'DEV',
    publishedAt: '2026.04.29',
    to: '/posts/custom-writing-tool'
  }
]
</script>

<template>
  <MainColumn>
    <section class="home-hero site-section">
      <div class="home-hero__inner site-section-header text-center">
        <h1 class="home-hero__title mx-auto max-w-[620px] text-3xl font-semibold leading-tight tracking-normal md:text-[28px]">
          Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community
        </h1>
        <p class="home-hero__description mx-auto mt-3 max-w-[500px] text-base leading-7 site-muted">
          글을 쌓고, 프로젝트와 링크를 연결하고, 오래 쓰기 좋은 개인 블로그를 직접 구축합니다.
        </p>
        <form class="home-hero__subscribe mx-auto mt-5 flex max-w-[345px] gap-2">
          <input class="home-hero__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
          <button class="home-hero__button rounded-lg px-5 py-2 text-sm font-semibold site-button" type="button">
            Subscribe
          </button>
        </form>
      </div>
    </section>

    <section class="home-featured site-section">
      <div class="home-featured__header site-section-body flex items-center justify-between">
        <h2 class="home-featured__title text-sm font-semibold uppercase site-muted">
          Featured
        </h2>
        <div class="home-featured__controls flex gap-4">
          <span>‹</span>
          <span>›</span>
        </div>
      </div>
      <div class="home-featured__items grid grid-cols-1 gap-4 px-6 pb-6 md:grid-cols-3">
        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#071b22,#0f827c)] p-4 text-white">
          <h3 class="mt-20 text-sm font-semibold leading-tight">
            Essential tools and techniques for getting started
          </h3>
        </article>
        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#182434,#d4b06b)] p-4 text-white">
          <h3 class="mt-20 text-sm font-semibold leading-tight">
            Setting up your first home server from scratch
          </h3>
        </article>
        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#141414,#8a5a44)] p-4 text-white">
          <h3 class="mt-20 text-sm font-semibold leading-tight">
            Writing notes that stay useful over time
          </h3>
        </article>
      </div>
    </section>

    <section class="home-latest site-section">
      <div class="home-latest__header site-section-body flex items-center justify-between">
        <h2 class="home-latest__title text-sm font-semibold uppercase site-muted">
          Latest
        </h2>
        <button class="home-latest__view rounded-lg px-3 py-2 text-sm site-input" type="button">
          목록
        </button>
      </div>
    </section>

    <PostCard v-for="post in posts" :key="post.to" :post="post" />
  </MainColumn>
</template>
