// WorkView.jsx — vista de detalle de un trabajo
function WorkView({ work, onBack, linkedArticle, onOpenArticle }) {
  React.useEffect(() => { window.scrollTo(0, 0); }, [work?.id]);

  if (!work) return null;

  return (
    <>
      <article className="im-article">
        <button onClick={onBack} className="im-article-back">← Volver a trabajos</button>

        <header className="im-article-head">
          {work.client && <span className="im-eyebrow">{work.client}</span>}
          <h1 className="im-article-title">{work.title}</h1>
        </header>

        {work.coverUrl && (
          <div className="im-article-cover">
            <img src={work.coverUrl} alt={work.title} loading="lazy" />
          </div>
        )}

        {(work.metric || work.metricLabel) && (
          <div className="im-work-metric-hero" style={{ borderLeft: `4px solid ${work.accent || '#005BC2'}` }}>
            {work.metric && <span className="im-work-metric-hero-num">{work.metric}</span>}
            {work.metricLabel && <span className="im-work-metric-hero-lbl">{work.metricLabel}</span>}
          </div>
        )}

        {work.summary && (
          <p className="im-lead" style={{ marginTop: 24 }}>{work.summary}</p>
        )}

        {work.body && work.body.blocks && work.body.blocks.length > 0 && (
          <EditorJSRenderer data={work.body} />
        )}

        {Array.isArray(work.tags) && work.tags.length > 0 && (
          <div className="im-work-tags-row">
            {work.tags.map((t) => (
              <span key={t} className="im-work-detail-tag">{t}</span>
            ))}
          </div>
        )}

        {linkedArticle && (
          <div className="im-work-linked-article">
            <p className="im-work-linked-label">Artículo relacionado</p>
            <button className="im-btn im-btn-primary" onClick={() => onOpenArticle(linkedArticle)}>
              Leer el caso completo →
            </button>
          </div>
        )}
      </article>
    </>
  );
}

window.WorkView = WorkView;