<view class="page-container">
  <!-- Header -->
  <view class="header">
    <view class="header-content">
      <view class="title-container">
        <view class="title-sub">致力成就</view>
        <view class="title-main">终身教育伟大事业</view>
      </view>
      <view class="bell-btn" bindtap="handleNotificationClick">
        <image class="notification-icon" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjEgMTVhMiAyIDAgMCAxLTIgMkg3bC00IDRWNWEyIDIgMCAwIDEgMi0yaDE0YTIgMiAwIDAgMSAyIDJ6Ij48L3BhdGg+PC9zdmc+" />
        <view class="badge" wx:if="{{unreadCount > 0}}">{{unreadCount > 99 ? '99+' : unreadCount}}</view>
      </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 Swiper -->
    <view class="banner-swiper-container">
      <swiper class="banner-swiper" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}" circular="{{true}}" indicator-active-color="#ffffff">
        <block wx:for="{{banners}}" wx:key="id">
          <swiper-item>
            <view class="banner-item" bindtap="handleBannerClick" data-item="{{item}}">
              <image src="{{item.image}}" mode="aspectFill" class="banner-image"></image>
              <!-- Optional: Overlay text if needed, but usually banners are just images -->
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- Categories -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">热门分类</text>
      </view>
      <scroll-view scroll-x class="categories-scroll" enable-flex>
        <view class="category-item {{selectedCategory === 'all' ? 'active' : ''}}" bindtap="handleCategorySelect" data-type="all">
          <text>全部</text>
        </view>
        <view class="category-item {{selectedCategory === 'training' ? 'active' : ''}}" bindtap="handleCategorySelect" data-type="training">
          <text>在职项目</text>
        </view>
        <view class="category-item {{selectedCategory === 'competition' ? 'active' : ''}}" bindtap="handleCategorySelect" data-type="competition">
          <text>典礼&论坛</text>
        </view>
        <view class="category-item {{selectedCategory === 'grading' ? 'active' : ''}}" bindtap="handleCategorySelect" data-type="grading">
          <text>校友活动</text>
        </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-header-row">
              <view class="project-title">{{item.title}}</view>
              <view class="project-category-tag" wx:if="{{item.project_type_display || item.category}}">{{item.project_type_display || item.category}}</view>
            </view>
            <view class="project-teacher" wx:if="{{item.teacher_name}}">
                {{item.teacher_name}}
            </view>
            <view class="project-meta">
              <view class="meta-item"><text class="icon">👥</text> {{item.students}}</view>
              <view class="meta-item">{{item.address}}</view>
              <view class="meta-item"><text class="icon">🕒</text> {{item.duration}}</view>
            </view>
          </view>
        </view>
      </block>
    </view>

    <!-- Student Showcase -->
    <view class="section" wx:if="{{showcases && showcases.length > 0}}" style="margin-top: 40rpx;">
      <view class="section-header">
        <text class="section-title">精彩视频</text>
      </view>
      <scroll-view scroll-x class="showcase-scroll" enable-flex>
        <view class="showcase-item" wx:for="{{showcases}}" wx:key="id" bindtap="playVideo" data-url="{{item.video_url}}">
            <image class="showcase-image" src="{{item.cover_image}}" mode="aspectFill"></image>
            <view class="showcase-info">
                <text class="showcase-title">{{item.title}}</text>
                <text class="showcase-student" wx:if="{{item.student_name}}">{{item.student_name}}</text>
            </view>
            <view class="play-icon" wx:if="{{item.video_url}}">▶</view>
        </view>
      </scroll-view>
    </view>
  </view>
</view>
