// ContactSheet.jsx
const ContactSheet = ({ open, onClose, lang = 'EN' }) => {
  const [name, setName] = React.useState('');
  const [contact, setContact] = React.useState('');
  const [date, setDate] = React.useState('');
  const [notes, setNotes] = React.useState('');

  if (!open) return null;
  const kr = lang === 'KR';

  const send = () => {
    const subject = kr
      ? `[상담 예약] ${name || '이름 없음'}`
      : `[Viewing request] ${name || 'New inquiry'}`;
    const lines = kr
      ? [
          `성함: ${name}`,
          `이메일 / 연락처: ${contact}`,
          `희망 날짜: ${date}`,
          ``,
          `요청 내용:`,
          notes,
        ]
      : [
          `Name: ${name}`,
          `Email / phone: ${contact}`,
          `Preferred date: ${date}`,
          ``,
          `Notes:`,
          notes,
        ];
    const body = lines.join('\n');
    const href = `mailto:ellelee.nestseekers@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = href;
  };

  return (
    <div className="ms-sheet-bg" onClick={onClose}>
      <div className="ms-sheet" onClick={(e) => e.stopPropagation()}>
        <h3>{kr ? '상담 예약' : 'Book a viewing'}</h3>
        <p className="ko">{kr ? '월요일 — 일요일 · 24/7' : 'Monday — Sunday · 24/7'}</p>
        <div className="ms-form">
          <div className="ms-field">
            <label>{kr ? '성함' : 'Your name'}</label>
            <input value={name} onChange={(e) => setName(e.target.value)} placeholder={kr ? '박유나' : 'Yuna Park'} />
          </div>
          <div className="ms-field">
            <label>{kr ? '이메일 또는 연락처' : 'Email or phone'}</label>
            <input value={contact} onChange={(e) => setContact(e.target.value)} placeholder="you@example.com" />
          </div>
          <div className="ms-field">
            <label>{kr ? '희망 날짜' : 'Preferred date'}</label>
            <input value={date} onChange={(e) => setDate(e.target.value)} placeholder={kr ? '3월 21일 토요일 오후' : 'Saturday March 21, afternoon'} />
          </div>
          <div className="ms-field">
            <label>{kr ? '남기실 말씀' : 'Anything else?'}</label>
            <textarea rows="3" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder={kr ? '찾고 계신 집에 대해 편하게 적어주세요.' : "A few details about what you're looking for."}></textarea>
          </div>
          <div className="ms-sheet-actions">
            <button className="btn btn-primary" onClick={send}>{kr ? '요청 보내기' : 'Send request'}</button>
            <button className="btn btn-ghost" onClick={onClose}>{kr ? '취소' : 'Cancel'}</button>
          </div>
          <p className="ms-sheet-note">
            {kr
              ? '요청을 보내면 이메일이 자동으로 작성되어 ellelee.nestseekers@gmail.com 으로 발송됩니다.'
              : 'Sending will compose an email to ellelee.nestseekers@gmail.com from your mail app.'}
          </p>
        </div>
      </div>
    </div>
  );
};

window.ContactSheet = ContactSheet;