---
import PageShell from '../components/PageShell.astro';
import { getCollection } from 'astro:content';

const posts = (await getCollection('blog', ({ data }) => !data.draft)).sort(
  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
);

// Collect all unique categories
const allCategories = [...new Set(posts.map((p) => p.data.category))].sort();
---

<PageShell
  title="บทความ | MoreminiMore"
  description="บทความจาก MoreminiMore เกี่ยวกับเว็บไซต์ การตลาดออนไลน์ ระบบอัตโนมัติ และ AI สำหรับ SME"
>
  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
    <p class="eyebrow">บทความ</p>
    <h1>ความรู้ด้าน AI และ Online Marketing</h1>
    <p class="hero-lead">
      รวมมุมมองเรื่องเว็บ การตลาด ระบบอัตโนมัติ และ AI แบบที่เน้นใช้งานจริงในธุรกิจ ไม่ใช่แค่ตามกระแส
    </p>
  </section>

  <section class="page-section blog-section">
    <!-- Category filters -->
    <div class="blog-tags" id="blog-tags">
      <button class="blog-tag active" data-cat="all">ทั้งหมด</button>
      {allCategories.map((cat) => (
        <button class="blog-tag" data-cat={cat}>{cat}</button>
      ))}
    </div>

    <div class="blog-grid" id="blog-grid">
      {posts.map((post) => {
        const fmt = new Intl.DateTimeFormat('th-TH', { day: '2-digit', month: 'short', year: '2-digit' }).format(post.data.pubDate);
        const imgId = post.id === 'ai-for-sme-start-with-pain' ? 'ai' : post.id === 'marketing-automation-reduce-work' ? 'automation' : post.id === 'sme-website-next-action' ? 'website' : 'marketing';
        return (
          <a class="blog-card liquid-glass liquidGlass-wrapper" href={`/blog/${post.id}/`} data-cat={post.data.category}>
            <div class="liquidGlass-effect" aria-hidden="true"></div>
            <div class="liquidGlass-tint" aria-hidden="true"></div>
            <div class="liquidGlass-shine" aria-hidden="true"></div>
            <img class="blog-card-img" src={`/images/blog-${imgId}.jpg`} alt={post.data.title} loading="lazy" />
            <div class="blog-meta">
              <span class="eyebrow">{post.data.category}</span>
              <span class="blog-date eyebrow">{fmt}</span>
            </div>
            <h3>{post.data.title}</h3>
            <p>{post.data.description}</p>
          </a>
        );
      })}
    </div>

    <p class="blog-empty" id="blog-empty" hidden>ไม่พบบทความที่ตรงกับหมวดหมู่นี้</p>
  </section>
</PageShell>

<style>
  .blog-section::before { display: none; }

  /* Category filters */
  .blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(20px, 3vw, 36px);
  }
  .blog-tag {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgb(255 255 255 / .40);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s var(--ease);
  }
  .blog-tag:hover,
  .blog-tag.active {
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--yellow);
  }

  /* Grid — 3 columns */
  .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

  /* Card */
  .blog-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-decoration: none;
    padding: clamp(14px, 2vw, 22px);
    border-radius: 20px;
  }
  .blog-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  /* Meta row — category + date side by side */
  .blog-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
  }
  .blog-meta .eyebrow {
    background: var(--yellow);
    color: var(--ink);
    border-color: transparent;
    font-size: 0.75rem;
    padding: 3px 10px;
  }
  .blog-meta .blog-date.eyebrow {
    background: #ffffff85;
    color: var(--ink);
    border-color: rgb(19 18 13 / .14);
    opacity: 1;
  }
  .blog-date {
    color: var(--ink);
    font-size: 0.78rem;
    opacity: 0.7;
  }

  .blog-card h3 {
    color: var(--ink);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 6px;
  }
  .blog-card p {
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
  }

  .blog-empty {
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
    padding: clamp(40px, 6vw, 80px) 0;
  }

  @media (max-width: 820px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 540px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card {
      align-items: center;
      text-align: center;
    }
    .blog-meta {
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
      justify-content: center;
      flex-wrap: wrap;
    }
    .blog-card h3,
    .blog-card p {
      margin-inline: auto;
      text-align: center;
    }
  }
</style>

<script>
  const tagsEl = document.getElementById('blog-tags');
  const grid = document.getElementById('blog-grid');
  const empty = document.getElementById('blog-empty');
  const cards = grid?.querySelectorAll('.blog-card');
  const tagBtns = tagsEl?.querySelectorAll('.blog-tag');

  if (tagBtns && cards) {
    tagBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        const cat = btn.dataset.cat;
        tagBtns.forEach((b) => b.classList.remove('active'));
        btn.classList.add('active');
        let visible = 0;
        cards.forEach((card) => {
          if (cat === 'all' || card.dataset.cat === cat) {
            card.style.display = '';
            visible++;
          } else {
            card.style.display = 'none';
          }
        });
        empty.hidden = visible > 0;
      });
    });
  }
</script>
