import Link from "next/link";
import Image from "next/image";
import { blogs } from "@/data/blogs";

export const metadata = {
  title: "Blog | VG Fence Products",
  description: "Read our latest articles about fencing installation, maintenance, and product choices.",
};

export default function BlogPage() {
  return (
    <div className="blog-index-page">
      {/* ── INNER BANNER ── */}
      <section className="inner-banner fade-up">
        <div className="inner-banner-content">
          <h1 className="section-h2">Our <span>Blog</span></h1>
          <div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
            <Link href="/">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
              Home
            </Link>
            <span className="separator">/</span>
            <span>Blog</span>
          </div>
        </div>
      </section>

      {/* ── BLOG GRID ── */}
      <section className="blog-grid-section">
        <div className="blog-grid">
          {blogs.map((blog) => (
            <Link href={`/blog/${blog.slug}`} key={blog.id} className="blog-card post-card">
              <div className="blog-card-img">
                <Image 
                  src={blog.image} 
                  alt={blog.title} 
                  fill
                  style={{ objectFit: 'cover' }}
                />
                <div className="blog-card-category">{blog.category}</div>
              </div>
              <div className="blog-card-body">
                <div className="blog-card-date">{blog.date}</div>
                <h3 className="blog-card-title">{blog.title}</h3>
                <p className="blog-card-excerpt">{blog.excerpt}</p>
                <div className="blog-card-footer">
                   <span className="read-more">Read Article <i className="arrow-icon">→</i></span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      </section>

    </div>
  );
}