// Home — 서비스(screen|academy)는 온보딩에서 선택, prop으로 수신

function HomeScreen({ onNav, onOpenQR, onOpenNoti, onOpenBooking, onOpenScorecard, onOpenClub, onOpenReservations, onOpenReservationDetail, onOpenUnmanned, onOpenMenu, onOpenNotice, onOpenAttendance, onOpenCourse, onOpenChampionship, onOpenEvent, onOpenSubscribe, subActive, onOpenTicket, onOpenLesson, onOpenStores, onOpenReport, onOpenTraining, onBookScreen, onBookTraining, onBookLesson, service, onSetService }){
  // 데모용 상태
  const [resState, setResState] = React.useState("today");
  const [hasTickets, setHasTickets] = React.useState(true);
  const [fieldTab, setFieldTab] = React.useState(0);
  const [toast, setToast] = React.useState(null);
  const showToast = (m)=>{ setToast(m); window.clearTimeout(showToast._t); showToast._t=window.setTimeout(()=>setToast(null),2200); };
  // 필드예약 = 카카오 골프예약(자사 타 앱)으로 랜딩 — 프로토타입은 이동 안내 토스트
  const goExternalField = ()=> showToast("카카오 골프예약 앱으로 이동합니다");

  const screenQuick = [
    {id:"score", label:"스코어카드", svg:"scorecard", onClick:onOpenScorecard},
    {id:"club",  label:"클럽측정",   svg:"club",      onClick:onOpenClub},
    {id:"res",   label:"예약내역",   svg:"calendar-home", onClick:onOpenReservations},
    {id:"field", label:"필드예약",   svg:"flag-green", onClick:goExternalField},
    {id:"tour",  label:"대회",       svg:"trophy-yellow", onClick:onOpenChampionship},
    {id:"event", label:"이벤트",     svg:"gift-red", onClick:onOpenEvent},
    {id:"course",label:"코스",       svg:"hat-green", onClick:onOpenCourse},
    {id:"notice",label:"공지사항",   svg:"speaker", onClick:onOpenNotice},
  ];
  const academyQuick = [
    {id:"score",   label:"스코어카드", svg:"scorecard", onClick:onOpenScorecard},
    {id:"club",    label:"클럽측정",   svg:"club",      onClick:onOpenClub},
    {id:"ticket",  label:"내 이용권",  svg:"ticket-flat", onClick:onOpenTicket},
    {id:"res",     label:"예약내역",   svg:"calendar-home", onClick:onOpenReservations},
    {id:"pro",     label:"레슨 프로",  svg:"pro-card", onClick:onOpenLesson},
    {id:"event",   label:"이벤트",     svg:"gift-red", onClick:onOpenEvent},
    {id:"attend",  label:"출석체크",   svg:"attend-check", onClick:onOpenAttendance},
    {id:"notice",  label:"공지사항",   svg:"speaker", onClick:onOpenNotice},
  ];

  // 실제 Figma 홈 퀵메뉴 아이콘(PNG). 미매핑(이용권·레슨프로·필드·출석)은 기존 SVG 유지
  const FIG_ICON = { scorecard:"main-scorecard", club:"main-club", "calendar-home":"main-bookinglist", "trophy-yellow":"main-championship", "gift-red":"main-event", "hat-green":"main-course", speaker:"main-notice" };
  const FlatIcon = ({name})=>(
    <div style={{width:44,height:44,display:"flex",alignItems:"center",justifyContent:"center"}}>
      {FIG_ICON[name] ? (
        <img src={`assets/icons/${FIG_ICON[name]}.png`} alt="" style={{width:30,height:30,objectFit:"contain"}}/>
      ) : (<>
        {name==="ticket-flat" && <svg viewBox="0 0 44 44" width="44" height="44"><path d="M8 16v4a2 2 0 0 1 0 4v4a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-4a2 2 0 0 1 0-4v-4a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2z" fill="none" stroke="#1A1C1F" strokeWidth="2"/><path d="M22 14v16" stroke="#22C55E" strokeWidth="2" strokeDasharray="2 3"/></svg>}
        {name==="pro-card" && <svg viewBox="0 0 44 44" width="44" height="44"><circle cx="22" cy="17" r="6" fill="#22C55E"/><path d="M10 36c0-6 5-10 12-10s12 4 12 10" fill="#22C55E"/><circle cx="33" cy="14" r="3" fill="#FDE047"/><path d="M31 14h4" stroke="#1A1C1F" strokeWidth="1.5"/></svg>}
        {name==="flag-green" && <svg viewBox="0 0 44 44" width="44" height="44"><path d="M14 8v28" stroke="#1A1C1F" strokeWidth="2.5" strokeLinecap="round"/><path d="M14 10h16l-4 5 4 5H14z" fill="#22C55E"/><circle cx="30" cy="34" r="3" fill="#1A1C1F"/></svg>}
        {name==="attend-check" && <svg viewBox="0 0 44 44" width="44" height="44"><rect x="8" y="12" width="28" height="24" rx="3" fill="none" stroke="#1A1C1F" strokeWidth="2"/><path d="M8 20h28" stroke="#1A1C1F" strokeWidth="2"/><path d="M16 8v8M28 8v8" stroke="#1A1C1F" strokeWidth="2" strokeLinecap="round"/><path d="M16.5 28l3.5 3.5L28 24.5" stroke="#22C55E" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>}
      </>)}
    </div>
  );

  // 시점 동적 예약 카드 데이터
  const reservations = {
    today:    {tagLabel:"오늘",     date:"오늘",          time:"19:00 ~ 21:00", store: service==="screen"?"퀀텀 아카데미 판교점":"퀀텀 아카데미 광교점", bay: service==="screen"?"Q-3번 타석":"조현진 프로 · 2번 타석", kind: service==="screen"?"스크린":"레슨"},
    tomorrow: {tagLabel:"내일",     date:"내일",          time:"08:00 ~ 09:00", store: service==="screen"?"퀀텀 아카데미 강남점":"퀀텀 아카데미 광교점", bay: service==="screen"?"Q-1번 타석":"조현진 프로 · 2번 타석", kind: service==="screen"?"스크린":"레슨"},
    later:    {tagLabel:"다음 예약", date:"4월 25일 (토)", time:"14:00",         store: service==="screen"?"퀀텀 아카데미 잠실점":"퀀텀 아카데미 판교점", bay: service==="screen"?"T2-2번 타석":"한진선 프로 · 1번 타석", kind: service==="screen"?"스크린":"레슨"},
  };
  const nextRes = resState==="none" ? null : reservations[resState];

  // 보유 이용권 (아카데미)
  const myTickets = [
    {id:"t1", kind:"정기 레슨권", name:"조현진 프로 레슨권", store:"광교점", left:"1회(60분) 남음", color:"#22C55E", category:"lesson", proName:"조현진"},
    {id:"t2", kind:"일일 레슨권", name:"한진선 프로 레슨권 100", store:"판교점", left:"8일 남음", color:"#16A34A", category:"lesson", proName:"한진선"},
    {id:"t3", kind:"트레이닝권", name:"FA 무제한 60분", store:"판교점", left:"14회 남음", color:"#0EA5E9", category:"training"},
  ];

  // 자주/최근 (스크린)
  const screenShortcuts = [
    {tag:"자주 예약", store:"퀀텀 아카데미 판교점", info:"매주 금 19:00 · Q-3",
      storeObj:{name:"퀀텀 아카데미 판교점", addr:"경기도 성남시 분당구 판교역로 235", hours:[["Q","평일 09:30 - 익일 02:00 · 주말 09:30 - 익일 01:00"],["T2","평일 09:30 - 22:30 · 주말 08:00 - 익일 01:00"]]}},
    {tag:"최근 방문", store:"퀀텀 아카데미 강남점", info:"4월 13일 14:00",
      storeObj:{name:"퀀텀 아카데미 강남점", addr:"서울 강남구 테헤란로 152", hours:[["Q","평일 09:30 - 익일 02:00 · 주말 09:30 - 익일 01:00"]]}},
    {tag:"자주 예약", store:"퀀텀 아카데미 잠실점", info:"매월 첫째주 토",
      storeObj:{name:"퀀텀 아카데미 잠실점", addr:"서울 송파구 올림픽로 300", hours:[["Q","평일 09:30 - 익일 02:00 · 주말 09:30 - 익일 01:00"],["T2","평일 09:30 - 22:30 · 주말 08:00 - 익일 01:00"]]}},
  ];

  const nearby = [
    {name:"퀀텀 아카데미 판교점", dist:"320m", left:5, total:8, type:"Q", busy:"여유"},
    {name:"퀀텀 아카데미 분당점", dist:"1.2km", left:2, total:6, type:"T2", busy:"보통"},
    {name:"퀀텀 아카데미 강남점", dist:"3.8km", left:0, total:10, type:"Q", busy:"마감"},
    {name:"퀀텀 아카데미 잠실점", dist:"5.4km", left:7, total:12, type:"Q", busy:"여유"},
  ];

  // 필드 예약 추천 — 지역 탭 선택 시 해당 지역 코스 카드로 변경
  const fieldTabs = ["서울/경기","강원","충청","경상","전라"];
  const fieldByRegion = [
    [ // 서울/경기
      {left:"잔여 13팀", name:"루스츠", region:"경기 용인", rating:4.2, badges:["멤버십특가","1만원 환급"], price:"100,000원~"},
      {left:"잔여 8팀", name:"비에이비스타", region:"경기 이천", rating:4.2, badges:[], price:"120,000원~"},
      {left:"잔여 티타임 없음", name:"롯데스카이힐부여", region:"경기 용인", rating:4.2, badges:[], price:null, soldout:true},
      {left:"잔여 10팀", name:"레이크우드", region:"경기 양평", rating:4.2, badges:[], price:"110,000원~"},
    ],
    [ // 강원
      {left:"잔여 6팀", name:"오크밸리", region:"강원 원주", rating:4.4, badges:["멤버십특가"], price:"130,000원~"},
      {left:"잔여 9팀", name:"세이지우드", region:"강원 홍천", rating:4.3, badges:[], price:"140,000원~"},
      {left:"잔여 4팀", name:"비발디파크", region:"강원 홍천", rating:4.1, badges:[], price:"150,000원~"},
    ],
    [ // 충청
      {left:"잔여 11팀", name:"세종에머슨", region:"충남 천안", rating:4.3, badges:["1만원 환급"], price:"95,000원~"},
      {left:"잔여 7팀", name:"레이크힐스제천", region:"충북 제천", rating:4.0, badges:[], price:"105,000원~"},
      {left:"잔여 티타임 없음", name:"우정힐스", region:"충남 천안", rating:4.5, badges:[], price:null, soldout:true},
    ],
    [ // 경상
      {left:"잔여 5팀", name:"경주신라", region:"경북 경주", rating:4.4, badges:["멤버십특가"], price:"110,000원~"},
      {left:"잔여 12팀", name:"통도파인이스트", region:"경남 양산", rating:4.2, badges:[], price:"120,000원~"},
      {left:"잔여 8팀", name:"가야", region:"경남 김해", rating:4.0, badges:[], price:"100,000원~"},
    ],
    [ // 전라
      {left:"잔여 9팀", name:"무주덕유산", region:"전북 무주", rating:4.3, badges:["1만원 환급"], price:"90,000원~"},
      {left:"잔여 6팀", name:"승주", region:"전남 순천", rating:4.1, badges:[], price:"100,000원~"},
      {left:"잔여 티타임 없음", name:"파인비치", region:"전남 해남", rating:4.6, badges:[], price:null, soldout:true},
    ],
  ];
  const fieldCourses = fieldByRegion[fieldTab] || fieldByRegion[0];

  const quick = service==="screen" ? screenQuick : academyQuick;

  const BookIcon = ({n,color})=>(
    <span style={{display:"inline-flex",alignItems:"center",justifyContent:"center",width:16,height:16,color:color||"currentColor"}}>
      {n==="screen" && <svg viewBox="0 0 18 18" width="16" height="16"><rect x="2" y="3" width="14" height="9" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.6"/><path d="M6 15h6M9 12v3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>}
      {n==="training" && <svg viewBox="0 0 18 18" width="16" height="16"><path d="M6 4l8 8-3 3L3 7z" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><circle cx="5" cy="14" r="1.6" fill="currentColor"/></svg>}
      {n==="lesson" && <svg viewBox="0 0 18 18" width="16" height="16"><circle cx="9" cy="6" r="3" fill="none" stroke="currentColor" strokeWidth="1.6"/><path d="M3 16c0-3 3-5 6-5s6 2 6 5" fill="none" stroke="currentColor" strokeWidth="1.6"/></svg>}
    </span>
  );

  return (
    <div className="screen">
      <StatusBar/>
      <div className="scroll" style={{paddingBottom:90}}>
        {/* Brand bar */}
        <div className="appbar" style={{padding:"0 16px"}}>
          <div className="side">
            <div style={{fontWeight:900,fontSize:16,letterSpacing:"-.01em",paddingLeft:8}}>FRIENDS SCREEN</div>
          </div>
          <div className="side" style={{display:"flex",alignItems:"center",gap:2}}>
            <button className="icon-btn" onClick={onOpenNoti} aria-label="알림">
              <Icon name="bell" size={22}/>
              <span className="dot-new"/>
            </button>
            <button className="icon-btn" onClick={onOpenMenu}><Icon name="menu" size={22}/></button>
          </div>
        </div>

        {/* 서비스 전환 토글 — 현재 모드 표시 + 즉시 전환 */}
        <div style={{padding:"4px 16px 6px"}}>
          <div style={{display:"flex",background:"var(--bg-soft)",borderRadius:10,padding:3,gap:3}}>
            {[
              {id:"screen", label:"스크린 골프"},
              {id:"academy", label:"연습·아카데미"},
            ].map(s=>{
              const on = service===s.id;
              return (
                <button key={s.id} onClick={()=>{ if(!on) onSetService && onSetService(s.id); }} style={{
                  flex:1,height:40,borderRadius:8,fontSize:13,fontWeight:800,letterSpacing:"-.01em",
                  display:"flex",alignItems:"center",justifyContent:"center",gap:5,
                  background: on ? "#fff" : "transparent",
                  color: on ? "var(--primary)" : "var(--text-sub)",
                  boxShadow: on ? "0 1px 3px rgba(0,0,0,.1)" : "none",
                }}>
                  {on && <span style={{width:5,height:5,borderRadius:"50%",background:"var(--primary)"}}/>}
                  {s.label}
                </button>
              );
            })}
          </div>
        </div>

        {/* === 프로필 통합 카드 === */}
        <div style={{padding:"4px 16px 12px"}}>
          <div style={{
            background:"linear-gradient(180deg,#F8FAF8 0%,#FFFFFF 100%)",
            border:"1px solid var(--line)",borderRadius:14,padding:"14px 14px 14px"
          }}>
            {/* 닉네임 행 */}
            <div onClick={onOpenMenu} role="button" style={{
              width:"100%",display:"flex",alignItems:"center",gap:12,padding:0,background:"transparent",textAlign:"left",cursor:"pointer"
            }}>
              <div style={{
                width:42,height:42,borderRadius:"50%",
                background:"linear-gradient(135deg,#16A34A 0%,#22C55E 100%)",
                display:"flex",alignItems:"center",justifyContent:"center",
                color:"#fff",fontSize:14,fontWeight:800,flexShrink:0
              }}>라</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{display:"flex",alignItems:"center",gap:4,fontSize:15,fontWeight:800,letterSpacing:"-.01em"}}>
                  라이언님
                  <Icon name="chev-r" size={13} style={{color:"var(--text-mute)"}}/>
                </div>
                <div style={{fontSize:11,color:"var(--text-sub)",marginTop:2}}>내 정보 · 알림 · 설정</div>
              </div>
              {/* 데모 토글 */}
              <button onClick={(e)=>{ e.stopPropagation(); const next = {none:"today",today:"tomorrow",tomorrow:"later",later:"none"}[resState]; setResState(next); }}
                style={{fontSize:9,color:"var(--text-mute)",background:"transparent",padding:"3px 5px",border:"1px dashed var(--line)",borderRadius:4,fontWeight:600}}>
                예약: {resState}
              </button>
            </div>

            {/* 구독 진입 — 프리미엄 (구독중/미구독) */}
            <button onClick={onOpenSubscribe} style={{width:"100%",display:"flex",alignItems:"center",gap:10,marginTop:12,padding:"11px 12px",borderRadius:11,border:"none",textAlign:"left",background:subActive?"var(--primary-tint)":"linear-gradient(100deg,#F0FDF4 0%,#ECFDF5 100%)"}}>
              <span style={{width:30,height:30,borderRadius:9,background:"#fff",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                <svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="var(--primary)" strokeWidth="1.7" strokeLinejoin="round"><path d="M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8L12 17l-5.3 2.6 1-5.8L3.5 9.7l5.9-.9z"/></svg>
              </span>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontSize:13,fontWeight:800,letterSpacing:"-.01em"}}>{subActive?"프리미엄 구독중":"프렌즈 스크린 프리미엄"}</div>
                <div style={{fontSize:11,color:"var(--text-sub)",marginTop:1}}>{subActive?"이용 중인 혜택 · 구독 관리":"18홀·멀티플레이·코스 트레이닝 더 보기"}</div>
              </div>
              {!subActive && <span style={{fontSize:11,fontWeight:800,color:"#fff",background:"var(--primary)",borderRadius:7,padding:"5px 10px",flexShrink:0}}>구독하기</span>}
              {subActive && <Icon name="chev-r" size={14} style={{color:"var(--text-mute)"}}/>}
            </button>

            {/* 최근 기록 요약 — 최근 타수 · 최근 트레이닝 */}
            <div style={{display:"flex",marginTop:14,paddingTop:14,borderTop:"1px solid var(--line)"}}>
              <div style={{flex:1}}>
                <div style={{display:"flex",alignItems:"center",gap:4,fontSize:11.5,color:"var(--text-sub)",fontWeight:600}}>
                  <svg viewBox="0 0 12 12" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.3"><path d="M2 10V7M6 10V3M10 10V6"/></svg>
                  평균 타수
                </div>
                <div style={{fontSize:20,fontWeight:800,letterSpacing:"-.02em",marginTop:3}}>88<span style={{fontSize:13,fontWeight:700}}>타</span></div>
              </div>
              <div style={{width:1,background:"var(--line)",margin:"2px 0"}}/>
              <div style={{flex:1,paddingLeft:14}}>
                <div style={{display:"flex",alignItems:"center",gap:4,fontSize:11.5,color:"var(--text-sub)",fontWeight:600}}>
                  <svg viewBox="0 0 12 12" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.1"><path d="M3.5 2h5v2.5a2.5 2.5 0 0 1-5 0zM3.5 3.2H2.2v.8a1.4 1.4 0 0 0 1.3 1.4M8.5 3.2H9.8v.8a1.4 1.4 0 0 1-1.3 1.4M4.8 10h2.4M6 7v3"/></svg>
                  베스트 스코어
                </div>
                <div style={{fontSize:20,fontWeight:800,letterSpacing:"-.02em",marginTop:3,display:"flex",alignItems:"baseline",gap:5}}>
                  72<span style={{fontSize:13,fontWeight:700}}>타</span><span style={{fontSize:11,color:"var(--text-sub)",fontWeight:600}}>소피아그린</span>
                </div>
              </div>
            </div>

            {/* 데이터 기반 응원 한 줄 (최근 3경기 분석) */}
            <div style={{display:"flex",gap:7,marginTop:12,paddingTop:12,borderTop:"1px solid var(--line)"}}>
              <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="var(--primary)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0,marginTop:1}}><path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.7.6 1 1.2 1 2h6c0-.8.3-1.4 1-2A6 6 0 0 0 12 3z"/></svg>
              <div style={{fontSize:12,fontWeight:600,color:"var(--text-sub)",lineHeight:1.45}}>최근 3경기 퍼팅이 좋아지고 있어요! 👏 아이언 정확도는 조금만 더 신경 써봐요.</div>
            </div>

            {/* 예약 영역 */}
            <div style={{marginTop:14,paddingTop:14,borderTop:"1px solid var(--line)"}}>
              {nextRes ? (
                <>
                  {/* 다음 예약 — 영역 전체 탭 → 해당 예약 상세 */}
                  <button onClick={()=>(onOpenReservationDetail||onOpenReservations)(nextRes)} style={{width:"100%",display:"flex",alignItems:"center",gap:10,background:"transparent",textAlign:"left",padding:0}}>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:8}}>
                        <span style={{
                          padding:"2px 7px",borderRadius:4,fontSize:10,fontWeight:800,letterSpacing:"-.01em",
                          background:"var(--primary)",color:"#fff"
                        }}>{nextRes.tagLabel}</span>
                        <span style={{fontSize:12,color:"var(--text-sub)",fontWeight:600}}>{nextRes.kind} 예약</span>
                      </div>
                      <div style={{fontSize:15,fontWeight:800,letterSpacing:"-.02em",color:"var(--text)",lineHeight:1.3}}>
                        {nextRes.store}
                      </div>
                      <div style={{display:"flex",alignItems:"center",gap:6,marginTop:5,fontSize:12.5,color:"var(--text-sub)",fontWeight:600}}>
                        <svg viewBox="0 0 12 12" width="11" height="11"><circle cx="6" cy="6" r="4.5" fill="none" stroke="currentColor" strokeWidth="1.2"/><path d="M6 4v2.5l1.5 1" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" fill="none"/></svg>
                        <span>{nextRes.date} {nextRes.time}</span>
                        <span className="sdot"/>
                        <span>{nextRes.bay}</span>
                      </div>
                    </div>
                    <Icon name="chev-r" size={18} style={{color:"var(--text-mute)",flexShrink:0}}/>
                  </button>
                  {/* 입장 힌트 — 도착 시 하단 QR로 입장 */}
                  <div style={{marginTop:12,padding:"9px 12px",background:"var(--bg-soft)",borderRadius:8,display:"flex",alignItems:"center",gap:6,fontSize:11.5,color:"var(--text-sub)",fontWeight:600}}>
                    <Icon name="qr" size={13} style={{color:"var(--primary)",flexShrink:0}}/>
                    매장 도착하면 하단 QR 버튼으로 입장하세요
                  </div>
                </>
              ) : (
                <div style={{display:"flex",alignItems:"center",gap:12}}>
                  <div style={{width:38,height:38,borderRadius:10,background:"var(--bg-soft)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
                    <svg viewBox="0 0 24 24" width="19" height="19" fill="none" stroke="#9CA3AF" strokeWidth="1.8"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4" strokeLinecap="round"/></svg>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:13.5,fontWeight:800,letterSpacing:"-.01em"}}>예정된 예약이 없어요</div>
                    <div style={{fontSize:11.5,color:"var(--text-sub)",marginTop:2}}>아래에서 바로 예약해보세요.</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* === 예약 CTA === */}
        <div style={{padding:"0 16px 10px"}}>
          <div style={{display:"flex",gap:8}}>
            {service==="screen" ? (
              <button onClick={()=>(onBookScreen||onOpenBooking)()} style={{
                flex:1,height:48,borderRadius:9,fontSize:14,fontWeight:800,
                background:"var(--primary)",color:"#fff",border:"none",
                display:"flex",alignItems:"center",justifyContent:"center",gap:6,letterSpacing:"-.01em"
              }}>
                <BookIcon n="screen"/> 스크린 예약
              </button>
            ) : (
              <>
                <button onClick={onBookTraining||onOpenBooking} style={{
                  flex:1,height:48,borderRadius:9,fontSize:14,fontWeight:800,
                  background:"var(--primary)",color:"#fff",border:"none",
                  display:"flex",alignItems:"center",justifyContent:"center",gap:6,letterSpacing:"-.01em"
                }}>
                  <BookIcon n="training"/> 트레이닝 예약
                </button>
                <button onClick={onBookLesson||onOpenLesson} style={{
                  flex:1,height:48,borderRadius:9,fontSize:14,fontWeight:800,
                  background:"#fff",color:"var(--text)",
                  border:"1px solid var(--line-strong)",
                  display:"flex",alignItems:"center",justifyContent:"center",gap:6,letterSpacing:"-.01em"
                }}>
                  <BookIcon n="lesson"/> 레슨 예약
                </button>
              </>
            )}
          </div>
        </div>

        {/* === 빠른 예약 영역 === */}
        <div style={{padding:"0 16px 0"}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:10}}>
            <div style={{fontSize:15,fontWeight:800,letterSpacing:"-.02em"}}>
              {service==="screen" ? "바로 예약" : "내 이용권으로 바로 예약"}
            </div>
            {service==="academy" && hasTickets && (
              <button onClick={()=>setHasTickets(false)} style={{fontSize:9,color:"var(--text-mute)",background:"transparent",padding:"3px 5px",border:"1px dashed var(--line)",borderRadius:4,fontWeight:600}}>
                (데모: 빈상태)
              </button>
            )}
            {service==="academy" && !hasTickets && (
              <button onClick={()=>setHasTickets(true)} style={{fontSize:9,color:"var(--text-mute)",background:"transparent",padding:"3px 5px",border:"1px dashed var(--line)",borderRadius:4,fontWeight:600}}>
                (데모: 보유)
              </button>
            )}
          </div>

          {service==="screen" ? (
            <div style={{display:"flex",gap:10,overflowX:"auto",scrollbarWidth:"none",padding:"0 0 4px",margin:"0 -4px 0 -4px"}}>
              {screenShortcuts.map((s,i)=>(
                <button key={i} onClick={()=>(onBookScreen||onOpenBooking)(s.storeObj)} style={{
                  flex:"0 0 72%",padding:14,background:"#fff",
                  borderRadius:12,border:"1px solid var(--line)",
                  display:"flex",flexDirection:"column",gap:4,marginLeft:i===0?4:0,textAlign:"left"
                }}>
                  <span style={{
                    alignSelf:"flex-start",fontSize:10,padding:"2px 7px",borderRadius:4,
                    background:s.tag==="자주 예약"?"#DCFCE7":"#FEF3C7",
                    color: s.tag==="자주 예약"?"#15803D":"#A16207",
                    fontWeight:700
                  }}>{s.tag}</span>
                  <div style={{fontSize:14,fontWeight:800,letterSpacing:"-.01em",marginTop:6}}>{s.store}</div>
                  <div style={{fontSize:12,color:"var(--text-sub)",display:"flex",alignItems:"center",gap:4}}>
                    <svg viewBox="0 0 12 12" width="11" height="11"><circle cx="6" cy="6" r="4.5" fill="none" stroke="#9CA3AF" strokeWidth="1.2"/><path d="M6 4v2.5l1.5 1" stroke="#9CA3AF" strokeWidth="1.2" strokeLinecap="round" fill="none"/></svg>
                    {s.info}
                  </div>
                  <span style={{marginTop:8,fontSize:12,color:"var(--text-sub)",fontWeight:600,display:"flex",alignItems:"center",gap:2,alignSelf:"flex-end"}}>예약 <Icon name="chev-r" size={12}/></span>
                </button>
              ))}
            </div>
          ) : hasTickets ? (
            <div style={{display:"flex",gap:10,overflowX:"auto",scrollbarWidth:"none",padding:"0 0 4px",margin:"0 -4px 0 -4px"}}>
              {myTickets.map((t,i)=>(
                <button key={t.id} onClick={t.category==="lesson"?(onBookLesson||onOpenLesson):(onBookTraining||onOpenBooking)} style={{
                  flex:"0 0 76%",padding:14,background:"#fff",
                  borderRadius:12,border:"1px solid var(--line)",
                  display:"flex",flexDirection:"column",marginLeft:i===0?4:0,position:"relative",overflow:"hidden",textAlign:"left"
                }}>
                  <div style={{position:"absolute",top:0,left:0,width:3,height:"100%",background:t.color}}/>
                  <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:6}}>
                    <span style={{fontSize:10,padding:"2px 7px",borderRadius:4,background:t.color+"22",color:t.color,fontWeight:800}}>{t.kind}</span>
                    <span style={{fontSize:11,color:"var(--text-sub)"}}>{t.store}</span>
                  </div>
                  <div style={{fontSize:14,fontWeight:800,letterSpacing:"-.01em",lineHeight:1.3}}>{t.name}</div>
                  <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginTop:6}}>
                    <span style={{fontSize:12,color:"var(--primary)",fontWeight:700}}>{t.left}</span>
                    <span style={{fontSize:12,color:"var(--text-sub)",fontWeight:600,display:"flex",alignItems:"center",gap:2}}>예약 <Icon name="chev-r" size={12}/></span>
                  </div>
                </button>
              ))}
            </div>
          ) : (
            <div style={{padding:"22px 18px",borderRadius:12,border:"1px dashed var(--line-strong)",background:"#FAFBFA",textAlign:"center"}}>
              <div style={{
                width:48,height:48,borderRadius:12,background:"#fff",border:"1px solid var(--line)",
                display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 10px"
              }}>
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#9CA3AF" strokeWidth="1.6">
                  <path d="M4 9v3a1 1 0 0 1 0 2v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3a1 1 0 0 1 0-2V9a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1z"/>
                  <path d="M12 8v8" strokeDasharray="2 2"/>
                </svg>
              </div>
              <div style={{fontSize:14,fontWeight:700,marginBottom:3}}>보유 중인 이용권이 없어요</div>
              <div style={{fontSize:12,color:"var(--text-sub)",marginBottom:12}}>이용권을 구매하고 예약을 시작해보세요.</div>
              <button onClick={onOpenTicket} style={{
                width:"100%",height:42,borderRadius:8,fontSize:13,fontWeight:800,
                background:"var(--primary)",color:"#fff",border:"none"
              }}>이용권 구매하기</button>
            </div>
          )}
        </div>

        {/* Quick menu grid 4×2 */}
        <div style={{padding:"22px 8px 6px"}}>
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)"}}>
            {quick.slice(0,4).map(c=>(
              <button key={c.id} onClick={c.onClick} style={{padding:"12px 4px",background:"transparent",display:"flex",flexDirection:"column",alignItems:"center",gap:6}}>
                <FlatIcon name={c.svg}/>
                <div style={{fontSize:12,fontWeight:600,color:"var(--text)"}}>{c.label}</div>
              </button>
            ))}
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)"}}>
            {quick.slice(4,8).map(c=>(
              <button key={c.id} onClick={c.onClick} style={{padding:"12px 4px",background:"transparent",display:"flex",flexDirection:"column",alignItems:"center",gap:6}}>
                <FlatIcon name={c.svg}/>
                <div style={{fontSize:12,fontWeight:600,color:"var(--text)"}}>{c.label}</div>
              </button>
            ))}
          </div>
        </div>

        {/* 필드 예약 추천 */}
        <div style={{padding:"22px 16px 0"}}>
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
            <div style={{fontSize:16,fontWeight:800,letterSpacing:"-.02em"}}>필드 예약 추천</div>
            <button onClick={goExternalField} style={{fontSize:12,color:"var(--text-sub)",fontWeight:500,background:"transparent",display:"flex",alignItems:"center",gap:2}}>모두보기 <Icon name="chev-r" size={12}/></button>
          </div>
          <div style={{display:"flex",gap:8,overflowX:"auto",scrollbarWidth:"none",marginBottom:14}}>
            {fieldTabs.map((t,i)=>(
              <button key={t} onClick={()=>setFieldTab(i)} style={{
                flex:"0 0 auto",padding:"8px 16px",borderRadius:999,fontSize:13,fontWeight:700,
                background:fieldTab===i?"#1A1C1F":"#fff",color:fieldTab===i?"#fff":"var(--text-sub)",
                border:"1px solid "+(fieldTab===i?"#1A1C1F":"var(--line)")
              }}>{t}</button>
            ))}
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
            {fieldCourses.map((c,i)=>(
              <div key={i} onClick={goExternalField} style={{padding:14,background:"#fff",borderRadius:12,border:"1px solid var(--line)",display:"flex",flexDirection:"column",gap:4,cursor:"pointer"}}>
                <div style={{fontSize:11,fontWeight:700,color:c.soldout?"var(--text-mute)":"var(--primary)"}}>{c.left}</div>
                <div style={{fontSize:14,fontWeight:800,letterSpacing:"-.01em",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{c.name}</div>
                <div style={{display:"flex",alignItems:"center",gap:4,fontSize:11.5,color:"var(--text-sub)"}}>
                  <span>{c.region}</span><span className="sdot"/>
                  <Icon name="star" size={11} style={{color:"#22C55E"}}/><span style={{fontWeight:700,color:"var(--text)"}}>{c.rating}</span>
                </div>
                {c.badges.length>0 && (
                  <div style={{display:"flex",gap:4,flexWrap:"wrap",marginTop:2}}>
                    {c.badges.map(b=><span key={b} style={{fontSize:10,fontWeight:600,color:"var(--text-sub)",background:"var(--bg-soft)",padding:"2px 6px",borderRadius:4}}>{b}</span>)}
                  </div>
                )}
                {c.price && <div style={{fontSize:14,fontWeight:800,marginTop:6}}>{c.price}</div>}
              </div>
            ))}
          </div>
        </div>

        {/* 제품 쇼케이스 — 오직 퀀텀 레인지에서만 */}
        <div style={{padding:"24px 16px 0"}}>
          <div style={{fontSize:18,fontWeight:800,letterSpacing:"-.02em",marginBottom:12}}>오직, 퀀텀 레인지에서만!</div>
          <div style={{borderRadius:14,overflow:"hidden",background:"linear-gradient(180deg,#2A2D33,#16181C)",padding:"28px 20px 24px",color:"#fff"}}>
            <div style={{display:"flex",justifyContent:"center",marginBottom:18}}>
              <div style={{width:120,height:120,borderRadius:20,background:"radial-gradient(circle at 40% 30%,#3a3f47,#1c1e22)",display:"flex",alignItems:"center",justifyContent:"center"}}>
                <svg viewBox="0 0 48 48" width="56" height="56" fill="none" stroke="rgba(255,255,255,.85)" strokeWidth="2"><rect x="9" y="8" width="30" height="20" rx="3"/><path d="M9 23h30M18 32v6M30 32v6M14 40h20" strokeLinecap="round"/></svg>
              </div>
            </div>
            <div style={{fontSize:20,fontWeight:800,letterSpacing:"-.02em",textAlign:"center"}}>골프의 즐거움이 출렁이게</div>
            <div style={{fontSize:13,color:"rgba(255,255,255,.7)",textAlign:"center",marginTop:6}}>퀀텀 레인지 신제품 Quantum 오픈</div>
          </div>
        </div>

        {/* 내 주변 스크린매장 (스크린 한정) */}
        {service==="screen" && (
          <div style={{padding:"16px 16px 0"}}>
            <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12}}>
              <div>
                <div style={{fontSize:15,fontWeight:800,letterSpacing:"-.02em"}}>내 주변 스크린매장</div>
                <div style={{fontSize:11,color:"var(--text-sub)",marginTop:2,display:"flex",alignItems:"center",gap:4}}>
                  <span style={{width:6,height:6,borderRadius:"50%",background:"#EF4444"}}/>
                  실시간 잔여 타석
                </div>
              </div>
              <button onClick={onOpenStores} style={{fontSize:12,color:"var(--text-sub)",fontWeight:500,background:"transparent",display:"flex",alignItems:"center",gap:2}}>
                지도 <Icon name="chev-r" size={12}/>
              </button>
            </div>
            <div style={{display:"flex",flexDirection:"column",gap:8}}>
              {nearby.map((s,i)=>{
                const ratio = s.left / s.total;
                const color = s.left===0 ? "#9CA3AF" : ratio>=.4 ? "var(--primary)" : "#F59E0B";
                return (
                  <button key={i} onClick={onOpenBooking} style={{
                    display:"flex",alignItems:"center",gap:12,padding:"12px 14px",background:"#fff",
                    borderRadius:10,border:"1px solid var(--line)",textAlign:"left"
                  }}>
                    <div style={{
                      width:54,height:54,borderRadius:10,
                      background: s.left===0 ? "#F3F4F6" : "linear-gradient(135deg,#DCFCE7,#BBF7D0)",
                      display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",flexShrink:0
                    }}>
                      <div style={{fontSize:16,fontWeight:800,color, lineHeight:1}}>{s.left===0?"—":s.left}</div>
                      <div style={{fontSize:9,color:"var(--text-sub)",marginTop:2,fontWeight:600}}>{s.left===0?"잔여없음":"잔여 타석"}</div>
                    </div>
                    <div style={{flex:1,minWidth:0}}>
                      <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:3}}>
                        <div style={{fontSize:14,fontWeight:800,letterSpacing:"-.01em",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{s.name}</div>
                        <span className={"store-badge sb-"+s.type.toLowerCase()} style={{flexShrink:0}}>{s.type}</span>
                      </div>
                      <div style={{fontSize:11.5,color:"var(--text-sub)",display:"flex",alignItems:"center",gap:6}}>
                        <span>{s.dist}</span>
                        <span className="sdot"/>
                        <span style={{color, fontWeight:700}}>{s.busy}</span>
                      </div>
                      <div style={{height:4,background:"#F3F4F6",borderRadius:2,marginTop:8,overflow:"hidden"}}>
                        <div style={{width:`${(1-ratio)*100}%`,height:"100%",background:color}}/>
                      </div>
                    </div>
                    <div style={{
                      padding:"7px 12px",borderRadius:6,fontSize:12,fontWeight:700,flexShrink:0,
                      background: s.left===0 ? "#F3F4F6" : "var(--primary)",
                      color: s.left===0 ? "var(--text-mute)" : "#fff"
                    }}>{s.left===0?"대기":"예약"}</div>
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {/* 공지사항 */}
        <div style={{padding:"22px 16px 0"}}>
          <button onClick={onOpenNotice} style={{width:"100%",textAlign:"left",padding:"14px 16px",background:"var(--bg-soft)",borderRadius:10,display:"flex",alignItems:"center",gap:10,border:"none"}}>
            <div style={{width:32,height:32,borderRadius:"50%",background:"#fff",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#22C55E" strokeWidth="2"><path d="M3 11l9 9 9-9-9-9zM12 7v5l3 2"/></svg>
            </div>
            <div style={{flex:1,minWidth:0}}>
              <div style={{fontSize:11,color:"var(--text-sub)",fontWeight:600,marginBottom:2}}>공지사항</div>
              <div style={{fontSize:13,fontWeight:700,letterSpacing:"-.01em",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>
                {service==="screen"?"5월 정기점검 안내 — 5/14 03:00~05:00":"신규 프로 입사 — 김지수 프로 광교점 합류"}
              </div>
            </div>
            <Icon name="chev-r" size={14} style={{color:"var(--text-mute)"}}/>
          </button>
        </div>

        {/* AD strip */}
        <div style={{padding:"14px 16px 0"}}>
          <div style={{height:64,background:"linear-gradient(90deg,#1F2937,#111827)",borderRadius:10,display:"flex",alignItems:"center",padding:"0 18px",position:"relative",overflow:"hidden",color:"#fff"}}>
            <div style={{flex:1}}>
              <div style={{fontSize:11,opacity:.7,letterSpacing:".06em",fontWeight:700}}>FRIENDS ONLY</div>
              <div style={{fontSize:13,fontWeight:800,letterSpacing:"-.01em",marginTop:2}}>
                {service==="screen"?"신제품 Quantum 라운드 30% 할인":"5회권 첫 구매 1회 무료"}
              </div>
            </div>
            <Icon name="chev-r" size={14} style={{color:"rgba(255,255,255,.6)"}}/>
            <span style={{position:"absolute",top:6,right:8,fontSize:9,color:"rgba(255,255,255,.4)",fontWeight:600}}>AD</span>
          </div>
        </div>
      </div>

      {toast && <div className="toast"><span>{toast}</span></div>}
      <TabBar current="home" onNav={onNav}/>
    </div>
  );
}

window.HomeScreen = HomeScreen;