/* BlogSection.jsx — Vista previa del blog en el index.
 * Layout: 1 nota principal (foto izq + texto der) + 3 notas (foto arriba + texto abajo).
 * Incorpora los motivos visuales del sitio: diagonal, linea arcoiris, acentos teal/blue.
 */
function BlogSection() {
  const [posts, setPosts] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    BlogStore.getPublished().then(data => {
      setPosts((data || []).slice(0, 4));
      setLoading(false);
    });
  }, []);

  React.useEffect(() => {
    if (window.lucide) setTimeout(() => window.lucide.createIcons(), 30);
  }, [posts]);

  if (loading || posts.length === 0) return null;

  const [featured, ...rest] = posts;
  const goTo = (post) => { window.location.href = "blog-post.html?id=" + post.id; };

  return (
    <section className="blog-section">
      <div className="blog-section-bg" aria-hidden="true"></div>
      {/* Linea arcoiris superior — motivo del sitio */}
      <div className="blog-section-rainbow" aria-hidden="true"></div>

      <div className="blog-section-inner">

        <div className="blog-section-head">
          <span className="blog-section-eyebrow">
            <i data-lucide="sparkles"></i> Actualidad
          </span>
          <h2 className="blog-section-title">Últimas noticias de <em>HONDULEGAL</em></h2>
          <p className="blog-section-sub">
            Alianzas, novedades legales y actualidad institucional.
          </p>
        </div>

        {/* NOTA PRINCIPAL — foto izquierda + texto derecha */}
        <article
          className="blog-hero-card"
          onClick={() => goTo(featured)}
          role="button" tabIndex={0}
          onKeyDown={e => { if (e.key === "Enter") goTo(featured); }}
        >
          <div className="blog-hero-card-media">
            {featured.image_url
              ? <img src={featured.image_url} alt={featured.title} loading="lazy" />
              : <div className="blog-featured-placeholder"><i data-lucide="newspaper"></i></div>
            }
            <span className="blog-hero-card-badge">
              <i data-lucide="zap"></i> Más reciente
            </span>
          </div>
          <div className="blog-hero-card-body">
            <span className={"blog-cat " + blogCatColor(featured.category)}>{featured.category}</span>
            <h3 className="blog-hero-card-title">{featured.title}</h3>
            {featured.summary && (
              <p className="blog-hero-card-summary">{featured.summary}</p>
            )}
            <div className="blog-hero-card-meta">
              <span><i data-lucide="user"></i>{featured.author}</span>
              <span><i data-lucide="calendar"></i>{BlogStore.fmtDate(featured.created_at)}</span>
            </div>
            <span className="blog-hero-card-cta">
              Leer nota completa <i data-lucide="arrow-right"></i>
            </span>
          </div>
        </article>

        {/* 3 NOTAS — foto arriba + texto abajo */}
        {rest.length > 0 && (
          <div className="blog-trio">
            {rest.slice(0, 3).map(post => (
              <article
                key={post.id}
                className="blog-trio-card"
                onClick={() => goTo(post)}
                role="button" tabIndex={0}
                onKeyDown={e => { if (e.key === "Enter") goTo(post); }}
              >
                <div className="blog-trio-media">
                  {post.image_url
                    ? <img src={post.image_url} alt={post.title} loading="lazy" />
                    : <div className="blog-card-img--placeholder"><i data-lucide="newspaper"></i></div>
                  }
                  <span className={"blog-cat blog-cat--onimg " + blogCatColor(post.category)}>{post.category}</span>
                </div>
                <div className="blog-trio-body">
                  <h4 className="blog-trio-title">{post.title}</h4>
                  {post.summary && <p className="blog-trio-summary">{post.summary}</p>}
                  <div className="blog-trio-footer">
                    <span className="blog-trio-date">
                      <i data-lucide="calendar"></i>{BlogStore.fmtDate(post.created_at)}
                    </span>
                    <i data-lucide="arrow-right" className="blog-trio-arrow"></i>
                  </div>
                </div>
              </article>
            ))}

            {/* Si faltan para 3, tarjeta-invitacion con estilo del sitio */}
            {rest.length < 3 && (
              <a href="blog.html" className="blog-trio-more">
                <div className="blog-trio-more-inner">
                  <i data-lucide="layout-grid"></i>
                  <span>Explora todas nuestras publicaciones</span>
                  <i data-lucide="arrow-right" className="blog-trio-more-arrow"></i>
                </div>
              </a>
            )}
          </div>
        )}

        <div className="blog-section-cta">
          <a href="blog.html" className="blog-viewall-btn">
            Ver blog completo
            <i data-lucide="arrow-right"></i>
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BlogSection });