// Careers — always-open application + benefits + ฝากประวัติ form

const POSITIONS = [
  { num: '๐๑', title: 'พนักงานรักษาความปลอดภัย', dept: 'Security' },
  { num: '๐๒', title: 'หัวหน้าทีมทำความสะอาด',   dept: 'Cleaning' },
  { num: '๐๓', title: 'พนักงานทำความสะอาดทั่วไป', dept: 'Cleaning' },
  { num: '๐๔', title: 'คนสวน · ภูมิทัศน์',        dept: 'Garden' },
  { num: '๐๕', title: 'พนักงานขับรถองค์กร',      dept: 'Fleet' },
  { num: '๐๖', title: 'เจ้าหน้าที่งานสูง · Rope Access', dept: 'Height Work' },
  { num: '๐๗', title: 'เจ้าหน้าที่สืบสวน',          dept: 'Investigation' },
  { num: '๐๘', title: 'ผู้จัดการอาคาร · FM',      dept: 'Facility Mgmt' },
];

const BENEFITS = [
  { k: 'ประกันสุขภาพ',     v: 'ครอบครัว' },
  { k: 'ฝึกอบรม',          v: 'ทุกตำแหน่ง' },
  { k: 'โบนัส',            v: 'รายปี' },
  { k: 'ที่พัก',            v: 'บางตำแหน่ง' },
  { k: 'ยูนิฟอร์ม',         v: 'ครบชุด' },
  { k: 'วันหยุด',          v: '๑๕+ วัน/ปี' },
];

function PositionRow({ p, last }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        display: 'grid', gridTemplateColumns: '0.7fr 4fr 2fr 1fr',
        gap: '2.5rem', padding: '2.2rem 0', alignItems: 'baseline',
        borderTop: '1px solid rgba(26,43,74,0.1)',
        borderBottom: last ? '1px solid rgba(26,43,74,0.1)' : 'none',
        cursor: 'default', transition: 'background 0.3s',
      }}>
      <div style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 300,
        fontSize: '1.6rem', color: h ? '#2d6a7a' : '#1a2b4a', transition: 'color 0.3s' }}>{p.num}</div>
      <div style={{ fontFamily: "'Cormorant Garamond',serif", fontWeight: 400,
        fontSize: '1.6rem', color: '#1a2b4a', lineHeight: 1.3 }}>{p.title}</div>
      <div style={{ fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.72rem',
        letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2d6a7a' }}>{p.dept}</div>
      <div style={{ textAlign: 'right',
        fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem',
        letterSpacing: '0.3em', textTransform: 'uppercase',
        color: h ? '#2d6a7a' : 'rgba(26,43,74,0.5)', transition: 'color 0.3s' }}>เปิดรับ</div>
    </div>
  );
}

function ApplyForm() {
  const [done, setDone] = React.useState(false);
  const [pos, setPos] = React.useState('');
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [email, setEmail] = React.useState('');
  const onDark = true;

  if (done) {
    return (
      <div style={{
        textAlign: 'center', padding: '3rem 0',
        fontFamily: "'Cormorant Garamond',serif", fontWeight: 400,
        fontSize: '1.6rem', color: '#fbfaf5', lineHeight: 1.5,
      }}>
        ขอบคุณ <em style={{ fontStyle: 'italic', color: 'rgba(95,160,176,0.95)' }}>{name}</em><br />
        <span style={{ fontFamily: "'Sarabun',sans-serif", fontSize: '1rem',
          fontWeight: 400, color: 'rgba(251,250,245,0.6)' }}>
          เราจะติดต่อกลับภายใน ๓ วันทำการ
        </span>
      </div>
    );
  }
  return (
    <form onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
      <Field label="ตำแหน่งที่สนใจ" onDark>
        <select value={pos} onChange={(e) => setPos(e.target.value)} required style={inputStyle(onDark)}>
          <option value="" style={{ color: '#1a2b4a' }}>— เลือกตำแหน่ง —</option>
          {POSITIONS.map((p, i) => (
            <option key={i} value={p.title} style={{ color: '#1a2b4a' }}>{p.title}</option>
          ))}
          <option value="other" style={{ color: '#1a2b4a' }}>ฝากประวัติทั่วไป (ไม่ระบุตำแหน่ง)</option>
        </select>
      </Field>
      <Field label="ชื่อ–นามสกุล" onDark>
        <input value={name} onChange={(e) => setName(e.target.value)} required style={inputStyle(onDark)} />
      </Field>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
        <Field label="โทรศัพท์" onDark>
          <input value={phone} onChange={(e) => setPhone(e.target.value)} required style={inputStyle(onDark)} />
        </Field>
        <Field label="อีเมล" onDark>
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle(onDark)} />
        </Field>
      </div>
      <div style={{ marginTop: '2rem' }}>
        <Btn kind="white">ส่งประวัติ</Btn>
      </div>
    </form>
  );
}

function Careers() {
  return (
    <section id="careers" style={{ padding: '9rem 0', background: '#fbfaf5' }}>
      <Wrap>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '5rem',
          marginBottom: '5rem', alignItems: 'end',
        }}>
          <div>
            <Eyebrow>ร่วมงานกับเรา · Careers</Eyebrow>
            <H2>เปิดรับ<br /><em style={{ fontStyle: 'italic', color: '#2d6a7a' }}>ตลอดทั้งปี</em></H2>
            <SecP style={{ marginTop: '1.5rem' }}>
              ทุกตำแหน่งของ BEST∞ เปิดรับสมัครต่อเนื่อง
              ฝากประวัติไว้ก่อนได้เลย เมื่อมีตำแหน่งว่าง เราจะติดต่อกลับ
            </SecP>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: "'Cormorant Garamond',serif", fontWeight: 300,
              fontSize: 'clamp(4rem,7vw,6.5rem)', lineHeight: 1, color: '#1a2b4a',
            }}>๓๖๕</div>
            <div style={{
              fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.78rem',
              letterSpacing: '0.32em', textTransform: 'uppercase', color: '#2d6a7a',
              marginTop: '0.8rem',
            }}>วัน · เปิดรับสมัครตลอดปี</div>
          </div>
        </div>

        <div style={{ marginBottom: '6rem' }}>
          {POSITIONS.map((p, i) => (
            <PositionRow key={i} p={p} last={i === POSITIONS.length - 1} />
          ))}
        </div>

        {/* Benefits + Apply form */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '5rem',
          padding: '5rem', background: '#1a2b4a', color: '#fbfaf5',
        }}>
          <div>
            <div style={{
              fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.75rem',
              letterSpacing: '0.4em', textTransform: 'uppercase',
              color: 'rgba(95,160,176,0.85)', marginBottom: '1.8rem',
            }}>สวัสดิการ · BENEFITS</div>
            <div style={{
              fontFamily: "'Cormorant Garamond',serif", fontWeight: 400,
              fontSize: 'clamp(1.9rem,2.8vw,2.4rem)', lineHeight: 1.2,
              marginBottom: '2.8rem',
            }}>ดูแลพนักงาน<br /><em style={{ fontStyle: 'italic', color: 'rgba(95,160,176,0.95)' }}>เหมือนครอบครัว</em></div>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.6rem 2.5rem',
              marginBottom: '3rem',
            }}>
              {BENEFITS.map((b, i) => (
                <div key={i} style={{ borderTop: '1px solid rgba(251,250,245,0.15)', paddingTop: '1rem' }}>
                  <div style={{
                    fontFamily: "'Cormorant Garamond',serif", fontWeight: 400,
                    fontSize: '1.35rem', color: '#fbfaf5', marginBottom: '0.3rem',
                  }}>{b.k}</div>
                  <div style={{
                    fontFamily: "'Jost',sans-serif", fontWeight: 400, fontSize: '0.7rem',
                    letterSpacing: '0.3em', textTransform: 'uppercase',
                    color: 'rgba(251,250,245,0.55)',
                  }}>{b.v}</div>
                </div>
              ))}
            </div>
            <div style={{
              fontFamily: "'Sarabun',sans-serif", fontWeight: 300, fontSize: '0.95rem',
              lineHeight: 1.85, color: 'rgba(251,250,245,0.55)',
              borderTop: '1px solid rgba(251,250,245,0.15)', paddingTop: '1.5rem',
            }}>
              หรือส่งประวัติย่อมาที่<br />
              <span style={{ color: '#fbfaf5', fontWeight: 500 }}>be1st.bestinves@gmail.com</span><br />
              <span style={{ color: '#fbfaf5', fontWeight: 500 }}>bestxthailand@gmail.com</span>
            </div>
          </div>

          <div style={{
            paddingLeft: '3rem', borderLeft: '1px solid rgba(251,250,245,0.15)',
          }}>
            <div style={{
              fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.75rem',
              letterSpacing: '0.4em', textTransform: 'uppercase',
              color: 'rgba(95,160,176,0.85)', marginBottom: '1rem',
            }}>ฝากประวัติ · QUICK APPLY</div>
            <div style={{
              fontFamily: "'Cormorant Garamond',serif", fontWeight: 400,
              fontSize: '1.5rem', lineHeight: 1.5, marginBottom: '2rem',
              color: 'rgba(251,250,245,0.85)',
            }}>กรอกข้อมูล มีตำแหน่งว่างเมื่อไหร่<br />
              <em style={{ fontStyle: 'italic', color: 'rgba(95,160,176,0.95)' }}>เราจะติดต่อกลับ</em>
            </div>
            <ApplyForm />
          </div>
        </div>
      </Wrap>
    </section>
  );
}
window.Careers = Careers;