// Reserve page
function PageReserve({ setPage }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({
    treatment: '',
    firstVisit: 'yes',
    date: '',
    time: '',
    name: '',
    nameKana: '',
    email: '',
    phone: '',
    notes: '',
    membership: false,
  });

  const upd = (k, v) => setData(d => ({...d, [k]: v}));
  const dates = Array.from({length:14}, (_, i) => {
    const d = new Date(2026, 3, 21 + i);
    return {
      key: d.toISOString().slice(0,10),
      day: d.getDate(),
      wday: ['SUN','MON','TUE','WED','THU','FRI','SAT'][d.getDay()],
      month: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'][d.getMonth()],
      closed: d.getDay() === 3,
    };
  });
  const times = ['11:00','12:30','14:00','15:30','17:00','18:30'];

  return (
    <div className="page active">
      <section style={{paddingTop:'calc(var(--nav-h) + 80px)', paddingBottom:40, padding:'calc(var(--nav-h) + 80px) clamp(24px,5vw,80px) 40px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', inset:0, opacity:0.3}}>
          <ParticleCanvas opts={{density:0.0001, color:'230, 201, 184', opacity:0.6}}/>
        </div>
        <div style={{position:'relative', zIndex:2}}>
          <div className="eyebrow">Reservation · ご 予 約</div>
          <h1 className="display" style={{fontSize:'clamp(60px,8vw,140px)', marginTop:32}}>
            Begin your <em>ritual.</em>
          </h1>
        </div>
      </section>

      {/* Progress */}
      <section style={{padding:'0 clamp(24px,5vw,80px) 40px'}}>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
          {['Select', 'Schedule', 'Contact', 'Confirm'].map((s, i) => (
            <div key={i} style={{
              padding:'20px 0',
              borderTop: step > i ? '2px solid var(--ink)' : '1px solid var(--line)',
              opacity: step >= i+1 ? 1 : 0.35,
              transition:'all 0.5s'
            }}>
              <div className="mono" style={{fontSize:10, color: step>=i+1 ? 'var(--pink-deep)' : 'var(--mist)'}}>{String(i+1).padStart(2,'0')}</div>
              <div style={{fontFamily:'var(--serif-en)', fontSize:18, fontWeight:300, marginTop:6, fontStyle: step===i+1?'italic':'normal'}}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{padding:'60px clamp(24px,5vw,80px) 120px', minHeight:600}}>
        {step === 1 && (
          <div>
            <h2 style={{fontFamily:'var(--serif-en)', fontSize:'clamp(28px,3vw,44px)', fontWeight:300, marginBottom:40}}>
              Which <em style={{fontStyle:'italic', color:'var(--pink-deep)'}}>ritual</em> would you like to experience?
            </h2>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, marginBottom:48}}>
              {[
                {id:'consult', t:'First Consultation', j:'初回カウンセリング', note:'90分・¥22,000', kind:'marble'},
                {id:'lumiere', t:'Lumière Protocol', j:'リュミエール', note:'120分・¥180,000〜', kind:'serum'},
                {id:'potenza', t:'Potenza Renaissance', j:'ポテンツァ', note:'90分・¥220,000〜', kind:'gold'},
                {id:'gfr', t:'GFR Infusion', j:'GFR点滴', note:'60分・¥98,000', kind:'orchid'},
                {id:'ulthera', t:'Ultherapie', j:'ウルセラ', note:'90分・¥380,000〜', kind:'profile'},
                {id:'platinum', t:'Platinum Membership', j:'プラチナ入会面談', note:'面談・非公開', kind:'dark'},
              ].map(t => (
                <button key={t.id} onClick={()=>upd('treatment', t.id)}
                  style={{textAlign:'left', padding:0, cursor:'pointer', opacity: data.treatment && data.treatment!==t.id ? 0.4 : 1, transition:'opacity 0.4s'}}>
                  <Photo kind={t.kind} ratio="4/3">
                    {data.treatment === t.id && (
                      <div style={{position:'absolute', inset:0, border:'2px solid var(--ink)', background:'rgba(250,246,241,0.05)'}}/>
                    )}
                  </Photo>
                  <div style={{padding:'20px 4px'}}>
                    <div style={{fontFamily:'var(--serif-en)', fontSize:22, fontWeight:300, fontStyle: data.treatment===t.id ? 'italic':'normal', color: data.treatment===t.id ? 'var(--pink-deep)':'var(--ink)'}}>{t.t}</div>
                    <div style={{fontFamily:'var(--serif-jp)', fontSize:12, letterSpacing:'0.25em', color:'var(--stone)', marginTop:4}}>{t.j}</div>
                    <div style={{fontFamily:'var(--serif-en)', fontSize:12, letterSpacing:'0.2em', color:'var(--mist)', marginTop:12}}>{t.note}</div>
                  </div>
                </button>
              ))}
            </div>
            <div style={{display:'flex', alignItems:'center', gap:32, padding:'32px 0', borderTop:'1px solid var(--line)'}}>
              <div style={{fontFamily:'var(--serif-jp)', fontSize:14, color:'var(--stone)'}}>LUCE は初めてですか？</div>
              <div style={{display:'flex', gap:24}}>
                <label style={{display:'flex', alignItems:'center', gap:12, cursor:'pointer'}}>
                  <input type="radio" checked={data.firstVisit==='yes'} onChange={()=>upd('firstVisit','yes')} style={{accentColor:'var(--ink)'}}/>
                  <span style={{fontFamily:'var(--serif-en)', fontSize:15, fontStyle: data.firstVisit==='yes'?'italic':'normal'}}>Yes, first visit</span>
                </label>
                <label style={{display:'flex', alignItems:'center', gap:12, cursor:'pointer'}}>
                  <input type="radio" checked={data.firstVisit==='no'} onChange={()=>upd('firstVisit','no')} style={{accentColor:'var(--ink)'}}/>
                  <span style={{fontFamily:'var(--serif-en)', fontSize:15, fontStyle: data.firstVisit==='no'?'italic':'normal'}}>Returning</span>
                </label>
              </div>
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <h2 style={{fontFamily:'var(--serif-en)', fontSize:'clamp(28px,3vw,44px)', fontWeight:300, marginBottom:40}}>
              When shall we <em>expect</em> you?
            </h2>
            <div style={{marginBottom:48}}>
              <div className="mono" style={{fontSize:10, color:'var(--mist)', marginBottom:16}}>DATE</div>
              <div style={{display:'grid', gridTemplateColumns:'repeat(7, 1fr)', gap:2, border:'1px solid var(--line)'}}>
                {dates.map(d => (
                  <button key={d.key} onClick={()=>!d.closed && upd('date', d.key)} disabled={d.closed}
                    style={{
                      padding:'24px 16px', textAlign:'center', cursor: d.closed?'not-allowed':'pointer',
                      background: data.date===d.key ? 'var(--ink)' : 'var(--ivory)',
                      color: data.date===d.key ? 'var(--ivory)' : (d.closed ? 'var(--mist)' : 'var(--ink)'),
                      opacity: d.closed ? 0.4 : 1,
                      transition:'all 0.3s'
                    }}>
                    <div style={{fontFamily:'var(--serif-en)', fontSize:10, letterSpacing:'0.25em', opacity:0.6}}>{d.wday}</div>
                    <div style={{fontFamily:'var(--serif-en)', fontSize:32, fontWeight:300, marginTop:8, fontStyle: data.date===d.key?'italic':'normal'}}>{d.day}</div>
                    <div style={{fontFamily:'var(--serif-en)', fontSize:9, letterSpacing:'0.25em', opacity:0.5, marginTop:6}}>{d.month}</div>
                    {d.closed && <div style={{fontFamily:'var(--serif-jp)', fontSize:9, color:'var(--mist)', marginTop:4}}>休診</div>}
                  </button>
                ))}
              </div>
            </div>

            {data.date && (
              <div>
                <div className="mono" style={{fontSize:10, color:'var(--mist)', marginBottom:16}}>TIME</div>
                <div style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:16}}>
                  {times.map(t => (
                    <button key={t} onClick={()=>upd('time', t)}
                      style={{
                        padding:'20px', border: data.time===t ? '1px solid var(--ink)' : '1px solid var(--line)',
                        background: data.time===t ? 'var(--ink)' : 'transparent',
                        color: data.time===t ? 'var(--ivory)' : 'var(--ink)',
                        fontFamily:'var(--serif-en)', fontSize:20, fontWeight:300,
                        fontStyle: data.time===t ? 'italic' : 'normal',
                        transition:'all 0.4s', cursor:'pointer'
                      }}>
                      {t}
                    </button>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {step === 3 && (
          <div style={{maxWidth:720}}>
            <h2 style={{fontFamily:'var(--serif-en)', fontSize:'clamp(28px,3vw,44px)', fontWeight:300, marginBottom:40}}>
              Your <em>details.</em>
            </h2>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32}}>
              {[
                {k:'name', l:'Name', jp:'お名前', req:true},
                {k:'nameKana', l:'Kana', jp:'フリガナ', req:true},
                {k:'email', l:'Email', jp:'メールアドレス', req:true, type:'email', full:true},
                {k:'phone', l:'Phone', jp:'電話番号', req:true, full:true},
              ].map(f => (
                <div key={f.k} style={{gridColumn: f.full?'1/-1':'auto'}}>
                  <div style={{display:'flex', justifyContent:'space-between', marginBottom:12}}>
                    <div className="mono" style={{fontSize:10, color:'var(--mist)'}}>{f.l}{f.req && <span style={{color:'var(--pink-deep)'}}> *</span>}</div>
                    <div style={{fontFamily:'var(--serif-jp)', fontSize:11, color:'var(--stone)'}}>{f.jp}</div>
                  </div>
                  <input type={f.type||'text'} value={data[f.k]} onChange={e=>upd(f.k, e.target.value)}
                    style={{
                      width:'100%', border:'none', borderBottom:'1px solid var(--line)',
                      padding:'12px 0', background:'transparent',
                      fontFamily:'var(--serif-en)', fontSize:22, fontWeight:300, outline:'none',
                      color:'var(--ink)'
                    }}/>
                </div>
              ))}
              <div style={{gridColumn:'1/-1'}}>
                <div className="mono" style={{fontSize:10, color:'var(--mist)', marginBottom:12}}>NOTES · ご要望</div>
                <textarea value={data.notes} onChange={e=>upd('notes', e.target.value)} rows={4}
                  placeholder="お肌のお悩み、ご希望、ご質問などお聞かせください。"
                  style={{
                    width:'100%', border:'1px solid var(--line)', padding:'16px',
                    fontFamily:'var(--serif-jp)', fontSize:14, lineHeight:1.8, background:'transparent', outline:'none', resize:'vertical'
                  }}/>
              </div>
              <label style={{gridColumn:'1/-1', display:'flex', gap:16, alignItems:'flex-start', cursor:'pointer'}}>
                <input type="checkbox" checked={data.membership} onChange={e=>upd('membership', e.target.checked)} style={{marginTop:6, accentColor:'var(--ink)'}}/>
                <span style={{fontFamily:'var(--serif-jp)', fontSize:13, color:'var(--graphite)', lineHeight:1.8}}>プラチナ会員についてのご案内を希望する</span>
              </label>
            </div>
          </div>
        )}

        {step === 4 && (
          <div style={{maxWidth:720, textAlign:'center', margin:'40px auto'}}>
            <div className="eyebrow" style={{color:'var(--pink-deep)', justifyContent:'center', display:'inline-block'}}>Reservation Received</div>
            <h2 className="display" style={{fontSize:'clamp(48px,6vw,88px)', margin:'40px 0'}}>
              Thank <em>you.</em>
            </h2>
            <p style={{fontFamily:'var(--serif-jp)', fontSize:15, lineHeight:2.2, color:'var(--graphite)', marginBottom:48}}>
              48時間以内にコンシェルジュよりご連絡いたします。<br/>
              ご来院を、心よりお待ちしております。
            </p>
            <div style={{border:'1px solid var(--line)', padding:'40px', textAlign:'left', marginBottom:48}}>
              <div style={{display:'grid', gridTemplateColumns:'140px 1fr', gap:16, fontFamily:'var(--serif-en)'}}>
                <div className="mono" style={{fontSize:10, color:'var(--mist)'}}>DATE</div>
                <div style={{fontSize:18}}>{data.date} &nbsp; {data.time}</div>
                <div className="mono" style={{fontSize:10, color:'var(--mist)'}}>TREATMENT</div>
                <div style={{fontSize:18, fontStyle:'italic'}}>{data.treatment || '—'}</div>
                <div className="mono" style={{fontSize:10, color:'var(--mist)'}}>NAME</div>
                <div style={{fontSize:18}}>{data.name || '—'}</div>
              </div>
            </div>
            <a onClick={()=>setPage('home')} className="btn btn-arrow">Return Home</a>
          </div>
        )}

        {step < 4 && (
          <div style={{marginTop:80, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
            {step > 1 ? (
              <button onClick={()=>setStep(s=>s-1)} style={{fontFamily:'var(--serif-en)', fontSize:14, letterSpacing:'0.25em', textTransform:'uppercase', color:'var(--stone)', cursor:'pointer'}}>← Back</button>
            ) : <div/>}
            <button onClick={()=>setStep(s=>s+1)} className="btn btn-dark btn-arrow">
              {step === 3 ? 'Confirm' : 'Continue'}
            </button>
          </div>
        )}
      </section>
    </div>
  );
}

window.PageReserve = PageReserve;