function MenuScreen({ onPick }) {
  const [modules, setModules] = React.useState([]);
  const [status, setStatus] = React.useState('loading'); // loading | ready | error
  const [error, setError] = React.useState('');

  React.useEffect(() => {
    let active = true;
    (async () => {
      try {
        const data = await window.ayaniFetchModules();
        if (active) { setModules(data); setStatus('ready'); }
      } catch (err) {
        if (active) { setError(err.message || 'Could not load modules.'); setStatus('error'); }
      }
    })();
    return () => { active = false; };
  }, []);

  return (
    <div className="ay-screen ay-menu" data-screen-label="02 Menu">
      <AyaniBeam />

      {status === 'loading' && <div className="ay-menu-status">Loading modules…</div>}
      {status === 'error' && <div className="ay-menu-status is-error">{error}</div>}

      {status === 'ready' && (
        <div className="ay-module-grid">
          {modules.map(m => (
            <button
              key={m.code}
              className={`ay-module-tile ${m.locked ? 'is-locked' : ''}`}
              onClick={() => !m.locked && onPick(m.code)}
              disabled={m.locked}
            >
              {m.locked && (
                <svg className="ay-module-lock" viewBox="0 0 24 24">
                  <rect x="6" y="11" width="12" height="9" rx="1.5" />
                  <path d="M8 11V8a4 4 0 0 1 8 0v3" />
                </svg>
              )}
              <div className="ay-module-logo">
                <img src="assets/ayani-wordmark-trimmed.jpg" alt="Ayani" className="ay-module-mark" />
              </div>
              <div className="ay-module-title">{m.title}</div>
              <div className="ay-module-footer">
                <div className="ay-module-pct">{m.progress}%</div>
                <div className="ay-module-progress">
                  <div className="ay-module-progress-fill" style={{ width: `${m.progress}%` }} />
                </div>
              </div>
            </button>
          ))}
        </div>
      )}

      <div className="ay-menu-info">
        <div className="ay-menu-info-line">Ayani Advisory Team</div>
        <div className="ay-menu-info-line">advisory@ayani.uk</div>
      </div>
    </div>
  );
}
window.MenuScreen = MenuScreen;