// ============================================================
// MEMBERSHIP — direct, concrete inquiry section
// ============================================================

function Membership() {
  const ref = useReveal();
  const [form, setForm] = useState({ name: "", phone: "", guests: "4", room: "", msg: "" });
  const [sent, setSent] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };

  return (
    <section className="section reveal" ref={ref} id="membership" data-screen-label="05 Contact">
      <div className="container">
        <div className="section-head">
          <span className="num">— 05</span>
          <h2 className="title">예약 문의 <span className="en">Make a Reservation</span></h2>
          <span className="tail">24h 응답</span>
        </div>

        <div className="membership">
          <div className="membership-img">
            <img src={IMG.modelC} alt="" />
          </div>
          <div className="membership-body">
            {sent ? (
              <div style={{display:"flex", flexDirection:"column", justifyContent:"center", alignItems:"center", height:"100%", gap:"var(--s-4)", textAlign:"center"}}>
                <div className="confirm-crest">N</div>
                <h3 style={{fontSize:32}}>접수 완료</h3>
                <p style={{color:"var(--ink-300)", fontSize:15, maxWidth:360}}>30분 내로 담당자가 연락드립니다. 카카오톡 또는 문자로 회신 드립니다.</p>
                <button className="btn btn-ghost" onClick={() => setSent(false)}>다시 문의</button>
              </div>
            ) : (
              <>
                <div>
                  <div className="eyebrow" style={{fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:".24em", color:"var(--gold-300)", marginBottom:12}}>RESERVATION INQUIRY</div>
                  <h3>오늘 밤,<br/>자리 잡으세요.</h3>
                  <p style={{fontSize:15, lineHeight:1.7, color:"var(--ink-300)", maxWidth:420, marginTop:12}}>
                    소개 없이도 첫 방문 문의 가능합니다. 인원, 날짜, 목적 남겨주시면 최적의 룸을 배정해드립니다.
                  </p>
                </div>

                <form onSubmit={submit} style={{display:"grid", gap:"var(--s-3)", marginTop:"var(--s-5)"}}>
                  <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"var(--s-3)"}}>
                    <input
                      className="inp" placeholder="이름"
                      value={form.name} onChange={e => setForm(f=>({...f,name:e.target.value}))}
                    />
                    <input
                      className="inp" placeholder="연락처"
                      value={form.phone} onChange={e => setForm(f=>({...f,phone:e.target.value}))}
                    />
                  </div>
                  <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:"var(--s-3)"}}>
                    <input
                      className="inp" placeholder="인원 수"
                      value={form.guests} onChange={e => setForm(f=>({...f,guests:e.target.value}))}
                    />
                    <select
                      className="inp"
                      value={form.room} onChange={e => setForm(f=>({...f,room:e.target.value}))}
                    >
                      <option value="">희망 룸 (선택)</option>
                      {ROOMS.filter(r=>r.status!=="lock").map(r=>(
                        <option key={r.id} value={r.id}>{r.name}</option>
                      ))}
                    </select>
                  </div>
                  <textarea
                    className="inp" placeholder="방문 목적 / 요청사항 (선택)"
                    rows={3} style={{resize:"none"}}
                    value={form.msg} onChange={e => setForm(f=>({...f,msg:e.target.value}))}
                  />
                  <div style={{display:"flex", gap:"var(--s-3)", marginTop:"var(--s-2)"}}>
                    <button type="submit" className="btn btn-primary" data-magnetic style={{flex:1}}>문의 보내기 <I.Arrow /></button>
                    <a href="tel:0200000000" className="btn btn-ghost" data-magnetic><I.Phone /> 전화 문의</a>
                  </div>
                </form>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Membership = Membership;