<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      墨韵连连
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <!-- 搜索卡片 -->
  <ion-card class="notification-card">
    <ion-item lines="none">
      <ion-icon name="search" slot="start" color="primary"></ion-icon>
      <ion-searchbar placeholder="搜索作者或风格..."></ion-searchbar>
    </ion-item>
  </ion-card>

  <!-- Logo -->
  <div class="logo-wrapper">
    <img src="assets/images/logo.png" alt="Logo">
  </div>

  <!-- 主要功能网格 -->
  <ion-grid>
    <ion-row>
      <!-- 学习 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="onCardClick('study')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="book" color="primary"></ion-icon>
            <h3>学习</h3>
            <p>开始学习之旅</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 在线测试 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="onCardClick('test')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="create" color="success"></ion-icon>
            <h3>在线测试</h3>
            <p>检验学习成果</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 学习计划 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="onCardClick('plan')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="calendar" color="tertiary"></ion-icon>
            <h3>学习计划</h3>
            <p>规划学习路径</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
      
      <!-- 智能问答 -->
      <ion-col size="6">
        <ion-card class="feature-card" (click)="onCardClick('qa')">
          <ion-card-content class="ion-text-center">
            <ion-icon name="chatbubbles" color="warning"></ion-icon>
            <h3>智能问答</h3>
            <p>AI助手解答</p>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <!-- 学习进度概览 -->
  <ion-card class="progress-card">
    <ion-card-header>
      <ion-card-title>今日学习进度</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <ion-progress-bar [value]="dailyProgress"></ion-progress-bar>
      <div class="progress-stats">
        <span>已完成: {{completedTasks}}/{{totalTasks}}</span>
        <span>{{(dailyProgress * 100).toFixed(0)}}%</span>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content> 