/** Sexy Geek DS — model card — editorial portrait card for the model entities. */
function ModelCard({ name, imgSrc, rank, views, featured = false, onClick }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      className="gx-pixel-corners-sm"
      style={{ position: 'relative', overflow: 'hidden', aspectRatio: '3/4', cursor: 'pointer',
        border: featured ? `1px solid ${hov ? 'rgba(98,216,255,0.7)' : 'rgba(98,216,255,0.35)'}` : `1px solid ${hov ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.05)'}`,
        boxShadow: hov ? (featured ? '0 0 28px rgba(98,216,255,0.35), 0 8px 32px rgba(0,0,0,0.5)' : '0 0 20px rgba(8,118,201,0.3), 0 8px 32px rgba(0,0,0,0.5)') : '0 4px 20px rgba(0,0,0,0.5)',
        transform: hov ? 'translateY(-4px) scale(1.01)' : 'translateY(0) scale(1)',
        transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s', background: '#14141C' }}>
      <img src={imgSrc} alt={name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.3) 50%, transparent 100%)' }} />
      {rank != null && (
        <div style={{ position: 'absolute', top: 8, left: 12, fontFamily: "'Space Grotesk', sans-serif", fontWeight: 900, fontSize: 64, lineHeight: 1, color: featured ? 'rgba(98,216,255,0.18)' : 'rgba(255,255,255,0.07)', userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.04em' }}>{rank}</div>
      )}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 14px 16px' }}>
        {featured && (
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 9999, background: 'rgba(98,216,255,0.2)', color: '#62D8FF', border: '1px solid rgba(98,216,255,0.4)', fontFamily: "'Inter', sans-serif", lineHeight: 1, marginBottom: 6 }}>
            <svg width="7" height="7" viewBox="0 0 24 24" fill="#62D8FF"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" /></svg>
            MAIS POPULAR
          </div>
        )}
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 15, color: '#EFEFEF', lineHeight: 1.2, textWrap: 'pretty' }}>{name}</div>
        {views > 0 && <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 3, fontFamily: "'Inter', sans-serif" }}>{views} visualizações</div>}
      </div>
    </div>
  );
}

window.SexyGeekDS = window.SexyGeekDS || {};
window.SexyGeekDS.ModelCard = ModelCard;