// 22hrs — additional screens
// Sign up · Treatment setup · Insights · Settings · Notifications · Quick actions
const { useState: useStateX, useEffect: useEffectX, useRef: useRefX } = React;

// ──────────────────────────────────────────────
// Shared: top-back header
// ──────────────────────────────────────────────
function BackHeader({ go, to = 'home', label = 'Back', right = null, padTop = 56 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `${padTop}px 22px 4px` }}>
      <button onClick={() => go(to)} aria-label={label}
      style={{ background: 'none', border: 0, color: 'var(--t-fg-3)', padding: 0, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontFamily: 'inherit', fontSize: 14 }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
        {label}
      </button>
      {right}
    </div>);

}

// ──────────────────────────────────────────────
// Shared: tab bar (matches Home dashboard)
// ──────────────────────────────────────────────
function TabBar({ active, go }) {
  const tabs = [
  { id: 'home', label: 'Today', icon: <path d="M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z" /> },
  { id: 'insights', label: 'Insights', icon: <><line x1="4" y1="20" x2="4" y2="12" /><line x1="10" y1="20" x2="10" y2="6" /><line x1="16" y1="20" x2="16" y2="14" /><line x1="22" y1="20" x2="2" y2="20" /></> },
  { id: 'progress', label: 'Progress', icon: <><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="12" cy="13" r="3.5" /><path d="M8 7l1.5-2h5L16 7" /></> },
  { id: 'settings', label: 'You', icon: <><circle cx="12" cy="8" r="4" /><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" /></> }];

  return (
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, background: 'var(--t-tabbar-bg)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', borderTop: '1px solid var(--t-divider)', padding: '10px 14px 24px', display: 'flex', justifyContent: 'space-around' }}>
      {tabs.map((t) => {
        const isActive = t.id === active;
        return (
          <div key={t.id} onClick={() => go(t.id)} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, cursor: 'pointer', padding: '4px 0' }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill={isActive && t.id === 'home' ? '#1FB8E0' : 'none'} stroke={isActive ? '#1FB8E0' : 'var(--t-fg-muted)'} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">{t.icon}</svg>
            <div style={{ fontSize: 10, color: isActive ? '#1FB8E0' : 'var(--t-fg-muted)', fontWeight: isActive ? 500 : 400, letterSpacing: '0.02em' }}>{t.label}</div>
          </div>);

      })}
    </div>);

}

// ──────────────────────────────────────────────
// 1. Sign up
// ──────────────────────────────────────────────
function ScreenSignUp({ go }) {
  const [name, setName] = useStateX('Jordan Smith');
  const [email, setEmail] = useStateX('jordan@example.com');
  const [pw, setPw] = useStateX('');
  const [agree, setAgree] = useStateX(false);

  const strength = Math.min(pw.length / 12, 1);
  const strengthLabel = pw.length === 0 ? '' : pw.length < 6 ? 'Too short' : pw.length < 9 ? 'Okay' : 'Strong';
  const strengthColor = pw.length < 6 ? 'var(--t-fg-3)' : pw.length < 9 ? '#1FB8E0' : '#3CBF9E';
  const valid = name.trim().length > 1 && email.includes('@') && pw.length >= 6 && agree;

  return (
    <div className="pp-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', padding: '68px 28px 36px', overflowY: 'auto' }}>
      <button onClick={() => go('welcome')} aria-label="Back" style={{ background: 'none', border: 0, color: 'var(--t-fg-3)', padding: 0, marginBottom: 24, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontFamily: 'inherit', fontSize: 14 }}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
        Back
      </button>

      <Eyebrow style={{ marginBottom: 10 }}>Create account</Eyebrow>
      <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, marginBottom: 8, lineHeight: 1.1 }}>Start your 22hrs.</h2>
      <p style={{ fontSize: 14, color: 'var(--t-fg-3)', lineHeight: 1.5, margin: 0, marginBottom: 24 }}>
        Two minutes to set up. We'll only ask what we need.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 14 }}>
        <Field label="Full name" value={name} onChange={setName} />
        <Field label="Email" value={email} onChange={setEmail} type="email" />
        <Field label="Password" value={pw} onChange={setPw} type="password"
        trailing={pw.length > 0 ? <span style={{ fontSize: 11, color: strengthColor, fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{strengthLabel}</span> : null} />
        {pw.length > 0 &&
        <div style={{ display: 'flex', gap: 4, marginTop: -6 }}>
            {[0, 1, 2, 3].map((i) =>
          <div key={i} style={{ flex: 1, height: 3, borderRadius: 2, background: i / 4 < strength ? strengthColor : 'var(--t-quiet-3)', transition: 'background 160ms' }} />
          )}
          </div>
        }
      </div>

      <label style={{ display: 'flex', alignItems: 'flex-start', gap: 12, cursor: 'pointer', marginBottom: 22 }}>
        <span onClick={() => setAgree(!agree)} style={{
          width: 20, height: 20, borderRadius: 6, flex: 'none', marginTop: 1,
          background: agree ? 'linear-gradient(135deg,#1FB8E0,#3CBF9E)' : 'transparent',
          boxShadow: agree ? 'none' : 'inset 0 0 0 1.5px var(--t-checkbox-stroke)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 160ms'
        }}>
          {agree && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>}
        </span>
        <span style={{ fontSize: 13, color: 'var(--t-fg-3)', lineHeight: 1.5 }} onClick={() => setAgree(!agree)}>
          I agree to the <span style={{ color: 'var(--t-fg-1)' }}>terms</span> and <span style={{ color: 'var(--t-fg-1)' }}>privacy notice</span>. 22hrs only stores wear-time and tray data.
        </span>
      </label>

      <Btn variant="primary" block disabled={!valid} onClick={() => go('treatment')}>Create account</Btn>

      <div style={{ textAlign: 'center', marginTop: 18, fontSize: 13, color: 'var(--t-fg-3)' }}>
        Already have an account? <span onClick={() => go('signin')} style={{ color: 'var(--t-fg-1)', cursor: 'pointer' }}>Sign in</span>
      </div>
    </div>);

}

// ──────────────────────────────────────────────
// 2. Treatment setup
// ──────────────────────────────────────────────
function Stepper({ value, onChange, min = 1, max = 99, step = 1, suffix }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, background: 'var(--t-quiet-2)', boxShadow: 'inset 0 0 0 1px var(--t-input-stroke)', borderRadius: 12, padding: '6px 10px' }}>
      <button onClick={() => onChange(Math.max(min, value - step))}
      style={{ width: 34, height: 34, borderRadius: 8, border: 0, background: 'var(--t-quiet)', color: 'var(--t-fg-1)', fontSize: 18, cursor: 'pointer' }}>−</button>
      <div style={{ flex: 1, textAlign: 'center', fontSize: 22, fontWeight: 500, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.01em' }}>
        {value}{suffix && <span style={{ fontSize: 13, color: 'var(--t-fg-3)', marginLeft: 4, fontWeight: 400 }}>{suffix}</span>}
      </div>
      <button onClick={() => onChange(Math.min(max, value + step))}
      style={{ width: 34, height: 34, borderRadius: 8, border: 0, background: 'var(--t-quiet)', color: 'var(--t-fg-1)', fontSize: 18, cursor: 'pointer' }}>+</button>
    </div>);

}

function ScreenTreatment({ go }) {
  const [provider, setProvider] = useStateX('Invisalign');
  const [totalTrays, setTotalTrays] = useStateX(28);
  const [currentTray, setCurrentTray] = useStateX(13);
  const [daysPerTray, setDaysPerTray] = useStateX(7);
  const [target, setTarget] = useStateX(22);

  const providers = ['Invisalign', 'SureSmile', 'Spark', 'Other'];

  return (
    <div className="pp-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{ padding: '60px 28px 4px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <Eyebrow>Step 1 of 2</Eyebrow>
        <span onClick={() => go('find')} style={{ fontSize: 13, color: 'var(--t-fg-3)', cursor: 'pointer' }}>Skip</span>
      </div>

      <div style={{ padding: '14px 28px 24px' }}>
        <h2 style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', margin: 0, marginBottom: 8, lineHeight: 1.1 }}>Tell us about<br />your treatment.</h2>
        <p style={{ fontSize: 14, color: 'var(--t-fg-3)', lineHeight: 1.5, margin: 0 }}>
          Your dentist gave you a plan — punch in the basics so we can track tray switches for you.
        </p>
      </div>

      <div style={{ padding: '0 22px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Card>
          <Eyebrow style={{ marginBottom: 12 }}>Aligner brand</Eyebrow>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            {providers.map((p) => {
              const sel = p === provider;
              return (
                <button key={p} onClick={() => setProvider(p)}
                style={{
                  padding: '12px 10px', borderRadius: 10, border: 0, cursor: 'pointer',
                  background: sel ? 'var(--t-pill-active-bg)' : 'var(--t-quiet-2)',
                  color: sel ? 'var(--t-pill-active-fg)' : 'var(--t-fg-1)',
                  fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
                  boxShadow: sel ? 'none' : 'inset 0 0 0 1px var(--t-input-stroke)',
                  transition: 'all 160ms'
                }}>{p}</button>);

            })}
          </div>
        </Card>

        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 12 }}>
            <Eyebrow>Total trays in plan</Eyebrow>
            <span style={{ fontSize: 11, color: 'var(--t-fg-muted)' }}>From your dentist</span>
          </div>
          <Stepper value={totalTrays} onChange={setTotalTrays} min={1} max={60} suffix="trays" />
        </Card>

        <Card>
          <Eyebrow style={{ marginBottom: 12 }}>Current tray</Eyebrow>
          <Stepper value={currentTray} onChange={setCurrentTray} min={1} max={totalTrays} />
          <div style={{ height: 4, background: 'var(--t-quiet-3)', borderRadius: 2, overflow: 'hidden', marginTop: 14 }}>
            <div style={{ height: '100%', width: `${currentTray / totalTrays * 100}%`, background: 'linear-gradient(90deg,#1FB8E0,#3CBF9E)', transition: 'width 220ms' }} />
          </div>
          <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>{Math.round(currentTray / totalTrays * 100)}% through your plan</div>
        </Card>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Card>
            <Eyebrow style={{ marginBottom: 12 }}>Days per tray</Eyebrow>
            <Stepper value={daysPerTray} onChange={setDaysPerTray} min={3} max={21} />
          </Card>
          <Card>
            <Eyebrow style={{ marginBottom: 12 }}>Daily target</Eyebrow>
            <Stepper value={target} onChange={setTarget} min={18} max={24} suffix="h" />
          </Card>
        </div>

        <Card style={{ background: 'rgba(31,184,224,0.06)', boxShadow: 'inset 0 0 0 1px rgba(31,184,224,0.18)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <div style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(31,184,224,0.14)', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1FB8E0" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" /></svg>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 500, marginBottom: 4 }}>You'll switch to tray {currentTray + 1} in {daysPerTray} days.</div>
              <div style={{ fontSize: 12, color: 'var(--t-fg-3)', lineHeight: 1.5 }}>We'll remind you the night before. Auto-detection picks up actual switches when you swap.</div>
            </div>
          </div>
        </Card>
      </div>

      <div style={{ padding: '0 28px 36px', display: 'flex', flexDirection: 'column', gap: 8 }}>
        <Btn variant="primary" block onClick={() => go('find')}>Continue to pairing</Btn>
        <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--t-fg-muted)', marginTop: 4 }}>You can change any of this later in settings.</div>
      </div>
    </div>);

}

// ──────────────────────────────────────────────
// 3. Insights — historical wear data
// ──────────────────────────────────────────────
function ScreenInsights({ go }) {
  const [range, setRange] = useStateX('week');

  // last 7 days incl today
  const weekData = [
  { day: 'Thu', date: 'May 1', value: 21.8, met: false },
  { day: 'Fri', date: 'May 2', value: 22.4, met: true },
  { day: 'Sat', date: 'May 3', value: 20.1, met: false },
  { day: 'Sun', date: 'May 4', value: 22.6, met: true },
  { day: 'Mon', date: 'May 5', value: 19.4, met: false },
  { day: 'Tue', date: 'May 6', value: 22.9, met: true },
  { day: 'Wed', date: 'May 7', value: 21.4, today: true, partial: true }];

  const avg = (weekData.reduce((s, d) => s + d.value, 0) / weekData.length).toFixed(1);
  const metCount = weekData.filter((d) => d.met).length;

  // hour-of-day heat (0–23) — placeholder distribution
  const hours = [0.95, 0.96, 0.98, 0.98, 0.97, 0.96, 0.92, 0.7, 0.55, 0.4, 0.6, 0.8, 0.5, 0.75, 0.85, 0.7, 0.6, 0.45, 0.55, 0.7, 0.85, 0.95, 0.97, 0.96];

  return (
    <div className="pp-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{
        position: 'sticky', top: 0, zIndex: 5, padding: '56px 22px 14px',
        background: 'var(--t-sticky-grad)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)'
      }}>
        <Eyebrow>Insights</Eyebrow>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 4 }}>
          <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>Your wear history</div>
        </div>
        {/* range toggle */}
        <div style={{ marginTop: 14, display: 'flex', gap: 4, padding: 3, background: 'var(--t-quiet-2)', borderRadius: 10 }}>
          {[['week', 'Week'], ['month', 'Month'], ['all', 'All time']].map(([v, l]) =>
          <button key={v} onClick={() => setRange(v)}
          style={{
            flex: 1, padding: '8px 0', border: 0, borderRadius: 7, cursor: 'pointer',
            background: range === v ? 'var(--t-pill-active-bg)' : 'transparent',
            color: range === v ? 'var(--t-pill-active-fg)' : 'var(--t-fg-3)',
            fontFamily: 'inherit', fontSize: 12, fontWeight: 500,
            transition: 'all 160ms'
          }}>{l}</button>
          )}
        </div>
      </div>

      <div style={{ padding: '4px 22px 110px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Average hero */}
        <Card>
          <Eyebrow style={{ marginBottom: 10 }}>Average wear · {range === 'week' ? 'Last 7 days' : range === 'month' ? 'Last 30 days' : 'Since day 1'}</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginBottom: 4 }}>
            <div style={{ fontSize: 48, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{range === 'week' ? avg : range === 'month' ? '21.7' : '21.5'}</div>
            <div style={{ fontSize: 16, color: 'var(--t-fg-3)', paddingBottom: 6 }}>h / day</div>
            <div style={{ flex: 1 }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 12, color: '#5FCFB2', paddingBottom: 6 }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="18 15 12 9 6 15" /></svg>
              +0.3h vs prior
            </div>
          </div>
          <div style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>{metCount} of 7 days at or above 22h.</div>
        </Card>

        {/* Day bars */}
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <Eyebrow>Daily wear</Eyebrow>
            <span style={{ fontSize: 11, color: 'var(--t-fg-muted)', fontVariantNumeric: 'tabular-nums' }}>Target 22h</span>
          </div>
          <div style={{ position: 'relative', height: 140, display: 'flex', alignItems: 'flex-end', gap: 6 }}>
            {/* target line */}
            <div style={{ position: 'absolute', left: 0, right: 0, top: `${(1 - 22 / 24) * 100}%`, borderTop: '1px dashed var(--t-border-strong)', pointerEvents: 'none' }}>
              <span style={{ position: 'absolute', right: 0, top: -16, fontSize: 9, color: 'var(--t-fg-muted)', letterSpacing: '0.06em' }}>22h</span>
            </div>
            {weekData.map((d, i) => {
              const h = d.value / 24 * 100;
              const color = d.met ? 'linear-gradient(180deg,#3CBF9E,#2E9B80)' : d.today ? 'linear-gradient(180deg,rgba(31,184,224,0.6),rgba(31,184,224,0.3))' : 'var(--t-bar-empty)';
              return (
                <div key={i} style={{ flex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', alignItems: 'center', gap: 6 }}>
                  <div style={{
                    width: '100%', height: h + '%',
                    background: color, borderRadius: 4,
                    outline: d.today ? '1.5px solid var(--t-now-line)' : 'none', outlineOffset: 1,
                    position: 'relative'
                  }}>
                    {d.today &&
                    <div style={{ position: 'absolute', top: -22, left: '50%', transform: 'translateX(-50%)', fontSize: 10, color: 'var(--t-fg-1)', fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>
                        {d.value}h
                      </div>
                    }
                  </div>
                  <div style={{ fontSize: 10, color: d.today ? 'var(--t-fg-1)' : 'var(--t-fg-muted)', fontWeight: d.today ? 500 : 400, letterSpacing: '0.04em' }}>{d.day[0]}</div>
                </div>);

            })}
          </div>
        </Card>

        {/* Hour heatmap */}
        <Card>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <Eyebrow>When you wear them</Eyebrow>
            <span style={{ fontSize: 11, color: 'var(--t-fg-muted)' }}>By hour, last 7 days</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, height: 60 }}>
            {hours.map((v, i) =>
            <div key={i} style={{
              flex: 1, height: `${v * 100}%`,
              background: v > 0.85 ? '#3CBF9E' : v > 0.6 ? 'rgba(60,191,158,0.55)' : 'rgba(60,191,158,0.18)',
              borderRadius: 1.5, minHeight: 2
            }} />
            )}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontSize: 10, color: 'var(--t-fg-muted)', letterSpacing: '0.04em', fontVariantNumeric: 'tabular-nums' }}>
            <span>12a</span><span>6a</span><span>12p</span><span>6p</span><span>12a</span>
          </div>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--t-divider)', fontSize: 12, color: 'var(--t-fg-3)', lineHeight: 1.5 }}>
            Most out-of-case time clusters around <span style={{ color: 'var(--t-fg-1)' }}>noon</span> and <span style={{ color: 'var(--t-fg-1)' }}>6 PM</span>. That's typical — meals are when most aligners come out.
          </div>
        </Card>

        {/* Stat tiles */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <Card>
            <Eyebrow style={{ marginBottom: 10 }}>Best day</Eyebrow>
            <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>22.9<span style={{ fontSize: 14, color: 'var(--t-fg-3)', marginLeft: 3 }}>h</span></div>
            <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', marginTop: 6 }}>Tuesday, May 6</div>
          </Card>
          <Card>
            <Eyebrow style={{ marginBottom: 10 }}>Off-target</Eyebrow>
            <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>2<span style={{ fontSize: 14, color: 'var(--t-fg-3)', marginLeft: 5 }}>days</span></div>
            <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', marginTop: 6 }}>Caught up overnight</div>
          </Card>
        </div>

        {/* Recent events */}
        <Card>
          <Eyebrow style={{ marginBottom: 14 }}>Recent events</Eyebrow>
          {[
          { dot: '#3CBF9E', title: 'Out of case', sub: 'Today, 7:42 PM', right: '28 min' },
          { dot: '#1FB8E0', title: 'Tray 14 started', sub: 'Mon, 7:00 AM', right: '—' },
          { dot: '#3CBF9E', title: 'Out of case', sub: 'Mon, 12:18 PM', right: '22 min' },
          { dot: '#3CBF9E', title: 'Out of case', sub: 'Sun, 6:55 PM', right: '46 min' },
          { dot: 'var(--t-fg-3)', title: 'Case offline', sub: 'Sat, 11:14 AM', right: '— ' }].
          map((e, i, arr) =>
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: i < arr.length - 1 ? '1px solid var(--t-divider-soft)' : 'none' }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: e.dot, flex: 'none' }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 13, fontWeight: 500 }}>{e.title}</div>
                <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 1 }}>{e.sub}</div>
              </div>
              <div style={{ fontSize: 12, color: 'var(--t-fg-3)', fontVariantNumeric: 'tabular-nums' }}>{e.right}</div>
            </div>
          )}
        </Card>

        <button onClick={() => go('quick')} style={{
          background: 'var(--t-quiet-2)', color: 'var(--t-fg-1)', border: 0, padding: '14px',
          borderRadius: 12, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',
          boxShadow: 'inset 0 0 0 1px var(--t-border)'
        }}>Adjust today's wear time</button>
      </div>

      <TabBar active="insights" go={go} />
    </div>);

}

// ──────────────────────────────────────────────
// 4. Settings ("You")
// ──────────────────────────────────────────────
function Toggle({ on, onChange }) {
  return (
    <button onClick={() => onChange(!on)} style={{
      width: 44, height: 26, borderRadius: 999, border: 0, cursor: 'pointer', padding: 0,
      background: on ? 'linear-gradient(135deg,#1FB8E0,#3CBF9E)' : 'var(--t-toggle-off)',
      position: 'relative', transition: 'background 160ms'
    }}>
      <span style={{
        position: 'absolute', top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: '50%',
        background: '#FFFFFF', transition: 'left 180ms cubic-bezier(0.22, 0.61, 0.36, 1)',
        boxShadow: '0 1px 3px rgba(0,0,0,0.3)'
      }} />
    </button>);

}

function SettingRow({ title, sub, right, last = false, onClick }) {
  return (
    <div onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '14px 0',
      borderBottom: last ? 'none' : '1px solid var(--t-divider-soft)',
      cursor: onClick ? 'pointer' : 'default'
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 2, lineHeight: 1.4 }}>{sub}</div>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--t-fg-3)', fontSize: 13, fontVariantNumeric: 'tabular-nums' }}>{right}</div>
    </div>);

}

function ScreenSettings({ go }) {
  const [target, setTarget] = useStateX(22);
  const [autoTray, setAutoTray] = useStateX(true);
  const [notify, setNotify] = useStateX(true);
  const [quietHours, setQuietHours] = useStateX(true);

  return (
    <div className="pp-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{
        position: 'sticky', top: 0, zIndex: 5, padding: '56px 22px 14px',
        background: 'var(--t-sticky-grad)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)'
      }}>
        <Eyebrow>Settings</Eyebrow>
        <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4 }}>You</div>
      </div>

      <div style={{ padding: '4px 22px 110px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Profile */}
        <Card>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{ width: 52, height: 52, borderRadius: '50%', background: 'linear-gradient(135deg,#1FB8E0,#3CBF9E)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, fontSize: 18, color: '#FFFFFF' }}>JS</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 16, fontWeight: 500 }}>Jordan Smith</div>
              <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 2 }}>jordan@example.com</div>
            </div>
            <button style={{ background: 'var(--t-quiet)', color: 'var(--t-fg-1)', border: 0, padding: '8px 12px', borderRadius: 10, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>Edit</button>
          </div>
          <div style={{ marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--t-divider)', display: 'flex', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>Day</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>84 <span style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>of 196</span></div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>Streak</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>12 <span style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>days</span></div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }}>Tray</div>
              <div style={{ fontSize: 18, fontWeight: 500, marginTop: 2, fontVariantNumeric: 'tabular-nums' }}>14 <span style={{ fontSize: 12, color: 'var(--t-fg-3)' }}>/ 28</span></div>
            </div>
          </div>
        </Card>

        {/* Case */}
        <Card>
          <Eyebrow style={{ marginBottom: 12 }}>Your case</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10 }}>
            <CaseGlyph size={48} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}>22hrs Case · 22H–2A41</div>
              <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 2 }}>Connected · firmware 1.4.2</div>
            </div>
            <StatusPill status="synced" />
          </div>
          <div style={{ borderTop: '1px solid var(--t-divider)', paddingTop: 4 }}>
            <SettingRow title="Battery" right="84%" />
            <SettingRow title="Pair another case" sub="For travel or backup" right="›" onClick={() => go('find')} last />
          </div>
        </Card>

        {/* Treatment */}
        <Card>
          <Eyebrow style={{ marginBottom: 4 }}>Treatment plan</Eyebrow>
          <SettingRow title="Aligner brand" right="Invisalign" />
          <SettingRow title="Total trays" right="28" />
          <SettingRow title="Days per tray" right="7 days" />
          <SettingRow title="Provider" right="Dr. Patel" last />
        </Card>

        {/* Preferences */}
        <Card>
          <Eyebrow style={{ marginBottom: 4 }}>Preferences</Eyebrow>
          <SettingRow title="Daily target" sub="Most plans target 22 hours" right={<span>{target}h</span>} />
          <SettingRow title="Auto-detect tray changes" sub="Switch trays without tapping" right={<Toggle on={autoTray} onChange={setAutoTray} />} />
          <SettingRow title="Quiet reminders" sub="A gentle nudge if you're well behind" right={<Toggle on={notify} onChange={setNotify} />} />
          <SettingRow title="Quiet hours" sub="No reminders 10 PM – 7 AM" right={<Toggle on={quietHours} onChange={setQuietHours} />} last />
        </Card>

        {/* Notifications shortcut */}
        <Card onClick={() => go('notifications')} style={{ cursor: 'pointer' }}>
          <SettingRow title="Notifications" sub="3 unread · last from today" right="›" last onClick={() => go('notifications')} />
        </Card>

        {/* Support */}
        <Card>
          <Eyebrow style={{ marginBottom: 4 }}>Support</Eyebrow>
          <SettingRow title="Help center" right="›" onClick={() => {}} />
          <SettingRow title="Privacy" right="›" onClick={() => {}} />
          <SettingRow title="Export your data" sub="CSV of your wear history" right="›" onClick={() => {}} />
          <SettingRow title="Sign out" right="" onClick={() => go('welcome')} last />
        </Card>

        <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--t-fg-muted)', padding: '8px 0' }}>22hrs · v2.4 · made with care</div>
      </div>

      <TabBar active="settings" go={go} />
    </div>);

}

// ──────────────────────────────────────────────
// 5. Notifications
// ──────────────────────────────────────────────
function ScreenNotifications({ go }) {
  const [items, setItems] = useStateX([
  { group: 'Today', read: false, kind: 'progress', title: "You're on track today.", sub: '21h 14m worn · 46m to go.', time: '7:42 PM', icon: 'check' },
  { group: 'Today', read: false, kind: 'session', title: 'Out-of-case time logged.', sub: '28 minutes added — within your usual range.', time: '7:42 PM', icon: 'clock' },
  { group: 'Today', read: false, kind: 'tray', title: 'Tray 14 starts tomorrow.', sub: "We'll switch automatically when you swap.", time: '9:00 AM', icon: 'calendar' },
  { group: 'Yesterday', read: true, kind: 'battery', title: 'Case battery at 20%.', sub: 'A short charge will get you through the week.', time: '4:18 PM', icon: 'battery' },
  { group: 'This week', read: true, kind: 'checkin', title: 'Mid-treatment check-in scheduled.', sub: 'With Dr. Patel · Tuesday, June 4.', time: 'Mon', icon: 'calendar' },
  { group: 'This week', read: true, kind: 'progress', title: 'Two days under target this week.', sub: 'Caught up overnight — nothing to do.', time: 'Mon', icon: 'check' },
  { group: 'This week', read: true, kind: 'session', title: 'Synced 14 sessions in the background.', sub: 'No action needed.', time: 'Sun', icon: 'sync' }]
  );

  const unread = items.filter((i) => !i.read).length;
  const groups = items.reduce((acc, item) => {
    (acc[item.group] = acc[item.group] || []).push(item);
    return acc;
  }, {});

  const iconFor = (k) => {
    const props = { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.75, strokeLinecap: 'round', strokeLinejoin: 'round' };
    if (k === 'check') return <svg {...props}><polyline points="20 6 9 17 4 12" /></svg>;
    if (k === 'clock') return <svg {...props}><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>;
    if (k === 'calendar') return <svg {...props}><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></svg>;
    if (k === 'battery') return <svg {...props}><rect x="2" y="7" width="18" height="10" rx="2" /><line x1="22" y1="11" x2="22" y2="13" /></svg>;
    if (k === 'sync') return <svg {...props}><polyline points="23 4 23 10 17 10" /><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" /></svg>;
    return null;
  };
  const tintFor = (k) => {
    if (k === 'check' || k === 'progress' || k === 'session') return { bg: 'rgba(60,191,158,0.12)', fg: '#5FCFB2' };
    if (k === 'calendar' || k === 'tray' || k === 'checkin') return { bg: 'rgba(31,184,224,0.12)', fg: '#4FCBE8' };
    if (k === 'battery') return { bg: 'rgba(155,161,171,0.12)', fg: 'var(--t-fg-2)' };
    return { bg: 'rgba(155,161,171,0.10)', fg: 'var(--t-fg-3)' };
  };

  return (
    <div className="pp-screen" style={{ height: '100%', display: 'flex', flexDirection: 'column', overflowY: 'auto' }}>
      <div style={{
        position: 'sticky', top: 0, zIndex: 5, padding: '56px 22px 14px',
        background: 'var(--t-sticky-grad)',
        backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between'
      }}>
        <div>
          <button onClick={() => go('home')} aria-label="Back" style={{ background: 'none', border: 0, color: 'var(--t-fg-3)', padding: 0, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer', fontFamily: 'inherit', fontSize: 13 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
            Today
          </button>
          <Eyebrow>Inbox</Eyebrow>
          <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4 }}>Notifications</div>
        </div>
        {unread > 0 &&
        <button onClick={() => setItems(items.map((i) => ({ ...i, read: true })))}
        style={{ background: 'var(--t-quiet)', color: 'var(--t-fg-1)', border: 0, padding: '8px 12px', borderRadius: 10, fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}>
            Mark all read
          </button>
        }
      </div>

      <div style={{ padding: '4px 22px 36px', display: 'flex', flexDirection: 'column', gap: 18 }}>
        {Object.entries(groups).map(([g, list]) =>
        <div key={g}>
            <Eyebrow style={{ marginBottom: 8, paddingLeft: 4 }}>{g}</Eyebrow>
            <Card padding={4}>
              {list.map((n, i) => {
              const tint = tintFor(n.kind);
              return (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 12, padding: '14px',
                  borderBottom: i < list.length - 1 ? '1px solid var(--t-divider-soft)' : 'none',
                  background: !n.read ? 'var(--t-unread-tint)' : 'transparent',
                  borderRadius: i === 0 ? '12px 12px 0 0' : i === list.length - 1 ? '0 0 12px 12px' : 0
                }}>
                    <div style={{ position: 'relative', width: 32, height: 32, borderRadius: 10, background: tint.bg, color: tint.fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
                      {iconFor(n.icon)}
                      {!n.read && <span style={{ position: 'absolute', top: -2, right: -2, width: 8, height: 8, borderRadius: '50%', background: '#1FB8E0', boxShadow: '0 0 0 2px var(--t-bg-card)' }} />}
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, justifyContent: 'space-between' }}>
                        <div style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.3 }}>{n.title}</div>
                        <div style={{ fontSize: 11, color: 'var(--t-fg-muted)', flex: 'none', fontVariantNumeric: 'tabular-nums' }}>{n.time}</div>
                      </div>
                      <div style={{ fontSize: 12, color: 'var(--t-fg-3)', lineHeight: 1.5, marginTop: 4 }}>{n.sub}</div>
                    </div>
                  </div>);

            })}
            </Card>
          </div>
        )}

        <div style={{ textAlign: 'center', fontSize: 11, color: 'var(--t-fg-muted)', padding: '12px 0 0' }}>You're all caught up.</div>
      </div>
    </div>);

}

// ──────────────────────────────────────────────
// 6. Quick actions — manual wear-time adjustment
// ──────────────────────────────────────────────
function ScreenQuickActions({ go }) {
  const baseMinutes = 21 * 60 + 14;
  const [delta, setDelta] = useStateX(0); // +/- minutes
  const [from, setFrom] = useStateX('12:30 PM');
  const [duration, setDuration] = useStateX(30);
  const [tab, setTab] = useStateX('adjust'); // adjust | session

  const total = baseMinutes + delta;
  const totH = Math.floor(total / 60);
  const totM = (total % 60 + 60) % 60;
  const target = 22 * 60;
  const pct = Math.max(0, Math.min(100, Math.round(total / target * 100)));

  const bump = (n) => setDelta((d) => d + n);

  return (
    <div className="pp-screen" style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: 'var(--t-bg-app)'
    }}>
      {/* drag indicator (sheet style) */}
      <div style={{ paddingTop: 56 }}>
        <div style={{ height: 4, width: 40, borderRadius: 2, background: 'var(--t-bar-empty)', margin: '0 auto' }} />
      </div>

      <div style={{ padding: '20px 24px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12 }}>
        <div>
          <Eyebrow>Quick action</Eyebrow>
          <div style={{ fontSize: 24, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 4, lineHeight: 1.15 }}>Adjust today's<br />wear time</div>
        </div>
        <button onClick={() => go('home')} aria-label="Close" style={{ background: 'var(--t-quiet)', border: 0, color: 'var(--t-fg-1)', width: 34, height: 34, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
        </button>
      </div>

      <p style={{ padding: '10px 24px 0', fontSize: 13, color: 'var(--t-fg-3)', lineHeight: 1.5, margin: 0 }}>
        The case logs everything automatically. Use this only when something's off — say you forgot the case at home, or your aligners came out without going in.
      </p>

      {/* Tabs */}
      <div style={{ padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', gap: 4, padding: 3, background: 'var(--t-quiet-2)', borderRadius: 10 }}>
          {[['adjust', 'Nudge total'], ['session', 'Add a session']].map(([v, l]) =>
          <button key={v} onClick={() => setTab(v)}
          style={{
            flex: 1, padding: '10px 0', border: 0, borderRadius: 7, cursor: 'pointer',
            background: tab === v ? 'var(--t-pill-active-bg)' : 'transparent',
            color: tab === v ? 'var(--t-pill-active-fg)' : 'var(--t-fg-3)',
            fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
            transition: 'all 160ms'
          }}>{l}</button>
          )}
        </div>
      </div>

      <div style={{ flex: 1, padding: '18px 22px 28px', overflowY: 'auto' }}>
        {/* Live preview */}
        <Card style={{ marginBottom: 14, background: 'var(--t-unread-tint)', boxShadow: 'inset 0 0 0 1px rgba(31,184,224,0.18)' }}>
          <Eyebrow style={{ marginBottom: 10 }}>Today after change</Eyebrow>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, marginBottom: 10 }}>
            <div style={{ fontSize: 38, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
              {totH}<span style={{ fontSize: 20, color: 'var(--t-fg-3)' }}>h</span> {String(totM).padStart(2, '0')}<span style={{ fontSize: 16, color: 'var(--t-fg-3)' }}>m</span>
            </div>
            <div style={{ flex: 1 }} />
            {delta !== 0 &&
            <div style={{ fontSize: 13, color: delta > 0 ? '#5FCFB2' : '#E0A04F', fontVariantNumeric: 'tabular-nums', paddingBottom: 6 }}>
                {delta > 0 ? '+' : ''}{delta}m
              </div>
            }
          </div>
          <div style={{ height: 6, background: 'var(--t-quiet-3)', borderRadius: 3, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: `${pct}%`, background: 'linear-gradient(90deg,#1FB8E0,#3CBF9E)', borderRadius: 3, transition: 'width 220ms' }} />
          </div>
          <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>
            {(() => {
              if (total >= target) return `${pct}% of 22h target · on track`;
              const rem = target - total;
              const rh = Math.floor(rem / 60),rm = rem % 60;
              return `${pct}% of 22h target · ${rh > 0 ? `${rh}h ` : ''}${rm}m to go`;
            })()}
          </div>
        </Card>

        {tab === 'adjust' ?
        <>
            {/* +/- */}
            <Card>
              <Eyebrow style={{ marginBottom: 12 }}>Add or remove minutes</Eyebrow>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: 8 }}>
                {[-15, -5, +5, +15].map((n) =>
              <button key={n} onClick={() => bump(n)}
              style={{
                padding: '14px 0', borderRadius: 10, border: 0, cursor: 'pointer',
                background: 'var(--t-quiet-2)', color: n > 0 ? '#5FCFB2' : '#E0A04F',
                fontFamily: 'inherit', fontSize: 15, fontWeight: 500, fontVariantNumeric: 'tabular-nums',
                boxShadow: 'inset 0 0 0 1px var(--t-border)'
              }}>{n > 0 ? '+' : ''}{n}m</button>
              )}
              </div>
              {delta !== 0 &&
            <button onClick={() => setDelta(0)} style={{
              marginTop: 10, width: '100%', padding: '10px 0', background: 'transparent',
              color: 'var(--t-fg-3)', border: 0, fontFamily: 'inherit', fontSize: 13, cursor: 'pointer'
            }}>Reset</button>
            }
            </Card>

            <Card style={{ marginTop: 14 }}>
              <Eyebrow style={{ marginBottom: 12 }}>Common reasons</Eyebrow>
              {[
            { label: 'I forgot my case at home', sub: "We'll log this stretch as not-worn", icon: '📍' },
            { label: 'Aligners stayed out longer than logged', sub: 'Adjust down by 30+ minutes', icon: '⏱' },
            { label: 'I wore them with the case missing', sub: 'Add a manual session below', icon: '✓' }].
            map((r, i, arr) =>
            <div key={i} onClick={() => i === 2 ? setTab('session') : null} style={{
              display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
              borderBottom: i < arr.length - 1 ? '1px solid var(--t-divider-soft)' : 'none',
              cursor: 'pointer'
            }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{r.label}</div>
                    <div style={{ fontSize: 11, color: 'var(--t-fg-3)', marginTop: 2 }}>{r.sub}</div>
                  </div>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--t-fg-muted)" strokeWidth="1.75" strokeLinecap="round"><path d="M9 6l6 6-6 6" /></svg>
                </div>
            )}
            </Card>
          </> :

        <>
            <Card>
              <Eyebrow style={{ marginBottom: 14 }}>Add a wear session</Eyebrow>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0' }}>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>Started at</div>
                    <div style={{ fontSize: 12, color: 'var(--t-fg-3)', marginTop: 2 }}>Today</div>
                  </div>
                  <div style={{ background: 'var(--t-quiet-2)', padding: '8px 14px', borderRadius: 10, fontSize: 14, fontWeight: 500, fontVariantNumeric: 'tabular-nums', boxShadow: 'inset 0 0 0 1px var(--t-border)' }}>{from}</div>
                </div>
                <div style={{ borderTop: '1px solid var(--t-divider)' }} />
                <div style={{ padding: '4px 0' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>Duration</div>
                    <div style={{ fontSize: 18, fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{Math.floor(duration / 60) > 0 ? `${Math.floor(duration / 60)}h ` : ''}{duration % 60}m</div>
                  </div>
                  <input type="range" min={5} max={240} step={5} value={duration} onChange={(e) => setDuration(+e.target.value)}
                style={{ width: '100%', accentColor: '#1FB8E0' }} />
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--t-fg-muted)', marginTop: 4, fontVariantNumeric: 'tabular-nums' }}>
                    <span>5m</span><span>1h</span><span>2h</span><span>4h</span>
                  </div>
                </div>
              </div>
            </Card>

            <Card style={{ marginTop: 14, background: 'var(--t-card-tint)' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--t-fg-3)" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none', marginTop: 1 }}>
                  <circle cx="12" cy="12" r="10" /><line x1="12" y1="8" x2="12" y2="12" /><line x1="12" y1="16" x2="12.01" y2="16" />
                </svg>
                <div style={{ fontSize: 12, color: 'var(--t-fg-3)', lineHeight: 1.5 }}>
                  Manual sessions show with a small tag in your history so you and your dentist can tell them from auto-tracked time.
                </div>
              </div>
            </Card>
          </>
        }
      </div>

      <div style={{ padding: '0 22px 28px', display: 'flex', gap: 8 }}>
        <Btn variant="quiet" block onClick={() => go('home')}>Cancel</Btn>
        <Btn variant="primary" block onClick={() => go('home')}>Save</Btn>
      </div>
    </div>);

}

Object.assign(window, {
  ScreenSignUp, ScreenTreatment, ScreenInsights, ScreenSettings, ScreenNotifications, ScreenQuickActions,
  TabBar, Toggle, Stepper, SettingRow, BackHeader
});