// pages/Home.jsx
function HomePage({ articles, loading, worksCount, onOpenArticle, onNav, density, variant }) {
  const featured = articles[0];
  const rest = articles.slice(1, 5);
  const hasContent = articles.length > 0;

  return (
    <>
      <Hero
        variant={variant}
        articlesCount={articles.length}
        worksCount={worksCount || 0}
        onCta={() => document.getElementById('articles')?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
      />

      <section id="articles" className="im-section">
        <div className="im-section-head">
          <div>
            <span className="im-eyebrow">Lo último en el blog</span>
            <h2 className="im-h2">Artículo destacado</h2>
          </div>
          {hasContent && (
            <a href="#/blog" className="im-all-link" onClick={(e) => { e.preventDefault(); onNav('blog'); }}>
              Ver todos →
            </a>
          )}
        </div>
        <div className="im-section-body">
          {loading ? (
            <div className="im-empty-state">Cargando artículos…</div>
          ) : featured ? (
            <ArticleCard article={featured} featured onOpen={onOpenArticle} />
          ) : (
            <div className="im-empty-state">
              <h3>Aún no hay artículos publicados</h3>
              <p>Vuelve pronto — o accede al panel para crear el primero.</p>
            </div>
          )}
        </div>
      </section>

      {rest.length > 0 && (
        <section className="im-section">
          <div className="im-section-head">
            <div>
              <span className="im-eyebrow">Más reciente</span>
              <h2 className="im-h2">Lectura para esta semana</h2>
            </div>
          </div>
          <div className={`im-grid im-grid-${density}`}>
            {rest.map((a) => (
              <ArticleCard key={a.id} article={a} onOpen={onOpenArticle} density={density} />
            ))}
          </div>
        </section>
      )}

      <ContactForm />
    </>
  );
}

window.HomePage = HomePage;