<view class="page-container">
  <!-- Header -->
  <view class="header">
    <view class="header-content">
      <view>
        <view class="greeting">你好，学员</view>
        <view class="title">今天想学点什么？</view>
      </view>
      <view class="bell-btn">🔔</view>
    </view>
    
    <!-- Search Bar -->
    <view class="search-bar">
      <icon type="search" size="16" color="#9ca3af"></icon>
      <input type="text" placeholder="搜索项目名称..." placeholder-class="search-placeholder"/>
    </view>
  </view>

  <view class="content-body">
    <!-- Banner -->
    <view class="banner">
      <view>
        <view class="banner-title">热门实训项目</view>
        <view class="banner-desc">参与项目实战，提升就业能力</view>
        <view class="banner-btn">立即查看</view>
      </view>
      <view class="banner-circle"></view>
    </view>

    <!-- Categories -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门分类</text>
        <text class="see-all">查看全部</text>
      </view>
      <scroll-view scroll-x="true" class="categories-scroll" enable-flex="true">
        <view class="categories-list">
          <block wx:for="{{categories}}" wx:key="name">
            <view class="category-item" style="background-color: {{index == 0 ? '#dbeafe' : (index == 1 ? '#ffedd5' : (index == 2 ? '#f3e8ff' : '#dcfce7'))}}; color: {{index == 0 ? '#2563eb' : (index == 1 ? '#ea580c' : (index == 2 ? '#9333ea' : '#16a34a'))}}">
              {{item.name}}
            </view>
          </block>
        </view>
      </scroll-view>
    </view>

    <!-- Projects -->
    <view class="projects-list">
      <block wx:for="{{projects}}" wx:key="id">
        <view class="project-card" bindtap="goToDetail" data-id="{{item.id}}">
          <image class="project-image" src="{{item.image}}" mode="aspectFill"></image>
          <view class="project-info">
            <view class="project-category-tag">{{item.category}}</view>
            <view class="project-title">{{item.title}}</view>
            <view class="project-meta">
              <view class="meta-item"><text class="icon">👥</text> {{item.students}}</view>
              <view class="meta-item"><text class="icon">⭐</text> {{item.rating}}</view>
              <view class="meta-item"><text class="icon">🕒</text> {{item.duration}}</view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</view>
