// Bookers.jsx — staff directory
const bookersStyles = {
  wrap: { padding: '80px 36px 100px', maxWidth: 1280, margin: '0 auto' },
  head: { paddingBottom: 24, borderBottom: '1px solid #000', marginBottom: 40 },
  eyebrow: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555', marginBottom: 10,
  },
  ko: {
    fontFamily: 'Pretendard', fontWeight: 700, fontSize: 'clamp(36px, 4.5vw, 56px)',
    letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0,
  },
  en: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 28px)',
    letterSpacing: '-0.03em', textTransform: 'uppercase', marginTop: 4,
  },
  table: {
    width: '100%', borderCollapse: 'collapse',
  },
  row: {
    borderBottom: '1px solid #E5E5E5',
    transition: 'background .2s',
  },
  cell: {
    padding: '22px 16px',
    fontFamily: "'Pretendard'", fontWeight: 400, fontSize: 13,
    letterSpacing: '-0.03em', color: '#000', verticalAlign: 'middle',
    textAlign: 'left',
  },
  num: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 11,
    letterSpacing: '-0.03em', color: '#9A9A9A', width: 50,
  },
  name: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 18,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
  },
  nameKo: {
    display: 'block',
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 11,
    letterSpacing: '-0.03em', color: '#9A9A9A', marginTop: 4,
  },
  role: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
  },
  email: {
    fontFamily: 'Pretendard', fontWeight: 400, fontSize: 13,
    letterSpacing: '-0.03em', color: '#000', textDecoration: 'none',
    borderBottom: '1px solid #000',
  },
  thead: {
    borderBottom: '1px solid #000',
  },
  th: {
    padding: '12px 16px',
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#555',
    textAlign: 'left',
  },
};

function Bookers({ bookers }) {
  return (
    <section style={bookersStyles.wrap}>
      <header style={bookersStyles.head}>
        <div style={bookersStyles.eyebrow}>Bookers · 북커</div>
        <h2 style={bookersStyles.ko}>모델을 책임지는 사람들.</h2>
        <div style={bookersStyles.en}>The People Behind The Faces.</div>
      </header>

      <table style={bookersStyles.table}>
        <thead style={bookersStyles.thead}>
          <tr>
            <th style={{ ...bookersStyles.th, width: 50 }}>#</th>
            <th style={bookersStyles.th}>Name</th>
            <th style={bookersStyles.th}>Role · 직책</th>
            <th style={bookersStyles.th}>Division</th>
            <th style={bookersStyles.th}>Contact</th>
          </tr>
        </thead>
        <tbody>
          {bookers.map((b, i) => (
            <tr key={i} style={bookersStyles.row}>
              <td style={{ ...bookersStyles.cell, ...bookersStyles.num }}>{String(i+1).padStart(2,'0')}</td>
              <td style={bookersStyles.cell}>
                <span style={bookersStyles.name}>{b.name}</span>
                <span style={bookersStyles.nameKo}>{b.nameKo}</span>
              </td>
              <td style={{ ...bookersStyles.cell, ...bookersStyles.role }}>{b.role}</td>
              <td style={{ ...bookersStyles.cell, ...bookersStyles.role, color: '#000' }}>{b.division}</td>
              <td style={bookersStyles.cell}>
                <a href={`mailto:${b.email}`} style={bookersStyles.email}>{b.email}</a>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

window.Bookers = Bookers;