/* global React */
const { Icon } = window.UI;

const BLOG_POSTS = [
  {
    id: "burbuja-musica-en-vivo",
    category: "Industria & Análisis",
    date: "Junio 2025",
    read: "12 min",
    title: "Tesis sobre una posible burbuja en la música en vivo",
    excerpt:
      "La hipótesis de una burbuja en la industria del entretenimiento en vivo solo se sostiene parcialmente. No hay una burbuja unificada, sino una polarización: arriba del mercado los grandes shows siguen capturando demanda; abajo y en el medio, la relación entre oferta, precios y poder adquisitivo parece haberse descalzado.",
  },
];
window.BLOG_POSTS = BLOG_POSTS;

function BlogList({ onOpen }) {
  return (
    <main className="sl-blog">
      <div className="sl-wrap">
        <div className="sl-blog-head">
          <div>
            <div className="sl-eyebrow">Perspectivas</div>
            <h1 className="sl-blog-h1">Blog</h1>
          </div>
          <p className="sl-blog-intro">
            Ideas, análisis y perspectivas sobre operaciones, industrias en transformación y negocios que escalan.
          </p>
        </div>

        <div className="sl-blog-list">
          {BLOG_POSTS.map((p) => (
            <article className="sl-post-card" key={p.id} onClick={() => onOpen(p.id)}>
              <div className="sl-post-card-body">
                <div className="sl-post-meta">
                  <span className="sl-post-cat">{p.category}</span>
                  <span className="sl-post-dot">·</span>
                  <span>{p.date}</span>
                  <span className="sl-post-dot">·</span>
                  <span>{p.read}</span>
                </div>
                <h2 className="sl-post-title">{p.title}</h2>
                <p className="sl-post-excerpt">{p.excerpt}</p>
              </div>
              <span className="sl-post-arrow"><Icon name="arrow-up-right" size={24} /></span>
            </article>
          ))}
        </div>
      </div>
    </main>
  );
}
window.BlogList = BlogList;