// CastingForm.jsx — casting / contact form
const castingStyles = {
  wrap: { padding: '80px 36px 120px', maxWidth: 1280, margin: '0 auto' },
  layout: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' },
  left: { display: 'flex', flexDirection: 'column', gap: 28 },
  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', margin: 0,
  },
  en: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 28px)',
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#000',
  },
  desc: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 14,
    letterSpacing: '-0.03em', lineHeight: 1.95, color: '#555', marginTop: 14, maxWidth: 360,
  },
  info: {
    marginTop: 30, paddingTop: 24, borderTop: '1px solid #000',
    display: 'flex', flexDirection: 'column', gap: 16,
  },
  infoRow: { display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'baseline' },
  infoLabel: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#9A9A9A',
  },
  infoValue: {
    fontFamily: 'Pretendard', fontWeight: 400, fontSize: 13,
    letterSpacing: '-0.03em', color: '#000', textAlign: 'right',
  },
  form: { border: '1px solid #000', background: '#fff', padding: '40px 40px 32px' },
  fieldRow: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 },
  field: { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 },
  label: {
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 10,
    letterSpacing: '-0.03em', textTransform: 'uppercase', color: '#000',
    display: 'flex', justifyContent: 'space-between',
  },
  labelKo: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 11,
    letterSpacing: '-0.03em', color: '#9A9A9A', textTransform: 'none',
  },
  input: {
    border: '1px solid #000', padding: '14px 16px', background: '#fff',
    fontFamily: 'Pretendard', fontWeight: 400, fontSize: 14,
    letterSpacing: '-0.03em', outline: 'none',
    boxSizing: 'border-box', width: '100%',
  },
  textarea: { minHeight: 120, resize: 'vertical', fontFamily: 'Pretendard' },
  select: {
    border: '1px solid #000', padding: '14px 16px', background: '#fff',
    fontFamily: 'Pretendard', fontWeight: 400, fontSize: 14,
    appearance: 'none', boxSizing: 'border-box', width: '100%',
    cursor: 'pointer',
  },
  submitRow: { display: 'flex', gap: 16, marginTop: 28, alignItems: 'center' },
  submit: {
    flex: 1,
    fontFamily: "'Pretendard'", fontWeight: 700, fontSize: 13,
    letterSpacing: '-0.03em', textTransform: 'uppercase',
    background: '#000', color: '#F2F2F2', border: '1px solid #000',
    padding: '20px', cursor: 'pointer',
    display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 14,
  },
  hint: {
    fontFamily: 'Pretendard', fontWeight: 300, fontSize: 11,
    letterSpacing: '-0.03em', color: '#9A9A9A', flex: 1, lineHeight: 1.6,
  },
};

function CastingForm() {
  return (
    <section style={castingStyles.wrap}>
      <div style={castingStyles.layout}>
        <div style={castingStyles.left}>
          <div style={castingStyles.eyebrow}>Casting · 캐스팅 문의</div>
          <h2 style={castingStyles.ko}>한 명의 모델로<br/>완벽한 한 컷을.</h2>
          <div style={castingStyles.en}>Request a Casting.</div>
          <p style={castingStyles.desc}>
            패션, 광고, 영상, 런웨이 — 어떤 캐스팅이든 문의해 주세요. 영업일 기준 24시간 내에 담당 북커가 회신드립니다.
          </p>
          <div style={castingStyles.info}>
            <div style={castingStyles.infoRow}>
              <span style={castingStyles.infoLabel}>Office</span>
              <span style={castingStyles.infoValue}>서울특별시 서초구<br/>사임당로8길 13</span>
            </div>
            <div style={castingStyles.infoRow}>
              <span style={castingStyles.infoLabel}>Email</span>
              <span style={castingStyles.infoValue}>casting@saguo.kr</span>
            </div>
            <div style={castingStyles.infoRow}>
              <span style={castingStyles.infoLabel}>Hours</span>
              <span style={castingStyles.infoValue}>Mon–Fri · 10:00–19:00 KST</span>
            </div>
          </div>
        </div>

        <form style={castingStyles.form} onSubmit={(e) => e.preventDefault()}>
          <div style={castingStyles.fieldRow}>
            <div style={castingStyles.field}>
              <label style={castingStyles.label}>
                <span>Company</span><span style={castingStyles.labelKo}>회사 / 매체</span>
              </label>
              <input style={castingStyles.input} placeholder="브랜드 또는 매체명" />
            </div>
            <div style={castingStyles.field}>
              <label style={castingStyles.label}>
                <span>Contact</span><span style={castingStyles.labelKo}>담당자명</span>
              </label>
              <input style={castingStyles.input} placeholder="홍길동" />
            </div>
          </div>

          <div style={castingStyles.fieldRow}>
            <div style={castingStyles.field}>
              <label style={castingStyles.label}>
                <span>Email</span><span style={castingStyles.labelKo}>이메일</span>
              </label>
              <input style={castingStyles.input} type="email" placeholder="you@brand.com" />
            </div>
            <div style={castingStyles.field}>
              <label style={castingStyles.label}>
                <span>Phone</span><span style={castingStyles.labelKo}>연락처</span>
              </label>
              <input style={castingStyles.input} placeholder="+82 10 0000 0000" />
            </div>
          </div>

          <div style={castingStyles.field}>
            <label style={castingStyles.label}>
              <span>Project Type</span><span style={castingStyles.labelKo}>프로젝트 종류</span>
            </label>
            <select style={castingStyles.select}>
              <option>Fashion editorial · 패션 에디토리얼</option>
              <option>Advertising · 광고</option>
              <option>Runway · 런웨이</option>
              <option>Film / Video · 영상</option>
              <option>Lookbook · 룩북</option>
              <option>Other · 기타</option>
            </select>
          </div>

          <div style={castingStyles.field}>
            <label style={castingStyles.label}>
              <span>Brief</span><span style={castingStyles.labelKo}>프로젝트 내용</span>
            </label>
            <textarea
              style={{ ...castingStyles.input, ...castingStyles.textarea }}
              placeholder="촬영 일정, 컨셉, 원하시는 모델 톤이나 분위기를 자유롭게 작성해 주세요." />
          </div>

          <div style={castingStyles.submitRow}>
            <p style={castingStyles.hint}>
              제출 시 SAGUO 개인정보처리방침에 동의한 것으로 간주됩니다.
            </p>
            <button type="submit" style={castingStyles.submit}>
              Send Request
              <span style={{ width: 6, height: 6, background: '#F2F2F2', borderRadius: '50%' }}></span>
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

window.CastingForm = CastingForm;