// ReservePage.jsx — Reservation form page
const ReservePage = ({ onNavigate }) => {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({ service: '', date: '', people: '2', name: '', email: '', notes: '' });
  const [submitted, setSubmitted] = React.useState(false);

  const services = [
    { id: 'picking', label: 'ブルーベリー摘み取り', price: '¥1,500〜/名', season: '6月〜8月', color: '#1A3A6E' },
    { id: 'workshop', label: '農業・加工体験', price: '¥2,500〜/名', season: '通年（要予約）', color: '#5E9252' },
    { id: 'both', label: '摘み取り＋加工体験セット', price: '¥3,500〜/名', season: '6月〜8月', color: '#C9920A' },
  ];

  const field = { fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#1C1410', background: 'white', border: '1.5px solid #E8E0D8', borderRadius: '8px', padding: '10px 14px', width: '100%', outline: 'none', boxSizing: 'border-box' };
  const label = { display: 'block', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', fontWeight: 500, color: '#3D3028', marginBottom: '6px', letterSpacing: '0.3px' };

  if (submitted) return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', display: 'flex', alignItems: 'center', justifyContent: 'center', paddingTop: '68px' }}>
      <div style={{ textAlign: 'center', maxWidth: '480px', padding: '0 24px' }}>
        <div style={{ width: '64px', height: '64px', borderRadius: '50%', background: '#E5ECF5', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px', fontSize: '28px' }}>✓</div>
        <h2 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '30px', fontWeight: 500, color: '#0F2240', marginBottom: '14px' }}>ご予約を受け付けました</h2>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 300, color: '#6B5D52', lineHeight: 1.9, marginBottom: '32px' }}>
          確認メールをお送りしております。ご来園をお待ちしております。
        </p>
        <button onClick={() => onNavigate('home')} style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '12px 28px', borderRadius: '8px' }}>
          トップに戻る
        </button>
      </div>
    </div>
  );

  return (
    <div style={{ minHeight: '100vh', background: '#FAF6F0', paddingTop: '68px' }}>
      <div style={{ maxWidth: '640px', margin: '0 auto', padding: '48px 24px' }}>
        <div style={{ marginBottom: '10px', fontFamily: "'Cormorant Garamond', serif", fontSize: '11px', letterSpacing: '3px', textTransform: 'uppercase', color: '#C9920A' }}>Reservation</div>
        <h1 style={{ fontFamily: "'Shippori Mincho B1', serif", fontSize: '32px', fontWeight: 500, color: '#0F2240', marginBottom: '8px' }}>体験を予約する</h1>
        <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '13px', color: '#6B5D52', marginBottom: '40px', fontWeight: 300, lineHeight: 1.8 }}>ご希望の体験・日程・人数をお選びください。</p>

        {/* Step indicator */}
        <div style={{ display: 'flex', gap: '8px', marginBottom: '40px' }}>
          {['体験選択', '日程・人数', 'お客様情報'].map((s, i) => (
            <div key={s} style={{ flex: 1, textAlign: 'center' }}>
              <div style={{ height: '3px', borderRadius: '2px', background: step > i ? '#1A3A6E' : '#E8E0D8', marginBottom: '6px', transition: 'background 0.3s' }} />
              <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '10px', color: step > i ? '#1A3A6E' : '#A89A90', fontWeight: step === i+1 ? 500 : 300 }}>{s}</div>
            </div>
          ))}
        </div>

        {step === 1 && (
          <div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginBottom: '32px' }}>
              {services.map(svc => (
                <div key={svc.id} onClick={() => setForm({...form, service: svc.id})}
                  style={{ padding: '18px 20px', background: 'white', borderRadius: '12px', border: `2px solid ${form.service === svc.id ? svc.color : '#E8E0D8'}`, cursor: 'pointer', transition: 'all 0.2s', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '15px', fontWeight: 500, color: '#1C1410', marginBottom: '3px' }}>{svc.label}</div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '12px', color: '#A89A90', fontWeight: 300 }}>{svc.season}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, color: svc.color }}>{svc.price}</div>
                    {form.service === svc.id && <div style={{ fontSize: '10px', color: svc.color, marginTop: '2px' }}>選択中 ✓</div>}
                  </div>
                </div>
              ))}
            </div>
            <button onClick={() => form.service && setStep(2)} style={{ width: '100%', fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, background: form.service ? '#1A3A6E' : '#E8E0D8', color: form.service ? 'white' : '#A89A90', border: 'none', cursor: form.service ? 'pointer' : 'default', padding: '13px', borderRadius: '8px', transition: 'all 0.2s' }}>
              次へ →
            </button>
          </div>
        )}

        {step === 2 && (
          <div>
            <div style={{ display: 'grid', gap: '20px', marginBottom: '32px' }}>
              <div><label style={label}>ご希望日</label><input type="date" style={field} value={form.date} onChange={e => setForm({...form, date: e.target.value})} /></div>
              <div><label style={label}>人数</label>
                <select style={field} value={form.people} onChange={e => setForm({...form, people: e.target.value})}>
                  {['1名', '2名', '3名', '4名', '5名', '6名以上'].map(n => <option key={n}>{n}</option>)}
                </select>
              </div>
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button onClick={() => setStep(1)} style={{ flex: 1, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', background: 'white', color: '#6B5D52', border: '1.5px solid #E8E0D8', cursor: 'pointer', padding: '12px', borderRadius: '8px' }}>← 戻る</button>
              <button onClick={() => setStep(3)} style={{ flex: 2, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '12px', borderRadius: '8px' }}>次へ →</button>
            </div>
          </div>
        )}

        {step === 3 && (
          <div>
            <div style={{ display: 'grid', gap: '20px', marginBottom: '32px' }}>
              <div><label style={label}>お名前</label><input type="text" style={field} placeholder="山田 太郎" value={form.name} onChange={e => setForm({...form, name: e.target.value})} /></div>
              <div><label style={label}>メールアドレス</label><input type="email" style={field} placeholder="example@email.com" value={form.email} onChange={e => setForm({...form, email: e.target.value})} /></div>
              <div><label style={label}>ご要望・アレルギー等</label><textarea style={{...field, height: '80px', resize: 'none'}} placeholder="任意でご記入ください" value={form.notes} onChange={e => setForm({...form, notes: e.target.value})} /></div>
            </div>
            <div style={{ display: 'flex', gap: '12px' }}>
              <button onClick={() => setStep(2)} style={{ flex: 1, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', background: 'white', color: '#6B5D52', border: '1.5px solid #E8E0D8', cursor: 'pointer', padding: '12px', borderRadius: '8px' }}>← 戻る</button>
              <button onClick={() => setSubmitted(true)} style={{ flex: 2, fontFamily: "'Noto Sans JP', sans-serif", fontSize: '14px', fontWeight: 500, background: '#1A3A6E', color: 'white', border: 'none', cursor: 'pointer', padding: '12px', borderRadius: '8px' }}>予約を確定する</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { ReservePage });