function PostDetail({ post, onBack }) {
  return (
    <article className="post-detail">
      <a className="back" onClick={onBack}>
        <i data-lucide="arrow-left" style={{ width: 14, height: 14 }}></i>
        Volver a Recursos
      </a>
      <span className="eyebrow">{post.cat}</span>
      <h1>{post.title}</h1>
      <div className="meta-line">{post.date} · {post.readTime} de lectura</div>
      {post.excerpt && <p className="lead">{post.excerpt}</p>}
      {(post.body || []).map((para, i) => (
        <p key={i}>{para}</p>
      ))}
      {post.quote && (
        <blockquote>{post.quote}</blockquote>
      )}
      <p style={{ marginTop: 40, fontSize: 'var(--fs-14)', color: 'var(--fg-3)' }}>
        Esta nota está basada en un webinar grabado de HARDI LATAM. La biblioteca
        completa de webinars está disponible para miembros. <a onClick={onBack}>Solicitar acceso →</a>
      </p>
    </article>
  );
}