// Patient mobile screens — part 1 of 2
// 1. Onboarding 1 · Welcome
// 2. Onboarding 2 · Conectar wearables
// 3. Onboarding 3 · Pareamento com médico
// 4. Score LPR · view detalhada
// 5. Plano do dia
// 6. Medicação · adesão
// 7. Refeição · check-in
// 8. Sono · análise

// ─────────────────────────────────────────────────────────────
// 1 · ONBOARDING — WELCOME
// ─────────────────────────────────────────────────────────────
function PtOnboardingWelcome({ T }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: PM.bg,
      fontFamily: PM.fontUI, color: PM.text, position: 'relative',
      display: 'flex', flexDirection: 'column',
      paddingTop: 62,
    }}>
      <div style={{ flex: 1, padding: '32px 28px 24px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          {/* Logo */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 56 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, background: PM.teal700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 700, fontSize: 14, letterSpacing: -0.3,
            }}>
              <span>L<span style={{ color: PM.tealSoft }}>P</span>R</span>
            </div>
            <span style={{ fontSize: 13, fontWeight: 600, color: PM.textMute, letterSpacing: 0.4 }}>LIFESTYLE PRECISION RESET</span>
          </div>

          {/* Hero */}
          <div style={{ marginTop: 20 }}>
            <div style={{ fontSize: 12, color: PM.terracotta, fontWeight: 600, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 14 }}>
              Olá, Mariana
            </div>
            <h1 style={{
              margin: 0, fontFamily: PM.fontDisplay, fontSize: 44, fontWeight: 700,
              lineHeight: 1.05, letterSpacing: -1.4, color: PM.text,
            }}>
              Saúde como um <span style={{ fontStyle: 'italic', color: PM.teal700 }}>processo</span>, não como um número.
            </h1>
            <p style={{ marginTop: 18, fontSize: 15.5, color: PM.textSoft, lineHeight: 1.55 }}>
              Vamos olhar para os <b>8 pilares da sua biologia</b> ao longo do tempo — sono, ritmo circadiano, glicemia, inflamação, atividade, nutrição, mente e ambiente.
            </p>
            <p style={{ marginTop: 12, fontSize: 14, color: PM.textMute, lineHeight: 1.55 }}>
              Você toma decisões com a sua médica. O app cuida de coletar e organizar os sinais.
            </p>
          </div>
        </div>

        {/* Visual — 8 círculos gradientes representando domínios */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, justifyContent: 'center', margin: '32px 0' }}>
          {[
            { c: '#7c3aed', l: 'Sono' },
            { c: '#0369a1', l: 'Circadiano' },
            { c: '#d97706', l: 'Glicemia' },
            { c: '#dc2626', l: 'Inflamação' },
            { c: '#65a30d', l: 'Atividade' },
            { c: '#16a34a', l: 'Nutrição' },
            { c: '#be185d', l: 'Mente' },
            { c: '#0d9488', l: 'Ambiente' },
          ].map((d, i) => (
            <div key={i} style={{
              padding: '8px 14px', borderRadius: 999,
              background: PM.card, border: `1px solid ${PM.border}`,
              display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12, color: PM.textSoft, fontWeight: 500,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: d.c }}/>
              {d.l}
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <PMButton kind="primary" size="lg" full iconRight={<Icons.ChevronR/>}>Começar configuração</PMButton>
          <div style={{ textAlign: 'center', fontSize: 12, color: PM.textMute }}>
            Já tem uma conta? <span style={{ color: PM.teal700, fontWeight: 600 }}>Entrar</span>
          </div>
          {/* Progress dots */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 6 }}>
            <span style={{ width: 22, height: 6, borderRadius: 3, background: PM.teal700 }}/>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2 · ONBOARDING — CONECTAR WEARABLES
// ─────────────────────────────────────────────────────────────
function PtOnboardingDevices({ T }) {
  const devices = [
    { name: 'Apple Watch', desc: 'Frequência, HRV, atividade, sono', state: 'connected', dot: '#000' },
    { name: 'Oura Ring', desc: 'Sono, temperatura, prontidão', state: 'connecting', dot: '#1c1917' },
    { name: 'Libre 3 (CGM)', desc: 'Glicemia contínua', state: 'pending', dot: '#fbbf24' },
    { name: 'Withings Body+', desc: 'Peso, composição corporal', state: 'available', dot: '#0369a1' },
    { name: 'Polar H10', desc: 'HRV em treinos', state: 'available', dot: '#dc2626' },
  ];
  return (
    <PMShell>
      <PMHeader
        eyebrow="Passo 2 de 3"
        title="Conecte seus dispositivos"
        subtitle="O Apple Health já é a fonte oficial. Os demais são opcionais e podem ser adicionados depois."
        big
      />
      <div style={{ padding: '20px 20px 0' }}>
        {/* Apple Health pill — primary */}
        <div style={{
          padding: 16, borderRadius: 16,
          background: 'linear-gradient(135deg, #f0fdfa, #ffffff)',
          border: `1.5px solid ${PM.tealSoft}`,
          display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16,
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12, background: PM.teal700,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icons.Heart size={22} color="#fff"/>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.text }}>Apple Health</div>
            <div style={{ fontSize: 12.5, color: PM.textMute }}>Fonte primária · 14 categorias autorizadas</div>
          </div>
          <PMPill tone="ok" icon={<Icons.Check size={11}/>}>Conectado</PMPill>
        </div>

        {/* Other devices */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {devices.map((d, i) => (
            <div key={i} style={{
              padding: 14, borderRadius: 14,
              background: PM.card, border: `1px solid ${PM.border}`,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 10, background: PM.cardSoft,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <span style={{ width: 14, height: 14, borderRadius: '50%', background: d.dot }}/>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: PM.text }}>{d.name}</div>
                <div style={{ fontSize: 11.5, color: PM.textMute, marginTop: 1 }}>{d.desc}</div>
              </div>
              {d.state === 'connected' && <PMPill tone="ok" icon={<Icons.Check size={11}/>}>Conectado</PMPill>}
              {d.state === 'connecting' && (
                <PMPill tone="info">
                  <span style={{
                    display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
                    background: PM.info, marginRight: 4,
                    animation: 'pulse 1.4s ease-in-out infinite',
                  }}/>
                  Pareando…
                </PMPill>
              )}
              {d.state === 'pending' && <PMPill tone="warn">Aguardando sensor</PMPill>}
              {d.state === 'available' && (
                <button style={{
                  padding: '6px 12px', borderRadius: 8, fontSize: 12, fontWeight: 600,
                  background: PM.card, border: `1px solid ${PM.borderStrong}`,
                  color: PM.text, cursor: 'pointer',
                }}>Conectar</button>
              )}
            </div>
          ))}
        </div>

        {/* Privacy note */}
        <div style={{
          marginTop: 18, padding: 14, borderRadius: 12,
          background: PM.amber50, border: `1px solid ${PM.amberSoft}`,
          display: 'flex', gap: 10,
        }}>
          <Icons.Shield size={16} color={PM.amber} style={{ flexShrink: 0, marginTop: 2 }}/>
          <div style={{ fontSize: 12.5, color: '#78350f', lineHeight: 1.5 }}>
            <b>Seus dados são seus.</b> Você compartilha somente com a Dra. Helena Marques e o time clínico vinculado. Pode revogar acesso a qualquer momento em <b>Eu → Privacidade</b>.
          </div>
        </div>
      </div>

      {/* Footer CTA fixed-style at bottom of scroll */}
      <div style={{ padding: '24px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <PMButton kind="primary" size="lg" full iconRight={<Icons.ChevronR/>}>Continuar</PMButton>
        <PMButton kind="ghost" size="sm" full>Pular por agora</PMButton>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
          <span style={{ width: 22, height: 6, borderRadius: 3, background: PM.teal700 }}/>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
        </div>
      </div>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 3 · ONBOARDING — PAREAMENTO COM MÉDICO (consentimento)
// ─────────────────────────────────────────────────────────────
function PtOnboardingPair({ T }) {
  const consents = [
    { id: 'data', label: 'Compartilhar dados de saúde', sub: 'Wearables, exames, questionários, autorrelato', on: true, required: true },
    { id: 'safety', label: 'Acionar Safety Engine', sub: 'O sistema pode bloquear protocolos contra-indicados em tempo real', on: true, required: true },
    { id: 'ai', label: 'Análise por IA do protocolo', sub: 'Detecção de padrões interdomínios e sugestões clínicas (ainda revisadas pelo médico)', on: true },
    { id: 'research', label: 'Uso anônimo em pesquisa', sub: 'Dados desidentificados podem alimentar a base de evidências do protocolo', on: false },
  ];
  return (
    <PMShell>
      <PMHeader
        eyebrow="Passo 3 de 3"
        title="Sua equipe clínica"
        subtitle="Você está vinculada à clínica abaixo. Confirme os consentimentos para iniciar."
        big
      />
      <div style={{ padding: '20px 20px 0' }}>
        {/* Clinic + doctor card */}
        <PMCard style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12, background: PM.teal700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
              fontFamily: PM.fontDisplay, fontSize: 20, fontWeight: 700,
            }}>L</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.text }}>Longevium Health · São Paulo</div>
              <div style={{ fontSize: 12, color: PM.textMute }}>R. Joaquim Floriano, 940 · Itaim</div>
            </div>
            <PMPill tone="teal">Verificada</PMPill>
          </div>

          <div style={{ height: 1, background: PM.border }}/>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{
              width: 44, height: 44, borderRadius: '50%',
              background: 'linear-gradient(135deg, #ccfbf1 0%, #5eead4 100%)',
              color: PM.teal900, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 16, fontWeight: 700,
            }}>HM</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.text }}>Dra. Helena Marques</div>
              <div style={{ fontSize: 12, color: PM.textMute }}>Endocrinologia · CRM/SP 168.402</div>
            </div>
            <PMPill tone="teal">Médica</PMPill>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{
              width: 44, height: 44, borderRadius: '50%',
              background: 'linear-gradient(135deg, #fce7f3 0%, #f9a8d4 100%)',
              color: PM.rose, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 16, fontWeight: 700,
            }}>BC</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14.5, fontWeight: 700, color: PM.text }}>Bruna Castro</div>
              <div style={{ fontSize: 12, color: PM.textMute }}>Coach LPR · suporte diário</div>
            </div>
            <PMPill tone="rose">Coach</PMPill>
          </div>
        </PMCard>

        <PMSection title="Consentimentos">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {consents.map((c) => (
              <div key={c.id} style={{
                padding: 14, borderRadius: 14, background: PM.card, border: `1px solid ${PM.border}`,
                display: 'flex', alignItems: 'flex-start', gap: 12,
              }}>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span style={{ fontSize: 14, fontWeight: 600, color: PM.text }}>{c.label}</span>
                    {c.required ? <PMPill tone="warn" style={{ padding: '2px 7px', fontSize: 10 }}>obrigatório</PMPill> : null}
                  </div>
                  <div style={{ fontSize: 12, color: PM.textMute, marginTop: 4, lineHeight: 1.5 }}>{c.sub}</div>
                </div>
                {/* iOS-style toggle */}
                <div style={{
                  width: 44, height: 26, borderRadius: 13, padding: 2, flexShrink: 0,
                  background: c.on ? PM.teal700 : PM.borderStrong,
                  display: 'flex', alignItems: 'center', justifyContent: c.on ? 'flex-end' : 'flex-start',
                  transition: 'all 0.2s',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%', background: '#fff',
                    boxShadow: '0 1px 2px rgba(0,0,0,0.2)',
                  }}/>
                </div>
              </div>
            ))}
          </div>
        </PMSection>

        <div style={{ padding: '14px 0 0', fontSize: 11.5, color: PM.textMute, lineHeight: 1.5 }}>
          Ao continuar, você aceita os <span style={{ color: PM.teal700, fontWeight: 600 }}>Termos do paciente LPR</span> e a <span style={{ color: PM.teal700, fontWeight: 600 }}>Política de privacidade</span>. Você pode revisar e revogar acessos a qualquer momento.
        </div>
      </div>

      <div style={{ padding: '24px 20px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <PMButton kind="primary" size="lg" full>Confirmar e entrar</PMButton>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: PM.borderStrong }}/>
          <span style={{ width: 22, height: 6, borderRadius: 3, background: PM.teal700 }}/>
        </div>
      </div>
    </PMShell>
  );
}

// ─────────────────────────────────────────────────────────────
// 4 · SCORE LPR — view detalhada (paciente)
// ─────────────────────────────────────────────────────────────
function PtScoreScreen({ T }) {
  // 12 weeks of LPR Score data
  const scoreSeries = [42, 45, 48, 52, 51, 56, 60, 64, 67, 71, 73, 74];
  const milestones = [
    { week: 4, label: 'Reset Circadiano', tone: 'sky' },
    { week: 8, label: 'Ajuste alimentar', tone: 'sage' },
    { week: 11, label: 'Block GLP-1', tone: 'rose' },
  ];
  const driverItems = [
    { label: 'Sono', delta: '+18', tone: 'sage', icon: 'Moon2' },
    { label: 'Glicemia', delta: '+12', tone: 'sage', icon: 'Drop' },
    { label: 'Inflamação', delta: '+9', tone: 'sage', icon: 'Activity' },
    { label: 'Mente', delta: '−4', tone: 'rose', icon: 'Brain' },
  ];

  return (
    <PMShell>
      <PMHeader title="Seu Score LPR" subtitle="Janela de 12 semanas · ciclo 4" big eyebrow="Quinta-feira · 14 nov" action={
        <button style={{
          padding: '8px 12px', borderRadius: 999, border: `1px solid ${PM.border}`,
          background: PM.card, fontSize: 12, fontWeight: 600, color: PM.textSoft, cursor: 'pointer',
        }}>12 sem ▾</button>
      }/>

      {/* Hero number */}
      <div style={{ padding: '12px 20px 0', textAlign: 'center' }}>
        <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 4,
            fontFamily: PM.fontDisplay, lineHeight: 1, letterSpacing: -3,
          }}>
            <span style={{ fontSize: 96, fontWeight: 700, color: PM.teal700, fontVariantNumeric: 'tabular-nums' }}>74</span>
            <span style={{ fontSize: 28, color: PM.textMute, fontWeight: 500, letterSpacing: -1 }}>/100</span>
          </div>
          <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <PMPill tone="ok" icon={<Icons.TrendUp size={11}/>}>+12 em 12 sem</PMPill>
            <PMPill tone="teal">Tendência verde</PMPill>
          </div>
          <div style={{ fontSize: 13, color: PM.textMute, marginTop: 12, maxWidth: 280, lineHeight: 1.5 }}>
            Está no melhor ponto do ciclo. <b style={{ color: PM.text }}>Sono</b> e <b style={{ color: PM.text }}>glicemia</b> são os motores; <b style={{ color: PM.rose }}>Mente</b> é o ponto de atenção.
          </div>
        </div>
      </div>

      {/* Big chart */}
      <div style={{ padding: '24px 20px 0' }}>
        <PMCard padding={18} radius={20}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: PM.textMute, letterSpacing: 0.3, textTransform: 'uppercase' }}>Evolução</span>
            <span style={{ fontSize: 11, color: PM.textFaint }}>Sem 1 → 12</span>
          </div>
          <PtScoreChart series={scoreSeries} milestones={milestones}/>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14 }}>
            {milestones.map((m, i) => (
              <PMPill key={i} tone={m.tone}>Sem {m.week} · {m.label}</PMPill>
            ))}
          </div>
        </PMCard>
      </div>

      {/* Drivers */}
      <PMSection title="O que está movendo seu score">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {driverItems.map((d, i) => {
            const Ic = Icons[d.icon];
            const isUp = d.delta.startsWith('+');
            return (
              <PMCard key={i} padding={14} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{
                    width: 26, height: 26, borderRadius: 7,
                    background: isUp ? PM.okBg : PM.badBg,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}><Ic size={13} color={isUp ? PM.ok : PM.bad}/></span>
                  <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: PM.text }}>{d.label}</span>
                </div>
                <div style={{ fontFamily: PM.fontDisplay, fontSize: 28, fontWeight: 700, color: isUp ? PM.ok : PM.bad, letterSpacing: -0.5, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                  {d.delta}
                </div>
                <div style={{ fontSize: 11, color: PM.textMute }}>vs. ciclo anterior</div>
              </PMCard>
            );
          })}
        </div>
      </PMSection>

      {/* Coach interpretation */}
      <PMSection title="Da sua médica">
        <PMCard padding={16} bg={PM.teal50} border={PM.tealSoft}>
          <PMCoachLine when="ontem">
            Mariana, esse salto na semana 11 foi você consolidando o ritmo de sono. <b>Para a próxima janela</b>, a meta é conter o estresse percebido — vamos retomar a respiração 4-7-8 noturna. Eu já agendei o lembrete às 22h.
          </PMCoachLine>
        </PMCard>
      </PMSection>

      {/* Compare */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMButton kind="secondary" size="md" full icon={<Icons.Layers/>}>Comparar com ciclo anterior</PMButton>
      </div>

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

// helper — score chart with milestones (renamed to avoid collision with doctor ScoreChart)
function PtScoreChart({ series, milestones = [] }) {
  const W = 340, H = 180, PAD = 14;
  const min = 30, max = 90; // fixed band for context
  const dx = (W - PAD * 2) / (series.length - 1);
  const yOf = (v) => H - PAD - ((v - min) / (max - min)) * (H - PAD * 2);
  const pts = series.map((v, i) => [PAD + i * dx, yOf(v)]);
  const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
  const area = `${d} L${PAD + (series.length - 1) * dx},${H - PAD} L${PAD},${H - PAD} Z`;

  // semaphore bands
  const bands = [
    { from: 30, to: 50, c: PM.badBg },
    { from: 50, to: 70, c: PM.warnBg },
    { from: 70, to: 90, c: PM.okBg },
  ];

  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
      {/* bands */}
      {bands.map((b, i) => (
        <rect key={i} x={PAD} y={yOf(b.to)} width={W - PAD * 2} height={yOf(b.from) - yOf(b.to)} fill={b.c} opacity={0.5}/>
      ))}
      {/* axis labels */}
      <text x={PAD - 4} y={yOf(50) + 3} fontSize={9} fill={PM.textFaint} textAnchor="end">50</text>
      <text x={PAD - 4} y={yOf(70) + 3} fontSize={9} fill={PM.textFaint} textAnchor="end">70</text>
      {/* milestone markers */}
      {milestones.map((m, i) => {
        const x = PAD + (m.week - 1) * dx;
        return (
          <g key={i}>
            <line x1={x} y1={PAD} x2={x} y2={H - PAD} stroke={PM.borderStrong} strokeDasharray="2 3" strokeWidth={1}/>
            <circle cx={x} cy={PAD + 6} r={4} fill="#fff" stroke={PM.terracotta} strokeWidth={1.5}/>
          </g>
        );
      })}
      {/* area + line */}
      <path d={area} fill={PM.teal50} opacity={0.7}/>
      <path d={d} fill="none" stroke={PM.teal700} strokeWidth={2.5} strokeLinejoin="round" strokeLinecap="round"/>
      {/* points */}
      {pts.map((p, i) => {
        const v = series[i];
        const isLast = i === pts.length - 1;
        return (
          <g key={i}>
            <circle cx={p[0]} cy={p[1]} r={isLast ? 5 : 3} fill="#fff" stroke={PM.teal700} strokeWidth={isLast ? 2.5 : 1.5}/>
            {isLast ? (
              <g>
                <rect x={p[0] - 22} y={p[1] - 26} width={44} height={20} rx={4} fill={PM.teal700}/>
                <text x={p[0]} y={p[1] - 12} fontSize={11} fontWeight={700} fill="#fff" textAnchor="middle" fontFamily={PM.fontMono}>{v}</text>
              </g>
            ) : null}
          </g>
        );
      })}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// 5 · PLANO DO DIA
// ─────────────────────────────────────────────────────────────
function PtPlanScreen({ T }) {
  const blocks = [
    {
      time: '06:30',
      title: 'Luz natural · 10 min',
      sub: 'Reset circadiano matinal',
      icon: 'Sun',
      tone: 'amber',
      done: true,
    },
    {
      time: '07:00',
      title: 'Café com proteína',
      sub: '≥ 30g proteína · sem açúcar adicionado',
      icon: 'Apple',
      tone: 'sage',
      done: true,
      data: 'Você marcou 32g · ótimo',
    },
    {
      time: '07:30',
      title: 'Metformina XR · 500mg',
      sub: 'Lembrete em 5 min',
      icon: 'Pill',
      tone: 'info',
      done: false,
      now: true,
    },
    {
      time: '12:30',
      title: 'Almoço · prato montado LPR',
      sub: 'Vegetais > proteína > carbo lento',
      icon: 'Apple',
      tone: 'sage',
      done: false,
    },
    {
      time: '17:00',
      title: 'Caminhada Z2 · 30 min',
      sub: 'FC alvo: 110-130 bpm',
      icon: 'Activity',
      tone: 'sage',
      done: false,
    },
    {
      time: '21:00',
      title: 'Janela de jejum começa',
      sub: 'Última refeição até 21h · 14h de jejum',
      icon: 'Clock',
      tone: 'plum',
      done: false,
    },
    {
      time: '22:00',
      title: 'Respiração 4-7-8 · 5 min',
      sub: 'Adicionado pela Dra. Helena ontem',
      icon: 'Brain',
      tone: 'rose',
      done: false,
      flag: 'Novo',
    },
  ];

  return (
    <PMShell>
      <PMHeader
        eyebrow="Quinta-feira · 14 nov"
        title="Plano do dia"
        subtitle="2 de 7 concluídas · próxima ação em 5 minutos"
        big
      />

      {/* Today summary */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={18} radius={20} style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <PMRing value={29} max={100} size={92} stroke={9} color={PM.teal700} label="do dia"/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, color: PM.textMute, fontWeight: 500 }}>Em alta</div>
            <div style={{ fontSize: 17, fontWeight: 700, color: PM.text, letterSpacing: -0.3, marginTop: 4 }}>
              Está no ritmo
            </div>
            <div style={{ fontSize: 12.5, color: PM.textSoft, marginTop: 6, lineHeight: 1.5 }}>
              Você está adiantada na luz e proteína da manhã. Mantém o ritmo do almoço e segue.
            </div>
            <div style={{ marginTop: 10 }}>
              <PMStreak days={11} label="dias seguidos"/>
            </div>
          </div>
        </PMCard>
      </div>

      {/* Timeline */}
      <PMSection title="Cronograma">
        <div style={{ position: 'relative', paddingLeft: 56 }}>
          {/* vertical line */}
          <div style={{
            position: 'absolute', left: 36, top: 8, bottom: 8, width: 2,
            background: PM.border,
          }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {blocks.map((b, i) => {
              const Ic = Icons[b.icon];
              const toneMap = {
                amber: { fg: PM.amber, bg: PM.amberSoft, br: PM.amberSoft },
                sage:  { fg: '#3f6212', bg: PM.sageSoft, br: PM.sageSoft },
                info:  { fg: PM.info, bg: PM.infoBg, br: PM.infoBorder },
                plum:  { fg: PM.plum, bg: PM.plumSoft, br: PM.plumSoft },
                rose:  { fg: PM.rose, bg: PM.roseSoft, br: PM.roseSoft },
              };
              const c = toneMap[b.tone] || toneMap.info;
              return (
                <div key={i} style={{ position: 'relative' }}>
                  {/* time label */}
                  <div style={{
                    position: 'absolute', left: -56, top: 14, width: 38, textAlign: 'right',
                    fontSize: 11, fontWeight: 600, color: PM.textMute, fontVariantNumeric: 'tabular-nums',
                  }}>{b.time}</div>
                  {/* icon node */}
                  <div style={{
                    position: 'absolute', left: -29, top: 8, width: 26, height: 26, borderRadius: 13,
                    background: b.done ? PM.ok : c.bg, border: `2px solid ${PM.bg}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    boxShadow: b.now ? `0 0 0 4px ${PM.amberSoft}` : 'none',
                  }}>
                    {b.done ? <Icons.Check size={14} color="#fff"/> : <Ic size={12} color={c.fg}/>}
                  </div>
                  {/* card */}
                  <div style={{
                    padding: 14, borderRadius: 14, background: PM.card,
                    border: `1px solid ${b.now ? PM.amber : PM.border}`,
                    boxShadow: b.now ? `0 4px 14px rgba(217, 119, 6, 0.15)` : 'none',
                    opacity: b.done ? 0.65 : 1,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                          <span style={{
                            fontSize: 14.5, fontWeight: 600, color: PM.text,
                            textDecoration: b.done ? 'line-through' : 'none',
                          }}>{b.title}</span>
                          {b.now ? <PMPill tone="warn" style={{ padding: '2px 7px', fontSize: 10 }}>Agora</PMPill> : null}
                          {b.flag ? <PMPill tone="rose" style={{ padding: '2px 7px', fontSize: 10 }}>{b.flag}</PMPill> : null}
                        </div>
                        <div style={{ fontSize: 12, color: PM.textMute, marginTop: 3 }}>{b.sub}</div>
                        {b.data ? (
                          <div style={{ fontSize: 11.5, color: PM.ok, marginTop: 6, fontWeight: 500 }}>
                            ✓ {b.data}
                          </div>
                        ) : null}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </PMSection>

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

// ─────────────────────────────────────────────────────────────
// 6 · MEDICAÇÃO · ADESÃO
// ─────────────────────────────────────────────────────────────
function PtMedicationScreen({ T }) {
  const meds = [
    { name: 'Metformina XR', dose: '500mg', sched: '07:30 e 19:30', taken: 22, total: 28, status: 'ok' },
    { name: 'Vitamina D3', dose: '5.000UI', sched: 'café da manhã', taken: 13, total: 14, status: 'ok' },
    { name: 'Magnésio glicinato', dose: '400mg', sched: '21:00', taken: 12, total: 14, status: 'ok' },
    { name: 'Ômega-3 EPA/DHA', dose: '2g', sched: 'almoço', taken: 9, total: 14, status: 'warn' },
  ];
  const week = ['S','T','Q','Q','S','S','D'];
  // 4 weeks of adherence — green/yellow/gray/red dots
  const grid = [
    ['ok','ok','ok','ok','ok','warn','ok'],
    ['ok','ok','ok','ok','ok','ok','ok'],
    ['ok','warn','ok','ok','ok','ok','warn'],
    ['ok','ok','ok','ok','ok','ok','ok'],
  ];
  const map = { ok: PM.ok, warn: PM.warn, miss: PM.bad, none: PM.borderStrong };

  return (
    <PMShell>
      <PMHeader eyebrow="Medicação" title="Sua adesão" subtitle="Últimos 28 dias" big/>

      {/* Headline */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={18} radius={20}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 24 }}>
            <PMBigMetric value="91" unit="%" label="Adesão geral" color={PM.teal700}/>
            <div style={{ flex: 1, paddingBottom: 6 }}>
              <div style={{ fontSize: 12.5, color: PM.textSoft, lineHeight: 1.5 }}>
                Você está acima da meta clínica de <b>85%</b>. Seguir nesse ritmo melhora a previsibilidade da glicemia.
              </div>
            </div>
          </div>

          {/* 28-day grid */}
          <div style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8, paddingLeft: 30 }}>
              {week.map((d, i) => (
                <span key={i} style={{ fontSize: 10, color: PM.textFaint, fontWeight: 600, width: 24, textAlign: 'center' }}>{d}</span>
              ))}
            </div>
            {grid.map((row, r) => (
              <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <span style={{ width: 24, fontSize: 10, color: PM.textFaint, fontWeight: 500 }}>S{r+1}</span>
                {row.map((c, i) => (
                  <span key={i} style={{
                    width: 24, height: 24, borderRadius: 6,
                    background: c === 'ok' ? PM.okBg : c === 'warn' ? PM.warnBg : PM.cardSoft,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    border: `1px solid ${c === 'ok' ? PM.okBorder : c === 'warn' ? PM.warnBorder : PM.border}`,
                  }}>
                    {c === 'ok' ? <Icons.Check size={11} color={PM.ok}/> :
                     c === 'warn' ? <Icons.Minus size={11} color={PM.warn}/> : null}
                  </span>
                ))}
              </div>
            ))}
          </div>
        </PMCard>
      </div>

      <PMSection title="Suas medicações" action={
        <span style={{ fontSize: 12, fontWeight: 600, color: PM.teal700 }}>+ Adicionar</span>
      }>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {meds.map((m, i) => {
            const pct = Math.round((m.taken / m.total) * 100);
            return (
              <PMCard key={i} padding={14}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{
                    width: 38, height: 38, borderRadius: 10, background: PM.teal50,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <Icons.Pill size={17} color={PM.teal700}/>
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, flexWrap: 'wrap' }}>
                      <span style={{ fontSize: 14.5, fontWeight: 600, color: PM.text }}>{m.name}</span>
                      <span style={{ fontSize: 12, color: PM.textMute }}>{m.dose}</span>
                    </div>
                    <div style={{ fontSize: 11.5, color: PM.textMute, marginTop: 2 }}>{m.sched}</div>
                    <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                      <PMBar value={pct} color={m.status === 'ok' ? PM.ok : PM.warn} bg={PM.cardSoft} height={6}/>
                      <span style={{ fontSize: 12, fontWeight: 700, color: m.status === 'ok' ? PM.ok : PM.warn, fontVariantNumeric: 'tabular-nums', minWidth: 36 }}>
                        {m.taken}/{m.total}
                      </span>
                    </div>
                  </div>
                </div>
              </PMCard>
            );
          })}
        </div>
      </PMSection>

      {/* Coach note about ômega */}
      <PMSection title="Atenção">
        <PMCard bg={PM.warnBg} border={PM.warnBorder} padding={14}>
          <div style={{ display: 'flex', gap: 10 }}>
            <Icons.AlertTri size={16} color={PM.warn} style={{ flexShrink: 0, marginTop: 2 }}/>
            <div style={{ fontSize: 13, color: '#78350f', lineHeight: 1.5 }}>
              <b>Ômega-3 está em 64%.</b> Quer que eu lembre você 30 min antes do almoço por uma semana?
              <div style={{ marginTop: 10, display: 'flex', gap: 8 }}>
                <PMButton kind="warm" size="sm">Sim, lembrar</PMButton>
                <PMButton kind="ghost" size="sm">Agora não</PMButton>
              </div>
            </div>
          </div>
        </PMCard>
      </PMSection>

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

// ─────────────────────────────────────────────────────────────
// 7 · REFEIÇÃO · CHECK-IN
// ─────────────────────────────────────────────────────────────
function PtMealScreen({ T }) {
  const [mood, setMood] = React.useState(4);
  return (
    <PMShell>
      <PMHeader eyebrow="Almoço · 12:50" title="Como foi a refeição?" subtitle="Leva ~30 segundos. Seu CGM já registrou a curva." big/>

      {/* CGM card — appears glucose-curve from the meal */}
      <div style={{ padding: '8px 20px 0' }}>
        <PMCard padding={18} radius={20} style={{ background: 'linear-gradient(180deg, #fffbeb 0%, #ffffff 70%)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <Icons.Drop size={14} color={PM.amber}/>
            <span style={{ fontSize: 13, fontWeight: 600, color: PM.text }}>Curva de glicemia · Libre 3</span>
            <PMPill tone="ok" style={{ marginLeft: 'auto' }}>Pico saudável</PMPill>
          </div>
          <GlucoseCurve/>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
            <div>
              <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500 }}>Pré-refeição</div>
              <div style={{ fontFamily: PM.fontMono, fontSize: 16, fontWeight: 600, color: PM.text }}>92 mg/dL</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500 }}>Pico</div>
              <div style={{ fontFamily: PM.fontMono, fontSize: 16, fontWeight: 600, color: PM.amber }}>134 mg/dL</div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500 }}>Δ pico</div>
              <div style={{ fontFamily: PM.fontMono, fontSize: 16, fontWeight: 600, color: PM.ok }}>+42</div>
            </div>
          </div>
        </PMCard>
      </div>

      {/* Quick photo + tags */}
      <PMSection title="Registro">
        <PMCard padding={14}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{
              width: 76, height: 76, borderRadius: 12, background: PM.cardSoft,
              border: `2px dashed ${PM.borderStrong}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Icons.Plus size={22} color={PM.textMute}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: PM.text }}>Adicionar foto</div>
              <div style={{ fontSize: 11.5, color: PM.textMute, marginTop: 2, lineHeight: 1.5 }}>Opcional. Ajuda a Bruna a entender o seu prato real.</div>
            </div>
          </div>
          <div style={{ height: 1, background: PM.border, margin: '14px 0' }}/>
          <div style={{ fontSize: 12, fontWeight: 600, color: PM.textMute, marginBottom: 8, letterSpacing: 0.3, textTransform: 'uppercase' }}>Composição</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {[
              { l: 'Vegetais ½ prato', on: true },
              { l: 'Proteína animal', on: true },
              { l: 'Grão integral', on: true },
              { l: 'Folhas verdes', on: true },
              { l: 'Açúcar adicionado', on: false },
              { l: 'Ultraprocessado', on: false },
              { l: 'Álcool', on: false },
            ].map((t, i) => (
              <button key={i} style={{
                padding: '8px 12px', borderRadius: 999, fontSize: 12.5, fontWeight: 500,
                background: t.on ? PM.teal50 : PM.card,
                color: t.on ? PM.teal700 : PM.textSoft,
                border: `1.5px solid ${t.on ? PM.teal700 : PM.border}`,
                cursor: 'pointer',
              }}>
                {t.on ? '✓ ' : '+ '}{t.l}
              </button>
            ))}
          </div>
        </PMCard>
      </PMSection>

      {/* Hunger / satiety scale */}
      <PMSection title="Saciedade depois da refeição">
        <PMCard padding={14}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: PM.textMute, marginBottom: 10 }}>
            <span>Ainda com fome</span>
            <span>Saciada</span>
            <span>Estufada</span>
          </div>
          <PMMoodScale value={mood} onChange={setMood} labels={['😋','🙂','😌','😐','😣']}/>
        </PMCard>
      </PMSection>

      {/* Submit */}
      <div style={{ padding: '20px 20px 0' }}>
        <PMButton kind="primary" size="lg" full>Registrar refeição</PMButton>
      </div>

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

function GlucoseCurve() {
  // Synthetic glucose curve points for a meal
  const W = 340, H = 110, PAD = 14;
  const pts = [
    [0, 92], [15, 96], [30, 110], [45, 128], [60, 134], [75, 124], [90, 108], [105, 98], [120, 94],
  ];
  const min = 70, max = 160;
  const dx = (W - PAD * 2) / (pts.length - 1);
  const yOf = (v) => H - PAD - ((v - min) / (max - min)) * (H - PAD * 2);
  const coords = pts.map((p, i) => [PAD + i * dx, yOf(p[1])]);
  const d = coords.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0]},${p[1].toFixed(1)}`).join(' ');
  const area = `${d} L${PAD + (pts.length - 1) * dx},${H - PAD} L${PAD},${H - PAD} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: 'block' }}>
      {/* target band 70-140 */}
      <rect x={PAD} y={yOf(140)} width={W - PAD * 2} height={yOf(70) - yOf(140)} fill={PM.okBg} opacity={0.5}/>
      <line x1={PAD} y1={yOf(140)} x2={W - PAD} y2={yOf(140)} stroke={PM.ok} strokeDasharray="3 3" strokeWidth={1}/>
      <text x={W - PAD - 2} y={yOf(140) - 4} fontSize={9} fill={PM.ok} textAnchor="end">140</text>
      <path d={area} fill={PM.amberSoft} opacity={0.5}/>
      <path d={d} fill="none" stroke={PM.amber} strokeWidth={2.5} strokeLinejoin="round" strokeLinecap="round"/>
      {/* peak point */}
      <circle cx={coords[4][0]} cy={coords[4][1]} r={5} fill="#fff" stroke={PM.amber} strokeWidth={2.5}/>
      <text x={coords[4][0]} y={coords[4][1] - 10} fontSize={10} fontWeight={700} fill={PM.amber} textAnchor="middle" fontFamily={PM.fontMono}>134</text>
      {/* time labels */}
      <text x={coords[0][0]} y={H - 2} fontSize={9} fill={PM.textFaint} textAnchor="middle">12:50</text>
      <text x={coords[4][0]} y={H - 2} fontSize={9} fill={PM.textFaint} textAnchor="middle">+1h</text>
      <text x={coords[8][0]} y={H - 2} fontSize={9} fill={PM.textFaint} textAnchor="middle">+2h</text>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// 8 · SONO · ANÁLISE
// ─────────────────────────────────────────────────────────────
function PtSleepScreen({ T }) {
  const stages = [
    { stage: 'Despertar', mins: 18, color: '#fda4af', pct: 4 },
    { stage: 'REM',       mins: 92, color: '#a5b4fc', pct: 21 },
    { stage: 'Leve',      mins: 218, color: '#67e8f9', pct: 48 },
    { stage: 'Profundo',  mins: 122, color: '#5eead4', pct: 27 },
  ];
  const week = [
    { d: 'Sex', h: 6.4, q: 72 },
    { d: 'Sáb', h: 7.8, q: 81 },
    { d: 'Dom', h: 8.1, q: 84 },
    { d: 'Seg', h: 7.2, q: 78 },
    { d: 'Ter', h: 6.8, q: 70 },
    { d: 'Qua', h: 7.4, q: 76 },
    { d: 'Qui', h: 7.5, q: 82 },
  ];

  return (
    <PMShell>
      <PMHeader eyebrow="Sono · esta noite" title="7h 30min" subtitle="0:32 → 08:02 · acordou 1x" big action={
        <PMWearable kind="oura"/>
      }/>

      {/* hero — score ring */}
      <div style={{ padding: '4px 20px 0', display: 'flex', alignItems: 'center', gap: 16 }}>
        <PMRing value={82} max={100} size={104} stroke={10} color={PM.plum} label="qualidade"/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div>
              <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500 }}>FC repouso</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontFamily: PM.fontDisplay, fontSize: 22, fontWeight: 700, color: PM.text, fontVariantNumeric: 'tabular-nums' }}>54</span>
                <span style={{ fontSize: 11, color: PM.textMute }}>bpm</span>
                <PMPill tone="ok" style={{ padding: '1px 6px', fontSize: 10, marginLeft: 4 }}>−2</PMPill>
              </div>
            </div>
            <div>
              <div style={{ fontSize: 11, color: PM.textMute, fontWeight: 500 }}>HRV</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                <span style={{ fontFamily: PM.fontDisplay, fontSize: 22, fontWeight: 700, color: PM.text, fontVariantNumeric: 'tabular-nums' }}>48</span>
                <span style={{ fontSize: 11, color: PM.textMute }}>ms</span>
                <PMPill tone="ok" style={{ padding: '1px 6px', fontSize: 10, marginLeft: 4 }}>+5</PMPill>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Hipnograma simplificado */}
      <PMSection title="Estágios">
        <PMCard padding={16}>
          {/* horizontal stacked bar */}
          <div style={{ display: 'flex', height: 20, borderRadius: 8, overflow: 'hidden', marginBottom: 12 }}>
            {stages.map((s, i) => (
              <div key={i} style={{ width: `${s.pct}%`, background: s.color }}/>
            ))}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {stages.map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 10, height: 10, borderRadius: 3, background: s.color }}/>
                <span style={{ flex: 1, fontSize: 12.5, color: PM.textSoft }}>{s.stage}</span>
                <span style={{ fontFamily: PM.fontMono, fontSize: 12, fontWeight: 600, color: PM.text }}>
                  {Math.floor(s.mins/60)}h {s.mins%60}min
                </span>
              </div>
            ))}
          </div>
        </PMCard>
      </PMSection>

      {/* Week */}
      <PMSection title="Últimos 7 dias">
        <PMCard padding={16}>
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 120 }}>
            {week.map((w, i) => {
              const max = 9;
              const h = (w.h / max) * 96;
              const isToday = i === week.length - 1;
              return (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                  <span style={{ fontSize: 9, color: PM.textFaint, fontFamily: PM.fontMono }}>{w.h}h</span>
                  <div style={{
                    width: '100%', maxWidth: 28, height: h,
                    background: isToday ? PM.plum : PM.plumSoft,
                    borderRadius: 6,
                  }}/>
                  <span style={{ fontSize: 10, color: isToday ? PM.plum : PM.textMute, fontWeight: isToday ? 700 : 500 }}>{w.d}</span>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 14, fontSize: 12, color: PM.textSoft, lineHeight: 1.5 }}>
            Média da semana: <b>7h 18min</b> · meta: 7h30. Você está conseguindo manter consistência depois do <b style={{ color: PM.plum }}>Reset Circadiano</b>.
          </div>
        </PMCard>
      </PMSection>

      {/* Insights */}
      <PMSection title="O que olhamos">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <PMCard padding={14}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <Icons.TrendUp size={18} color={PM.ok} style={{ flexShrink: 0, marginTop: 2 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: PM.text }}>Sono profundo voltou ao alvo</div>
                <div style={{ fontSize: 12, color: PM.textMute, marginTop: 4, lineHeight: 1.5 }}>
                  2h 02min · primeira vez em 3 semanas. A respiração de 22h provavelmente ajudou.
                </div>
              </div>
            </div>
          </PMCard>
          <PMCard padding={14}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <Icons.AlertCir size={18} color={PM.amber} style={{ flexShrink: 0, marginTop: 2 }}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: PM.text }}>Despertou às 03:42</div>
                <div style={{ fontSize: 12, color: PM.textMute, marginTop: 4, lineHeight: 1.5 }}>
                  18 min acordada. Pode ter sido temperatura — o quarto subiu para 23°C. Veja se ajusta o ar.
                </div>
              </div>
            </div>
          </PMCard>
        </div>
      </PMSection>

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

// Export to global
Object.assign(window, {
  PtOnboardingWelcome, PtOnboardingDevices, PtOnboardingPair,
  PtScoreScreen, PtPlanScreen, PtMedicationScreen, PtMealScreen, PtSleepScreen,
});
