// P7 — Contact

function PageContact({ setPage }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', lodge: '苗場 NAEBA', guests: '', date: '', message: '',
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSubmitted(true); window.scrollTo({ top: 0, behavior: 'smooth' }); };

  const maps = [
    { zh: '苗場 NAEBA',  en: 'NIIGATA · MITSUMATA',  addr: '〒000-0000 新潟県南魚沼郡湯沢町\nYukisaki Naeba Concept Address 1-1',  url: 'https://maps.google.com/maps?q=苗場スキー場&output=embed' },
    { zh: '湯澤 YUZAWA', en: 'NIIGATA · ECHIGO',     addr: '〒000-0000 新潟県南魚沼郡湯沢町\nYukisaki Yuzawa Concept Address 2-2',  url: 'https://maps.google.com/maps?q=湯沢高原スキー場&output=embed' },
    { zh: '藏王 ZAO',    en: 'YAMAGATA · ZAO ONSEN', addr: '〒000-0000 山形県山形市蔵王温泉\nYukisaki Zao Concept Address 3-3',        url: 'https://maps.google.com/maps?q=蔵王温泉スキー場&output=embed' },
  ];

  return (
    <main key="contact">
      <section className="page-header" style={{ height: '50vh', minHeight: 380 }} data-screen-label="07 聯絡預約">
        <div className="page-header__photo" style={{ backgroundImage: `url(${PHOTO.contact_hero})` }} />
        <div className="page-header__content">
          <div className="page-header__crumb enter-up">— CONTACT & ENQUIRY / 07</div>
          <h1 className="page-header__title enter-up d-100">聯絡雪境</h1>
          <div className="page-header__sub enter-up d-200">這是一份詢問單，不是即時訂房系統。</div>
        </div>
      </section>

      <section className="section">
        <div className="contact-form">
          <div className="contact-form__intro">
            <div className="eyebrow" style={{ marginBottom: 20 }}>— ENQUIRY FORM</div>
            <h2>說說你的雪國計畫，<br />我們會花時間回覆。</h2>
            <p>
              此表單為作品集互動示意，不會送出真實預約。<br />
              本頁呈現的是旅宿品牌網站的詢問流程設計，<strong style={{ color: 'var(--ink)' }}>非實際客服承諾</strong>。
            </p>
            <div className="notice">
              <strong>PORTFOLIO NOTE</strong>
              本網站為設計提案作品，所有表單欄位、館別資訊與聯絡資料均為虛構示意。
              此互動僅展示網站架構與旅宿體驗設計，不代表真實服務或預約功能。
            </div>
          </div>

          {submitted ? (
            <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 80, paddingBottom: 80, textAlign: 'center' }}>
              <div className="eyebrow" style={{ color: 'var(--blue-hour)', marginBottom: 24 }}>— SENT</div>
              <h3 className="h1" style={{ fontWeight: 300, marginBottom: 20 }}>已送出示意表單。</h3>
              <p className="lede" style={{ maxWidth: 520, margin: '0 auto 40px' }}>
                這是一份作品集互動示意，表單不會送出真實資料。<br />
                也許可以繼續瀏覽其他頁面。
              </p>
              <button className="btn" onClick={() => setPage('home')}>
                <BtnLabel>返回首頁</BtnLabel><Arrow />
              </button>
            </div>
          ) : (
            <form onSubmit={submit}>
              <div className="form-grid">
                <div className="form-field">
                  <label>NAME <span className="zh">姓名</span></label>
                  <input type="text" value={form.name} onChange={set('name')} placeholder="王先生 / Mr. Wang" required />
                </div>
                <div className="form-field">
                  <label>EMAIL</label>
                  <input type="email" value={form.email} onChange={set('email')} placeholder="hello@example.com" required />
                </div>
                <div className="form-field">
                  <label>PHONE <span className="zh">電話</span></label>
                  <input type="tel" value={form.phone} onChange={set('phone')} placeholder="+886 9XX XXX XXX" />
                </div>
                <div className="form-field">
                  <label>PREFERRED LODGE <span className="zh">希望入住館別</span></label>
                  <select value={form.lodge} onChange={set('lodge')}>
                    <option>苗場 NAEBA</option>
                    <option>湯澤 YUZAWA</option>
                    <option>藏王 ZAO</option>
                    <option>尚未決定，請推薦</option>
                  </select>
                </div>
                <div className="form-field">
                  <label>GUESTS <span className="zh">預計人數</span></label>
                  <input type="text" value={form.guests} onChange={set('guests')} placeholder="2 名大人 / 1 名兒童（6 歲）" />
                </div>
                <div className="form-field">
                  <label>DATES <span className="zh">預計時間</span></label>
                  <input type="text" value={form.date} onChange={set('date')} placeholder="2027 / 01 / 15 – 18" />
                </div>
                <div className="form-field form-field--full">
                  <label>MESSAGE <span className="zh">訊息備注</span></label>
                  <textarea value={form.message} onChange={set('message')} rows="4" placeholder="例如：第一次滑雪、小孩 4 歲、希望有華語教練、想嘗試樹冰行程……" />
                </div>
              </div>
              <div className="form-actions">
                <div className="form-disclaimer">此為作品集表單示意，不會送出真實預約</div>
                <button type="submit" className="btn">
                  <BtnLabel>送出詢問</BtnLabel><Arrow />
                </button>
              </div>
            </form>
          )}
        </div>
      </section>

      {/* Three maps */}
      <section id="maps" style={{ background: 'var(--paper)' }}>
        <div className="shell" style={{ paddingTop: 'clamp(56px,7vw,100px)', paddingBottom: 36 }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>— LOCATIONS</div>
          <h2 className="h1" style={{ maxWidth: 720 }}>三館位置。</h2>
        </div>
        <div className="maps-row">
          {maps.map(m => (
            <div className="map-cell" key={m.en}>
              <h4>{m.zh.split(' ')[0]}</h4>
              <div className="en">— {m.en}</div>
              <div className="map-frame">
                <iframe src={m.url} loading="lazy" title={m.zh} />
              </div>
              <div className="address" style={{ whiteSpace: 'pre-line' }}>{m.addr}</div>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

window.PageContact = PageContact;