// Patient mobile screens — part 2 of 2
// 9.  Atividade · Z2 + força
// 10. Mindfulness · respiração 4-7-8
// 11. Exames · timeline + biomarcadores
// 12. Mensagens · time clínico
// 13. Agenda · próxima consulta
// 14. Educação · trilha LPR
// 15. Perfil · privacidade + dispositivos
// 16. Safety alert · crítico

// ─────────────────────────────────────────────────────────────
// 9 · ATIVIDADE
// ─────────────────────────────────────────────────────────────
function PtActivityScreen({ T }) {
  const sessions = [
    { d: 'hoje',  type: 'Caminhada Z2', mins: 32, color: PM.sage, fcAvg: 118, fcMax: 128, kcal: 248 },
    { d: 'ontem', type: 'Força · superior', mins: 45, color: PM.terracotta, fcAvg: 102, fcMax: 138, kcal: 312 },
    { d: '−2',    type: 'Caminhada Z2', mins: 28, color: PM.sage, fcAvg: 116, fcMax: 124, kcal: 220 },
    { d: '−3',    type: 'Descanso ativo', mins: 20, color: PM.sky, fcAvg: 88, fcMax: 96, kcal: 90 },
  ];
  return (
    <PMShell>
      <PMHeader eyebrow="Atividade" title="Você se mexeu" big subtitle="Esta semana · 4 de 5 sessões"/>

      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={18} radius={20}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
            <ZoneRings minutes={{ z2: 92, z3: 24, z4: 8 }}/>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, color: PM.textMute, fontWeight: 500, letterSpacing: 0.3, textTransform: 'uppercase' }}>Tempo em zona</div>
              <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
                <ZoneRow label="Z2 · base aeróbica" mins={92} target={120} color={PM.sage}/>
                <ZoneRow label="Z3 · tempo" mins={24} target={30} color={PM.amber}/>
                <ZoneRow label="Z4 · limiar" mins={8} target={10} color={PM.terracotta}/>
              </div>
            </div>
          </div>
        </PMCard>
      </div>

      <PMSection title="Suas sessões">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {sessions.map((s, i) => (
            <PMCard key={i} padding={14}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 12, background: PM.cardSoft,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <Icons.Activity size={20} color={s.color}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, flexWrap: 'wrap' }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: PM.text }}>{s.type}</span>
                    <span style={{ fontSize: 11, color: PM.textMute }}>{s.d}</span>
                  </div>
                  <div style={{ display: 'flex', gap: 14, marginTop: 4, fontSize: 11.5, color: PM.textMute }}>
                    <span><b style={{ color: PM.text }}>{s.mins}</b> min</span>
                    <span>FC <b style={{ color: PM.text, fontFamily: PM.fontMono }}>{s.fcAvg}</b>/{s.fcMax}</span>
                    <span><b style={{ color: PM.text }}>{s.kcal}</b> kcal</span>
                  </div>
                </div>
                <Icons.ChevronR size={16} color={PM.textFaint}/>
              </div>
            </PMCard>
          ))}
        </div>
      </PMSection>

      <PMSection title="Sugerido para hoje">
        <PMCard padding={16} bg={PM.teal50} border={PM.tealSoft}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icons.Target size={22} color={PM.teal700}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: PM.teal900 }}>Faltam 28 min de Z2 essa semana</div>
              <div style={{ fontSize: 12, color: PM.teal700, marginTop: 2 }}>Caminhada de 30 min depois do almoço resolve.</div>
            </div>
          </div>
          <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
            <PMButton kind="primary" size="sm">Iniciar agora</PMButton>
            <PMButton kind="soft" size="sm">Agendar 17h</PMButton>
          </div>
        </PMCard>
      </PMSection>

      <PMBottomNav active="home"/>
    </PMShell>
  );
}

function ZoneRings({ minutes }) {
  const total = 120;
  const arc = (mins, color, r, stroke = 8) => {
    const c = 2 * Math.PI * r;
    const off = c - (Math.min(mins, total) / total) * c;
    return (
      <g>
        <circle cx={50} cy={50} r={r} fill="none" stroke={PM.cardSoft} strokeWidth={stroke}/>
        <circle cx={50} cy={50} r={r} fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round"
          strokeDasharray={c} strokeDashoffset={off} transform="rotate(-90 50 50)"/>
      </g>
    );
  };
  return (
    <svg width={100} height={100} style={{ flexShrink: 0 }}>
      {arc(minutes.z2, PM.sage, 42, 8)}
      {arc(minutes.z3, PM.amber, 32, 7)}
      {arc(minutes.z4, PM.terracotta, 22, 6)}
    </svg>
  );
}

function ZoneRow({ label, mins, target, color }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 3 }}>
        <span style={{ color: PM.textSoft, fontWeight: 500 }}>{label}</span>
        <span style={{ fontFamily: PM.fontMono, fontWeight: 600, color: PM.text }}>{mins}/{target} min</span>
      </div>
      <PMBar value={mins} max={target} color={color} height={5}/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 10 · MINDFULNESS · respiração 4-7-8 (sessão ativa)
// ─────────────────────────────────────────────────────────────
function PtMindfulnessScreen({ T }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(ellipse at top, #1e3a8a 0%, #0c1437 70%)',
      color: '#fff', fontFamily: PM.fontUI, position: 'relative',
      paddingTop: 62, display: 'flex', flexDirection: 'column',
    }}>
      {/* Top bar */}
      <div style={{ padding: '12px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{
          width: 36, height: 36, borderRadius: 18, border: 'none',
          background: 'rgba(255,255,255,0.12)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <Icons.X size={16} color="#fff"/>
        </button>
        <div style={{ textAlign: 'center', fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
          <div style={{ fontWeight: 600, color: '#fff', fontSize: 13 }}>Respiração 4-7-8</div>
          <div>4 de 8 ciclos</div>
        </div>
        <button style={{
          width: 36, height: 36, borderRadius: 18, border: 'none',
          background: 'rgba(255,255,255,0.12)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <Icons.More size={16} color="#fff"/>
        </button>
      </div>

      {/* Center — breathing orb */}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 30 }}>
        <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', letterSpacing: 2, textTransform: 'uppercase', fontWeight: 500 }}>
          Solte o ar
        </div>
        <div style={{ position: 'relative', width: 240, height: 240 }}>
          {/* outer halo */}
          <div style={{
            position: 'absolute', inset: -10, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(94,234,212,0.25), transparent 70%)',
          }}/>
          {/* main orb */}
          <div style={{
            position: 'absolute', inset: 30, borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 30%, #5eead4, #0d9488 60%, #134e4a)',
            boxShadow: '0 0 80px rgba(94,234,212,0.5), inset 0 0 60px rgba(255,255,255,0.15)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: PM.fontDisplay, fontSize: 84, fontWeight: 700, color: '#fff',
            letterSpacing: -2, fontVariantNumeric: 'tabular-nums', lineHeight: 1,
          }}>5</div>
          {/* progress ring */}
          <svg width={240} height={240} style={{ position: 'absolute', inset: 0 }}>
            <circle cx={120} cy={120} r={108} fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth={3}/>
            <circle cx={120} cy={120} r={108} fill="none" stroke="#5eead4" strokeWidth={3}
              strokeLinecap="round" strokeDasharray={2 * Math.PI * 108}
              strokeDashoffset={2 * Math.PI * 108 * (1 - 0.62)}
              transform="rotate(-90 120 120)"/>
          </svg>
        </div>
        <div style={{ fontFamily: PM.fontDisplay, fontSize: 32, color: '#fff', letterSpacing: -0.5 }}>
          conta até 8
        </div>
      </div>

      {/* Stats row */}
      <div style={{
        margin: '0 20px 18px', padding: 14, borderRadius: 16,
        background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)',
        display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10,
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: PM.fontDisplay, fontSize: 22, fontWeight: 700, color: '#5eead4' }}>2:48</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>Decorrido</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: PM.fontDisplay, fontSize: 22, fontWeight: 700, color: '#5eead4' }}>62</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>FC bpm</div>
        </div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: PM.fontDisplay, fontSize: 22, fontWeight: 700, color: '#5eead4' }}>+11</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)', marginTop: 2 }}>HRV ms</div>
        </div>
      </div>

      {/* Controls */}
      <div style={{ padding: '0 40px 36px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button style={{
          width: 56, height: 56, borderRadius: 28, border: 'none',
          background: 'rgba(255,255,255,0.12)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M11 19l-9-7 9-7v14zm11 0l-9-7 9-7v14z"/></svg>
        </button>
        <button style={{
          width: 76, height: 76, borderRadius: 38, border: 'none',
          background: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          boxShadow: '0 8px 24px rgba(0,0,0,0.4)',
        }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill={PM.teal900}><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>
        </button>
        <button style={{
          width: 56, height: 56, borderRadius: 28, border: 'none',
          background: 'rgba(255,255,255,0.12)', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M3 5l9 7-9 7V5zm11 0l9 7-9 7V5z"/></svg>
        </button>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 11 · EXAMES · biomarcadores chave
// ─────────────────────────────────────────────────────────────
function PtLabsScreen({ T }) {
  const labs = [
    { name: 'HbA1c', val: '5.4%', target: '< 5.7', delta: '−0.4', tone: 'ok', spark: [6.1, 6.0, 5.9, 5.8, 5.6, 5.5, 5.4] },
    { name: 'PCR-us', val: '0.9 mg/L', target: '< 1.0', delta: '−1.7', tone: 'ok', spark: [4.2, 3.6, 2.8, 2.1, 1.6, 1.2, 0.9] },
    { name: 'TG/HDL', val: '2.1', target: '< 2.0', delta: '−0.7', tone: 'warn', spark: [3.8, 3.4, 3.1, 2.9, 2.6, 2.3, 2.1] },
    { name: 'ApoB', val: '88 mg/dL', target: '< 80', delta: '−14', tone: 'warn', spark: [114, 108, 102, 98, 94, 90, 88] },
    { name: 'Vitamina D', val: '42 ng/mL', target: '40-60', delta: '+18', tone: 'ok', spark: [22, 24, 28, 32, 36, 40, 42] },
    { name: 'TSH', val: '1.8 mUI/L', target: '0.4-4.0', delta: '−0.3', tone: 'ok', spark: [2.4, 2.3, 2.2, 2.1, 2.0, 1.9, 1.8] },
  ];

  return (
    <PMShell>
      <PMHeader eyebrow="Exames" title="Seus biomarcadores" big subtitle="Painel completo · atualizado há 2 dias"/>

      {/* Headline panel */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={18} radius={20} bg={PM.teal50} border={PM.tealSoft}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <div style={{
              width: 52, height: 52, borderRadius: 14, background: PM.teal700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0,
            }}>
              <Icons.TrendUp size={24} color="#fff"/>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.teal900 }}>Trajetória positiva</div>
              <div style={{ fontSize: 12.5, color: PM.teal700, marginTop: 4, lineHeight: 1.5 }}>
                4 de 6 marcadores chave dentro da faixa. <b>ApoB</b> e <b>TG/HDL</b> ainda em monitoramento.
              </div>
            </div>
          </div>
        </PMCard>
      </div>

      <PMSection title="Marcadores chave" action={<span style={{ fontSize: 12, color: PM.teal700, fontWeight: 600 }}>Ver todos</span>}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {labs.map((l, i) => {
            const c = l.tone === 'ok' ? PM.ok : l.tone === 'warn' ? PM.warn : PM.bad;
            return (
              <PMCard key={i} padding={14}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: PM.textSoft }}>{l.name}</span>
                  <PMPill tone={l.tone === 'ok' ? 'ok' : 'warn'} style={{ padding: '2px 7px', fontSize: 10 }}>
                    {l.delta.startsWith('+') || l.delta.startsWith('−') ? l.delta : '+' + l.delta}
                  </PMPill>
                </div>
                <div style={{
                  fontFamily: PM.fontDisplay, fontSize: 24, fontWeight: 700, color: c,
                  letterSpacing: -0.5, lineHeight: 1.1, fontVariantNumeric: 'tabular-nums',
                }}>{l.val}</div>
                <div style={{ fontSize: 10, color: PM.textMute, marginTop: 3 }}>alvo {l.target}</div>
                <div style={{ marginTop: 8 }}>
                  <PMSpark values={l.spark} width={140} height={26} color={c} fill={l.tone === 'ok' ? PM.okBg : PM.warnBg}/>
                </div>
              </PMCard>
            );
          })}
        </div>
      </PMSection>

      <PMSection title="Próximo painel">
        <PMCard padding={14}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <Icons.Calendar size={20} color={PM.teal700}/>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: PM.text }}>Coleta agendada · 6 dez</div>
              <div style={{ fontSize: 11.5, color: PM.textMute, marginTop: 2 }}>Lab Premium · Itaim · jejum 8h</div>
            </div>
            <PMButton kind="soft" size="sm">Detalhes</PMButton>
          </div>
        </PMCard>
      </PMSection>

      <PMBottomNav active="home"/>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 12 · MENSAGENS · TIME CLÍNICO
// ─────────────────────────────────────────────────────────────
function PtMessagesScreen({ T }) {
  return (
    <PMShell padBottom={false}>
      <PMHeader eyebrow="Equipe clínica" title="Conversas" big/>

      {/* Pinned thread — Dra Helena */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={0} radius={18} style={{ overflow: 'hidden' }}>
          <div style={{
            padding: '12px 16px', background: PM.teal50,
            borderBottom: `1px solid ${PM.tealSoft}`,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{
              width: 36, height: 36, borderRadius: '50%',
              background: 'linear-gradient(135deg, #ccfbf1, #5eead4)',
              color: PM.teal900, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700,
            }}>HM</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 700, color: PM.teal900 }}>Dra. Helena Marques</div>
              <div style={{ fontSize: 11, color: PM.teal700 }}>Endocrinologia · responde em até 24h</div>
            </div>
            <PMPill tone="teal">Médica</PMPill>
          </div>

          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {/* Doctor message */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
              <span style={{
                width: 28, height: 28, borderRadius: '50%',
                background: 'linear-gradient(135deg, #ccfbf1, #5eead4)',
                color: PM.teal900, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, flexShrink: 0,
              }}>HM</span>
              <div style={{ maxWidth: '75%' }}>
                <div style={{
                  padding: '10px 14px', borderRadius: '14px 14px 14px 4px',
                  background: PM.cardSoft, fontSize: 13.5, color: PM.text, lineHeight: 1.5,
                }}>
                  Mariana, vi a curva do almoço. <b>+42 mg/dL</b> de pico está ótimo, ainda mais com refeição mista. Mantém o protocolo.
                </div>
                <div style={{ fontSize: 10, color: PM.textFaint, marginTop: 3 }}>Ontem · 14:12</div>
              </div>
            </div>

            {/* Doctor — context card */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
              <span style={{ width: 28, flexShrink: 0 }}/>
              <div style={{
                maxWidth: '75%', padding: 10, borderRadius: 12,
                background: '#fff', border: `1px solid ${PM.border}`,
              }}>
                <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500, marginBottom: 6 }}>Anexo · curva CGM</div>
                <PMSpark values={[92,96,110,128,134,124,108,98,94]} width={200} height={36} color={PM.amber} fill={PM.amberSoft}/>
                <div style={{ fontSize: 10, color: PM.textFaint, marginTop: 4 }}>13 nov · almoço</div>
              </div>
            </div>

            {/* Patient reply */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end', justifyContent: 'flex-end' }}>
              <div style={{ maxWidth: '75%' }}>
                <div style={{
                  padding: '10px 14px', borderRadius: '14px 14px 4px 14px',
                  background: PM.teal700, color: '#fff', fontSize: 13.5, lineHeight: 1.5,
                }}>
                  Obrigada! E sobre o cansaço da tarde que falei semana passada — diminuiu bastante.
                </div>
                <div style={{ fontSize: 10, color: PM.textFaint, marginTop: 3, textAlign: 'right' }}>Hoje · 09:04 · Lida</div>
              </div>
            </div>

            {/* Doctor latest with system event */}
            <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
              <span style={{
                width: 28, height: 28, borderRadius: '50%',
                background: 'linear-gradient(135deg, #ccfbf1, #5eead4)',
                color: PM.teal900, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, flexShrink: 0,
              }}>HM</span>
              <div style={{ maxWidth: '78%' }}>
                <div style={{
                  padding: '10px 14px', borderRadius: '14px 14px 14px 4px',
                  background: PM.cardSoft, fontSize: 13.5, color: PM.text, lineHeight: 1.5,
                }}>
                  Excelente. Vou propor uma reavaliação do GLP-1 em janeiro, depois do próximo painel.
                </div>
                <div style={{ marginTop: 8, padding: 10, borderRadius: 10, background: PM.amber50, border: `1px solid ${PM.amberSoft}` }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 600, color: PM.warn }}>
                    <Icons.ShieldChk size={12} color={PM.warn}/>
                    Safety Engine
                  </div>
                  <div style={{ fontSize: 12, color: '#78350f', marginTop: 4, lineHeight: 1.4 }}>
                    GLP-1 segue bloqueado até a HbA1c manter &lt; 5.5% por 6 sem.
                  </div>
                </div>
                <div style={{ fontSize: 10, color: PM.textFaint, marginTop: 3 }}>Hoje · 09:18</div>
              </div>
            </div>
          </div>

          {/* Composer */}
          <div style={{
            padding: '10px 12px', borderTop: `1px solid ${PM.border}`, background: PM.bg,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <button style={{
              width: 36, height: 36, borderRadius: 18, border: 'none', background: PM.cardSoft,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}>
              <Icons.Plus size={16} color={PM.textSoft}/>
            </button>
            <div style={{
              flex: 1, padding: '10px 14px', borderRadius: 18,
              background: PM.card, border: `1px solid ${PM.border}`,
              fontSize: 13, color: PM.textFaint,
            }}>Escreva uma mensagem…</div>
            <button style={{
              width: 36, height: 36, borderRadius: 18, border: 'none', background: PM.teal700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            }}>
              <Icons.Send size={14} color="#fff"/>
            </button>
          </div>
        </PMCard>
      </div>

      <PMSection title="Outras conversas">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { i: 'BC', name: 'Bruna Castro', role: 'Coach', last: 'Vi seu treino de ontem 💪 Z2 saudável.', when: '2h', unread: 1, color: '#fce7f3', fg: PM.rose },
            { i: 'NV', name: 'Núcleo Nutrição', role: 'Equipe', last: 'Lista de compras LPR atualizada', when: 'ontem', color: PM.sageSoft, fg: '#3f6212' },
            { i: 'L', name: 'Longevium · Suporte', role: 'Administrativo', last: 'Sua coleta foi confirmada para 6 dez', when: 'seg', color: PM.tealSoft, fg: PM.teal700 },
          ].map((c, i) => (
            <PMCard key={i} padding={12} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span style={{
                width: 38, height: 38, borderRadius: '50%', background: c.color,
                color: c.fg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700, flexShrink: 0,
              }}>{c.i}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: PM.text }}>{c.name}</span>
                  <span style={{ fontSize: 10.5, color: PM.textMute }}>· {c.role}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 10.5, color: PM.textMute }}>{c.when}</span>
                </div>
                <div style={{
                  fontSize: 12.5, color: c.unread ? PM.text : PM.textMute,
                  marginTop: 2, fontWeight: c.unread ? 600 : 400,
                  whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
                }}>{c.last}</div>
              </div>
              {c.unread ? (
                <span style={{
                  width: 18, height: 18, borderRadius: 9, background: PM.terracotta,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 10, fontWeight: 700, color: '#fff', flexShrink: 0,
                }}>{c.unread}</span>
              ) : null}
            </PMCard>
          ))}
        </div>
      </PMSection>

      <PMBottomNav active="chat"/>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 13 · AGENDA · próxima consulta
// ─────────────────────────────────────────────────────────────
function PtCalendarScreen({ T }) {
  const days = [
    { d: 14, w: 'Qui', today: true },
    { d: 15, w: 'Sex' },
    { d: 16, w: 'Sáb' },
    { d: 17, w: 'Dom' },
    { d: 18, w: 'Seg', dot: true },
    { d: 19, w: 'Ter' },
    { d: 20, w: 'Qua' },
  ];
  return (
    <PMShell>
      <PMHeader eyebrow="Sua agenda" title="Próximas semanas" big/>

      {/* Week strip */}
      <div style={{ padding: '8px 20px 0' }}>
        <div style={{ display: 'flex', gap: 6 }}>
          {days.map((d, i) => (
            <button key={i} style={{
              flex: 1, padding: '10px 0', borderRadius: 12,
              background: d.today ? PM.teal700 : PM.card,
              color: d.today ? '#fff' : PM.text,
              border: `1px solid ${d.today ? PM.teal700 : PM.border}`,
              cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              position: 'relative',
            }}>
              <span style={{ fontSize: 10, fontWeight: 600, opacity: 0.8 }}>{d.w}</span>
              <span style={{ fontSize: 18, fontWeight: 700, fontVariantNumeric: 'tabular-nums', letterSpacing: -0.5 }}>{d.d}</span>
              {d.dot ? <span style={{ width: 4, height: 4, borderRadius: 2, background: PM.terracotta, position: 'absolute', bottom: 5 }}/> : null}
            </button>
          ))}
        </div>
      </div>

      {/* Today blocks */}
      <PMSection title="Hoje · 14 nov">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          <PMCard padding={14}>
            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ width: 4, borderRadius: 2, background: PM.amber, flexShrink: 0 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontFamily: PM.fontMono, fontSize: 12, color: PM.textMute }}>17:00</span>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: PM.text }}>Caminhada Z2</span>
                </div>
                <div style={{ fontSize: 12, color: PM.textMute, marginTop: 2 }}>30 min · plano LPR</div>
              </div>
            </div>
          </PMCard>
          <PMCard padding={14}>
            <div style={{ display: 'flex', gap: 10 }}>
              <div style={{ width: 4, borderRadius: 2, background: PM.rose, flexShrink: 0 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontFamily: PM.fontMono, fontSize: 12, color: PM.textMute }}>22:00</span>
                  <span style={{ fontSize: 13.5, fontWeight: 600, color: PM.text }}>Respiração 4-7-8</span>
                </div>
                <div style={{ fontSize: 12, color: PM.textMute, marginTop: 2 }}>5 min · adicionada pela Dra. Helena</div>
              </div>
            </div>
          </PMCard>
        </div>
      </PMSection>

      {/* Next consultation hero */}
      <PMSection title="Próxima consulta">
        <PMCard padding={18} radius={20} bg={PM.teal50} border={PM.tealSoft}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{
              width: 52, height: 56, borderRadius: 12, background: '#fff',
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
              border: `1px solid ${PM.tealSoft}`, flexShrink: 0,
            }}>
              <span style={{ fontSize: 9, fontWeight: 700, color: PM.terracotta, letterSpacing: 0.5 }}>SEG</span>
              <span style={{ fontSize: 22, fontWeight: 700, color: PM.text, lineHeight: 1, fontFamily: PM.fontDisplay, letterSpacing: -0.5 }}>18</span>
              <span style={{ fontSize: 9, color: PM.textMute }}>nov</span>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.teal900 }}>Reavaliação ciclo 4 → 5</div>
              <div style={{ fontSize: 12, color: PM.teal700, marginTop: 4, lineHeight: 1.5 }}>
                Dra. Helena Marques · 09:00 · 50 min<br/>
                Longevium · Itaim · Sala 4
              </div>
            </div>
          </div>

          <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${PM.tealSoft}` }}>
            <div style={{ fontSize: 11, fontWeight: 600, color: PM.teal700, letterSpacing: 0.3, textTransform: 'uppercase', marginBottom: 8 }}>Antes de vir</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                { l: 'Responder questionário PHQ-9', done: true },
                { l: 'Revisar relatório de evolução', done: false },
                { l: 'Anotar 3 dúvidas para a consulta', done: false },
              ].map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 5,
                    background: t.done ? PM.ok : 'transparent',
                    border: `1.5px solid ${t.done ? PM.ok : PM.teal700}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>{t.done ? <Icons.Check size={11} color="#fff"/> : null}</span>
                  <span style={{
                    fontSize: 13, color: t.done ? PM.textMute : PM.text,
                    textDecoration: t.done ? 'line-through' : 'none',
                  }}>{t.l}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ marginTop: 14, display: 'flex', gap: 8 }}>
            <PMButton kind="primary" size="sm">Confirmar presença</PMButton>
            <PMButton kind="soft" size="sm">Reagendar</PMButton>
          </div>
        </PMCard>
      </PMSection>

      <PMBottomNav active="home"/>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 14 · EDUCAÇÃO · trilha LPR
// ─────────────────────────────────────────────────────────────
function PtLearnScreen({ T }) {
  return (
    <PMShell>
      <PMHeader eyebrow="Trilha LPR · Módulo 4 de 8" title="Por que sono é o pilar?" big/>

      {/* Module header card */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={0} radius={20} style={{ overflow: 'hidden' }}>
          <div style={{
            height: 140, background: 'linear-gradient(135deg, #312e81 0%, #6366f1 50%, #c7d2fe 100%)',
            position: 'relative', display: 'flex', alignItems: 'flex-end', padding: 16,
          }}>
            <div style={{
              position: 'absolute', top: 16, right: 16,
              width: 64, height: 64, opacity: 0.5,
              background: 'radial-gradient(circle, #fff, transparent 70%)',
              borderRadius: '50%',
            }}/>
            <Icons.Moon2 size={48} color="rgba(255,255,255,0.85)"/>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
              <PMPill tone="plum">Sono</PMPill>
              <PMPill tone="neutral">8 min de leitura</PMPill>
            </div>
            <div style={{ fontFamily: PM.fontDisplay, fontSize: 26, fontWeight: 700, color: PM.text, letterSpacing: -0.6, lineHeight: 1.2 }}>
              O sono não é descanso. É reconfiguração.
            </div>
            <div style={{ fontSize: 13.5, color: PM.textSoft, marginTop: 8, lineHeight: 1.55 }}>
              Por que dormir mal piora a glicemia, o humor e a inflamação — e por que esse é o primeiro pilar do seu protocolo.
            </div>
            <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 6 }}>
              <PMBar value={62} color={PM.plum} bg={PM.cardSoft} height={6}/>
              <span style={{ fontSize: 11, fontWeight: 600, color: PM.plum, fontVariantNumeric: 'tabular-nums', minWidth: 32 }}>62%</span>
            </div>
          </div>
        </PMCard>
      </div>

      {/* Path */}
      <PMSection title="Sua trilha">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { n: 1, t: 'O que é o protocolo LPR', sub: '6 min', state: 'done' },
            { n: 2, t: 'Os 8 domínios da biologia', sub: '12 min', state: 'done' },
            { n: 3, t: 'Como o Score funciona', sub: '8 min', state: 'done' },
            { n: 4, t: 'O sono como pilar', sub: '8 min · em andamento', state: 'now' },
            { n: 5, t: 'Glicemia e refeições', sub: '10 min', state: 'lock' },
            { n: 6, t: 'Inflamação silenciosa', sub: '7 min', state: 'lock' },
            { n: 7, t: 'Mente e ritmo do dia', sub: '9 min', state: 'lock' },
            { n: 8, t: 'Síntese e plano de manutenção', sub: '5 min', state: 'lock' },
          ].map((m) => (
            <PMCard key={m.n} padding={14} style={{ display: 'flex', alignItems: 'center', gap: 12, opacity: m.state === 'lock' ? 0.55 : 1 }}>
              <div style={{
                width: 32, height: 32, borderRadius: '50%',
                background: m.state === 'done' ? PM.ok : m.state === 'now' ? PM.terracotta : PM.cardSoft,
                color: m.state === 'lock' ? PM.textMute : '#fff',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 700, flexShrink: 0,
              }}>
                {m.state === 'done' ? <Icons.Check size={14} color="#fff"/> :
                 m.state === 'lock' ? <Icons.Lock size={12} color={PM.textMute}/> : m.n}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600, color: PM.text }}>{m.t}</div>
                <div style={{ fontSize: 11.5, color: PM.textMute, marginTop: 2 }}>{m.sub}</div>
              </div>
              {m.state === 'now' ? <PMPill tone="warn">Continuar</PMPill> : null}
            </PMCard>
          ))}
        </div>
      </PMSection>

      <PMBottomNav active="home"/>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 15 · PERFIL · privacidade + dispositivos
// ─────────────────────────────────────────────────────────────
function PtProfileScreen({ T }) {
  return (
    <PMShell>
      {/* Header — profile big */}
      <div style={{ padding: '12px 20px 0', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
        <button style={{
          width: 36, height: 36, borderRadius: 18, border: 'none',
          background: PM.card, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 1px 3px rgba(0,0,0,0.06)', cursor: 'pointer',
        }}>
          <Icons.Settings size={16} color={PM.textSoft}/>
        </button>
      </div>

      <div style={{ padding: '8px 20px 0', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
        <PMAvatar size={88} name="Mariana Corrêa"/>
        <div style={{ fontFamily: PM.fontDisplay, fontSize: 28, fontWeight: 700, color: PM.text, marginTop: 12, letterSpacing: -0.6 }}>
          Mariana Corrêa
        </div>
        <div style={{ fontSize: 13, color: PM.textMute, marginTop: 2 }}>42 anos · LPR-LR-1 · Ciclo 4</div>
        <div style={{ marginTop: 12 }}>
          <PMStreak days={47} label="dias no protocolo"/>
        </div>
      </div>

      {/* Quick stats */}
      <div style={{ padding: '20px 20px 0' }}>
        <PMCard padding={16}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            {[
              { l: 'Score atual', v: '74', c: PM.teal700 },
              { l: 'Pico de score', v: '74', c: PM.text },
              { l: 'Adesão geral', v: '91%', c: PM.ok },
            ].map((s, i) => (
              <div key={i} style={{ textAlign: 'center', borderRight: i < 2 ? `1px solid ${PM.border}` : 'none' }}>
                <div style={{ fontFamily: PM.fontDisplay, fontSize: 28, fontWeight: 700, color: s.c, letterSpacing: -0.5, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{s.v}</div>
                <div style={{ fontSize: 10.5, color: PM.textMute, marginTop: 4, fontWeight: 500 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </PMCard>
      </div>

      {/* Devices summary */}
      <PMSection title="Dispositivos conectados">
        <PMCard padding={14}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            <PMWearable kind="watch"/>
            <PMWearable kind="oura"/>
            <PMWearable kind="cgm"/>
            <button style={{
              padding: '4px 10px', borderRadius: 999, fontSize: 11, fontWeight: 600,
              background: PM.card, border: `1.5px dashed ${PM.borderStrong}`, color: PM.textMute, cursor: 'pointer',
            }}>+ adicionar</button>
          </div>
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${PM.border}`, fontSize: 11.5, color: PM.textMute }}>
            Última sincronização: <b style={{ color: PM.text }}>há 2 minutos</b>
          </div>
        </PMCard>
      </PMSection>

      {/* Settings list */}
      <PMSection title="Privacidade">
        <PMCard padding={0} style={{ overflow: 'hidden' }}>
          {[
            { i: <Icons.Shield size={16} color={PM.teal700}/>, l: 'Quem pode ver meus dados', v: '3 profissionais' },
            { i: <Icons.Database size={16} color={PM.teal700}/>, l: 'Exportar meus dados', v: 'PDF · CSV · FHIR' },
            { i: <Icons.Eye size={16} color={PM.teal700}/>, l: 'Pesquisa anônima', v: 'Desativada' },
            { i: <Icons.Lock size={16} color={PM.teal700}/>, l: 'Apagar minha conta', v: '', warn: true },
          ].map((row, i, arr) => (
            <div key={i} style={{
              padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
              borderBottom: i < arr.length - 1 ? `1px solid ${PM.border}` : 'none',
              cursor: 'pointer',
            }}>
              <span style={{
                width: 30, height: 30, borderRadius: 8, background: PM.teal50,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>{row.i}</span>
              <span style={{ flex: 1, fontSize: 13.5, fontWeight: 500, color: row.warn ? PM.bad : PM.text }}>{row.l}</span>
              <span style={{ fontSize: 12, color: PM.textMute }}>{row.v}</span>
              <Icons.ChevronR size={14} color={PM.textFaint}/>
            </div>
          ))}
        </PMCard>
      </PMSection>

      <PMBottomNav active="me"/>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 16 · SAFETY ALERT · crítico (recebido pelo paciente)
// ─────────────────────────────────────────────────────────────
function PtSafetyAlertScreen({ T }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: PM.bg,
      fontFamily: PM.fontUI, color: PM.text, position: 'relative',
      paddingTop: 62, display: 'flex', flexDirection: 'column',
    }}>
      {/* Top urgent banner */}
      <div style={{
        background: PM.bad, padding: '10px 20px',
        display: 'flex', alignItems: 'center', gap: 8, color: '#fff',
      }}>
        <Icons.ShieldX size={14} color="#fff"/>
        <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>Alerta clínico</span>
        <span style={{ marginLeft: 'auto', fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>agora · há 1 min</span>
      </div>

      <div className="lpr-scroll" style={{ flex: 1, overflow: 'auto', padding: '24px 20px 24px' }}>
        {/* Hero */}
        <div style={{ textAlign: 'center', padding: '12px 0 20px' }}>
          <div style={{
            width: 76, height: 76, borderRadius: 38, margin: '0 auto 16px',
            background: PM.badBg, border: `2px solid ${PM.badBorder}`,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icons.AlertTri size={34} color={PM.bad}/>
          </div>
          <div style={{ fontFamily: PM.fontDisplay, fontSize: 30, fontWeight: 700, color: PM.text, letterSpacing: -0.7, lineHeight: 1.15 }}>
            Pause o jejum<br/>de hoje, Mariana
          </div>
          <div style={{ fontSize: 14, color: PM.textSoft, marginTop: 12, maxWidth: 320, margin: '12px auto 0', lineHeight: 1.55 }}>
            Sua glicemia caiu para <b style={{ color: PM.bad }}>62 mg/dL</b> nos últimos 20 min. Faça uma refeição leve <b>agora</b> antes de continuar.
          </div>
        </div>

        {/* Live data card */}
        <PMCard padding={16} radius={18} bg={PM.badBg} border={PM.badBorder}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <Icons.Drop size={14} color={PM.bad}/>
            <span style={{ fontSize: 12, fontWeight: 600, color: PM.bad, letterSpacing: 0.3, textTransform: 'uppercase' }}>Glicemia · ao vivo</span>
            <span style={{
              marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4,
              fontSize: 10, color: PM.bad,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 3, background: PM.bad,
                animation: 'pulse 1.4s ease-in-out infinite',
              }}/>
              ao vivo
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
            <span style={{ fontFamily: PM.fontDisplay, fontSize: 56, fontWeight: 700, color: PM.bad, letterSpacing: -1.5, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>62</span>
            <span style={{ fontSize: 14, color: PM.bad, fontWeight: 500 }}>mg/dL</span>
            <span style={{ marginLeft: 'auto', fontFamily: PM.fontMono, fontSize: 12, color: PM.bad }}>↓ −18 em 20 min</span>
          </div>
          <div style={{ marginTop: 10 }}>
            <PMSpark values={[88,86,82,78,74,70,66,62]} width={300} height={32} color={PM.bad} fill="#fee2e2"/>
          </div>
        </PMCard>

        {/* What to do */}
        <div style={{ marginTop: 18 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: PM.textMute, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>Faça agora</div>
          <PMCard padding={0} style={{ overflow: 'hidden' }}>
            {[
              { n: 1, l: 'Coma 15g de carboidrato rápido', s: '½ banana, 3 biscoitos cream cracker, ou 1 colher de mel' },
              { n: 2, l: 'Aguarde 15 min e meça novamente', s: 'O CGM já está monitorando. Você verá uma confirmação no app' },
              { n: 3, l: 'Se não passar de 80 mg/dL, repita', s: 'E avise a Bruna pelo botão abaixo' },
            ].map((t, i, arr) => (
              <div key={i} style={{
                padding: 14, display: 'flex', alignItems: 'flex-start', gap: 12,
                borderBottom: i < arr.length - 1 ? `1px solid ${PM.border}` : 'none',
              }}>
                <span style={{
                  width: 24, height: 24, borderRadius: '50%', background: PM.bad,
                  color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 12, fontWeight: 700, flexShrink: 0,
                }}>{t.n}</span>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 600, color: PM.text }}>{t.l}</div>
                  <div style={{ fontSize: 12, color: PM.textMute, marginTop: 4, lineHeight: 1.5 }}>{t.s}</div>
                </div>
              </div>
            ))}
          </PMCard>
        </div>

        {/* Why */}
        <div style={{ marginTop: 18 }}>
          <PMCard padding={14} bg={PM.amber50} border={PM.amberSoft}>
            <div style={{ display: 'flex', gap: 10 }}>
              <Icons.ShieldChk size={16} color={PM.amber} style={{ flexShrink: 0, marginTop: 2 }}/>
              <div style={{ fontSize: 12.5, color: '#78350f', lineHeight: 1.5 }}>
                O <b>Safety Engine</b> pausou automaticamente o jejum desta noite e o lembrete da metformina das 19:30. A Dra. Helena já foi notificada.
              </div>
            </div>
          </PMCard>
        </div>

        {/* CTAs */}
        <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PMButton kind="danger" size="lg" full>Já fiz · marcar como resolvido</PMButton>
          <PMButton kind="secondary" size="md" full icon={<Icons.Send/>}>Falar com a Bruna agora</PMButton>
          <button style={{
            padding: 12, borderRadius: 12, border: 'none', background: 'transparent',
            fontSize: 12.5, color: PM.textMute, cursor: 'pointer',
          }}>Ligar para emergência (192)</button>
        </div>
      </div>
    </div>
  );
}

// Export
Object.assign(window, {
  PtActivityScreen, PtMindfulnessScreen, PtLabsScreen, PtMessagesScreen,
  PtCalendarScreen, PtLearnScreen, PtProfileScreen, PtSafetyAlertScreen,
});