{% extends "base.html" %}
{% set title = "首页" %}
{% set page = "index" %}

{% block head_extra %}
  <link rel="stylesheet" href="{{ url_for('static', filename='lib/swiper/swiper-bundle.min.css') }}" />
{% endblock %}

{% block content %}
  <!-- Swiper Hero Banner -->
  <div class="swiper hero-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <section class="hero hero-slide-1">
          <div class="hero-content">
            <h1 class="hero-title"><i class="ri-rocket-line" style="margin-right:8px; color:var(--brand)"></i>发现高质量源代码资源</h1>
            <p class="hero-desc">支持仓库浏览、文件预览、会员下载与完整运营后台</p>
            <div class="toolbar hero-toolbar">
              <a class="btn btn-primary btn-lg" href="{{ url_for('page_resources') }}">
                <i class="ri-search-line"></i> 浏览资源
              </a>
              <a class="btn btn-lg" href="{{ url_for('page_vip') }}">
                <i class="ri-vip-crown-line"></i> 开通会员
              </a>
            </div>
          </div>
        </section>
      </div>
      <div class="swiper-slide">
        <section class="hero hero-slide-2">
          <div class="hero-content">
            <h1 class="hero-title"><i class="ri-code-s-slash-line" style="margin-right:8px; color:var(--brand)"></i>全平台多语言支持</h1>
            <p class="hero-desc">涵盖前端、后端、移动端、人工智能等全栈优质源码</p>
            <div class="toolbar hero-toolbar">
              <a class="btn btn-primary btn-lg" href="{{ url_for('page_resources') }}">
                <i class="ri-arrow-right-line"></i> 立即探索
              </a>
            </div>
          </div>
        </section>
      </div>
      <div class="swiper-slide">
        <section class="hero hero-slide-3">
          <div class="hero-content">
            <h1 class="hero-title"><i class="ri-shield-check-line" style="margin-right:8px; color:var(--brand)"></i>安全、可靠、高效</h1>
            <p class="hero-desc">所有代码均经过严格审核，确保开箱即用，零套路</p>
            <div class="toolbar hero-toolbar">
              <a class="btn btn-primary btn-lg" href="{{ url_for('page_vip') }}">
                <i class="ri-vip-diamond-line"></i> 了解VIP特权
              </a>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

  <div class="toolbar search-bar" style="margin-top: -24px; position: relative; z-index: 10; justify-content: center; background: rgba(255,255,255,0.9); padding: 20px; border-radius: 16px; box-shadow: var(--shadow-lg);">
    <div class="search-bar-inner" style="display: flex; gap: 12px; width: 100%; max-width: 800px; margin: 0 auto; flex-wrap: wrap;">
      <div style="position: relative; flex: 1; min-width: 200px;">
        <i class="ri-search-line" style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.2rem;"></i>
        <input id="q" class="input" placeholder="搜索标题或简介" style="width: 100%; padding-left: 48px; height: 48px; font-size: 1.1rem; border-radius: 12px;" />
      </div>
      <select id="type" class="input" style="width: 160px; height: 48px; border-radius: 12px; flex: 1; min-width: 120px;">
        <option value="">全部类型</option>
        <option value="FREE">免费资源</option>
        <option value="VIP">VIP专属</option>
      </select>
      <button id="searchBtn" class="btn btn-primary" style="height: 48px; padding: 0 32px; border-radius: 12px; font-size: 1.1rem; flex: 1; min-width: 120px;">
        搜索
      </button>
    </div>
  </div>

  <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-top:40px; margin-bottom: 24px;">
    <h2 style="margin:0;"><i class="ri-fire-line" style="color:var(--brand); margin-right:8px;"></i>最新资源</h2>
    <a href="{{ url_for('page_resources') }}" class="btn-ghost" style="color:var(--brand); font-weight:500;">查看全部 <i class="ri-arrow-right-s-line"></i></a>
  </div>
  <div id="resourceList" class="grid"></div>
  <div class="pager" id="pager" style="margin-top: 32px;">
    <button id="prevPage" class="btn"><i class="ri-arrow-left-s-line"></i> 上一页</button>
    <span id="pageInfo" class="muted" style="font-weight: 500;"></span>
    <button id="nextPage" class="btn">下一页 <i class="ri-arrow-right-s-line"></i></button>
  </div>

  <h2 style="margin-top:60px; text-align:center;"><i class="ri-thumb-up-line" style="color:var(--brand); margin-right:8px;"></i>为什么选择这里</h2>
  <div class="grid feature-grid" style="margin-top:24px; gap: 24px;">
    <div class="card feature-card" style="text-align: center; padding: 40px 24px;">
      <div class="feature-icon" style="font-size: 3rem; color: var(--brand); margin-bottom: 16px;"><i class="ri-eye-line"></i></div>
      <h3 style="margin-bottom: 12px; font-size: 1.25rem;">快速预览</h3>
      <div class="muted">无需克隆仓库即可浏览目录、预览文件内容，所见即所得。</div>
    </div>
    <div class="card feature-card" style="text-align: center; padding: 40px 24px;">
      <div class="feature-icon" style="font-size: 3rem; color: #f59e0b; margin-bottom: 16px;"><i class="ri-vip-crown-line"></i></div>
      <h3 style="margin-bottom: 12px; font-size: 1.25rem;">尊享特权</h3>
      <div class="muted">VIP 资源一键下载 ZIP，全站无限制访问，权益实时生效。</div>
    </div>
    <div class="card feature-card" style="text-align: center; padding: 40px 24px;">
      <div class="feature-icon" style="font-size: 3rem; color: #10b981; margin-bottom: 16px;"><i class="ri-settings-4-line"></i></div>
      <h3 style="margin-bottom: 12px; font-size: 1.25rem;">极简管理</h3>
      <div class="muted">提供强大的资源、订单、用户与配置集中管理后台。</div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script src="{{ url_for('static', filename='lib/swiper/swiper-bundle.min.js') }}"></script>
  {{ super() }}
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const swiper = new Swiper('.hero-swiper', {
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        }
      });
    });
  </script>
{% endblock %}