// ModelsIndex.jsx — single curated grid of all models, no filters
const modelsIndexStyles = {
  wrap: { padding: '80px 36px 120px', maxWidth: 1280, margin: '0 auto' },
  head: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
    paddingBottom: 24, borderBottom: '1px solid #000', marginBottom: 48,
    gap: 40, flexWrap: 'wrap',
  },
  titleBlock: { display: 'flex', flexDirection: 'column', gap: 10 },
  eyebrow: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
  },
  ko: {
    fontFamily: 'Pretendard', fontWeight: 700, fontSize: 'clamp(36px, 4.5vw, 56px)',
    letterSpacing: '-0.03em', lineHeight: 1.05, color: '#000',
  },
  en: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 28px)',
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#000', marginTop: 4,
  },
  count: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
  },
  grid: {
    display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
  },
};

function ModelsIndex({ models, onSelect }) {
  return (
    <section style={modelsIndexStyles.wrap}>
      <header style={modelsIndexStyles.head}>
        <div style={modelsIndexStyles.titleBlock}>
          <div style={modelsIndexStyles.eyebrow}>Roster · 소속 모델</div>
          <h2 style={modelsIndexStyles.ko}>SAGUO ARTIST</h2>
          <div style={modelsIndexStyles.en}>The Faces of SAGUO.</div>
        </div>
        <div style={modelsIndexStyles.count}>{String(models.length).padStart(2,'0')} Models</div>
      </header>
      <div style={modelsIndexStyles.grid}>
        {models.map((m, i) => (
          <ModelCard key={i} index={i + 1} {...m} onSelect={() => onSelect && onSelect(m)} />
        ))}
      </div>
    </section>
  );
}

window.ModelsIndex = ModelsIndex;