// Training reservation flow — light theme
// 매장 → 날짜 → 타석/시간 → 예약확인 → 이용권 → 완료

const STORES = [
  {id:"yg", name:"퀀텀 아카데미 용인구성점", dist:"500m", addr:"경기 용인시 기흥구 용구대로 2439", open:"평일 09:00-24:00 · 주말 10:00-22:00", bays:"FA 12 · T1/T2 5", fav:true, status:"영업중", distance:0.5},
  {id:"pg", name:"퀀텀 아카데미 판교점", dist:"1.2km", addr:"경기 성남시 분당구 판교로 228", open:"평일 10:00-24:00 · 주말 10:00-22:00", bays:"FA 8 · T1/T2 3", fav:false, status:"영업중", distance:1.2},
  {id:"gn", name:"퀀텀 아카데미 강남점", dist:"8.3km", addr:"서울 강남구 테헤란로 152", open:"평일 07:00-24:00 · 주말 10:00-22:00", bays:"FA 14 · T1/T2 6", fav:false, status:"영업중", distance:8.3},
  {id:"jr", name:"퀀텀 아카데미 잠실점", dist:"12km", addr:"서울 송파구 올림픽로 300", open:"평일 10:00-23:00 · 주말 10:00-21:00", bays:"FA 10 · T1/T2 4", fav:false, status:"마감임박", distance:12},
];

function StoreSelect({ onBack, value, onPick, stepper }){
  const [mode, setMode] = React.useState("list");
  const [sort, setSort] = React.useState("dist");
  const [mapPick, setMapPick] = React.useState(null);
  const [favOnly, setFavOnly] = React.useState(false);

  const list = (favOnly ? STORES.filter(s=>s.fav) : STORES).sort((a,b)=> sort==="dist"? a.distance-b.distance : a.name.localeCompare(b.name));

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="매장 선택" onBack={onBack}
        right={<button className="icon-btn on-navy" onClick={()=>setMode(mode==="map"?"list":"map")}>
          <Icon name={mode==="map"?"list":"map"} size={18}/>
        </button>}/>
      {stepper}

      <div style={{padding:"12px 20px 12px",background:"#fff"}}>
        <div style={{display:"flex",alignItems:"center",gap:8,background:"var(--bg)",
          borderRadius:8,padding:"10px 14px",border:"1px solid var(--line)"}}>
          <Icon name="search" size={16} style={{color:"var(--text-mute)"}}/>
          <input placeholder="매장 이름, 주소 검색"
            style={{flex:1,background:"transparent",border:0,outline:"none",color:"var(--text)",fontSize:13}}/>
        </div>
      </div>

      <div style={{padding:"0 20px 12px",display:"flex",alignItems:"center",justifyContent:"space-between",background:"#fff",paddingBottom:12}}>
        <div style={{display:"flex",gap:6}}>
          <button className={"mini " + (!favOnly?"on":"")} onClick={()=>setFavOnly(false)}>전체</button>
          <button className={"mini " + (favOnly?"on":"")} onClick={()=>setFavOnly(true)}>즐겨찾기</button>
        </div>
        <div style={{display:"flex",gap:6,fontSize:11}}>
          <button className={"mini " + (sort==="dist"?"on":"")} onClick={()=>setSort("dist")}>거리순</button>
          <button className={"mini " + (sort==="name"?"on":"")} onClick={()=>setSort("name")}>가나다순</button>
        </div>
      </div>

      {mode==="list" ? (
        <div className="scroll" style={{paddingBottom:120,background:"#fff"}}>
          {list.map(s=>(
            <button key={s.id} onClick={()=>onPick(s)}
              style={{width:"100%",padding:"16px 20px",textAlign:"left",borderBottom:"1px solid var(--line)",
                display:"flex",gap:12,alignItems:"flex-start",
                background: value?.id===s.id ? "var(--primary-tint)" : "#fff"}}>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
                  <span className={"chip " + (s.status==="마감임박"?"chip-red":"chip-primary")}>{s.status}</span>
                  <span className="mono" style={{fontSize:11,color:"var(--text-mute)",fontWeight:600}}>{s.dist}</span>
                </div>
                <div style={{fontWeight:700,fontSize:14.5,letterSpacing:"-.01em",color:"var(--text)"}}>{s.name}</div>
                <div className="muted" style={{fontSize:12,marginTop:2}}>{s.addr}</div>
                <div className="muted" style={{fontSize:11.5,marginTop:3}}>{s.open}</div>
                <div style={{display:"flex",gap:6,marginTop:8}}>
                  <span className="chip chip-line">{s.bays.split(" · ")[0]}</span>
                  <span className="chip chip-line">{s.bays.split(" · ")[1]}</span>
                </div>
              </div>
              <div style={{color: s.fav?"var(--danger)":"var(--text-mute)"}}>
                <Icon name={s.fav?"heart-fill":"heart"} size={18}/>
              </div>
            </button>
          ))}
        </div>
      ) : (
        <div style={{flex:1,position:"relative",margin:"0 20px",borderRadius:12,overflow:"hidden",
          border:"1px solid var(--line)"}}>
          <div className="map-bg" style={{position:"absolute",inset:0}}>
            {[
              {x:"28%",y:"35%",s:STORES[2]},
              {x:"62%",y:"48%",s:STORES[1]},
              {x:"44%",y:"70%",s:STORES[0]},
              {x:"72%",y:"22%",s:STORES[3]},
            ].map((p,i)=>(
              <div key={i} className="pin" style={{left:p.x,top:p.y}} onClick={()=>setMapPick(p.s)}>
                <span><Icon name="flag" size={14}/></span>
              </div>
            ))}
            <div className="pin me" style={{left:"50%",top:"55%"}}>
              <span><Icon name="location" size={14}/></span>
            </div>
          </div>
          {mapPick && (
            <div style={{position:"absolute",left:12,right:12,bottom:12,
              background:"#fff",borderRadius:12,padding:14,border:"1px solid var(--line)",
              boxShadow:"0 4px 14px rgba(0,0,0,.08)"}}>
              <div style={{fontWeight:700,fontSize:14,color:"var(--text)"}}>{mapPick.name}</div>
              <div className="muted" style={{fontSize:12,marginTop:3}}>{mapPick.dist} · {mapPick.open.split(" · ")[0]}</div>
              <button className="btn btn-primary" style={{marginTop:10,height:42,fontSize:13}}
                onClick={()=>onPick(mapPick)}>이 매장 선택</button>
            </div>
          )}
        </div>
      )}

      {value && mode==="list" && (
        <div className="footer-bar">
          <button className="btn btn-primary" onClick={()=>onPick(value)}>선택 완료</button>
        </div>
      )}
    </div>
  );
}

function DateStep({ onBack, onNext, selected, onSelect, stepper }){
  const days = [];
  const start = new Date(2026, 3, 20);
  for(let i=0;i<14;i++){
    const d = new Date(start);
    d.setDate(start.getDate()+i);
    days.push(d);
  }
  const wd = ["일","월","화","수","목","금","토"];

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="날짜 선택" onBack={onBack}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 120px"}}>
        <div style={{fontSize:13,color:"var(--text-sub)",marginBottom:12}}>
          <span style={{color:"var(--primary)",fontWeight:700}}>2026년 4월</span> · 오늘부터 14일 이내 예약 가능
        </div>

        <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:6,marginBottom:8}}>
          {wd.map((w,i)=>(
            <div key={w} style={{textAlign:"center",fontSize:11,
              color:i===0?"var(--danger)":i===6?"var(--primary)":"var(--text-mute)",
              fontWeight:600,padding:"6px 0"}}>{w}</div>
          ))}
          {Array.from({length:1}).map((_,i)=><div key={"p"+i}/>)}
          {days.map((d,i)=>{
            const dateStr = d.toISOString().slice(0,10);
            const sel = selected === dateStr;
            const dow = d.getDay();
            return (
              <button key={dateStr}
                onClick={()=>onSelect(dateStr)}
                className={"cal-cell " + (sel?" on":"")}
                style={{aspectRatio:"1",
                  color: sel ? "#fff" : (dow===0?"var(--danger)":dow===6?"var(--primary)":"var(--text)"),
                  fontWeight: sel?700:500}}>
                {d.getDate()}
                {i===3 && !sel && <span className="dotmark" style={{background:"#E5A000"}}/>}
              </button>
            );
          })}
        </div>

        <div style={{display:"flex",gap:16,marginTop:18,padding:"0 4px",fontSize:11,color:"var(--text-mute)"}}>
          <div style={{display:"flex",alignItems:"center",gap:4}}><span style={{width:6,height:6,borderRadius:"50%",background:"#E5A000",display:"inline-block"}}/> 예약가능 소량</div>
          <div style={{display:"flex",alignItems:"center",gap:4}}><span style={{width:6,height:6,borderRadius:"50%",background:"var(--danger)",display:"inline-block"}}/> 매장 휴업일</div>
        </div>

        <div className="hr" style={{margin:"22px 0 16px"}}/>

        <div className="h3" style={{marginBottom:10}}>빠른 선택</div>
        <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
          {[
            {label:"오늘", d:days[0]},
            {label:"내일", d:days[1]},
            {label:"이번주 토요일", d:days[5]},
            {label:"다음주 월요일", d:days[7]},
          ].map((q,i)=>(
            <button key={i} className="mini" onClick={()=>onSelect(q.d.toISOString().slice(0,10))}>
              {q.label} <span className="ml">{q.d.getMonth()+1}.{q.d.getDate()}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="footer-bar">
        <button className={"btn " + (selected?"btn-primary":"btn-disabled")}
          onClick={()=>selected && onNext()}>다음</button>
      </div>
    </div>
  );
}

function BayTimeStep({ onBack, onNext, store, pick, onPick, stepper }){
  const [startTime, setStartTime] = React.useState("09:00");
  const [duration, setDuration] = React.useState(120);

  const startHours = ["09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00"];

  const bays = React.useMemo(()=>{
    // 타석은 번호가 아니라 '타석 이름'으로 선택 — 매장이 설정한 타석명(정책 §9 타석 운영)
    const NAMES = ["라이언","어피치","프로도","네오","무지","콘","튜브","제이지","춘식","죠르디","스카피","앙몬드"];
    const base = [1,2,3,4,5,6,7,8,9,10,11,12];
    const hash = (b)=> (parseInt(startTime)*7 + b*13) % 10;
    return base.map(b=>({
      id:b,
      name: NAMES[b-1] + "석",
      status: hash(b) < 3 ? "dis" : (hash(b) < 5 ? "busy" : "open"),
      type: b<=8?"FA":"T1/T2",
    }));
  }, [startTime]);

  const end = (()=>{
    const [h,m] = startTime.split(":").map(Number);
    const totalM = h*60 + m + duration;
    return `${String(Math.floor(totalM/60)).padStart(2,"0")}:${String(totalM%60).padStart(2,"0")}`;
  })();

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title={store.name.replace("퀀텀 아카데미 ","")} onBack={onBack}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 120px"}}>
        <div className="h3" style={{marginBottom:10}}>시작 시간대</div>
        <div className="hscroll" style={{marginBottom:22}}>
          {startHours.map(t=>(
            <button key={t}
              onClick={()=>setStartTime(t)}
              className={"mini " + (startTime===t?"on":"")}
              style={{flex:"0 0 auto",padding:"10px 16px",fontSize:13}}>
              {t}
            </button>
          ))}
        </div>

        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
          <div className="h3">예약 가능 타석 <span style={{color:"var(--primary)"}}>{bays.filter(b=>b.status!=="dis").length}</span></div>
          <button className="icon-btn" style={{width:30,height:30}}><Icon name="refresh" size={14}/></button>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8,marginBottom:22}}>
          {bays.map(b=>{
            const on = pick?.bay === b.id;
            return (
              <button key={b.id}
                onClick={()=>b.status!=="dis" && onPick({bay:b.id, bayName:b.name, start:startTime, end, duration, type:b.type})}
                className={"bay " + (on?"on":"") + (b.status==="dis"?" dis":"")}>
                <div style={{fontWeight:700,fontSize:13,letterSpacing:"-.01em"}}>{b.name}</div>
                <div style={{fontSize:10,color: on?"var(--primary)":"var(--text-mute)",fontWeight:600}}>
                  {b.status==="dis"?"예약 완료":b.type}
                </div>
              </button>
            );
          })}
        </div>

        <div className="h3" style={{marginBottom:10}}>이용 시간</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8,marginBottom:22}}>
          {[60,90,120,180].map(d=>(
            <button key={d} onClick={()=>setDuration(d)}
              className={"tile " + (duration===d?"on":"")}
              style={{alignItems:"center",padding:"10px 6px"}}>
              <div style={{fontWeight:700,fontSize:14}}>{d}분</div>
            </button>
          ))}
        </div>

        {pick?.bay && (
          <div className="card" style={{padding:16}}>
            <div className="label">선택한 타석</div>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:8}}>
              <div>
                <div style={{fontWeight:700,fontSize:14}}>{pick.bayName || (pick.bay+"번 타석")} · {pick.type}</div>
                <div className="muted" style={{fontSize:12,marginTop:3}}>{startTime} — {end} · {duration}분</div>
              </div>
              <button onClick={()=>onPick(null)} style={{color:"var(--text-mute)"}}>
                <Icon name="x" size={18}/>
              </button>
            </div>
          </div>
        )}
      </div>

      <div className="footer-bar">
        <button className={"btn " + (pick?.bay?"btn-primary":"btn-disabled")}
          onClick={()=>pick?.bay && onNext()}>다음</button>
      </div>
    </div>
  );
}

function ConfirmStep({ onBack, onNext, store, date, pick, stepper }){
  const [timer, setTimer] = React.useState(10*60); // 결제 중 타석 점유(락) 10분 — 정책서 §1·§4
  React.useEffect(()=>{
    const t = setInterval(()=>setTimer(s=>s<=0?0:s-1),1000);
    return ()=>clearInterval(t);
  },[]);
  const mm = String(Math.floor(timer/60)).padStart(2,"0");
  const ss = String(timer%60).padStart(2,"0");
  const dateObj = new Date(date);
  const wd = ["일","월","화","수","목","금","토"][dateObj.getDay()];

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="예약 확인" onBack={onBack}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 120px"}}>
        <div style={{background:"var(--primary-tint)",border:"1px solid #BDEACC",
          borderRadius:10,padding:"14px 16px",display:"flex",alignItems:"center",gap:12}}>
          <div style={{color:"var(--primary)"}}><Icon name="clock" size={20}/></div>
          <div style={{flex:1}}>
            <div className="mono" style={{fontSize:22,fontWeight:700,color:"var(--primary)",lineHeight:1}}>{mm}:{ss}</div>
            <div className="muted" style={{fontSize:12,marginTop:4}}>남은 시간 내에 예약을 완료해 주세요</div>
          </div>
        </div>

        <div className="h3" style={{margin:"22px 0 10px"}}>예약 정보</div>
        <div className="card" style={{padding:4}}>
          {[
            ["매장명", store.name],
            ["예약 타석", `${pick.bayName || pick.bay+"번"} · ${pick.type}`],
            ["예약 날짜", `${dateObj.getFullYear()}년 ${dateObj.getMonth()+1}월 ${dateObj.getDate()}일 ${wd}요일`],
            ["예약 시간", `${pick.start} - ${pick.end}`],
            ["이용 시간", `${pick.duration}분`],
          ].map(([k,v],i)=>(
            <div key={k} className="row">
              <div className="label" style={{flex:"0 0 86px"}}>{k}</div>
              <div className="val" style={{flex:1,textAlign:"right"}}>{v}</div>
            </div>
          ))}
        </div>

        <div className="h3" style={{margin:"22px 0 10px"}}>주의 사항</div>
        <div className="card" style={{padding:"14px 16px"}}>
          <ul style={{margin:0,paddingLeft:16,color:"var(--text-sub)",fontSize:12.5,lineHeight:1.7}}>
            <li>예약 시간 <b style={{color:"var(--text)"}}>10분 전까지</b> 도착해 주세요</li>
            <li>예약 시간 후 <b style={{color:"var(--text)"}}>10분 이상</b> 미입장 시 자동 취소(노쇼)됩니다</li>
            <li>무료 취소는 예약 시간 <b style={{color:"var(--text)"}}>60분 전까지</b> 가능합니다</li>
          </ul>
        </div>
      </div>

      <div className="footer-bar" style={{display:"flex",gap:10}}>
        <button className="btn btn-outline" style={{flex:1}} onClick={onBack}>수정</button>
        <button className="btn btn-primary" style={{flex:2}} onClick={onNext}>이용권 선택 →</button>
      </div>
    </div>
  );
}

function TicketStep({ onBack, onNext, selectedTicket, onPickTicket, stepper }){
  const [tab, setTab] = React.useState("regular");

  const tickets = {
    regular:[
      {id:"r1",name:"정기 이용권",store:"용인구성점",price:"180,000원",meta:[["1일 사용가능 시간","60분"],["이용기간","90일"]],remain:"잔여 42일"},
      {id:"r2",name:"정기 이용권 프리미엄",store:"용인구성점",price:"280,000원",meta:[["1일 사용가능 시간","120분"],["이용기간","90일"]],remain:"잔여 68일"},
    ],
    time:[
      {id:"t1",name:"시간제 이용권 A",store:"용인구성점",price:"180,000원",meta:[["사용가능 시간 (자유)","2400분"],["이용기간","90일"]],remain:"잔여 1,840분"},
      {id:"t2",name:"시간제 이용권 B",store:"용인구성점",price:"100,000원",meta:[["사용가능 시간 (자유)","1200분"],["이용기간","90일"]],remain:"잔여 720분"},
    ],
    day:[
      {id:"d1",name:"일일 이용권",store:"용인구성점",price:"30,000원",meta:[["1회 사용가능 시간","자유"],["이용기간","1일"]],remain:"잔여 3회"},
    ],
    pack:[
      {id:"p1",name:"ABC 패키지 이용권",store:"용인구성점",price:"380,000원",meta:[["하루 이용가능 시간","60분"],["레슨","20분 × 10회"]],remain:"잔여 88일"},
    ],
  };

  // 구매한 트레이닝 이용권을 상단에 노출 (window 공유 저장소)
  const owned = (window.QA_OWNED||[]).filter(t=>t.type==="training").map(o=>({id:o.id, name:o.name, store:o.store, price:o.price||"-", meta:o.meta||[], remain:o.remainText||"", owned:true}));
  const list = [...owned, ...(tickets[tab]||[])];

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="이용권 선택" onBack={onBack}/>
      {stepper}

      <div style={{padding:"16px 20px 8px"}}>
        <div style={{background:"var(--primary-tint)",border:"1px solid #BDEACC",
          borderRadius:8,padding:"10px 14px",display:"flex",alignItems:"center",gap:10}}>
          <div style={{color:"var(--primary)"}}><Icon name="info" size={16}/></div>
          <div style={{fontSize:12,color:"var(--text-sub)"}}>
            <b style={{color:"var(--primary)"}}>보유 이용권</b> 중에서 사용할 권종을 선택하세요 · 이용권은 이용 시작 시간에 차감됩니다
          </div>
        </div>
      </div>

      <div style={{padding:"14px 20px 8px",borderBottom:"1px solid var(--line)"}}>
        <div style={{display:"flex",gap:4,overflowX:"auto",scrollbarWidth:"none"}}>
          {[
            ["regular","정기 이용권"],
            ["time","시간제 이용권"],
            ["day","일일 이용권"],
            ["pack","패키지"],
          ].map(([k,v])=>(
            <button key={k} onClick={()=>setTab(k)}
              style={{padding:"8px 14px",borderRadius:999,fontSize:12.5,fontWeight:600,flex:"0 0 auto",
                background: tab===k?"var(--primary-tint)":"#fff",
                color: tab===k?"var(--primary)":"var(--text-sub)",
                border:"1px solid " + (tab===k?"var(--primary)":"var(--line)")}}>
              {v}
            </button>
          ))}
        </div>
      </div>

      <div className="scroll" style={{padding:"16px 20px 120px"}}>
        <div style={{fontSize:12,color:"var(--text-mute)",marginBottom:12}}>
          보유 이용권 <span style={{color:"var(--primary)",fontWeight:700}}>{list.length}</span>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          {list.map(t=>{
            const sel = selectedTicket?.id === t.id;
            return (
              <button key={t.id} onClick={()=>onPickTicket(t)}
                className="card" style={{
                  padding:16,textAlign:"left",display:"flex",gap:12,alignItems:"flex-start",
                  borderColor: sel ? "var(--primary)" : "var(--line)",
                  background: sel ? "var(--primary-tint)" : "#fff"
                }}>
                <div style={{width:20,height:20,borderRadius:"50%",border:"2px solid "+(sel?"var(--primary)":"var(--line-strong)"),
                  display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:2}}>
                  {sel && <span style={{width:10,height:10,borderRadius:"50%",background:"var(--primary)"}}/>}
                </div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:6}}><span style={{fontWeight:700,fontSize:14,letterSpacing:"-.01em",color:"var(--text)"}}>{t.name}</span>{t.owned && <span className="chip" style={{background:"var(--primary-tint)",color:"var(--primary)",fontSize:9.5,fontWeight:800,padding:"1px 6px"}}>보유</span>}</div>
                  <div className="muted" style={{fontSize:12,marginTop:3}}>{t.store}</div>
                  <div style={{display:"flex",flexDirection:"column",gap:4,marginTop:12}}>
                    {t.meta.map(([k,v])=>(
                      <div key={k} style={{display:"flex",justifyContent:"space-between"}}>
                        <span className="label">{k}</span>
                        <span style={{fontSize:13,fontWeight:600,color:"var(--text)"}}>{v}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{marginTop:10,paddingTop:10,borderTop:"1px dashed var(--line)",
                    display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                    <span className="chip chip-primary">{t.remain}</span>
                    <span className="mono" style={{fontSize:11,color:"var(--text-mute)"}}>결제 {t.price}</span>
                  </div>
                </div>
              </button>
            );
          })}
          <button className="btn btn-outline" style={{height:48,marginTop:6}}>
            <Icon name="plus" size={16}/> 이용권 구매하기
          </button>
        </div>
      </div>

      <div className="footer-bar">
        <button className={"btn " + (selectedTicket?"btn-primary":"btn-disabled")} onClick={()=>selectedTicket && onNext()}>
          선택 완료
        </button>
      </div>
    </div>
  );
}

function DoneStep({ onHome, onMyReservations, store, date, pick, ticket, stepper }){
  const dateObj = new Date(date);
  const wd = ["일","월","화","수","목","금","토"][dateObj.getDay()];
  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="예약 완료" onBack={onHome}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 120px",textAlign:"center"}}>
        <div style={{marginTop:20}} className="bump">
          <div className="circle-ok"><Icon name="check" size={42} stroke={2.6}/></div>
        </div>
        <div className="h1" style={{marginTop:20}}>예약이 완료되었습니다</div>
        <div className="muted" style={{fontSize:13,marginTop:6}}>
          예약 시간 10분 전까지 매장으로 와주세요
        </div>

        <div className="card" style={{marginTop:24,padding:18,textAlign:"left"}}>
          <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
            <span className="chip chip-primary">CONFIRMED</span>
            <span className="mono" style={{fontSize:11,color:"var(--text-mute)"}}>FA-{Date.now().toString().slice(-6)}</span>
          </div>
          <div style={{fontWeight:700,fontSize:15.5,letterSpacing:"-.01em",color:"var(--text)"}}>{store.name}</div>
          <div className="muted" style={{fontSize:12.5,marginTop:4}}>{pick.bayName ? `${pick.bayName} · ${pick.type}` : pick.type}</div>

          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginTop:16,
            padding:"14px 0 0",borderTop:"1px dashed var(--line)"}}>
            <div>
              <div className="label">날짜</div>
              <div className="val" style={{marginTop:3}}>
                {dateObj.getMonth()+1}월 {dateObj.getDate()}일 ({wd})
              </div>
            </div>
            <div>
              <div className="label">시간</div>
              <div className="val" style={{marginTop:3}}>{pick.start} - {pick.end}</div>
            </div>
            <div>
              <div className="label">이용 시간</div>
              <div className="val" style={{marginTop:3}}>{pick.duration}분</div>
            </div>
            <div>
              <div className="label">사용 이용권</div>
              <div className="val" style={{marginTop:3,color:"var(--primary)"}}>{ticket?.name}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="footer-bar" style={{display:"flex",gap:10}}>
        <button className="btn btn-outline" style={{flex:1}} onClick={onHome}>홈으로</button>
        <button className="btn btn-primary" style={{flex:2}} onClick={onMyReservations}>내 예약 보기</button>
      </div>
    </div>
  );
}

function TrainingFlow({ onClose, goHome }){
  const [step, setStep] = React.useState(0);
  const [store, setStore] = React.useState(null);
  const [date, setDate] = React.useState(null);
  const [pick, setPick] = React.useState(null);
  const [ticket, setTicket] = React.useState(null);

  const steps = ["매장선택","날짜선택","타석/시간","예약확인","이용권선택","완료"];
  const stepper = <Stepper steps={steps} active={step}/>;

  return (
    <>
      {step===0 && <StoreSelect stepper={stepper} onBack={onClose} value={store} onPick={(s)=>{setStore(s);setStep(1);}}/>}
      {step===1 && <DateStep stepper={stepper} onBack={()=>setStep(0)} onNext={()=>setStep(2)} selected={date} onSelect={setDate}/>}
      {step===2 && <BayTimeStep stepper={stepper} onBack={()=>setStep(1)} onNext={()=>setStep(3)} store={store} pick={pick} onPick={setPick}/>}
      {step===3 && <ConfirmStep stepper={stepper} onBack={()=>setStep(2)} onNext={()=>setStep(4)} store={store} date={date} pick={pick}/>}
      {step===4 && <TicketStep stepper={stepper} onBack={()=>setStep(3)} onNext={()=>setStep(5)} selectedTicket={ticket} onPickTicket={setTicket}/>}
      {step===5 && <DoneStep stepper={stepper} onHome={goHome} onMyReservations={goHome} store={store} date={date} pick={pick} ticket={ticket}/>}
    </>
  );
}

Object.assign(window, { TrainingFlow, StoreSelect, DateStep, BayTimeStep, ConfirmStep, TicketStep, DoneStep, STORES });