import type { Metadata } from "next";
import Link from "next/link";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { Placeholder } from "@/components/Placeholder";
import { blogPosts } from "@/lib/data";

export const metadata: Metadata = {
  title: "مقالات",
  description: "نکته‌هایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
};

export default function BlogPage() {
  return (
    <>
      <PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
      <section className="py-16 sm:py-24">
        <Container>
          <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            {blogPosts.map((post) => (
              <Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
                <div className="overflow-hidden rounded-2xl">
                  <Placeholder
                    src={post.image}
                    alt={post.title}
                    className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                </div>
                <p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
                <h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
                <p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
              </Link>
            ))}
          </div>
        </Container>
      </section>
    </>
  );
}