'use client'

import { useEmDashContent } from '@/hooks/useEmDashContent'
import Image from 'next/image'
import Link from 'next/link'

export default function BlogPreviewSection() {
  const { items, loading } = useEmDashContent('posts')

  if (loading) {
    return (
      <div className="flex justify-center py-16">
        <div className="w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin" />
      </div>
    )
  }

  if (items.length === 0) return null

  const posts = items.slice(0, 3)

  return (
    <section id="blog" data-vula-section="blogpreview" data-vula-cms="posts" className="bg-white py-20 lg:py-28">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="flex items-end justify-between mb-12">
          <div>
            <p className="text-sm uppercase tracking-widest text-[#d4a843] font-semibold mb-2">The Thread</p>
            <h2 className="text-3xl lg:text-4xl font-bold tracking-tight text-[#0a0a0a]">Latest Stories</h2>
          </div>
          <Link href="/posts" className="hidden md:inline-flex text-sm font-semibold text-[#d4a843] hover:underline transition-all duration-200">
            View all
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {posts.map((post) => {
            const d = post.data as { title?: string; excerpt?: string; image?: string; category?: string; author?: string }
            return (
              <article key={post.id} className="group cursor-pointer">
                <div className="relative aspect-[4/3] overflow-hidden rounded-lg bg-neutral-100 mb-4">
                  {d.image && (
                    <Image
                      src={d.image}
                      alt={d.title || 'Blog post'}
                      fill
                      sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                      className="object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                    />
                  )}
                </div>
                <p className="text-xs font-semibold tracking-widest uppercase text-neutral-400 mb-1">{d.category || 'Style'}</p>
                <h3 className="text-base font-medium text-[#0a0a0a] leading-snug mb-2 group-hover:text-[#d4a843] transition-colors duration-200">
                  {d.title}
                </h3>
                <p className="text-sm text-neutral-600 leading-relaxed mb-4 line-clamp-2">{d.excerpt}</p>
                <Link
                  href={`/posts/${post.id}`}
                  className="text-sm font-semibold text-[#d4a843] hover:underline transition-all duration-200"
                >
                  Read more
                </Link>
              </article>
            )
          })}
        </div>

        <div className="mt-8 text-center md:hidden">
          <Link href="/posts" className="inline-flex text-sm font-semibold text-[#d4a843] hover:underline transition-all duration-200">
            View all stories
          </Link>
        </div>
      </div>
    </section>
  )
}