// Lesson reservation flow — light theme

const PROS = [
  {id:"roel", name:"로엘이 프로", career:"KPGA 투어 3년 · 레슨 경력 8년", rating:4.9, reviews:128, init:"로"},
  {id:"kim",  name:"김지훈 프로", career:"한국체대 출신 · 주니어 전문", rating:4.8, reviews:96, init:"김"},
  {id:"park", name:"박서연 프로", career:"KLPGA 세미 · 여성 전용 레슨", rating:5.0, reviews:211, init:"박"},
  {id:"lee",  name:"이동우 프로", career:"USGTF 공인 · 아이언 전문", rating:4.7, reviews:74, init:"이"},
];

function LessonProStep({ onBack, onNext, value, onPick, stepper }){
  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:14}}>
          퀀텀 아카데미 <b style={{color:"var(--primary)"}}>용인구성점</b>의 레슨 프로 {PROS.length}명
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          {PROS.map(p=>{
            const sel = value?.id === p.id;
            return (
              <button key={p.id} onClick={()=>onPick(p)}
                className="card" style={{
                  padding:14,textAlign:"left",display:"flex",gap:12,alignItems:"center",
                  borderColor: sel?"var(--primary)":"var(--line)",
                  background: sel?"var(--primary-tint)":"#fff"
                }}>
                <div className={"avatar " + (sel?"primary":"")}>{p.init}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:8}}>
                    <div style={{fontWeight:700,fontSize:15,color:"var(--text)"}}>{p.name}</div>
                    <span className="mono" style={{fontSize:11,color:"#E5A000",fontWeight:600,display:"flex",alignItems:"center",gap:2}}>
                      <Icon name="star" size={11}/>{p.rating}
                    </span>
                  </div>
                  <div className="muted" style={{fontSize:12,marginTop:3}}>{p.career}</div>
                  <div className="mono" style={{fontSize:10.5,color:"var(--text-mute)",marginTop:4}}>후기 {p.reviews}</div>
                </div>
                <Icon name="chev-r" size={16} style={{color:"var(--text-mute)"}}/>
              </button>
            );
          })}
        </div>
      </div>

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

function LessonTimeStep({ onBack, onNext, pro, value, onPick, stepper }){
  const [dayIdx, setDayIdx] = React.useState(0);
  const days = [];
  const start = new Date(2026, 3, 20);
  for(let i=0;i<7;i++){
    const d = new Date(start); d.setDate(start.getDate()+i);
    days.push(d);
  }
  const wd = ["일","월","화","수","목","금","토"];

  const slots = Array.from({length:12}).map((_,i)=>{
    const h = 9 + i;
    const k = (dayIdx*7 + i) % 10;
    const status = k < 2 ? "full" : (k===3 ? "busy" : "open");
    const bayReserved = (i === 2 || i === 6) && dayIdx !== 3;
    return { time: `${String(h).padStart(2,"0")}:00`, status, bayReserved };
  });

  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title={`${pro.name} · 시간 선택`} onBack={onBack}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 120px"}}>
        <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:6,marginBottom:22}}>
          {days.map((d,i)=>{
            const on = dayIdx===i;
            const dow = d.getDay();
            return (
              <button key={i} onClick={()=>setDayIdx(i)}
                style={{padding:"10px 0",borderRadius:8,
                  background: on?"var(--primary)":"#fff",
                  border: "1px solid " + (on?"var(--primary)":"var(--line)"),
                  color: on?"#fff":(dow===0?"var(--danger)":dow===6?"var(--primary)":"var(--text)")}}>
                <div style={{fontSize:10,fontWeight:600,opacity:on?.9:.7}}>{wd[dow]}</div>
                <div style={{fontSize:15,fontWeight:700,marginTop:2}}>{d.getDate()}</div>
              </button>
            );
          })}
        </div>

        <div style={{display:"flex",gap:14,marginBottom:10,fontSize:11,color:"var(--text-mute)"}}>
          <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{width:10,height:10,borderRadius:3,background:"#fff",border:"1px solid var(--line-strong)"}}/> 예약가능</div>
          <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{width:10,height:10,borderRadius:3,background:"#FFF7C2",border:"1px solid #E5C400"}}/> 타석 예약 있음</div>
          <div style={{display:"flex",alignItems:"center",gap:5}}><span style={{width:10,height:10,borderRadius:3,background:"var(--line)"}}/> 마감</div>
        </div>

        <div className="h3" style={{margin:"4px 0 10px"}}>시간대 선택</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,marginBottom:22}}>
          {slots.map((s,i)=>{
            const on = value?.time === s.time && value?.dayIdx === dayIdx;
            const dis = s.status === "full";
            const hint = s.bayReserved;
            return (
              <button key={i}
                onClick={()=>!dis && onPick({ time:s.time, dayIdx, date:days[dayIdx].toISOString().slice(0,10), bayReserved:hint })}
                className={"bay " + (on?"on":"") + (dis?" dis":"")}
                style={{
                  height:"auto",padding:"10px 10px",
                  background: on ? "var(--primary-tint)" : hint ? "#FFF7C2" : dis ? "var(--line)" : "#fff",
                  borderColor: on ? "var(--primary)" : hint ? "#E5C400" : "var(--line)",
                }}>
                <div style={{fontWeight:700,fontSize:14,color: on?"var(--primary)":dis?"var(--text-mute)":"var(--text)"}}>{s.time}</div>
                {hint && <span className="badge" style={{color:"#6F5A00",background:"rgba(229,196,0,.2)"}}>타석 예약 있음</span>}
                {!hint && !dis && <span style={{fontSize:10,color:"var(--text-mute)",fontWeight:500,marginTop:2}}>20분 레슨</span>}
                {dis && <span style={{fontSize:10,color:"var(--text-mute)",fontWeight:500,marginTop:2}}>마감</span>}
              </button>
            );
          })}
        </div>

        {value?.bayReserved && (
          <div className="card" style={{padding:14,display:"flex",gap:10,alignItems:"flex-start",
            borderColor:"#E5C400",background:"#FFFBE6"}}>
            <div style={{color:"#B38D00",marginTop:2}}><Icon name="info" size={18}/></div>
            <div style={{fontSize:12.5,lineHeight:1.55,color:"var(--text)"}}>
              선택한 <b style={{color:"#6F5A00"}}>{value.time}</b>에 이미 <b>타석 예약</b>이 있어요.
              <div className="muted" style={{marginTop:3,fontSize:12}}>레슨 예약 후 같은 타석에서 바로 연습할 수 있습니다.</div>
            </div>
          </div>
        )}
      </div>

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

function LessonTicketStep({ onBack, onNext, pro, value, onPick, stepper }){
  const list = [
    {id:"la",name:`${pro.name} 레슨권 A`, time:"20분", cnt:10, remain:7, period:"90일", price:"180,000원"},
    {id:"lb",name:`${pro.name} 레슨권 B`, time:"15분", cnt:20, remain:14, period:"120일", price:"260,000원"},
  ];
  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:14}}>
          보유 레슨권 <span style={{color:"var(--primary)",fontWeight:700}}>{list.length}</span>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          {list.map(t=>{
            const sel = value?.id===t.id;
            return (
              <button key={t.id} onClick={()=>onPick(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)"),
                  flexShrink:0,marginTop:2,display:"flex",alignItems:"center",justifyContent:"center"}}>
                  {sel && <span style={{width:10,height:10,borderRadius:"50%",background:"var(--primary)"}}/>}
                </div>
                <div style={{flex:1}}>
                  <div style={{fontWeight:700,fontSize:14,color:"var(--text)"}}>{t.name}</div>
                  <div className="muted" style={{fontSize:12,marginTop:3}}>퀀텀 아카데미 용인구성점</div>
                  <div style={{display:"flex",flexDirection:"column",gap:4,marginTop:12}}>
                    <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">프로명</span><span style={{fontSize:13,fontWeight:600,color:"var(--text)"}}>{pro.name}</span></div>
                    <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">레슨 시간</span><span style={{fontSize:13,fontWeight:600,color:"var(--text)"}}>{t.time}</span></div>
                    <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">이용 횟수</span><span style={{fontSize:13,fontWeight:600,color:"var(--text)"}}>{t.cnt}회</span></div>
                    <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">이용 기간</span><span style={{fontSize:13,fontWeight:600,color:"var(--text)"}}>{t.period}</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>
            );
          })}
        </div>
      </div>
      <div className="footer-bar">
        <button className={"btn " + (value?"btn-primary":"btn-disabled")} style={{width:"100%"}} onClick={()=>value && onNext()}>다음</button>
      </div>
    </div>
  );
}

function LessonPayStep({ onBack, onNext, pro, slot, ticket, stepper }){
  const [agreed, setAgreed] = React.useState(false);
  const dateObj = new Date(slot.date);
  const wd = ["일","월","화","수","목","금","토"][dateObj.getDay()];
  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="예약 확인" onBack={onBack}/>
      {stepper}

      <div className="scroll" style={{padding:"16px 20px 140px"}}>
        <div className="card" style={{padding:16}}>
          <div style={{fontWeight:700,fontSize:15,color:"var(--text)"}}>{ticket.name}</div>
          <div className="muted" style={{fontSize:12,marginTop:3}}>퀀텀 아카데미 용인구성점</div>

          <div style={{marginTop:14,display:"flex",flexDirection:"column",gap:8}}>
            {[
              ["담당 프로", pro.name],
              ["예약 일시", `${dateObj.getMonth()+1}.${dateObj.getDate()} (${wd}) · ${slot.time}`],
              ["레슨 시간", `${ticket.time} (1회)`],
              ["사용 횟수", `1회 / 잔여 ${ticket.remain-1}회`],
            ].map(([k,v])=>(
              <div key={k} style={{display:"flex",justifyContent:"space-between"}}>
                <span className="label">{k}</span>
                <span className="val" style={{fontWeight:600}}>{v}</span>
              </div>
            ))}
          </div>
        </div>

        {slot.bayReserved && (
          <div style={{marginTop:14,padding:"12px 14px",borderRadius:10,
            background:"#FFFBE6",border:"1px solid #E5C400",
            display:"flex",alignItems:"center",gap:10}}>
            <div style={{color:"#B38D00"}}><Icon name="target" size={16}/></div>
            <div style={{fontSize:12.5,color:"var(--text)"}}>같은 시간대 <b style={{color:"#6F5A00"}}>타석 예약</b>이 있어 연결 사용됩니다</div>
          </div>
        )}

        <div className="h3" style={{margin:"22px 0 10px"}}>이용권 차감</div>
        <div className="card" style={{padding:16}}>
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">사용 이용권</span><span className="val" style={{fontWeight:600}}>{ticket.name}</span></div>
            <div style={{display:"flex",justifyContent:"space-between"}}><span className="label">차감</span><span className="val" style={{fontWeight:600}}>1회 (잔여 {ticket.remain-1}회)</span></div>
          </div>
          <div style={{height:1,background:"var(--line)",margin:"12px 0"}}/>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
            <span style={{fontSize:14,fontWeight:700,color:"var(--text)"}}>추가 결제 금액</span>
            <span style={{fontSize:18,fontWeight:800,color:"var(--primary)"}}>0원</span>
          </div>
        </div>

        <div style={{marginTop:14,padding:"12px 14px",borderRadius:10,background:"var(--primary-tint)",border:"1px solid #BDEACC",display:"flex",alignItems:"flex-start",gap:10}}>
          <div style={{color:"var(--primary)",marginTop:1}}><Icon name="info" size={16}/></div>
          <div style={{fontSize:12.5,color:"var(--text-sub)",lineHeight:1.55}}>
            보유 레슨권으로 예약하며 <b style={{color:"var(--text)"}}>추가 결제가 없습니다</b>. 이용권은 <b style={{color:"var(--text)"}}>이용 시작 시간</b>에 1회 차감됩니다. (취소 가능 시간 내 취소 시 복구)
          </div>
        </div>

        <button onClick={()=>setAgreed(!agreed)}
          style={{marginTop:16,display:"flex",gap:10,alignItems:"flex-start",textAlign:"left",width:"100%"}}>
          <div style={{width:18,height:18,borderRadius:4,background: agreed?"var(--primary)":"#fff",
            border:"1.5px solid "+(agreed?"var(--primary)":"var(--line-strong)"),
            display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:1}}>
            {agreed && <Icon name="check" size={12} stroke={3} style={{color:"#fff"}}/>}
          </div>
          <div style={{fontSize:12.5,color:"var(--text-sub)"}}>
            [필수] 위의 내용을 확인하였으며, 취소/환불 규정에 동의합니다.
            <span className="link" style={{marginLeft:6}}>내용 보기</span>
          </div>
        </button>
      </div>

      <div className="footer-bar">
        <button className={"btn " + (agreed?"btn-primary":"btn-disabled")} style={{width:"100%"}} onClick={()=>agreed && onNext()}>
          예약 확정하기
        </button>
      </div>
    </div>
  );
}

// 연습/타석 이용권 선택 — 레슨은 레슨권 + 연습 이용권으로 진행 (정책 §10 타석 예약)
function LessonPassStep({ onBack, onNext, value, onPick, onBuyPass, stepper }){
  const [cat, setCat] = React.useState("all");
  const owned = (window.QA_OWNED||[]).filter(t=>t.type==="training").map(o=>({id:o.id, name:o.name, cat:ticketCat(o), store:o.store, meta:o.meta||[], remainText:o.remainText||"", owned:true}));
  const std = [
    {id:"r1", name:"정기 이용권", cat:"period", store:"용인구성점", meta:[["1일 사용가능 시간","60분"],["이용기간","90일"]], remainText:"잔여 42일"},
    {id:"t1", name:"시간제 이용권", cat:"time", store:"용인구성점", meta:[["사용가능 시간 (자유)","2,400분"],["이용기간","90일"]], remainText:"잔여 1,840분"},
    {id:"d1", name:"일일 이용권", cat:"day", store:"용인구성점", meta:[["1회 사용가능","자유"],["이용기간","1일"]], remainText:"잔여 3회"},
    {id:"pk1", name:"패키지 이용권", cat:"package", store:"용인구성점", meta:[["레슨+연습 결합","-"],["이용기간","90일"]], remainText:"잔여 5회"},
  ];
  const all = [...owned, ...std];
  const list = all.filter(t => cat==="all" || ticketCat(t)===cat);
  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:8,padding:"10px 14px",display:"flex",gap:10,alignItems:"flex-start",marginBottom:14}}>
          <div style={{color:"var(--primary)",marginTop:1}}><Icon name="info" size={16}/></div>
          <div style={{fontSize:12,color:"var(--text-sub)",lineHeight:1.5}}>레슨은 <b style={{color:"var(--primary)"}}>레슨권 + 연습 이용권</b>으로 진행돼요. 레슨 받을 <b>타석 이용</b>에 사용할 이용권(연습권)을 선택하세요.</div>
        </div>
        <TicketCatChips cat={cat} setCat={setCat}/>
        <div style={{display:"flex",flexDirection:"column",gap:10}}>
          {list.map(t=>{ const sel=value?.id===t.id; return (
            <button key={t.id} onClick={()=>onPick(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)"),flexShrink:0,marginTop:2,display:"flex",alignItems:"center",justifyContent:"center"}}>{sel && <span style={{width:10,height:10,borderRadius:"50%",background:"var(--primary)"}}/>}</div>
              <div style={{flex:1}}>
                <div style={{display:"flex",alignItems:"center",gap:6}}><span style={{fontWeight:700,fontSize:14,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:10}}>
                  {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)"}}><span className="chip chip-primary">{t.remainText}</span></div>
              </div>
            </button>
          );})}
          {list.length===0 && <div style={{padding:"20px 0",textAlign:"center",fontSize:13,color:"var(--text-mute)"}}>해당 유형의 이용권이 없어요.</div>}
          {onBuyPass && <button className="btn btn-outline" style={{width:"100%",height:48,marginTop:2}} onClick={onBuyPass}><Icon name="plus" size={16}/> 이용권 구매하기</button>}
        </div>
      </div>
      <div className="footer-bar">
        <button className={"btn " + (value?"btn-primary":"btn-disabled")} style={{width:"100%"}} onClick={()=>value && onNext()}>다음</button>
      </div>
    </div>
  );
}

// 예약 확인 — 레슨권 + 연습 이용권 차감, 가용 타석 자동 배정(변경 가능), 결제 없음
function LessonConfirmStep({ onBack, onNext, pro, lessonTicket, slot, pass, isPackage, bays, bay, onChangeBay, stepper }){
  const [agreed, setAgreed] = React.useState(false);
  const [openBay, setOpenBay] = React.useState(false);
  const dateObj = new Date(slot.date);
  const wd = ["일","월","화","수","목","금","토"][dateObj.getDay()];
  return (
    <div className="screen">
      <StatusBar onNavy/>
      <Appbar navy title="예약 확인" onBack={onBack}/>
      {stepper}
      <div className="scroll" style={{padding:"16px 20px 140px"}}>
        <div className="card" style={{padding:16}}>
          <div style={{fontWeight:700,fontSize:15,color:"var(--text)"}}>{lessonTicket.name}</div>
          <div className="muted" style={{fontSize:12,marginTop:3}}>퀀텀 아카데미 용인구성점</div>
          <div style={{marginTop:14,display:"flex",flexDirection:"column",gap:8}}>
            {[["담당 프로",pro.name],["예약 일시",`${dateObj.getMonth()+1}.${dateObj.getDate()} (${wd}) · ${slot.time}`],["레슨 시간",`${lessonTicket.time} (1회)`]].map(([k,v])=>(
              <div key={k} style={{display:"flex",justifyContent:"space-between"}}><span className="label">{k}</span><span className="val" style={{fontWeight:600}}>{v}</span></div>
            ))}
          </div>
        </div>

        <div className="h3" style={{margin:"22px 0 10px"}}>연습 타석 <span style={{fontSize:12,fontWeight:600,color:"var(--text-sub)"}}>(자동 배정)</span></div>
        <div className="card" style={{padding:16}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
            <div style={{display:"flex",alignItems:"center",gap:10}}>
              <span style={{width:34,height:34,borderRadius:9,background:"var(--primary-tint)",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name="target" size={17} style={{color:"var(--primary)"}}/></span>
              <div><div style={{fontSize:15,fontWeight:800}}>{bay} 타석</div><div style={{fontSize:11.5,color:"var(--text-sub)",marginTop:2}}>예약 찬 타석 제외, 가용 타석 자동 배정</div></div>
            </div>
            <button onClick={()=>setOpenBay(o=>!o)} style={{fontSize:12,fontWeight:700,color:"var(--primary)",background:"transparent",border:"1px solid var(--primary)",borderRadius:8,padding:"7px 12px"}}>타석 변경</button>
          </div>
          {openBay && (
            <div style={{marginTop:12,paddingTop:12,borderTop:"1px solid var(--line)"}}>
              <div style={{fontSize:11.5,color:"var(--text-mute)",marginBottom:8}}>예약 가능한 타석 (예약중 타석 선택 불가)</div>
              <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
                {bays.map(b=>(
                  <button key={b.name} onClick={()=>{ if(!b.booked){ onChangeBay(b.name); setOpenBay(false); } }} style={{fontSize:12,fontWeight:700,padding:"7px 12px",borderRadius:14,border:bay===b.name?"2px solid var(--primary)":"1px solid var(--line)",background:b.booked?"var(--bg-soft)":(bay===b.name?"var(--primary-tint)":"#fff"),color:b.booked?"var(--text-mute)":(bay===b.name?"var(--primary)":"var(--text)"),opacity:b.booked?.55:1}}>{b.name}{b.booked?" · 예약중":""}</button>
                ))}
              </div>
            </div>
          )}
        </div>

        <div className="h3" style={{margin:"22px 0 10px"}}>이용권 차감</div>
        <div className="card" style={{padding:16}}>
          <div style={{display:"flex",justifyContent:"space-between",padding:"3px 0"}}><span className="label">레슨권</span><span className="val" style={{fontWeight:600}}>{lessonTicket.name} · 1회</span></div>
          {isPackage ? (
            <div style={{display:"flex",justifyContent:"space-between",padding:"3px 0"}}><span className="label">연습 타석</span><span className="val" style={{fontWeight:600,color:"var(--primary)"}}>패키지 포함 (별도 차감 없음)</span></div>
          ) : (
            <div style={{display:"flex",justifyContent:"space-between",padding:"3px 0"}}><span className="label">연습 이용권</span><span className="val" style={{fontWeight:600}}>{pass?.name} · 1회</span></div>
          )}
          <div style={{height:1,background:"var(--line)",margin:"12px 0"}}/>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}><span style={{fontSize:14,fontWeight:700}}>추가 결제 금액</span><span style={{fontSize:18,fontWeight:800,color:"var(--primary)"}}>0원</span></div>
        </div>

        <div style={{marginTop:14,padding:"12px 14px",borderRadius:10,background:"var(--primary-tint)",border:"1px solid #BDEACC",display:"flex",gap:10,alignItems:"flex-start"}}>
          <div style={{color:"var(--primary)",marginTop:1}}><Icon name="info" size={16}/></div>
          <div style={{fontSize:12.5,color:"var(--text-sub)",lineHeight:1.55}}>보유 이용권으로 예약하며 <b style={{color:"var(--text)"}}>추가 결제가 없습니다</b>. {isPackage ? "패키지 이용권은" : "레슨권과 연습 이용권은"} <b style={{color:"var(--text)"}}>이용 시작 시간</b>에 차감됩니다. (취소 가능 시간 내 취소 시 복구)</div>
        </div>

        <button onClick={()=>setAgreed(a=>!a)} style={{marginTop:16,display:"flex",gap:10,alignItems:"flex-start",textAlign:"left",width:"100%",background:"transparent"}}>
          <div style={{width:18,height:18,borderRadius:4,background:agreed?"var(--primary)":"#fff",border:"1.5px solid "+(agreed?"var(--primary)":"var(--line-strong)"),display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,marginTop:1}}>{agreed && <Icon name="check" size={12} stroke={3} style={{color:"#fff"}}/>}</div>
          <div style={{fontSize:12.5,color:"var(--text-sub)"}}>[필수] 위의 내용을 확인하였으며, 취소/환불 규정에 동의합니다.</div>
        </button>
      </div>
      <div className="footer-bar">
        <button className={"btn " + (agreed?"btn-primary":"btn-disabled")} style={{width:"100%"}} onClick={()=>agreed && onNext()}>예약 확정하기</button>
      </div>
    </div>
  );
}

function LessonFlow({ onClose, goHome, initialTicket, onBuyPass }){
  // 진입 = 사용 가능한 레슨권에서 선택한 레슨권(프로 고정). 프로선택 단계 없음.
  const lessonTicket = initialTicket || { name:"레슨권", pro:{name:"-"}, time:"60분", remain:10 };
  const pro = lessonTicket.pro || { name:"-" };
  const isPackage = !!lessonTicket.package;   // 패키지면 연습 이용권 별도 선택 생략

  const [slot, setSlot] = React.useState(null);
  const [pass, setPass] = React.useState(null);
  // 가용 타석 자동 배정 (예약 찬 타석 제외)
  const bays = [{name:"라이언",booked:true},{name:"어피치",booked:false},{name:"프로도",booked:true},{name:"네오",booked:false},{name:"무지",booked:false}];
  const [bay, setBay] = React.useState((bays.find(b=>!b.booked)||{}).name);

  const FLOW = isPackage ? ["time","confirm","done"] : ["time","pass","confirm","done"];
  const LABEL = {time:"시간 선택", pass:"이용권", confirm:"예약 확인", done:"완료"};
  const [step, setStep] = React.useState("time");
  const idx = FLOW.indexOf(step);
  const stepper = <Stepper steps={FLOW.map(s=>LABEL[s])} active={idx}/>;
  const next = ()=> setStep(FLOW[Math.min(idx+1, FLOW.length-1)]);
  const prev = ()=> idx<=0 ? onClose() : setStep(FLOW[idx-1]);

  return (
    <>
      {step==="time"    && <LessonTimeStep stepper={stepper} onBack={prev} onNext={next} pro={pro} value={slot} onPick={setSlot}/>}
      {step==="pass"    && <LessonPassStep stepper={stepper} onBack={prev} onNext={next} value={pass} onPick={setPass} onBuyPass={onBuyPass}/>}
      {step==="confirm" && <LessonConfirmStep stepper={stepper} onBack={prev} onNext={next} pro={pro} lessonTicket={lessonTicket} slot={slot} pass={pass} isPackage={isPackage} bays={bays} bay={bay} onChangeBay={setBay}/>}
      {step==="done"    && (
        <DoneStep
          stepper={stepper}
          onHome={goHome} onMyReservations={goHome}
          store={{name:"퀀텀 아카데미 용인구성점"}}
          date={slot.date}
          pick={{bay:`${bay} 타석`, type:`${pro.name} 레슨`, start:slot.time, end:slot.time, duration:parseInt(lessonTicket.time)||60}}
          ticket={lessonTicket}
        />
      )}
    </>
  );
}

// ============================================================
// 레슨 프로 — 목록 / 상세 (홈 퀵메뉴 '레슨 프로' 진입)
// ============================================================
// 이용권 카테고리 — 필터칩 공용 (일일/시간제/기간제/패키지)
const TICKET_CATS = [["all","전체"],["day","일일"],["time","시간제"],["period","기간제"],["package","패키지"]];
function ticketCat(t){ return t.cat || (/일일/.test(t.name||"")?"day" : /시간제|시간권/.test(t.name||"")?"time" : /패키지/.test(t.name||"")?"package" : "period"); }
function TicketCatChips({ cat, setCat }){
  return (
    <div style={{display:"flex",gap:6,overflowX:"auto",scrollbarWidth:"none",marginBottom:14}}>
      {TICKET_CATS.map(([k,v])=>(
        <button key={k} onClick={()=>setCat(k)} className={"fchip "+(cat===k?"on":"")} style={{flex:"0 0 auto",height:32,fontSize:12.5}}>{v}</button>
      ))}
    </div>
  );
}
const wonKR = n => n.toLocaleString("ko-KR")+"원";

const PRO_LIST = [
  {id:"roel", name:"로엘이 프로", init:"로", rating:4.9, reviews:128, store:"퀀텀 아카데미 판교점", tags:["스윙교정","실전라운드"],
   career:["KPGA 투어 프로 3년","前 OOCC 소속 프로","레슨 경력 8년"], certs:["KPGA 정회원","USGTF Level 3"],
   intro:"데이터 기반으로 스윙을 분석하고, 기본기부터 실전 라운드까지 단계별로 교정합니다. 초보부터 싱글 지향까지 맞춤 커리큘럼을 제공해요.",
   tickets:[
     {id:"roel12", name:"정기 레슨권 12회", desc:"주 1회 · 60분", count:"12회", validDays:90, price:480000, cat:"period", tag:"인기"},
     {id:"roelday", name:"일일 레슨권 1회", desc:"60분 1회", count:"1회", validDays:30, price:45000, cat:"day"},
   ]},
  {id:"kim", name:"김지훈 프로", init:"김", rating:4.8, reviews:96, store:"퀀텀 아카데미 판교점", tags:["주니어","기초"],
   career:["한국체대 골프 전공","주니어 국가대표 코치","레슨 경력 6년"], certs:["KPGA 준회원","생활체육지도사 2급"],
   intro:"주니어와 입문자 전문. 골프가 처음이어도 재미있게 시작할 수 있도록 쉽고 친절하게 알려드립니다.",
   tickets:[
     {id:"kim12", name:"정기 레슨권 12회", desc:"주 1회 · 60분", count:"12회", validDays:90, price:420000, cat:"period"},
     {id:"kimday", name:"일일 레슨권 1회", desc:"60분 1회", count:"1회", validDays:30, price:40000, cat:"day"},
   ]},
  {id:"park", name:"박서연 프로", init:"박", rating:5.0, reviews:211, store:"퀀텀 아카데미 광교점", tags:["여성전용","드라이버"],
   career:["KLPGA 세미프로","여성 전용 레슨 5년","비거리 향상 프로그램 운영"], certs:["KLPGA 회원","TPI Level 2"],
   intro:"여성 골퍼 맞춤 레슨. 비거리와 자세 교정에 강점이 있으며, 편안한 분위기에서 진행합니다.",
   tickets:[ {id:"park8", name:"정기 레슨권 8회", desc:"주 1회 · 50분", count:"8회", validDays:60, price:320000, cat:"period"} ]},
  {id:"lee", name:"이동우 프로", init:"이", rating:4.7, reviews:74, store:"퀀텀 아카데미 광교점", tags:["아이언","숏게임"],
   career:["USGTF 공인 프로","아이언·숏게임 전문","레슨 경력 4년"], certs:["USGTF Level 2"],
   intro:"아이언 정확도와 숏게임을 집중적으로 다듬어 스코어를 줄여드립니다.",
   tickets:[ {id:"lee12", name:"정기 레슨권 12회", desc:"주 2회 · 60분", count:"12회", validDays:60, price:520000, cat:"period"} ]},
];

function ProList({ onBack, onOpenDetail }){
  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="레슨 프로" onBack={onBack}/>
      <div className="scroll" style={{padding:"14px 20px 30px"}}>
        <div style={{fontSize:13,color:"var(--text-sub)",marginBottom:14}}>퀀텀 아카데미 레슨 프로 <b style={{color:"var(--primary)"}}>{PRO_LIST.length}</b>명</div>
        <div style={{display:"flex",flexDirection:"column",gap:12}}>
          {PRO_LIST.map(p=>(
            <button key={p.id} onClick={()=>onOpenDetail(p)} className="card" style={{padding:16,textAlign:"left",display:"flex",gap:14,alignItems:"center"}}>
              <div className="avatar" style={{width:56,height:56,fontSize:20,flexShrink:0}}>{p.init}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:"flex",alignItems:"center",gap:6}}>
                  <span style={{fontSize:15,fontWeight:800}}>{p.name}</span>
                  <span style={{fontSize:12,color:"var(--primary)",fontWeight:700}}>★ {p.rating}</span>
                  <span style={{fontSize:11,color:"var(--text-mute)"}}>리뷰 {p.reviews}</span>
                </div>
                <div style={{fontSize:12.5,color:"var(--text-sub)",marginTop:4,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{p.career[0]}</div>
                <div style={{fontSize:11.5,color:"var(--text-mute)",marginTop:5,display:"flex",alignItems:"center",gap:4}}><Icon name="location" size={12}/> {p.store}</div>
                <div style={{display:"flex",gap:5,marginTop:8}}>{p.tags.map(t=><span key={t} className="chip" style={{background:"var(--bg-soft)",color:"var(--text-sub)",fontSize:10,fontWeight:700,padding:"2px 8px"}}>#{t}</span>)}</div>
              </div>
              <Icon name="chev-r" size={16} style={{color:"var(--text-mute)",flexShrink:0}}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ProDetail({ onBack, pro, onBuy }){
  const p = (pro && pro.tickets) ? pro : PRO_LIST[0];
  const sec = {padding:"18px 20px",borderTop:"8px solid var(--bg)"};
  const h = {fontSize:15,fontWeight:800,marginBottom:10};
  return (
    <div className="screen">
      <StatusBar/>
      <Appbar title="프로 상세" onBack={onBack}/>
      <div className="scroll" style={{paddingBottom:100}}>
        <div style={{background:"var(--bg-soft)",padding:"20px",display:"flex",gap:16,alignItems:"center"}}>
          <div style={{width:88,height:88,borderRadius:18,background:"linear-gradient(180deg,#cbd5e1,#94a3b8)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:34,fontWeight:800,color:"#fff",flexShrink:0}}>{p.init}</div>
          <div style={{flex:1}}>
            <div style={{fontSize:19,fontWeight:800}}>{p.name}</div>
            <div style={{display:"flex",alignItems:"center",gap:6,marginTop:4,fontSize:13}}><span style={{color:"var(--primary)",fontWeight:700}}>★ {p.rating}</span><span style={{color:"var(--text-mute)"}}>리뷰 {p.reviews}</span></div>
            <div style={{fontSize:12,color:"var(--text-sub)",marginTop:6,display:"flex",alignItems:"center",gap:4}}><Icon name="location" size={12}/> {p.store}</div>
            <div style={{display:"flex",gap:5,marginTop:8}}>{p.tags.map(t=><span key={t} className="chip" style={{background:"#fff",color:"var(--text-sub)",fontSize:10,fontWeight:700,padding:"2px 8px"}}>#{t}</span>)}</div>
          </div>
        </div>

        <div style={{padding:"18px 20px"}}>
          <div style={h}>소개</div>
          <div style={{fontSize:13.5,lineHeight:1.7,color:"var(--text-sub)"}}>{p.intro}</div>
        </div>

        <div style={sec}>
          <div style={h}>자격 및 경력</div>
          {p.certs.map(c=>(<div key={c} style={{display:"flex",gap:8,padding:"4px 0",fontSize:13.5}}><Icon name="check" size={15} stroke={3} style={{color:"var(--primary)",flexShrink:0,marginTop:1}}/><span>{c}</span></div>))}
          <div style={{height:6}}/>
          {p.career.map(c=>(<div key={c} style={{display:"flex",gap:8,padding:"4px 0",fontSize:13.5,color:"var(--text-sub)"}}><span style={{color:"var(--text-mute)",fontWeight:700}}>·</span><span>{c}</span></div>))}
        </div>

        <div style={sec}>
          <div style={h}>레슨 이용료</div>
          {p.tickets.map(t=>(<div key={t.id} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"11px 0",borderBottom:"1px solid var(--line)",fontSize:14}}><span style={{color:"var(--text-sub)"}}>{t.name} <span style={{fontSize:11,color:"var(--text-mute)"}}>· {t.desc}</span></span><span style={{fontWeight:800}}>{wonKR(t.price)}</span></div>))}
        </div>

        <div style={sec}>
          <div style={h}>레슨 장소</div>
          <div style={{display:"flex",alignItems:"center",gap:8,fontSize:14,fontWeight:600}}><Icon name="location" size={15} style={{color:"var(--primary)"}}/> {p.store}</div>
        </div>
      </div>
      <div className="footer-bar">
        <button className="btn btn-primary" style={{width:"100%"}} onClick={()=>onBuy(p)}>레슨 이용권 구매하기</button>
      </div>
    </div>
  );
}

Object.assign(window, { LessonFlow, PROS, ProList, ProDetail });