import "./Blog.css";

const posts = [
  {
    title: "VIETICASOFT integrado con SUNAT",
    date: "06 Marzo 2026",
    author: "VieticaSoft",
    image: "/img/blog1.jpg",
    desc: "Ahora puedes emitir comprobantes electrónicos cumpliendo la normativa SUNAT."
  },
  {
    title: "¿Cómo emitir boletas electrónicas?",
    date: "05 Enero 2026",
    author: "VieticaSoft",
    image: "/img/blog2.jpg",
    desc: "Guía práctica para emitir boletas electrónicas fácilmente."
  },
  {
    title: "Beneficios de un POS moderno",
    date: "29 Agosto 2025",
    author: "VieticaSoft",
    image: "/img/blog3.jpg",
    desc: "Optimiza tus ventas, inventario y control con un sistema POS."
  },
    {
    title: "Beneficios de un POS moderno",
    date: "29 Agosto 2025",
    author: "VieticaSoft",
    image: "/img/blog3.jpg",
    desc: "Optimiza tus ventas, inventario y control con un sistema POS."
  }
];

export default function Blog() {
  return (
    <section className="blog-section">
      <span className="blog-label">BLOG</span>
      <h2 className="blog-title">Últimas publicaciones</h2>

      <div className="blog-grid">
        {posts.map((post, i) => (
          <article className="blog-card" key={i}>
            <div
              className="blog-image"
              style={{ backgroundImage: `url(${post.image})` }}
            >
              <div className="blog-overlay">
                <h3>{post.title}</h3>
              </div>
            </div>

            <div className="blog-body">
              <div className="blog-meta">
                <span>📅 {post.date}</span>
                <span>👤 {post.author}</span>
              </div>

              <p>{post.desc}</p>
              <button className="blog-btn">Leer más →</button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}
