const { useState: useStateBioM, useEffect: useEffectBioM } = React;

function BibliografiaModal({ onClose }) {
  const [bio] = useStateBioM(function () { return getBioData(); });

  useEffectBioM(function () {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    document.addEventListener('keydown', onKey);
    return function () { document.removeEventListener('keydown', onKey); };
  }, []);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 2000,
        background: 'rgba(10,18,40,0.72)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24, fontFamily: "'Montserrat', sans-serif"
      }}
    >
      <div
        onClick={function (e) { e.stopPropagation(); }}
        style={{
          background: 'white', borderRadius: 18,
          width: 'min(700px, 90vw)',
          overflow: 'hidden',
          boxShadow: '0 40px 100px rgba(0,0,0,0.55)',
          maxHeight: '90vh',
          display: 'flex', flexDirection: 'column'
        }}
      >
        {/* ── Header ── */}
        <div style={{
          background: '#1c79b4',
          padding: '44px 36px 30px',
          position: 'relative',
          textAlign: 'center',
          flexShrink: 0
        }}>
          {/* Botón cerrar */}
          <button
            onClick={onClose}
            style={{
              position: 'absolute', top: 12, right: 12,
              background: 'rgba(255,255,255,0.07)',
              border: '1px solid rgba(255,255,255,0.13)',
              color: 'rgba(255,255,255,0.65)',
              width: 32, height: 32, borderRadius: 8,
              cursor: 'pointer', fontSize: 15,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              lineHeight: 1, fontFamily: 'inherit', transition: 'all .15s'
            }}
            onMouseOver={function (e) { e.currentTarget.style.background = 'rgba(196,180,0,0.18)'; e.currentTarget.style.color = '#c4b400'; e.currentTarget.style.borderColor = 'rgba(196,180,0,0.4)'; }}
            onMouseOut={function (e) { e.currentTarget.style.background = 'rgba(255,255,255,0.07)'; e.currentTarget.style.color = 'rgba(255,255,255,0.65)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.13)'; }}
          >✕</button>

          {/* Foto circular */}
          <div style={{
            width: 190, height: 190, borderRadius: '50%',
            border: '4px solid #c4b400',
            overflow: 'hidden',
            margin: '0 auto 22px',
            background: bio.photo ? '#145580' : '#cbd5e1',
            boxShadow: '0 12px 40px rgba(0,0,0,0.45)',
            flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            {bio.photo ? (
              <img
                src={bio.photo}
                alt="Autor"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }}
              />
            ) : (
              <svg width="55%" height="55%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="8" r="4" fill="#94a3b8" />
                <path d="M4 20c0-4.418 3.582-8 8-8s8 3.582 8 8" fill="#94a3b8" />
              </svg>
            )}
          </div>

          <div style={{
            fontSize: 13, color: '#c4b400', fontWeight: 700,
            textTransform: 'uppercase', letterSpacing: '0.14em'
          }}>Bibliografía del Creador del Curso</div>
        </div>

        {/* ── Body ── */}
        <div style={{ padding: '32px 40px 28px', overflowY: 'auto', flex: 1 }}>
          {bio.text.split('\n\n').map(function (par, i) {
            return par.trim() ? (
              <p key={i} style={{
                margin: i > 0 ? '18px 0 0' : '0',
                fontSize: 15, color: '#374151',
                lineHeight: 1.85, textWrap: 'pretty'
              }}>{par.trim()}</p>
            ) : null;
          })}
        </div>

        {/* ── Footer ── */}
        <div style={{
          padding: '16px 40px 22px',
          borderTop: '1px solid #f1f5f9',
          display: 'flex', justifyContent: 'center',
          flexShrink: 0
        }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            background: '#145580', borderRadius: 6, padding: '5px 14px'
          }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#F5A623' }}></div>
            <span style={{ fontSize: 9, color: 'rgba(255,255,255,0.55)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em' }}>ASSYST</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.BibliografiaModal = BibliografiaModal;