// profile.jsx — Profile / Settings / Notifications + quick-action flows + edge states
const { useState: useStatePr } = React;

// ── Generic Ava "offer" screen used by quick actions ───────
function OfferScreen({ icon, badge, tone, ava, quest, primary, secondary, tertiary, back, hint }) {
  const tn = tone || T.coral;
  return (
    <Screen bg={T.surface}>
      <TopBar title="" onBack={back}/>
      <AvaSays size={50} style={{ marginBottom: 22 }}>{ava}</AvaSays>
      <Card pad={22} style={{ marginBottom: 8, boxShadow: `0 12px 30px ${tn}1f, inset 0 0 0 2px ${tn}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
          <div style={{ width: 36, height: 36, borderRadius: 11, background: tn === T.calm ? T.calmSoft : T.coralTint, display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name={icon} size={20} color={tn}/></div>
          <span style={{ fontSize: 12, fontWeight: 800, color: tn, letterSpacing: 1 }}>{badge}</span>
        </div>
        <div style={{ fontSize: 25, fontWeight: 800, color: T.ink, letterSpacing: -0.5, marginBottom: 14 }}>{quest.title}</div>
        <MetaTags tags={quest.meta}/>
      </Card>
      <FloatCTA hint={hint}>
        <Btn variant={tn === T.calm ? 'calm' : 'primary'} onClick={primary.onClick} icon={<Icon name="play" size={19} color="#fff"/>}>{primary.label}</Btn>
        {secondary && <Btn variant="soft" size="md" style={{ marginTop: 8 }} onClick={secondary.onClick}>{secondary.label}</Btn>}
        {tertiary && <Btn variant="ghost" size="sm" style={{ marginTop: 2 }} onClick={tertiary.onClick}>{tertiary.label}</Btn>}
      </FloatCTA>
    </Screen>
  );
}

function Flow({ flow, go, back }) {
  if (flow === 'notime') return (
    <OfferScreen icon="clock" badge="STREAK SAVE QUEST" ava={<>좋아요. 오늘은 <b style={{ color: T.coralDark }}>10초</b>만으로 기록을 지킬게요. 부담 없이 가요.</>}
      quest={{ title: '서서 숨 고르기 10초', meta: [{ icon: 'clock', label: '10초' }, { icon: 'seat', label: '공간 필요 없음' }, { icon: 'camera_off', label: '카메라 없음' }] }}
      primary={{ label: '10초 시작', onClick: () => go('player', { quest: { title: '숨 고르기', seconds: 10, steps: ['바르게 서요', '어깨를 내려요', '깊게 호흡해요'], avaLine: '10초도 건강 행동이에요', xp: 5 } }) }}
      secondary={{ label: '나중에 알려줘', onClick: () => go('flow', { flow: 'later' }) }}
      tertiary={{ label: '오늘은 건너뛸래요', onClick: () => go('flow', { flow: 'skip' }) }} back={back}/>
  );
  if (flow === 'tired') return (
    <OfferScreen icon="moon" tone={T.calm} badge="RECOVERY QUEST" ava={<>밀어붙이지 않는 것도 훈련이에요. 오늘은 <b style={{ color: T.calmDark }}>회복</b>으로 갈게요.</>}
      quest={{ title: '누워서 호흡 30초', meta: [{ icon: 'clock', label: '30초' }, { icon: 'moon', label: '침대에서' }, { icon: 'wind', label: '회복 모드' }] }}
      primary={{ label: '회복 Quest 시작', onClick: () => go('player', { quest: { title: '회복 호흡', seconds: 30, tone: T.calm, steps: ['편하게 누워요', '4초 들이마셔요', '6초 길게 내쉬어요'], avaLine: '오늘의 목표는 회복이에요', xp: 12 } }) }}
      secondary={{ label: '10초만 할래요', onClick: () => go('player', { quest: { title: '회복 호흡', seconds: 10, tone: T.calm, steps: ['편하게 누워요', '천천히 호흡해요'], avaLine: '짧아도 충분해요', xp: 5 } }) }} back={back}/>
  );
  if (flow === 'nospace') return (
    <OfferScreen icon="seat" badge="NO-SPACE QUEST" ava={<>공간이 없어도 괜찮아요. 앉아서 할 수 있는 Quest로 바꿀게요.</>}
      quest={{ title: '의자에서 등 세우기 20초', meta: [{ icon: 'clock', label: '20초' }, { icon: 'seat', label: '앉아서' }, { icon: 'camera_off', label: '카메라 없음' }] }}
      primary={{ label: '앉아서 시작', onClick: () => go('player', { quest: { title: '등 세우기', seconds: 20, steps: ['의자에 깊게 앉아요', '등을 곧게 세워요', '어깨를 내려요'], avaLine: '허리가 아니라 배에 힘을', xp: 10 } }) }}
      secondary={{ label: '호흡 Quest로 변경', onClick: () => go('flow', { flow: 'tired' }) }} back={back}/>
  );
  if (flow === 'swap') return <SwapScreen go={go} back={back}/>;
  if (flow === 'later') return <LaterReminder go={go} back={back}/>;
  if (flow === 'skip') return <QuestSkipped go={go} back={back}/>;
  if (flow === 'streakBroken') return <StreakBroken go={go} back={back}/>;
  if (flow === 'healthDenied') return <HealthDenied go={go} back={back}/>;
  return null;
}

function SwapScreen({ go, back }) {
  const alts = [
    { tone: T.coral, badge: '더 쉽게', icon: 'bolt', title: '어깨 리셋 10초', meta: '10초 · 앉아서', q: { title: '어깨 리셋', seconds: 10, steps: ['어깨를 올려요', '뒤로 돌려요'], avaLine: '짧아도 충분해요', xp: 5 } },
    { tone: T.calm, badge: '회복', icon: 'wind', title: '누워서 호흡 30초', meta: '30초 · 침대에서', q: { title: '회복 호흡', seconds: 30, tone: T.calm, steps: ['편하게 누워요', '천천히 호흡해요'], avaLine: '회복도 훈련이에요', xp: 12 } },
    { tone: T.amberDark, badge: '수분', icon: 'drop', title: '물 한 잔 마시기', meta: '셀프 체크', q: { selfReport: true, title: '물 한 잔', xp: 8 } },
  ];
  return (
    <Screen bg={T.surface}>
      <TopBar title="Quest 바꾸기" onBack={back}/>
      <AvaSays size={42} style={{ marginBottom: 18 }}>오늘 더 잘 맞는 행동으로 바꿔드릴게요. 하나만 고르면 돼요.</AvaSays>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {alts.map((a, i) => (
          <button key={i} onClick={() => a.q.selfReport ? go('player', { quest: a.q, selfReport: true }) : go('player', { quest: a.q })} style={{ display: 'flex', alignItems: 'center', gap: 14, width: '100%', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', background: T.bg, border: 'none', borderRadius: 20, padding: 16, boxShadow: '0 6px 18px rgba(28,27,25,0.05)' }}>
            <div style={{ width: 48, height: 48, borderRadius: 14, background: a.tone === T.calm ? T.calmSoft : a.tone === T.amberDark ? T.amberSoft : T.coralTint, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={a.icon} size={22} color={a.tone}/></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: a.tone, letterSpacing: 0.6 }}>{a.badge}</div>
              <div style={{ fontSize: 16.5, fontWeight: 700, color: T.ink, letterSpacing: -0.3 }}>{a.title}</div>
              <div style={{ fontSize: 13, color: T.ink3, marginTop: 1 }}>{a.meta}</div>
            </div>
            <Icon name="chevron" size={20} color={T.ink3} sw={2.2}/>
          </button>
        ))}
      </div>
    </Screen>
  );
}

function LaterReminder({ go, back }) {
  const [pick, setPick] = useStatePr(null);
  const opts = [['30분 뒤', '30m'], ['저녁에', 'pm'], ['잠들기 전', 'night'], ['내일 다시', 'tmr']];
  return (
    <Screen bg={T.bg}>
      <div style={{ paddingTop: 8 }}><TopBar title="" onBack={back}/></div>
      <div style={{ textAlign: 'center', paddingTop: 16, marginBottom: 24 }}>
        <div style={{ width: 64, height: 64, borderRadius: 20, background: T.coralTint, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}><Icon name="clock" size={30} color={T.coral} sw={2}/></div>
        <h1 style={{ fontSize: 24, fontWeight: 800, color: T.ink, letterSpacing: -0.5, margin: 0 }}>언제 다시 알려드릴까요?</h1>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {opts.map(o => <BigChoice key={o[1]} icon="bell" label={o[0]} active={pick === o[1]} onClick={() => setPick(o[1])}/>)}
      </div>
      <FloatCTA><Btn onClick={() => go('home')} disabled={!pick}>알림 설정</Btn></FloatCTA>
    </Screen>
  );
}

function QuestSkipped({ go, back }) {
  return (
    <Screen bg={T.surface}>
      <TopBar title="" onBack={back}/>
      <div style={{ textAlign: 'center', padding: '8px 0 6px' }}>
        <div style={{ width: 64, height: 64, borderRadius: 20, background: T.surface2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}><Icon name="moon" size={30} color={T.ink3} sw={2}/></div>
        <h1 style={{ fontSize: 23, fontWeight: 800, color: T.ink, letterSpacing: -0.4, margin: 0 }}>오늘 Quest를 건너뛰었어요</h1>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 11, background: T.bg, padding: 16, borderRadius: 20, margin: '18px 0 24px', boxShadow: '0 6px 18px rgba(28,27,25,0.04)' }}>
        <AvaOrb size={36} speaking/>
        <div style={{ fontSize: 14.5, lineHeight: 1.5, color: T.ink, fontWeight: 500 }}>“괜찮아요. 오늘 컨디션도 기록이에요. 원하면 밤에 10초 Recovery로 Streak를 지킬 수 있어요.”</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn variant="calm" onClick={() => go('player', { quest: { title: '회복 호흡', seconds: 10, tone: T.calm, steps: ['편하게 누워요', '천천히 호흡해요'], avaLine: '연결을 지켰어요', xp: 5 } })}>Recovery Quest 지금 하기</Btn>
        <Btn variant="soft" size="md" onClick={() => go('flow', { flow: 'later' })}>밤에 알려줘</Btn>
        <Btn variant="ghost" size="sm" onClick={() => go('home')}>오늘은 쉬기</Btn>
      </div>
    </Screen>
  );
}

function StreakBroken({ go, back }) {
  return (
    <Screen bg={T.surface}>
      <TopBar title="" onBack={back}/>
      <div style={{ textAlign: 'center', padding: '8px 0 0' }}>
        <div style={{ position: 'relative', display: 'inline-flex', marginBottom: 16 }}>
          <Icon name="flame" size={56} color={T.ink3}/>
        </div>
        <h1 style={{ fontSize: 24, fontWeight: 800, color: T.ink, letterSpacing: -0.5, margin: '0 0 6px' }}>Streak가 끊겼어요</h1>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 11, background: T.bg, padding: 16, borderRadius: 20, margin: '16px 0 14px', boxShadow: '0 6px 18px rgba(28,27,25,0.04)' }}>
        <AvaOrb size={36} speaking/>
        <div style={{ fontSize: 14.5, lineHeight: 1.5, color: T.ink, fontWeight: 500 }}>“괜찮아요. 기록은 사라진 게 아니라 누적돼 있어요. 오늘부터 새 Streak를 시작할 수 있어요.”</div>
      </div>
      <Card pad={18} style={{ marginBottom: 14, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: T.ink3 }}>BEST STREAK</div>
          <div style={{ fontSize: 24, fontWeight: 800, color: T.ink }}>6일</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700, color: T.ink3 }}>누적 XP</div>
          <div style={{ fontSize: 24, fontWeight: 800, color: T.coral }}>320</div>
        </div>
      </Card>
      <Card pad={16} style={{ marginBottom: 24, background: T.calmSoft }}>
        <div style={{ fontSize: 13, fontWeight: 800, color: T.calmDark, marginBottom: 4 }}>Streak Repair · 이번 주 1회 가능</div>
        <div style={{ fontSize: 13.5, color: T.ink2, fontWeight: 500 }}>어제 놓친 기록을 10초 Recovery로 복구할 수 있어요.</div>
      </Card>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Btn variant="calm" onClick={() => go('player', { quest: { title: '회복 호흡', seconds: 10, tone: T.calm, steps: ['편하게 누워요', '천천히 호흡해요'], avaLine: '복구 완료, 다시 이어가요', xp: 5 } })}>10초 Recovery로 복구</Btn>
        <Btn variant="soft" size="md" onClick={() => go('player', { quest: { title: '새 시작 호흡', seconds: 10, steps: ['바르게 서요', '깊게 호흡해요'], avaLine: '새 Streak Day 1', xp: 10 } })}>새 Streak 시작</Btn>
      </div>
    </Screen>
  );
}

function HealthDenied({ go, back }) {
  return (
    <Screen bg={T.bg}>
      <div style={{ paddingTop: 8 }}><TopBar title="" onBack={back}/></div>
      <div style={{ textAlign: 'center', paddingTop: 20 }}>
        <div style={{ width: 84, height: 84, borderRadius: 24, background: T.surface2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22 }}><Icon name="leaf" size={40} color={T.ink3} sw={1.8}/></div>
        <h1 style={{ fontSize: 23, fontWeight: 800, color: T.ink, letterSpacing: -0.5, lineHeight: 1.3, margin: '0 0 10px' }}>Health 연동 없이도<br/>괜찮아요</h1>
        <p style={{ fontSize: 15.5, color: T.ink2, lineHeight: 1.5, maxWidth: 290, margin: '0 auto' }}>Quest와 XP는 그대로 기록돼요. 나중에 가치를 느끼면 다시 연결할 수 있어요.</p>
      </div>
      <FloatCTA>
        <Btn onClick={() => go('home')}>수동으로 계속하기</Btn>
        <Btn variant="ghost" size="md" style={{ marginTop: 6 }} onClick={() => go('home')}>나중에 연결하기</Btn>
      </FloatCTA>
    </Screen>
  );
}

// ── Profile ────────────────────────────────────────────────
function ProfileScreen({ data, go }) {
  return (
    <Screen bg={T.surface} nav="home">
      <TopBar title="Profile" onBack={() => go('home')} right={
        <button onClick={() => go('settings')} style={{ width: 42, height: 42, borderRadius: 999, background: T.bg, border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `inset 0 0 0 1px ${T.line}` }}><Icon name="gear" size={21} color={T.ink2}/></button>
      }/>
      <div style={{ textAlign: 'center', padding: '4px 0 20px' }}>
        <div style={{ width: 84, height: 84, borderRadius: 26, background: `linear-gradient(135deg, ${T.coral}, ${T.violet})`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontWeight: 800, fontSize: 34, marginBottom: 12 }}>지</div>
        <div style={{ fontSize: 22, fontWeight: 800, color: T.ink }}>지민</div>
        <div style={{ fontSize: 14, color: T.ink3, fontWeight: 600 }}>Lv.{data.level} · Daily Mover</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 20 }}>
        {[['🔥', data.streak, '현재 Streak'], ['🏆', 6, 'Best Streak'], ['⚡', data.xp, 'XP']].map((s, i) => (
          <Card key={i} pad={14} style={{ textAlign: 'center' }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: T.ink }}>{s[1]}</div>
            <div style={{ fontSize: 11.5, color: T.ink3, fontWeight: 700, marginTop: 2 }}>{s[2]}</div>
          </Card>
        ))}
      </div>
      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '0 2px 12px' }}>SQUAD</div>
      <Card pad={18} style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 14 }}>
          {['민','준','서','+2'].map((m, i) => (
            <div key={i} style={{ width: 38, height: 38, borderRadius: 999, background: i === 3 ? T.surface2 : [T.calm, T.amber, T.good][i], color: i === 3 ? T.ink2 : '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 800, fontSize: 14, marginLeft: i ? -10 : 0, border: '2.5px solid #fff' }}>{m}</div>
          ))}
          <div style={{ marginLeft: 12, fontSize: 14, color: T.ink2, fontWeight: 600 }}>오늘 3명이 Streak 유지 중</div>
        </div>
        <Btn variant="pink" size="md" icon={<Icon name="share" size={18} color="#fff"/>} onClick={() => go('invite')}>친구 초대</Btn>
      </Card>
    </Screen>
  );
}

// ── Settings ───────────────────────────────────────────────
function SettingsRow({ icon, label, detail, onClick, tone = T.ink2, last }) {
  return (
    <button onClick={onClick} style={{ display: 'flex', alignItems: 'center', gap: 14, width: '100%', textAlign: 'left', cursor: 'pointer', fontFamily: 'inherit', background: 'none', border: 'none', padding: '14px 16px', borderBottom: last ? 'none' : `0.5px solid ${T.line}` }}>
      <div style={{ width: 32, height: 32, borderRadius: 9, background: T.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name={icon} size={18} color={tone} sw={2}/></div>
      <span style={{ flex: 1, fontSize: 16, fontWeight: 600, color: T.ink }}>{label}</span>
      {detail && <span style={{ fontSize: 14, color: T.ink3, fontWeight: 600 }}>{detail}</span>}
      <Icon name="chevron" size={17} color={T.ink3} sw={2.2}/>
    </button>
  );
}

function Settings({ go, setData, theme, toggleTheme }) {
  return (
    <Screen bg={T.surface}>
      <TopBar title="Settings" onBack={() => go('home')}/>

      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '4px 2px 10px' }}>멤버십</div>
      <button onClick={() => go('subscribe')} style={{ width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer', fontFamily: 'inherit', borderRadius: 22, padding: 16, marginBottom: 18, background: `linear-gradient(135deg, ${T.coral}, ${T.violet})`, boxShadow: `0 8px 22px ${T.violet}30`, display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 42, height: 42, borderRadius: 12, background: 'rgba(255,255,255,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="crown" size={23} color="#fff"/></div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 800, color: '#fff' }}>Fitbody PRO</div>
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.9)', fontWeight: 600 }}>월 $4.99 · 무제한 에너지</div>
        </div>
        <Icon name="chevron" size={20} color="#fff" sw={2.4}/>
      </button>

      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '4px 2px 10px' }}>일반</div>
      <Card pad={0} style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '14px 16px', borderBottom: `0.5px solid ${T.line}` }}>
          <div style={{ width: 32, height: 32, borderRadius: 9, background: T.surface, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="moon" size={18} color={T.ink2} sw={2}/></div>
          <span style={{ flex: 1, fontSize: 16, fontWeight: 600, color: T.ink }}>다크 모드</span>
          <button onClick={toggleTheme} style={{ width: 50, height: 30, borderRadius: 999, border: 'none', cursor: 'pointer', background: theme === 'dark' ? T.coral : T.surface2, position: 'relative', transition: 'background .2s', flexShrink: 0 }}>
            <div style={{ position: 'absolute', top: 3, left: theme === 'dark' ? 23 : 3, width: 24, height: 24, borderRadius: 999, background: '#fff', boxShadow: '0 2px 5px rgba(0,0,0,0.2)', transition: 'left .2s' }}/>
          </button>
        </div>
        <SettingsRow icon="bell" label="알림 설정" detail="아침 8:00" onClick={() => go('notifications')}/>
        <SettingsRow icon="target" label="내 목표" detail="운동 습관"/>
        <SettingsRow icon="cameraline" label="카메라 권한" detail="허용됨"/>
        <SettingsRow icon="leaf" label="건강 데이터 연동" detail="연결 안 됨" onClick={() => go('flow', { flow: 'healthDenied' })} last/>
      </Card>

      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '4px 2px 10px' }}>프로토타입 상태 미리보기</div>
      <Card pad={0} style={{ marginBottom: 8 }}>
        <SettingsRow icon="home" label="Home · 기본" tone={T.coral} onClick={() => { setData(d => ({ ...d, homeVariant: 'default', completedToday: false })); go('home'); }}/>
        <SettingsRow icon="flame" label="Home · Streak Risk" tone={T.amberDark} onClick={() => { setData(d => ({ ...d, homeVariant: 'streakRisk', completedToday: false })); go('home'); }}/>
        <SettingsRow icon="check" label="Home · 완료 상태" tone={T.good} onClick={() => { setData(d => ({ ...d, homeVariant: 'completed', completedToday: true })); go('home'); }}/>
        <SettingsRow icon="arrow" label="Home · 7일 만에 복귀" tone={T.calm} onClick={() => { setData(d => ({ ...d, homeVariant: 'return7', completedToday: false })); go('home'); }}/>
        <SettingsRow icon="moon" label="Quest 스킵 상태" onClick={() => go('flow', { flow: 'skip' })}/>
        <SettingsRow icon="flame" label="Streak 끊김 / 복구" onClick={() => go('flow', { flow: 'streakBroken' })}/>
        <SettingsRow icon="scan" label="바디 체크" tone={T.teal} onClick={() => go('bodycheck')}/>
        <SettingsRow icon="bolt" label="에너지 충전 화면" tone={T.tealDark} onClick={() => go('energy')}/>
        <SettingsRow icon="cameraline" label="Motion Lens 인식 실패" onClick={() => go('academyAt', { at: 'failed' })} last/>
      </Card>
      <div style={{ height: 12 }}/>
    </Screen>
  );
}

// ── Notifications ──────────────────────────────────────────
function NotifToggle({ label, sub, on, onToggle }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', borderBottom: `0.5px solid ${T.line}` }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 16, fontWeight: 600, color: T.ink }}>{label}</div>
        {sub && <div style={{ fontSize: 13, color: T.ink3, marginTop: 1 }}>{sub}</div>}
      </div>
      <button onClick={onToggle} style={{ width: 50, height: 30, borderRadius: 999, border: 'none', cursor: 'pointer', background: on ? T.coral : T.surface2, position: 'relative', transition: 'background .2s', flexShrink: 0 }}>
        <div style={{ position: 'absolute', top: 3, left: on ? 23 : 3, width: 24, height: 24, borderRadius: 999, background: '#fff', boxShadow: '0 2px 5px rgba(0,0,0,0.15)', transition: 'left .2s' }}/>
      </button>
    </div>
  );
}

function Notifications({ go }) {
  const [s, setS] = useStatePr({ morning: true, streak: true, squad: false, recap: true, lesson: false });
  const t = (k) => setS(p => ({ ...p, [k]: !p[k] }));
  return (
    <Screen bg={T.surface}>
      <TopBar title="알림 설정" onBack={() => go('settings')}/>
      <AvaSays size={40} style={{ marginBottom: 18 }}>압박하지 않을게요. 하루 최대 2개, 죄책감 없는 알림만 보내요.</AvaSays>
      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '4px 2px 10px' }}>알림 종류</div>
      <Card pad={0} style={{ marginBottom: 18 }}>
        <NotifToggle label="Morning nudge" sub="하루 첫 Quest 알림" on={s.morning} onToggle={() => t('morning')}/>
        <NotifToggle label="Streak risk" sub="당일 미완료 시 저녁 알림" on={s.streak} onToggle={() => t('streak')}/>
        <NotifToggle label="Squad nudge" sub="친구가 완료했을 때" on={s.squad} onToggle={() => t('squad')}/>
        <NotifToggle label="Weekly recap" sub="일요일 밤 주간 회고" on={s.recap} onToggle={() => t('recap')}/>
        <div style={{ borderBottom: 'none' }}><NotifToggle label="Motion lesson" sub="관심 보인 다음 날" on={s.lesson} onToggle={() => t('lesson')}/></div>
      </Card>
      <div style={{ fontSize: 13, fontWeight: 800, color: T.ink3, letterSpacing: 0.6, margin: '4px 2px 10px' }}>시간</div>
      <Card pad={0} style={{ marginBottom: 14 }}>
        <SettingsRow icon="flame" label="Morning nudge" detail="오전 8:00"/>
        <div style={{ borderBottom: 'none' }}><SettingsRow icon="moon" label="Quiet hours" detail="22:00 – 07:00" last/></div>
      </Card>
      <div style={{ height: 12 }}/>
    </Screen>
  );
}

Object.assign(window, { Flow, ProfileScreen, Settings, Notifications });