<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-avatar class="logo">
        <img src="assets/icon/shennong.png" alt="禾大夫">
      </ion-avatar>
    </ion-buttons>
    
    <ion-title>
      <ion-label>
        <h1>禾大夫</h1>
        <p class="location">
          <ion-icon name="location"></ion-icon>
          <span id="current-location">正在定位...</span>
        </p>
      </ion-label>
    </ion-title>
    
    <ion-buttons slot="end">
      <ion-badge color="warning" slot="end">铜穗农夫 Lv.3</ion-badge>
      <ion-button fill="clear" id="notification-button">
        <ion-icon slot="icon-only" name="notifications"></ion-icon>
        <ion-badge color="danger" class="notification-badge">3</ion-badge>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 语音问答入口 -->
  <div class="voice-search-container">
    <ion-button (click)="startVoiceInput()" (pointerup)="stopVoiceInput()" 
                class="voice-button" fill="clear" shape="round">
      <div class="voice-button-inner">
        <ion-icon name="mic" class="mic-icon"></ion-icon>
        <div class="ripple"></div>
      </div>
    </ion-button>
    <p class="voice-hint">{{ isListening ? '松开发送，方言也能懂' : '长按说话，问问神农' }}</p>
  </div>

  <!-- 核心功能矩阵 -->
  <ion-grid class="feature-grid">
    <ion-row>
      <ion-col size="6" *ngFor="let feature of features">
        <ion-button (click)="navigateTo(feature.path)" fill="clear" class="feature-button">
          <div class="feature-icon">
            <ion-icon [name]="feature.icon" [class]="feature.animation"></ion-icon>
          </div>
          <ion-label>{{ feature.title }}</ion-label>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 新增的农业知识卡片 -->
  <ion-grid class="knowledge-cards">
    <ion-row>
      <ion-col size="6">
        <ion-card (click)="navigateTo('/crop-intro')" class="knowledge-card">
          <img src="assets/images/crops.jpg" alt="农作物介绍"/>
          <ion-card-header>
            <ion-card-title>农作物百科</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            了解各类农作物的生长特性、种植技术和品种特点
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col size="6">
        <ion-card (click)="navigateTo('/pest-intro')" class="knowledge-card">
          <img src="assets/images/pests.jpg" alt="病虫害防治"/>
          <ion-card-header>
            <ion-card-title>病虫害图鉴</ion-card-title>
          </ion-card-header>
          <ion-card-content>
            识别常见病虫害，学习防治方法和应对措施
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 动态信息流 -->
  <ion-list lines="none" class="info-stream">
    <!-- 气象预警 -->
    <ion-item class="weather-alert" detail (click)="openWeatherAlert()">
      <ion-icon slot="start" name="thunderstorm" color="danger"></ion-icon>
      <ion-label>
        <h2>气象预警</h2>
        <p>未来24小时降雨概率90% ⚠️ 建议延迟喷洒</p>
      </ion-label>
      <ion-badge slot="end" color="danger">紧急</ion-badge>
    </ion-item>
    
    <!-- 农技快讯 -->
    <ion-item class="agri-news" *ngFor="let news of newsList">
      <ion-thumbnail slot="start">
        <img [src]="news.image" [alt]="news.title">
      </ion-thumbnail>
      <ion-label>
        <h3>{{ news.title }}</h3>
        <p>{{ news.summary }}</p>
        <p class="news-meta">
          <ion-icon name="time"></ion-icon>
          {{ news.date }}
          <ion-icon name="eye"></ion-icon>
          {{ news.views }}
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-tabs>
    <ion-tab-bar slot="bottom" color="light">
      <ion-tab-button tab="home" selected>
        <ion-icon name="home"></ion-icon>
        <ion-label>首页</ion-label>
      </ion-tab-button>
      
      <ion-tab-button tab="knowledge">
        <ion-icon name="book"></ion-icon>
        <ion-label>知识库</ion-label>
      </ion-tab-button>
      
      <ion-tab-button tab="farm">
        <ion-icon name="leaf"></ion-icon>
        <ion-label>我的农场</ion-label>
      </ion-tab-button>
      
      <ion-tab-button tab="profile">
        <ion-icon name="person"></ion-icon>
        <ion-label>个人中心</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-footer>