import { getPosts } from "@/lib/ghost";
import { BlogCard, FeaturedBlogCard } from "@/components/BlogCard";

export const metadata = {
  title: "Blog — UP Parivaar Dallas",
  description:
    "Stories, event recaps, and reflections from the UP Parivaar Dallas community.",
};

// Revalidation is driven by the Ghost fetch layer (GHOST_REVALIDATE).
export const revalidate = 60;

export default async function BlogPage() {
  const posts = await getPosts();
  const [featured, ...rest] = posts;

  return (
    <>
      <section className="page-glow page-hero--tight">
        <div className="container hero-center">
          <span className="eyebrow">Blog</span>
          <h1 className="display-title ts-36-48 events-hero__title">
            Stories from our community
          </h1>
          <p className="events-hero__lead">
            Event recaps, member spotlights, and reflections on the traditions we
            carry forward together.
          </p>
        </div>
      </section>

      <section className="section-white">
        <div className="container blog-list">
          {posts.length === 0 ? (
            <p className="blog-empty">No posts published yet. Check back soon.</p>
          ) : (
            <>
              {featured && <FeaturedBlogCard post={featured} />}
              {rest.length > 0 && (
                <div className="blog-grid">
                  {rest.map((post) => (
                    <BlogCard key={post.id} post={post} />
                  ))}
                </div>
              )}
            </>
          )}
        </div>
      </section>
    </>
  );
}