/* Nuya — Histórico, Chat, Calendário mockups */

// ═════════════════════════════════════════════════════════════════
// HISTÓRICO — current
// ═════════════════════════════════════════════════════════════════
function HistoricoCurrent() {
  const Stat = ({ n, l, bg }) => (
    <div style={{
      flex: 1, background: bg, borderRadius: 20, padding: 12,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
    }}>
      <div style={{ fontSize: 13, color: '#402e94' }}>⚗</div>
      <div style={{ fontSize: 20, fontWeight: 700, color: '#402e94' }}>{n}</div>
      <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.6)' }}>{l}</div>
    </div>
  );
  const Trend = ({ name, val, unit, status, spark, bg }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      background: 'white', border: '1px solid #fbe2e2', borderRadius: 20,
      padding: '10px 12px', marginBottom: 6,
      boxShadow: '0 1px 2px rgba(0,0,0,0.03)',
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 11, fontWeight: 600, color: '#402e94' }}>{name}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 2 }}>
          <div style={{ fontSize: 14, fontWeight: 700, color: '#402e94' }}>{val}</div>
          <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.6)' }}>{unit}</div>
        </div>
        <div style={{ fontSize: 8, color: 'rgba(64,46,148,0.5)', marginTop: 1 }}>3 resultados · 15/03/26</div>
      </div>
      <div style={{ display: 'flex', gap: 2, alignItems: 'flex-end', width: 44, height: 22 }}>
        {spark.map((h, i) => (
          <div key={i} style={{ flex: 1, background: '#2e7d32', height: `${h}%`, borderRadius: 1 }} />
        ))}
      </div>
      <div style={{ background: bg, color: status === 'alto' ? '#e65100' : '#2e7d32', fontSize: 9, padding: '3px 6px', borderRadius: 8, fontWeight: 600 }}>{status}</div>
    </div>
  );
  return (
    <div style={{ height: '100%', padding: '0 18px', position: 'relative' }}>
      <div style={{ width: 32, height: 32, borderRadius: 16, background: '#f8f6f1', border: '1px solid #fbe2e2', marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#402e94' }}>←</div>
      <div style={{ fontSize: 22, fontWeight: 700, color: '#402e94', marginTop: 14, letterSpacing: '-0.02em' }}>Meu Histórico</div>
      <div style={{ fontSize: 11, color: 'rgba(64,46,148,0.6)', marginTop: 2 }}>Sua evolução de saúde ao longo do tempo</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 16 }}>
        <Stat n="24" l="Resultados" bg="#dde9f8" />
        <Stat n="8" l="Documentos" bg="#fbf1d2" />
        <Stat n="2" l="Alertas" bg="#fbe2e2" />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 16, marginBottom: 8 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
          <div style={{ width: 6, height: 6, borderRadius: 3, background: '#c62828' }} />
          <div style={{ fontSize: 12, fontWeight: 700, color: '#402e94' }}>Alertas recentes</div>
        </div>
        <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.55)' }}>Ver todos</div>
      </div>
      <Trend name="Colesterol LDL" val="142" unit="mg/dL" status="alto" spark={[40,50,70,90,100]} bg="#FFF3E0" />
      <Trend name="Glicemia jejum" val="98" unit="mg/dL" status="normal" spark={[60,55,65,60,58]} bg="#dcefe0" />
      <div style={{ fontSize: 12, fontWeight: 700, color: '#402e94', marginTop: 12 }}>Principais resultados</div>
      <div style={{ marginTop: 8 }}>
        <Trend name="Hemoglobina" val="13.2" unit="g/dL" status="normal" spark={[60,65,70,68,72]} bg="#dcefe0" />
      </div>
      <TabBarCurrent active={1}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// HISTÓRICO — proposed: narrative evolution, one hero trend + list
// ═════════════════════════════════════════════════════════════════
function HistoricoProposed() {
  return (
    <div style={{ height: '100%', padding: '0 20px', background: '#fbf9f4', color: '#1a1033', position: 'relative' }}>
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ width: 32, height: 32, borderRadius: 10, background: 'white', border: '1px solid rgba(26,16,51,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>←</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(26,16,51,0.55)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
          {Ico.search('rgba(26,16,51,0.5)')} Buscar
        </div>
      </div>
      <div style={{ marginTop: 14 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(26,16,51,0.45)' }}>Saúde</div>
        <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 30, fontWeight: 400, letterSpacing: '-0.025em', marginTop: 2, lineHeight: 1 }}>
          Sua <span style={{ fontStyle: 'italic', color: '#402e94' }}>evolução</span>
        </div>
      </div>

      {/* Segmented period */}
      <div style={{ display: 'flex', gap: 4, marginTop: 14, background: 'rgba(26,16,51,0.05)', borderRadius: 999, padding: 3, fontFamily: 'JetBrains Mono, monospace', fontSize: 10 }}>
        {['3M', '6M', '1A', 'TUDO'].map((p, i) => (
          <div key={p} style={{
            flex: 1, textAlign: 'center', padding: '6px 0', borderRadius: 999,
            background: i === 2 ? 'white' : 'transparent',
            fontWeight: i === 2 ? 700 : 500,
            color: i === 2 ? '#1a1033' : 'rgba(26,16,51,0.5)',
            boxShadow: i === 2 ? '0 1px 2px rgba(26,16,51,0.1)' : 'none',
            letterSpacing: '0.08em',
          }}>{p}</div>
        ))}
      </div>

      {/* Hero chart */}
      <div style={{
        marginTop: 14, background: 'white', borderRadius: 22, padding: '14px 16px 12px',
        border: '1px solid rgba(26,16,51,0.06)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 600 }}>Colesterol LDL</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 2 }}>
              <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 30, fontWeight: 400, letterSpacing: '-0.03em', color: '#c04626' }}>142</div>
              <div style={{ fontSize: 10, color: 'rgba(26,16,51,0.5)' }}>mg/dL</div>
            </div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: '#c04626', background: 'rgba(255,122,92,0.1)', padding: '3px 7px', borderRadius: 6, letterSpacing: '0.08em' }}>↑ ACIMA</div>
            <div style={{ fontSize: 9, color: 'rgba(26,16,51,0.5)', marginTop: 4 }}>ideal &lt;100</div>
          </div>
        </div>
        {/* svg line */}
        <svg width="100%" height="78" viewBox="0 0 280 78" style={{ marginTop: 8 }}>
          {/* reference band */}
          <rect x="0" y="42" width="280" height="18" fill="#dcefe0" opacity="0.5" rx="2" />
          <line x1="0" y1="42" x2="280" y2="42" stroke="#2e7d4f" strokeDasharray="2,3" strokeWidth="0.8" opacity="0.5"/>
          {/* line */}
          <path d="M8 60 L60 56 L112 48 L164 38 L216 28 L272 20" stroke="#402e94" strokeWidth="1.8" fill="none" strokeLinecap="round"/>
          {/* current point */}
          <circle cx="272" cy="20" r="4" fill="#c04626"/>
          <circle cx="272" cy="20" r="8" fill="#c04626" opacity="0.18"/>
          {/* dots */}
          {[[8,60],[60,56],[112,48],[164,38],[216,28]].map(([x,y],i)=>
            <circle key={i} cx={x} cy={y} r="2.5" fill="white" stroke="#402e94" strokeWidth="1.2"/>
          )}
        </svg>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 9, color: 'rgba(26,16,51,0.4)', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>
          <span>DEZ</span><span>FEV</span><span>ABR</span>
        </div>
      </div>

      {/* Section tag */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 18 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(26,16,51,0.5)' }}>Marcadores</div>
        <div style={{ fontSize: 10, color: 'rgba(26,16,51,0.45)' }}>12 ativos</div>
      </div>

      {/* Compact list — typographic, status bar on left */}
      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 0 }}>
        {[
          { n: 'Glicemia jejum', v: '98', u: 'mg/dL', s: 'normal', c: '#2e7d4f' },
          { n: 'Hemoglobina', v: '13.2', u: 'g/dL', s: 'normal', c: '#2e7d4f' },
          { n: 'TSH', v: '4.8', u: 'μIU/mL', s: 'limite', c: '#d97706' },
          { n: 'Vitamina D', v: '22', u: 'ng/mL', s: 'baixo', c: '#1565c0' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '3px 1fr auto auto', gap: 12,
            alignItems: 'center', padding: '10px 0',
            borderBottom: '1px solid rgba(26,16,51,0.06)',
          }}>
            <div style={{ width: 3, height: 28, background: r.c, borderRadius: 2 }} />
            <div style={{ fontSize: 12, fontWeight: 500 }}>{r.n}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 3 }}>
              <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 16, fontWeight: 500 }}>{r.v}</div>
              <div style={{ fontSize: 9, color: 'rgba(26,16,51,0.45)' }}>{r.u}</div>
            </div>
            <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: r.c, letterSpacing: '0.06em', textTransform: 'uppercase' }}>{r.s}</div>
          </div>
        ))}
      </div>
      <TabBarProposed active={1}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// CHAT — current
// ═════════════════════════════════════════════════════════════════
function ChatCurrent() {
  return (
    <div style={{ height: '100%', padding: '0 16px', position: 'relative' }}>
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 36, height: 36, borderRadius: 18, background: '#e8e3fb', border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#402e94' }}>{Ico.spark('#402e94')}</div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, color: '#402e94' }}>Nuya IA</div>
          <div style={{ fontSize: 9, color: 'rgba(64,46,148,0.55)' }}>Seu assistente de saúde</div>
        </div>
      </div>
      <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {/* assistant */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '85%', background: '#e8e3fb', borderRadius: 16, padding: '10px 12px', fontSize: 11, color: '#402e94', lineHeight: 1.4 }}>
          Olá Cami! Vi que seu exame de março mostra LDL em 142 mg/dL. Quer conversar sobre?
        </div>
        {/* user */}
        <div style={{ alignSelf: 'flex-end', maxWidth: '85%', background: '#402e94', color: 'white', borderRadius: 16, padding: '10px 12px', fontSize: 11, lineHeight: 1.4 }}>
          Sim, o que significa?
        </div>
        <div style={{ alignSelf: 'flex-start', maxWidth: '88%', background: '#e8e3fb', borderRadius: 16, padding: '10px 12px', fontSize: 11, color: '#402e94', lineHeight: 1.4 }}>
          LDL é o "colesterol ruim". O ideal é ficar abaixo de 100 mg/dL. 142 indica um risco aumentado. Fatores que podem influenciar: dieta, exercício, genética.
        </div>
      </div>
      {/* Suggestion chips */}
      <div style={{ position: 'absolute', bottom: 96, left: 16, right: 16, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        {['Como reduzir?', 'Ver evolução', 'Alimentos'].map(s=>(
          <div key={s} style={{ fontSize: 10, padding: '6px 10px', borderRadius: 999, background: '#f8f6f1', border: '1px solid #fbe2e2', color: '#402e94' }}>{s}</div>
        ))}
      </div>
      {/* Input */}
      <div style={{ position: 'absolute', bottom: 78, left: 16, right: 16, height: 42, background: '#f8f6f1', borderRadius: 21, border: '1px solid #fbe2e2', display: 'flex', alignItems: 'center', padding: '0 6px 0 14px', gap: 8 }}>
        <div style={{ flex: 1, fontSize: 11, color: 'rgba(64,46,148,0.5)' }}>Pergunte sobre sua saúde...</div>
        <div style={{ width: 30, height: 30, borderRadius: 15, background: '#402e94', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {Ico.send('white')}
        </div>
      </div>
      <TabBarCurrent active={3}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// CHAT — proposed
// ═════════════════════════════════════════════════════════════════
function ChatProposed() {
  return (
    <div style={{ height: '100%', background: '#fbf9f4', color: '#1a1033', position: 'relative', display: 'flex', flexDirection: 'column' }}>
      {/* header */}
      <div style={{ padding: '14px 20px 12px', borderBottom: '1px solid rgba(26,16,51,0.06)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 28, height: 28, borderRadius: 14, background: '#1a1033', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Ico.spark('#ffe4dc')}</div>
            <div>
              <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 18, fontWeight: 500 }}>Nuya</div>
              <div style={{ fontSize: 9, color: 'rgba(26,16,51,0.5)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 4, height: 4, borderRadius: 2, background: '#2e7d4f' }} /> Contexto carregado
              </div>
            </div>
          </div>
          <div style={{ fontSize: 14, color: 'rgba(26,16,51,0.4)' }}>⋯</div>
        </div>
      </div>

      <div style={{ flex: 1, padding: '16px 20px', display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden' }}>
        {/* date separator */}
        <div style={{ textAlign: 'center', fontSize: 9, color: 'rgba(26,16,51,0.4)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          Terça · 21 ABR
        </div>
        {/* assistant */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '88%' }}>
          <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(26,16,51,0.4)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4, marginLeft: 2 }}>SALU</div>
          <div style={{ fontSize: 12.5, lineHeight: 1.55, color: '#1a1033' }}>
            Olá, Cami. Seu LDL subiu para <span style={{ color: '#c04626', fontWeight: 600 }}>142 mg/dL</span> — o ideal é abaixo de 100.
          </div>
          {/* inline data card */}
          <div style={{ marginTop: 8, background: 'white', border: '1px solid rgba(26,16,51,0.08)', borderRadius: 14, padding: '10px 12px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontSize: 10, fontWeight: 600 }}>LDL — últimos 6 meses</div>
              <div style={{ fontSize: 9, color: '#c04626', fontFamily: 'JetBrains Mono, monospace' }}>+18%</div>
            </div>
            <svg width="100%" height="34" viewBox="0 0 240 34" style={{ marginTop: 4 }}>
              <path d="M4 28 L50 26 L96 22 L142 18 L188 14 L236 8" stroke="#402e94" strokeWidth="1.5" fill="none" strokeLinecap="round"/>
              <circle cx="236" cy="8" r="3.5" fill="#c04626"/>
            </svg>
          </div>
        </div>
        {/* user */}
        <div style={{ alignSelf: 'flex-end', maxWidth: '80%', background: '#1a1033', color: 'white', borderRadius: '18px 18px 4px 18px', padding: '9px 14px', fontSize: 12.5, lineHeight: 1.5 }}>
          Como posso reduzir?
        </div>
        {/* assistant reply */}
        <div style={{ alignSelf: 'flex-start', maxWidth: '88%' }}>
          <div style={{ fontSize: 12.5, lineHeight: 1.55 }}>
            Três alavancas com maior impacto pro seu caso:
          </div>
          <div style={{ marginTop: 6, display: 'flex', flexDirection: 'column', gap: 4 }}>
            {['Reduzir gorduras saturadas', 'Aeróbico 150min / semana', 'Aumentar fibras solúveis'].map((x, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, fontSize: 11.5, color: 'rgba(26,16,51,0.8)' }}>
                <span style={{ fontFamily: 'Fraunces, Georgia, serif', fontStyle: 'italic', color: '#ff7a5c', fontWeight: 500 }}>0{i+1}</span>
                <span>{x}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Suggestion row */}
      <div style={{ padding: '0 20px 8px', display: 'flex', gap: 6, overflow: 'hidden' }}>
        {['Plano alimentar', 'Ver evolução', 'Avisar cardio?'].map((s, i) => (
          <div key={s} style={{
            fontSize: 10, padding: '7px 11px', borderRadius: 999,
            background: 'white', border: '1px solid rgba(26,16,51,0.1)',
            fontWeight: 500, color: '#1a1033', whiteSpace: 'nowrap',
          }}>{s}</div>
        ))}
      </div>
      {/* Input */}
      <div style={{ padding: '8px 20px 96px' }}>
        <div style={{
          height: 48, background: 'white', borderRadius: 24,
          border: '1px solid rgba(26,16,51,0.1)',
          display: 'flex', alignItems: 'center', padding: '0 6px 0 18px', gap: 8,
          boxShadow: '0 2px 6px rgba(26,16,51,0.05)',
        }}>
          <div style={{ flex: 1, fontSize: 12, color: 'rgba(26,16,51,0.4)' }}>Pergunte sobre sua saúde…</div>
          <div style={{ width: 36, height: 36, borderRadius: 18, background: '#ff7a5c', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {Ico.send('white')}
          </div>
        </div>
      </div>
      <TabBarProposed active={3}/>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════════
// CALENDÁRIO — proposed (just one view)
// ═════════════════════════════════════════════════════════════════
function CalendarProposed() {
  const days = ['D','S','T','Q','Q','S','S'];
  const grid = [null,null,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
  return (
    <div style={{ height: '100%', background: '#fbf9f4', color: '#1a1033', padding: '0 20px', position: 'relative' }}>
      <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(26,16,51,0.5)' }}>Agenda</div>
          <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 28, fontWeight: 400, letterSpacing: '-0.02em', marginTop: 2 }}>
            <span style={{ fontStyle: 'italic', color: '#402e94' }}>Abril</span> 2026
          </div>
        </div>
        <div style={{ width: 36, height: 36, borderRadius: 12, background: '#1a1033', color: '#ffe4dc', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {Ico.plus('#ffe4dc')}
        </div>
      </div>

      {/* compact month */}
      <div style={{ marginTop: 12, background: 'white', border: '1px solid rgba(26,16,51,0.06)', borderRadius: 20, padding: '12px 10px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 3, marginBottom: 4 }}>
          {days.map((d, i) => <div key={i} style={{ textAlign: 'center', fontSize: 9, color: 'rgba(26,16,51,0.4)', fontFamily: 'JetBrains Mono, monospace' }}>{d}</div>)}
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 3 }}>
          {grid.map((d, i) => {
            if (!d) return <div key={i} />;
            const today = d === 21;
            const hasEvent = [3,9,15,21,24,28].includes(d);
            const eventColor = d === 21 ? '#ff7a5c' : d === 24 ? '#402e94' : '#d4a520';
            return (
              <div key={i} style={{
                aspectRatio: 1, borderRadius: 10, display: 'flex', flexDirection: 'column',
                alignItems: 'center', justifyContent: 'center', gap: 2,
                background: today ? '#1a1033' : 'transparent',
                color: today ? 'white' : '#1a1033',
                fontSize: 11, fontWeight: today ? 600 : 400,
                fontFamily: today ? 'JetBrains Mono, monospace' : 'inherit',
              }}>
                <div>{d}</div>
                {hasEvent && !today && <div style={{ width: 4, height: 4, borderRadius: 2, background: eventColor }} />}
                {today && <div style={{ width: 16, height: 2, background: '#ff7a5c', borderRadius: 1 }} />}
              </div>
            );
          })}
        </div>
      </div>

      {/* agenda list */}
      <div style={{ marginTop: 16 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(26,16,51,0.5)', marginBottom: 10 }}>Próximos 7 dias</div>
        {[
          { d: '21', m: 'ABR', day: 'Hoje', t: '14:30', title: 'Dra. Helena · Endócrino', sub: 'Hospital Sírio Libanês', c: '#402e94' },
          { d: '24', m: 'ABR', day: 'Sexta', t: '08:00', title: 'Exame de sangue', sub: 'Lab Fleury · em jejum', c: '#ff7a5c' },
          { d: '28', m: 'ABR', day: 'Terça', t: 'todo dia', title: 'Vitamina D · fim curso', sub: '7 dias restantes', c: '#d4a520' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '42px 1fr', gap: 14,
            padding: '12px 0', borderBottom: '1px solid rgba(26,16,51,0.06)',
            alignItems: 'center',
          }}>
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: 'Fraunces, Georgia, serif', fontSize: 22, fontWeight: 400, lineHeight: 1, letterSpacing: '-0.02em', color: r.c }}>{r.d}</div>
              <div style={{ fontSize: 8, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em', color: 'rgba(26,16,51,0.4)', marginTop: 2 }}>{r.m}</div>
            </div>
            <div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <div style={{ fontSize: 9, fontFamily: 'JetBrains Mono, monospace', color: 'rgba(26,16,51,0.45)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{r.day} · {r.t}</div>
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 500, marginTop: 2 }}>{r.title}</div>
              <div style={{ fontSize: 10, color: 'rgba(26,16,51,0.55)' }}>{r.sub}</div>
            </div>
          </div>
        ))}
      </div>
      <TabBarProposed active={4}/>
    </div>
  );
}

Object.assign(window, { HistoricoCurrent, HistoricoProposed, ChatCurrent, ChatProposed, CalendarProposed });