<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <!-- 搜索和筛选区域 -->
    <ion-buttons slot="start">
      <ion-button>
        <ion-icon slot="icon-only" name="search-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    
    <ion-searchbar 
      placeholder="搜索健康资讯、互助话题等" 
      class="custom-searchbar"
      mode="ios"
      style="--background: #f5f5f5; --border-radius: 10px">
    </ion-searchbar>

    <ion-buttons slot="end">
      <ion-button>
        <ion-icon slot="icon-only" name="filter-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 健康资讯区 -->
  <ion-list-header class="section-title">
    <ion-label>健康资讯</ion-label>
  </ion-list-header>
  
  <ion-card *ngFor="let item of healthNews" class="news-card">
    <div class="news-tag" [style.background]="item.tagColor">{{item.tag}}</div>
    <ion-img [src]="item.image" class="news-image"></ion-img>
    <ion-card-header>
      <ion-card-title class="news-title">{{item.title}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p class="news-summary">{{item.summary}}</p>
      <div class="news-footer">
        <span class="news-source">{{item.source}}</span>
        <span class="news-time">{{item.time}}</span>
      </div>
    </ion-card-content>
    <ion-buttons slot="end" class="action-buttons">
      <ion-button (click)="toggleLike(item)">
        <ion-icon [name]="item.liked ? 'heart' : 'heart-outline'" 
                 [color]="item.liked ? 'primary' : 'medium'"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="chatbubble-outline" color="medium"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="share-social-outline" color="medium"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-card>

  <!-- 互助社区区 -->
  <ion-list-header class="section-title">
    <ion-label>互助社区</ion-label>
  </ion-list-header>

  <ion-card *ngFor="let topic of communityTopics" class="topic-card">
    <div class="topic-tag">{{topic.tag}}</div>
    <ion-card-header>
      <ion-avatar slot="start" class="user-avatar">
        <img [src]="topic.user.avatar">
      </ion-avatar>
      <ion-card-subtitle>{{topic.user.name}} · {{topic.user.condition}}</ion-card-subtitle>
      <ion-card-title class="topic-title">{{topic.title}}</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p class="topic-preview">{{topic.content}}</p>
      <div class="topic-stats">
        <ion-badge color="light">
          <ion-icon name="people-outline"></ion-icon>
          {{topic.participants}} 人参与
        </ion-badge>
        <ion-badge color="light">
          <ion-icon name="chatbubbles-outline"></ion-icon>
          {{topic.answers}} 个回答
        </ion-badge>
      </div>
    </ion-card-content>
  </ion-card>

  <!-- 健康工具区 -->
  <ion-list-header class="section-title">
    <ion-label>健康工具</ion-label>
  </ion-list-header>

  <ion-grid class="tools-grid">
    <ion-row>
      <ion-col size="6" *ngFor="let tool of healthTools">
        <ion-card class="tool-card">
          <ion-icon [name]="tool.icon" class="tool-icon" color="primary"></ion-icon>
          <ion-card-header>
            <ion-card-title class="tool-title">{{tool.name}}</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            <p class="tool-description">{{tool.description}}</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>