// OBEY — share card overlay (self-contained, social-ready)

function ShareCard({ stats = { life: 87, obedience: 92, obeyedCount: 6 }, summary, onClose }) {
  const verdictText = stats.obeyedCount >= 6
    ? 'Subject completed the seven-day experiment with high compliance and one detected lie.'
    : stats.obeyedCount >= 4
      ? 'Subject completed the seven-day experiment. Compliance: partial. Will to resist: detected.'
      : 'Subject failed the seven-day experiment. The algorithm could not improve them.';
  const headline = stats.obeyedCount >= 4 ? 'obeyed.' : 'resisted.';

  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.85)',
      backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, zIndex: 60,
    }}
    onClick={onClose}
    >
      <div onClick={(e) => e.stopPropagation()} style={{
        width: '100%', maxWidth: 320,
        background: 'linear-gradient(180deg, #1A0F2E 0%, #0A0612 100%)',
        border: '1px solid var(--line-2)', borderRadius: 22, padding: 22,
        boxShadow: '0 30px 60px rgba(0,0,0,0.6)', position: 'relative',
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 12, right: 12, background: 'transparent',
          border: 'none', color: 'var(--mute)', fontSize: 18, cursor: 'pointer',
        }}>×</button>

        <div style={{
          background: '#F5F1E8', borderRadius: 16, padding: 22, color: '#0A0612',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: 0, right: 0, padding: 10 }}>
            <span className="mono" style={{ fontSize: 9, color: '#0A0612', opacity: 0.5 }}>EXP-4127</span>
          </div>
          <ObeyMark size={18} color="#0A0612" dot="#FF3B3B" />
          <div className="mono all-caps" style={{ fontSize: 9, color: '#0A0612', opacity: 0.6, marginTop: 14 }}>OFFICIAL VERDICT · DAY 07</div>

          <div className="serif" style={{ fontSize: 38, lineHeight: 1, marginTop: 8, fontStyle: 'italic' }}>
            {headline}
          </div>
          <div style={{ fontSize: 12, marginTop: 8, lineHeight: 1.5, color: 'rgba(10,6,18,0.7)' }}>
            "{summary || verdictText}"
          </div>

          <div style={{ marginTop: 20, paddingTop: 14, borderTop: '1px dashed rgba(10,6,18,0.25)', display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div className="serif" style={{ fontSize: 28 }}>{stats.life}</div>
              <div className="mono all-caps" style={{ fontSize: 8, opacity: 0.6 }}>LIFE</div>
            </div>
            <div>
              <div className="serif" style={{ fontSize: 28 }}>{stats.obedience}%</div>
              <div className="mono all-caps" style={{ fontSize: 8, opacity: 0.6 }}>OBEY</div>
            </div>
            <div>
              <div className="serif" style={{ fontSize: 28 }}>{stats.obeyedCount}/7</div>
              <div className="mono all-caps" style={{ fontSize: 8, opacity: 0.6 }}>STREAK</div>
            </div>
          </div>

          <div style={{ marginTop: 18, padding: 10, background: '#0A0612', borderRadius: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span className="mono" style={{ fontSize: 9, color: 'var(--paper)', letterSpacing: '0.2em' }}>obey.app/v/4127</span>
            <span className="mono" style={{ fontSize: 9, color: 'var(--acid)' }}>► YOU?</span>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <button style={{ flex: 1, background: 'var(--paper)', color: 'var(--void)', border: 'none', borderRadius: 10, padding: 12, fontFamily: 'Inter', fontWeight: 700, fontSize: 11, letterSpacing: '0.2em', cursor: 'pointer' }}>SAVE IMAGE</button>
          <button style={{ flex: 1, background: 'transparent', color: 'var(--paper)', border: '1px solid var(--line-2)', borderRadius: 10, padding: 12, fontFamily: 'Inter', fontWeight: 700, fontSize: 11, letterSpacing: '0.2em', cursor: 'pointer' }}>COPY LINK</button>
        </div>
      </div>
    </div>
  );
}

window.ShareCard = ShareCard;