---
import Base from '../../layouts/Base.astro';
import Navigation from '../../components/Navigation.astro';
import Footer from '../../components/Footer.astro';
import PageHero from '../../components/PageHero.astro';
import BentoGrid from '../../components/BentoGrid.astro';
import BentoTile from '../../components/BentoTile.astro';
import DecoOrb from '../../components/DecoOrb.astro';
import { getCollection, render } from 'astro:content';

const { slug } = Astro.params;
const allPosts = await getCollection('blog');
const post = allPosts.find(p => p.id === slug);

if (!post) {
  return Astro.redirect('/404');
}

export async function getStaticPaths() {
  const allPosts = await getCollection('blog');
  return allPosts.map(post => ({
    params: { slug: post.id },
    props: { post },
  }));
}

const { Content } = await render(post);

const related = allPosts
  .filter(p => p.id !== post.id)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, 3);

const formattedDate = post.data.date.toLocaleDateString('th-TH', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});

// Surface rotation for related cards
const surfaces = ['soft', 'yellow', 'mint'] as const;
function surfaceFor(i: number) {
  return surfaces[i % surfaces.length];
}
---

<Base title={`${post.data.title} | MoreminiMore`}>
  <Navigation />

  <PageHero
    badge={post.data.category}
    title={post.data.title}
    subtitle={formattedDate}
  />

  {post.data.image && (
    <section class="section section-bento article-image-section">
      <DecoOrb color="soft" size="500px" speed={0.3} position={{ top: '-100px', right: '-150px' }} opacity={0.4} blur="80px" />
      <DecoOrb color="yellow" size="350px" speed={0.3} position={{ bottom: '-150px', left: '-100px' }} opacity={0.2} blur="80px" />
      <div class="container" style="position: relative; z-index: 1;">
        <div class="article-image">
          <img src={post.data.image} alt={post.data.title} />
        </div>
      </div>
    </section>
  )}

  <section class="section section-bento article-section">
    <DecoOrb color="purple" size="400px" speed={0.3} position={{ top: '5%', left: '-150px' }} opacity={0.2} blur="80px" />
    <DecoOrb color="mint" size="350px" speed={0.3} position={{ bottom: '10%', right: '-100px' }} opacity={0.2} blur="80px" />
    <div class="container" style="position: relative; z-index: 1;">
      <BentoGrid>
        <!-- Main article body — full width bento tile -->
        <BentoTile span={8} surface="white" eyebrow={post.data.category} title={post.data.title}>
          <div class="article-meta">
            <span class="article-date">{formattedDate}</span>
          </div>
          <div class="article-body">
            <Content />
          </div>
        </BentoTile>

        <!-- Sidebar tile: about + contact stack -->
        <BentoTile span={4} surface="soft" eyebrow="เกี่ยวกับเรา" title="MoreminiMore">
          <p>ดิจิทัลเอเจนซี่ที่ช่วยให้ธุรกิจไทยเติบโตด้วยเทคโนโลยีสมัยใหม่</p>
          <a href="/about" class="btn btn-outline-dark btn-sm">ดูเพิ่มเติม</a>

          <div class="sidebar-divider"></div>

          <span class="tile-eyebrow-sm">สนใจบริการ?</span>
          <p style="margin-top: 8px;">ติดต่อเราได้เลย ปรึกษาฟรี!</p>
          <div class="sidebar-actions">
            <a href="/contact" class="btn btn-primary btn-sm">ติดต่อเรา</a>
            <a href="tel:0809955945" class="btn btn-outline-dark btn-sm">080-995-5945</a>
          </div>
        </BentoTile>
      </BentoGrid>
    </div>
  </section>

  {related.length > 0 && (
    <section class="section section-bento related-section">
      <DecoOrb color="yellow" size="400px" speed={0.3} position={{ top: '10%', right: '-100px' }} opacity={0.25} blur="80px" />
      <DecoOrb color="soft" size="350px" speed={0.3} position={{ bottom: '-100px', left: '-100px' }} opacity={0.4} blur="80px" />
      <div class="container" style="position: relative; z-index: 1;">
        <div class="section-header reveal">
          <span class="section-badge">บทความที่เกี่ยวข้อง</span>
          <h2 class="section-title">อ่านต่อ <span class="highlight">เนื้อหาใกล้เคียง</span></h2>
        </div>

        <BentoGrid>
          {related.map((r, i) => (
            <a href={`/blog/${r.id}`} class="related-link">
              <BentoTile span={4} surface={surfaceFor(i)} eyebrow={r.data.category} title={r.data.title}>
                <div class="related-card-body">
                  {r.data.image && (
                    <div class="related-image">
                      <img src={r.data.image} alt={r.data.title} loading="lazy" />
                    </div>
                  )}
                  <span class="related-date">
                    {new Date(r.data.date).toLocaleDateString('th-TH', { year: 'numeric', month: 'long', day: 'numeric' })}
                  </span>
                </div>
              </BentoTile>
            </a>
          ))}
        </BentoGrid>
      </div>
    </section>
  )}

  <Footer />
</Base>

<style>
  .article-image-section { background: var(--color-white); padding-top: 40px; padding-bottom: 40px; }
  .article-section { background: var(--color-white); }
  .related-section { background: var(--color-bg-alt); }
  .section-bento { position: relative; overflow: hidden; }

  /* Article image (hero) */
  .article-image {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-bg-soft);
  }
  .article-image img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
  }

  /* Main article body */
  .article-meta {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-gray-200);
  }
  .article-date {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .article-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-gray-700);
  }
  .article-body :global(h2) {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--color-black);
    margin: 36px 0 18px;
  }
  .article-body :global(h3) {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--color-black);
    margin: 28px 0 14px;
  }
  .article-body :global(p) { margin-bottom: 18px; }
  .article-body :global(ul), .article-body :global(ol) {
    margin: 16px 0;
    padding-left: 24px;
  }
  .article-body :global(li) { margin-bottom: 10px; }
  .article-body :global(a) {
    color: var(--color-primary-dark);
    font-weight: 600;
  }
  .article-body :global(a:hover) { text-decoration: underline; }
  .article-body :global(blockquote) {
    border-left: 4px solid var(--color-primary);
    padding-left: 20px;
    margin: 28px 0;
    font-style: italic;
    color: var(--color-gray-700);
  }
  .article-body :global(img) {
    border-radius: var(--radius-md);
    margin: 20px 0;
    max-width: 100%;
  }
  .article-body :global(strong) { color: var(--color-black); font-weight: 800; }

  /* Sidebar (soft tile) */
  .sidebar-divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: 24px 0;
  }
  .tile-eyebrow-sm {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    display: block;
  }
  .sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .btn-sm {
    padding: 10px 20px;
    font-size: 13px;
    border-radius: var(--radius-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Section header */
  .section-header { text-align: center; margin-bottom: 48px; }
  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 8px 20px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
  }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    color: var(--color-black);
  }
  .section-title .highlight { color: var(--color-primary-dark); }

  /* Related cards */
  .related-link {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .related-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .related-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    margin: -8px -8px 4px;
  }
  .related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
  }
  .related-link:hover .related-image img { transform: scale(1.06); }
  .related-date {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.65;
  }

  @media (max-width: 640px) {
    .article-body { font-size: 16px; }
  }
</style>

<script>
  // Parallax orbs (use data-parallax-speed from DecoOrb)
  const parallaxEls = document.querySelectorAll('[data-parallax-speed]');
  function updateParallax() {
    const scrolled = window.scrollY;
    parallaxEls.forEach(el => {
      const speed = parseFloat(el.getAttribute('data-parallax-speed') || '0.4');
      const ty = scrolled * speed * -0.3;
      el.style.transform = `translate3d(0, ${ty}px, 0)`;
    });
  }
  window.addEventListener('scroll', () => requestAnimationFrame(updateParallax), { passive: true });
</script>
