// pages/Works.jsx — Trabajos / portfolio
function WorksPage({ projects, loading, onOpenProject }) {
  return (
    <>
      <section className="im-page-head">
        <span className="im-eyebrow">Trabajos</span>
        <h1 className="im-h1">Casos reales, números reales.</h1>
        <p className="im-lead" style={{ maxWidth: 640 }}>
          Una selección de algunas aplicaciones que voy creando. Si te suena un problema parecido, te leo en{' '}
          <a href="https://www.linkedin.com/in/isabelmunozrepiso/" target="_blank" rel="noreferrer">LinkedIn</a>.
        </p>
      </section>

      <section className="im-section">
        {loading ? (
          <div className="im-empty-state">Cargando trabajos…</div>
        ) : projects.length === 0 ? (
          <div className="im-empty-state">
            <h3>Aún no hay trabajos publicados</h3>
            <p>Vuelve pronto.</p>
          </div>
        ) : (
          <div className="im-projects-grid">
            {projects.map((p) =>
              <ProjectCard key={p.id} project={p} onOpen={onOpenProject} />
            )}
          </div>
        )}
      </section>

      <ContactForm />
    </>);

}

window.WorksPage = WorksPage;