// tu.jsx — "Tú" screen. Header + dos cards: Balance y Tareas completadas.

function TuScreen({ tasks, family, theme, density, tab, setTab, onEditPillars, onSettings }) {
  return (
    <div style={{ paddingBottom: 140 }}>
      {/* Header — misma estructura exacta que Home y Mes:
          caps + botón (h32, mb12) · título 24 (mb4) · subline 13 (mb16) */}
      <div style={{
        background: headerGradient(theme, false),
        color: 'white',
        padding: '64px 18px 18px',
      }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
          marginBottom: 12,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: 1.3,
            color: 'rgba(255,255,255,0.65)', marginTop: 4,
          }}>TU ESPACIO</div>
          <button onClick={onEditPillars} style={{
            appearance: 'none', cursor: 'pointer',
            background: 'rgba(255,255,255,0.15)', border: 'none',
            height: 32, padding: '0 12px', borderRadius: 10,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: 'white', fontSize: 12, fontWeight: 600,
            fontFamily: 'inherit', letterSpacing: -0.05,
          }}>
            <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
              <path d="M11.5 2.5l2 2-7 7H4.5v-2l7-7z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
            </svg>
            Pilares
          </button>
        </div>
        <div style={{
          fontSize: 24, fontWeight: 700, letterSpacing: -0.4,
          lineHeight: 1.15, marginBottom: 4,
        }}>Tú</div>
        <div style={{
          fontSize: 13, color: 'rgba(255,255,255,0.78)', marginBottom: 16,
        }}>Cómo vas y lo que sí pasó</div>
      </div>

      {/* View switcher */}
      <div style={{ padding: '14px 18px 4px' }}>
        <ViewSwitcher value={tab} onChange={setTab} theme={theme} />
      </div>

      <WeeklyBalance tasks={tasks} theme={theme} />
      <LogrosCard tasks={tasks} theme={theme} />
    </div>
  );
}

Object.assign(window, { TuScreen });