// ProjectCard.jsx — card para "Trabajos"
function ProjectCard({ project, onOpen }) {
  return (
    <article className="im-project" onClick={() => onOpen?.(project)}>
      <div
        className="im-project-visual"
        style={{ background: `linear-gradient(135deg, var(--im-navy) 0%, ${project.accent} 100%)` }}
      >
        {project.coverUrl && (
          <img className="im-project-cover-img" src={project.coverUrl} alt={project.title} loading="lazy" />
        )}
        <div className="im-project-metric">
          <span className="im-project-metric-num">{project.metric}</span>
          <span className="im-project-metric-lbl">{project.metricLabel}</span>
        </div>
        <div className="im-project-tags">
          {(project.tags || []).map((t) => (
            <span key={t} className="im-project-tag">{t}</span>
          ))}
        </div>
      </div>
      <div className="im-project-body">
        <span className="im-eyebrow">{project.client}</span>
        <h3 className="im-project-title">{project.title}</h3>
        <p className="im-project-summary">{project.summary}</p>
        <span className="im-project-cta">Ver caso →</span>
      </div>
    </article>
  );
}

window.ProjectCard = ProjectCard;