// Home — Bento Grid Dashboard

window.HomeScreen = function HomeScreen({ T, onNavigate, gestante, setGestante, lastProbs }) {
  const top3 = (lastProbs || []).slice(0, 3);
  return (
    <div style={{ padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* Greeting */}
      <div style={{ paddingTop: 14, paddingBottom: 4 }}>
        <SectionLabel>Bom dia · 14 Mai</SectionLabel>
        <h1 style={{
          fontFamily: 'Georgia, "Source Serif Pro", serif',
          fontSize: 32, lineHeight: 1.05, margin: '8px 0 0',
          color: T.ink, letterSpacing: -0.5, fontWeight: 500,
          textWrap: 'pretty',
        }}>
          Parasitas<br/><span style={{ fontStyle: 'italic', color: T.forest }}>em Foco.</span>
        </h1>
        <p style={{
          margin: '10px 0 0', fontSize: 14.5, lineHeight: 1.45,
          color: T.inkSoft, maxWidth: 300,
        }}>
          Triagem pré‑clínica baseada em evidências. Processamento local. Sem diagnóstico — uma ponte para o seu médico.
        </p>
      </div>

      {/* HERO — Iniciar Triagem */}
      <button onClick={() => onNavigate('triagem')} style={{
        all: 'unset', cursor: 'pointer', position: 'relative',
        background: T.forestDeep, color: '#fff',
        borderRadius: 24, padding: 20, overflow: 'hidden',
        boxShadow: '0 14px 40px -10px rgba(15,81,71,0.4)',
      }}>
        <div style={{
          position: 'absolute', top: -40, right: -40, width: 200, height: 200,
          borderRadius: '50%',
          background: `radial-gradient(circle, ${T.acid}55 0%, ${T.acid}00 65%)`,
        }}/>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <Pill color={T.acid} bg={`${T.acid}1f`}>Análise Bayesiana</Pill>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
            width: 36, height: 36, borderRadius: 999, background: T.acid, color: T.forestDeep }}>
            <Icon name="arrow" size={18} stroke={2.2}/>
          </div>
        </div>
        <div style={{
          fontFamily: 'Georgia, serif', fontSize: 26, lineHeight: 1.1,
          marginTop: 28, letterSpacing: -0.3, position: 'relative',
        }}>
          Iniciar<br/><span style={{ color: T.acid, fontStyle: 'italic' }}>triagem clínica</span>
        </div>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'baseline', gap: 14, marginTop: 16, paddingTop: 14,
          borderTop: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 22, fontWeight: 500 }}>6</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1 }}>Etapas</div>
          </div>
          <div style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.12)' }}/>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 22, fontWeight: 500 }}>~4min</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1 }}>Tempo médio</div>
          </div>
          <div style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.12)' }}/>
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 22, fontWeight: 500 }}>22</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1 }}>Parasitas</div>
          </div>
        </div>
      </button>

      {/* Bento Row: last analysis + gestante toggle */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.45fr 1fr', gap: 12 }}>
        {/* Last analysis */}
        <button onClick={() => onNavigate('triagem')} style={{
          all: 'unset', cursor: 'pointer',
          background: T.paper === '#fbf3f5' ? '#fff' : '#fff',
          borderRadius: 22, padding: 16,
          border: `1px solid ${T.hair}`,
          display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <SectionLabel color={T.inkSoft}>Última análise</SectionLabel>
            <Icon name="clock" size={14} color={T.inkMuted} stroke={1.6}/>
          </div>
          {top3.length > 0 ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {top3.map(p => (
                <div key={p.id}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5, color: T.ink, marginBottom: 4 }}>
                    <span style={{ fontWeight: 500 }}>{p.popular}</span>
                    <span style={{ fontFamily: 'ui-monospace, monospace', color: T.inkSoft }}>{Math.round(p.prob * 100)}%</span>
                  </div>
                  <ProbBar value={p.prob} color={p.color}/>
                </div>
              ))}
            </div>
          ) : (
            <div style={{ fontSize: 13, color: T.inkSoft, lineHeight: 1.45, padding: '8px 0' }}>
              Nenhuma triagem ainda. Comece pelo card verde para gerar seu primeiro relatório.
            </div>
          )}
          <div style={{
            marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 6,
            fontSize: 12, color: T.forest, fontWeight: 600,
          }}>
            {top3.length ? 'Ver relatório completo' : 'Iniciar agora'} <Icon name="chevron" size={12} stroke={2.2}/>
          </div>
        </button>

        {/* Gestante toggle */}
        <div style={{
          position: 'relative',
          background: gestante ? T.forest : T.paperWarm,
          color: gestante ? '#fff' : T.ink,
          borderRadius: 22, padding: 16, overflow: 'hidden',
          border: `1px solid ${gestante ? 'transparent' : T.hair}`,
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 8,
        }}>
          <div onClick={() => setGestante(!gestante)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
            <Icon name="pregnant" size={24} color={gestante ? T.acid : T.forest} stroke={1.6}/>
            <div>
              <div style={{ fontFamily: 'Georgia, serif', fontSize: 17, lineHeight: 1.15, letterSpacing: -0.2 }}>
                Modo<br/>Gestante
              </div>
              <div style={{ fontSize: 11, color: gestante ? 'rgba(255,255,255,0.6)' : T.inkMuted, marginTop: 6,
                fontFamily: 'ui-monospace, monospace', letterSpacing: 0.6, textTransform: 'uppercase' }}>
                {gestante ? '● Ativo' : '○ Inativo'}
              </div>
            </div>
          </div>
          {gestante && (
            <button onClick={() => onNavigate('gestante')} style={{
              all: 'unset', cursor: 'pointer', marginTop: 8, padding: '6px 10px',
              background: 'rgba(255,255,255,0.15)', borderRadius: 12,
              fontSize: 11, fontWeight: 600, textAlign: 'center', color: '#fff'
            }}>
              Abrir Guia →
            </button>
          )}
        </div>
      </div>

      {/* Bento Row: Prevenção + Hemograma */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 12 }}>
        <button onClick={() => onNavigate('prevencao')} style={{
          all: 'unset', cursor: 'pointer',
          background: T.moss, color: '#fff',
          borderRadius: 22, padding: 16, position: 'relative', overflow: 'hidden',
          minHeight: 150,
        }}>
          <Icon name="leaf" size={22} color="#fff" stroke={1.6}/>
          <div style={{ fontFamily: 'Georgia, serif', fontSize: 18, lineHeight: 1.1, marginTop: 14, letterSpacing: -0.2 }}>
            Prevenção
          </div>
          <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 4, lineHeight: 1.4 }}>
            Hábitos de higiene e controle ambiental.
          </div>
          {/* progress ring */}
          <div style={{ marginTop: 14, display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1, height: 5, borderRadius: 99, background: 'rgba(255,255,255,0.18)', overflow: 'hidden' }}>
              <div style={{ width: '62%', height: '100%', background: T.acid, borderRadius: 99 }}/>
            </div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 13, fontWeight: 500 }}>8<span style={{ opacity: 0.5 }}>/13</span></div>
          </div>
        </button>

        <button onClick={() => onNavigate('hemograma')} style={{
          all: 'unset', cursor: 'pointer',
          background: '#fff', borderRadius: 22, padding: 16,
          border: `1px solid ${T.hair}`, minHeight: 150,
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <Icon name="flask" size={22} color={T.water} stroke={1.6}/>
            <Pill color={T.water} bg={`${T.water}14`}>Lab</Pill>
          </div>
          <div style={{ fontFamily: 'Georgia, serif', fontSize: 18, lineHeight: 1.1, marginTop: 14, letterSpacing: -0.2, color: T.ink }}>
            Simulador<br/>de hemograma
          </div>
          <div style={{ fontSize: 12, color: T.inkSoft, marginTop: 6, lineHeight: 1.4 }}>
            Interprete eosinófilos, basófilos e ferritina.
          </div>
        </button>
      </div>

      {/* Catalog highlights */}
      <div style={{ marginTop: 6 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px 10px' }}>
          <SectionLabel>Destaques do Catálogo</SectionLabel>
          <button onClick={() => onNavigate('biblioteca')} style={{
            all: 'unset', cursor: 'pointer', fontSize: 12, color: T.forest, fontWeight: 600,
          }}>Ver todos →</button>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto', margin: '0 -20px', padding: '0 20px 4px',
          scrollSnapType: 'x mandatory' }}>
          {PARASITES.slice(0, 5).map(p => (
            <button key={p.id} onClick={() => onNavigate('parasite', p.id)} style={{
              all: 'unset', cursor: 'pointer', scrollSnapAlign: 'start',
              minWidth: 168, background: '#fff', borderRadius: 20,
              padding: 14, border: `1px solid ${T.hair}`,
              display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{
                height: 86, borderRadius: 14, background: `${p.color}12`,
                position: 'relative', overflow: 'hidden',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <div style={{
                  position: 'absolute', inset: 0, opacity: 0.25,
                  backgroundImage: `repeating-linear-gradient(45deg, ${p.color} 0 1px, transparent 1px 6px)`,
                }}/>
                <Pill color={p.color} bg="rgba(255,255,255,0.85)" style={{ fontSize: 10, position: 'relative' }}>{p.kind}</Pill>
              </div>
              <div>
                <div style={{ fontFamily: 'Georgia, serif', fontStyle: 'italic', fontSize: 13.5, color: T.inkSoft, lineHeight: 1.1 }}>
                  {p.name}
                </div>
                <div style={{ fontSize: 14.5, color: T.ink, fontWeight: 500, marginTop: 2 }}>
                  {p.popular}
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
};