---
import type { T } from '../i18n/strings';

interface Props { t: T }
const { t } = Astro.props;

const posts = [
  { cover: '', tag: 'blog.1tag', date: '2026-05-28', t: 'blog.1t', d: 'blog.1d' },
  { cover: 'c2', tag: 'blog.2tag', date: '2026-05-12', t: 'blog.2t', d: 'blog.2d' },
  { cover: 'c3', tag: 'blog.3tag', date: '2026-04-30', t: 'blog.3t', d: 'blog.3d' },
];
---
<section id="blog" class="sec-tan">
  <div class="wrap center">
    <div class="eyebrow">{t('blog.eyebrow')}</div>
    <h2 class="h-sec">{t('blog.h')}</h2>
    <p class="sub-sec">{t('blog.sub')}</p>
  </div>
  <div class="wrap">
    <div class="blog-grid">
      {posts.map((p) => (
        <a class="post">
          <div class={p.cover ? `cover ${p.cover}` : 'cover'}>
            <span class="tag">{t(p.tag)}</span>
          </div>
          <div class="body">
            <div class="date">{p.date}</div>
            <h3>{t(p.t)}</h3>
            <p>{t(p.d)}</p>
          </div>
        </a>
      ))}
    </div>
  </div>
</section>