// ModelCard.jsx — numbered card 01/02/03 with the SAGUO 1px border
const modelCardStyles = {
  card: {
    border: '1px solid #000', background: '#fff', padding: 0,
    display: 'flex', flexDirection: 'column',
    cursor: 'pointer',
    transition: 'transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s',
  },
  cardHover: { transform: 'translateY(-3px)', boxShadow: '0 8px 28px rgba(0,0,0,0.10)' },
  imgWrap: {
    aspectRatio: '3 / 4',
    overflow: 'hidden', position: 'relative',
    background: '#E8E5E1',
    borderBottom: '1px solid #000',
  },
  img: { width: '100%', height: '100%', objectFit: 'cover', display: 'block', transition: 'transform .6s cubic-bezier(.2,.8,.2,1)' },
  imgHover: { transform: 'scale(1.04)' },
  num: {
    position: 'absolute', top: 12, left: 14,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '-0.03em',
    color: '#F2F2F2', mixBlendMode: 'difference',
  },
  newBadge: {
    position: 'absolute', top: 12, right: 14,
    background: '#000', color: '#F2F2F2',
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    padding: '4px 8px',
  },
  meta: {
    padding: '14px 16px',
    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10,
  },
  name: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 14,
    letterSpacing: '-0.03em', textTransform: 'uppercase', lineHeight: 1.1,
  },
  nameKo: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 11,
    letterSpacing: '-0.03em', color: '#555', marginTop: 4, display: 'block',
  },
  division: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
    whiteSpace: 'nowrap',
  },
};

function ModelCard({ index, name, nameKo, division, image, isNew, onSelect }) {
  const [hover, setHover] = React.useState(false);
  const num = String(index).padStart(2, '0');
  return (
    <div
      style={{ ...modelCardStyles.card, ...(hover ? modelCardStyles.cardHover : {}) }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onSelect}>
      <div style={modelCardStyles.imgWrap}>
        {image
          ? <img src={image} alt={name} style={{ ...modelCardStyles.img, ...(hover ? modelCardStyles.imgHover : {}) }} />
          : <div style={{
              ...modelCardStyles.img,
              ...(hover ? modelCardStyles.imgHover : {}),
              background: 'linear-gradient(160deg, #c8c1b3 0%, #88837a 60%, #5d594f 100%)',
            }} />
        }
        <span style={modelCardStyles.num}>{num}</span>
        {isNew && <span style={modelCardStyles.newBadge}>NEW FACE</span>}
      </div>
      <div style={modelCardStyles.meta}>
        <div>
          <div style={modelCardStyles.name}>{name}</div>
          {nameKo && <span style={modelCardStyles.nameKo}>{nameKo}</span>}
        </div>
        <div style={modelCardStyles.division}>{division}</div>
      </div>
    </div>
  );
}

window.ModelCard = ModelCard;