// Compatible con Babel standalone — NO usar imports
function EsperiencyLabShell({
  title,
  description,
  checklist,
  checklistState,
  onClose,
  children,
  success,
  successMessage,
}) {
  const content = window.EsperiencyTutorialContent || {};
  const hub = content.hub || {};
  const ui = content.ui || {};

  return (
    <div className="tutorial-lab tutorial-layer" role="dialog" aria-modal="true" aria-labelledby="tutorial-lab-title">
      <div className="tutorial-lab-shell">
        <aside className="tutorial-lab-aside">
          <h3 id="tutorial-lab-title">{title}</h3>
          <p>{description || ui.labHint}</p>
          <ul className="tutorial-lab-checklist">
            {(checklist || []).map((item) => {
              const done = !!(checklistState && checklistState[item.id]);
              return (
                <li key={item.id} className={done ? 'done' : ''}>
                  <i className={`fas ${done ? 'fa-circle-check' : 'fa-circle'}`} aria-hidden="true"></i>
                  <span>{item.label}</span>
                </li>
              );
            })}
          </ul>
          {success && (
            <div className="tutorial-lab-success" role="status">
              {successMessage || ui.labSuccess || '¡Laboratorio completado!'}
            </div>
          )}
        </aside>
        <div className="tutorial-lab-main">
          <div className="tutorial-lab-toolbar">
            <span style={{ color: 'var(--tutorial-muted)', fontSize: '0.8rem' }}>
              Sandbox · datos ficticios
            </span>
            <button type="button" className="tutorial-btn tutorial-btn-secondary" onClick={onClose}>
              {hub.back || 'Volver'}
            </button>
          </div>
          <div className="tutorial-lab-sandbox">{children}</div>
        </div>
      </div>
    </div>
  );
}

window.EsperiencyLabShell = EsperiencyLabShell;