<template>
  <div class="home-page">
    <!-- 头部导航栏 - 固定导航 -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
      <div
        class="container mx-auto px-4 py-3 flex items-center justify-between"
      >
        <!-- 平台LOGO -->
        <div class="flex items-center space-x-2">
          <i class="fa fa-leaf text-primary text-2xl"></i>
          <span class="text-xl font-bold text-primary">全国可信碳信息网</span>
        </div>

        <!-- 一级模块入口 -->
        <nav class="hidden md:flex items-center space-x-8">
          <a href="#" class="nav-active font-medium py-2">首页</a>
          <a href="可信碳服务中心.html" class="text-gray-600 hover:text-primary transition-colors py-2">可信碳服务中心</a>
          <a href="共性能力平台.html" class="text-gray-600 hover:text-primary transition-colors py-2">共性能力平台</a>
          <a href="绿碳供需大厅.html" class="text-gray-600 hover:text-primary transition-colors py-2">绿碳供需大厅</a>
          <a href="企业出海.html" class="text-gray-600 hover:text-primary transition-colors py-2">企业出海</a>
          <a href="行业专题.html" class="text-gray-600 hover:text-primary transition-colors py-2">行业专题</a>
          <a href="绿色金融.html" class="text-gray-600 hover:text-primary transition-colors py-2">绿色金融</a>
          <a href="绿色交易.html" class="text-gray-600 hover:text-primary transition-colors py-2">绿色交易</a>
          <!-- <a href="#" class="text-gray-600 hover:text-primary transition-colors py-2">关于我们</a> -->
        </nav>

        <!-- 用户登录/注册 + 搜索框 -->
        <div class="flex items-center space-x-4">
          <!-- <div class="relative hidden md:block">
            <input
              type="text"
              placeholder="搜索可信碳ID/企业名称"
              class="pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64"
            />
            <i
              class="fa fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
            ></i>
          </div> -->
          <a
            href="登录.html"
            class="text-gray-600 hover:text-primary transition-colors"
            >登录</a
          >
          <a
            href="登录.html"
            class="bg-primary text-white px-4 py-2 rounded-full hover:bg-primary/90 transition-colors"
            >注册</a
          >
          <button class="md:hidden text-gray-600">
            <i class="fa fa-bars text-xl"></i>
          </button>
        </div>
      </div>
    </header>

    <main>
      <!-- Banner轮播区 -->
      <section class="relative bg-gray-200 h-[400px] overflow-hidden">
        <div class="banner-slider h-full">
          <!-- 轮播图1 -->
          <div
            class="banner-item absolute inset-0 opacity-100 transition-opacity duration-1000"
          >
            <div class="container mx-auto px-4 h-full flex items-center">
              <div class="w-1/2">
                <h1
                  class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4"
                >
                  全国可信碳信息网
                </h1>
                <p class="text-gray-600 text-lg mb-6 max-w-md">
                  提供专业的碳数据查询、查证、托管服务，助力企业绿色低碳发展
                </p>
                <a
                  href="可信碳服务中心.html"
                  class="bg-primary text-white px-6 py-3 rounded-full hover:bg-primary/90 transition-colors inline-block"
                >
                  立即体验 <i class="fa fa-arrow-right ml-2"></i>
                </a>
              </div>
              <div class="w-1/2 flex justify-center">
                <img
                  src="https://picsum.photos/id/110/600/400"
                  alt="碳数据服务"
                  class="h-64 object-cover rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>
          <!-- 轮播图2 (默认隐藏) -->
          <div
            class="banner-item absolute inset-0 opacity-0 transition-opacity duration-1000"
          >
            <div class="container mx-auto px-4 h-full flex items-center">
              <div class="w-1/2">
                <h1
                  class="text-[clamp(1.8rem,4vw,2.8rem)] font-bold text-dark mb-4"
                >
                  最新碳政策资讯
                </h1>
                <p class="text-gray-600 text-lg mb-6 max-w-md">
                  实时更新国家及地方碳政策，帮助企业把握政策方向，合规发展
                </p>
                <a
                  href="#"
                  class="bg-primary text-white px-6 py-3 rounded-full hover:bg-primary/90 transition-colors inline-block"
                >
                  查看政策 <i class="fa fa-arrow-right ml-2"></i>
                </a>
              </div>
              <div class="w-1/2 flex justify-center">
                <img
                  src="https://picsum.photos/id/180/600/400"
                  alt="碳政策资讯"
                  class="h-64 object-cover rounded-lg shadow-lg"
                />
              </div>
            </div>
          </div>
        </div>
        <!-- 轮播控制按钮 -->
        <button
          class="absolute left-4 top-1/2 -translate-y-1/2 bg-white/50 hover:bg-white text-primary w-10 h-10 rounded-full flex items-center justify-center backdrop-blur-sm"
        >
          <i class="fa fa-angle-left text-xl"></i>
        </button>
        <button
          class="absolute right-4 top-1/2 -translate-y-1/2 bg-white/50 hover:bg-white text-primary w-10 h-10 rounded-full flex items-center justify-center backdrop-blur-sm"
        >
          <i class="fa fa-angle-right text-xl"></i>
        </button>
        <!-- 轮播指示器 -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
          <button class="w-3 h-3 rounded-full bg-primary"></button>
          <button class="w-3 h-3 rounded-full bg-white/50"></button>
        </div>
      </section>

      <!-- 核心入口区 -->
      <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
          <h2 class="text-2xl font-bold text-center mb-10">核心服务入口</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 可信碳服务中心入口 -->
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-database text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">可信碳查询</h3>
              <p class="text-gray-600 mb-4">
                提供碳数据查询、下载服务
              </p>
              <a
                href="可信碳服务中心.html"
                class="text-primary font-medium hover:underline"
              >
                进入服务 <i class="fa fa-external-link ml-1"></i>
              </a>
            </div>

            <!-- 可信碳托管入口 -->
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-exchange text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">可信碳托管</h3>
              <p class="text-gray-600 mb-4">
                提供碳数据托管服务
              </p>
              <a
                href="可信碳服务中心.html"
                class="text-primary font-medium hover:underline"
              >
                进入服务 <i class="fa fa-external-link ml-1"></i>
              </a>
            </div>

            <!-- 可信碳查证入口 -->
            <div class="bg-neutral rounded-xl p-6 text-center card-hover">
              <div
                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4"
              >
                <i class="fa fa-line-chart text-primary text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-2">可信碳查证</h3>
              <p class="text-gray-600 mb-4">
                提供碳数据查证服务
              </p>
              <a href="可信碳服务中心.html" class="text-primary font-medium hover:underline">
                进入服务 <i class="fa fa-external-link ml-1"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 平台资讯区 -->
      <section class="py-20 bg-gradient-to-br from-neutral to-gray-100">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-4xl font-bold text-dark mb-6">平台资讯</h2>
            <p class="text-gray-600 max-w-3xl mx-auto text-lg leading-relaxed">
              实时掌握国家政策导向、地方实施动态、行业发展趋势和平台重要更新
            </p>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- 国家政策 -->
            <div class="group bg-white rounded-2xl shadow-sm overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -translate-y-10 translate-x-10"></div>
                <div class="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>
                <div class="relative z-10">
                  <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <i class="fa fa-flag text-white text-xl"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-2">国家政策</h3>
                  <p class="text-blue-100 text-sm">国家级碳政策解读与实施动态</p>
                </div>
              </div>
              <div class="p-6 space-y-5">
                <div class="group/item cursor-pointer">
                  <div class="flex items-start justify-between mb-3">
                    <h4 class="font-semibold text-dark group-hover/item:text-blue-600 transition-colors line-clamp-2 text-sm leading-relaxed">
                      国家发改委发布2025年碳减排重点任务
                    </h4>
                    <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded-full ml-2 flex-shrink-0 font-medium">新</span>
                  </div>
                  <p class="text-xs text-gray-500 mb-2">2025-05-10</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    重点任务包括完善碳市场机制、加强重点行业减排监管等五大方面
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-blue-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    国务院发布《关于加快建立健全绿色低碳循环发展经济体系的指导意见》
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-08</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    提出到2025年，绿色低碳循环发展的生产体系、流通体系、消费体系初步形成
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-blue-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    生态环境部发布《碳排放权交易管理办法（试行）》修订版
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-05</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    进一步规范全国碳市场建设，完善碳排放权交易制度体系
                  </p>
                </div>
              </div>
              <div class="p-4 bg-gradient-to-r from-blue-50 to-blue-100 text-center border-t border-blue-200">
                <a href="资讯中心.html" class="text-blue-600 font-medium hover:text-blue-700 inline-flex items-center text-sm"
                  >查看更多国家政策 <i class="fa fa-angle-right ml-2"></i
                ></a>
              </div>
            </div>

            <!-- 地方政策 -->
            <div class="group bg-white rounded-2xl shadow-sm overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <div class="bg-gradient-to-r from-green-600 to-green-700 text-white p-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -translate-y-10 translate-x-10"></div>
                <div class="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>
                <div class="relative z-10">
                  <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <i class="fa fa-map-marker text-white text-xl"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-2">地方政策</h3>
                  <p class="text-green-100 text-sm">地方碳政策实施与配套措施</p>
                </div>
              </div>
              <div class="p-6 space-y-5">
                <div class="group/item cursor-pointer">
                  <div class="flex items-start justify-between mb-3">
                    <h4 class="font-semibold text-dark group-hover/item:text-green-600 transition-colors line-clamp-2 text-sm leading-relaxed">
                      《江苏省碳足迹管理办法》正式实施
                    </h4>
                    <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full ml-2 flex-shrink-0 font-medium">新</span>
                  </div>
                  <p class="text-xs text-gray-500 mb-2">2025-05-15</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    该办法明确了企业碳足迹核算标准和管理要求，将推动全省低碳转型发展
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-green-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    上海市碳普惠机制试点工作启动
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-12</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    试点将覆盖餐饮、零售等行业，鼓励小微企业参与碳减排行动
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-green-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    广东省碳足迹认证体系建设方案出台
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-08</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    方案提出建立全省统一的碳足迹认证标准，助力企业产品绿色转型
                  </p>
                </div>
              </div>
              <div class="p-4 bg-gradient-to-r from-green-50 to-green-100 text-center border-t border-green-200">
                <a href="资讯中心.html" class="text-green-600 font-medium hover:text-green-700 inline-flex items-center text-sm"
                  >查看更多地方政策 <i class="fa fa-angle-right ml-2"></i
                ></a>
              </div>
            </div>

            <!-- 行业资讯 -->
            <div class="group bg-white rounded-2xl shadow-sm overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <div class="bg-gradient-to-r from-purple-600 to-purple-700 text-white p-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -translate-y-10 translate-x-10"></div>
                <div class="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>
                <div class="relative z-10">
                  <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <i class="fa fa-industry text-white text-xl"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-2">行业资讯</h3>
                  <p class="text-purple-100 text-sm">碳领域技术创新与行业发展趋势</p>
                </div>
              </div>
              <div class="p-6 space-y-5">
                <div class="group/item cursor-pointer">
                  <div class="flex items-start justify-between mb-3">
                    <h4 class="font-semibold text-dark group-hover/item:text-purple-600 transition-colors line-clamp-2 text-sm leading-relaxed">
                      钢铁行业低碳技术创新成果发布
                    </h4>
                    <span class="text-xs text-purple-600 bg-purple-50 px-2 py-1 rounded-full ml-2 flex-shrink-0 font-medium">热</span>
                  </div>
                  <p class="text-xs text-gray-500 mb-2">2025-05-12</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    某钢铁企业研发的新型炼钢技术可减少碳排放30%，已实现工业化应用
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-purple-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    光伏行业碳足迹核算标准达成共识
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-08</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    行业协会组织制定的光伏产品碳足迹核算标准将于下月正式实施
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-purple-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    某汽车企业实现全产业链碳中和
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-03</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    通过可再生能源利用和碳抵消措施，该企业成为首个实现全产业链碳中和的车企
                  </p>
                </div>
              </div>
              <div class="p-4 bg-gradient-to-r from-purple-50 to-purple-100 text-center border-t border-purple-200">
                <a href="资讯中心.html" class="text-purple-600 font-medium hover:text-purple-700 inline-flex items-center text-sm"
                  >查看更多行业资讯 <i class="fa fa-angle-right ml-2"></i
                ></a>
              </div>
            </div>

            <!-- 平台公告 -->
            <div class="group bg-white rounded-2xl shadow-sm overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
              <div class="bg-gradient-to-r from-orange-600 to-orange-700 text-white p-6 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-20 h-20 bg-white/10 rounded-full -translate-y-10 translate-x-10"></div>
                <div class="absolute bottom-0 left-0 w-16 h-16 bg-white/5 rounded-full translate-y-8 -translate-x-8"></div>
                <div class="relative z-10">
                  <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center mb-4">
                    <i class="fa fa-bullhorn text-white text-xl"></i>
                  </div>
                  <h3 class="text-xl font-bold mb-2">平台公告</h3>
                  <p class="text-orange-100 text-sm">平台重要通知与功能更新</p>
                </div>
              </div>
              <div class="p-6 space-y-5">
                <div class="group/item cursor-pointer">
                  <div class="flex items-start justify-between mb-3">
                    <h4 class="font-semibold text-dark group-hover/item:text-orange-600 transition-colors line-clamp-2 text-sm leading-relaxed">
                      平台系统升级通知（5月20日）
                    </h4>
                    <span class="text-xs text-red-500 bg-red-50 px-2 py-1 rounded-full ml-2 flex-shrink-0 font-medium">重要</span>
                  </div>
                  <p class="text-xs text-gray-500 mb-2">2025-05-18</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    为提升服务质量，平台将于5月20日22:00-24:00进行系统升级，期间服务暂停
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-orange-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    可信碳ID申请流程优化公告
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-11</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    优化后的可信碳ID申请流程将缩短审核时间至3个工作日，申请材料简化
                  </p>
                </div>
                
                <div class="group/item cursor-pointer">
                  <h4 class="font-semibold text-dark group-hover/item:text-orange-600 transition-colors line-clamp-2 mb-2 text-sm leading-relaxed">
                    平台新增碳溯源报告下载功能
                  </h4>
                  <p class="text-xs text-gray-500 mb-2">2025-05-01</p>
                  <p class="text-xs text-gray-600 leading-relaxed">
                    用户可通过可信碳服务中心下载含碳血缘关系的溯源报告，全面了解碳数据生命周期
                  </p>
                </div>
              </div>
              <div class="p-4 bg-gradient-to-r from-orange-50 to-orange-100 text-center border-t border-orange-200">
                <a href="资讯中心.html" class="text-orange-600 font-medium hover:text-orange-700 inline-flex items-center text-sm"
                  >查看更多平台公告 <i class="fa fa-angle-right ml-2"></i
                ></a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部信息区 -->
    <footer class="bg-dark text-white py-10">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
          <div>
            <h3 class="text-lg font-semibold mb-4 flex items-center">
              <i class="fa fa-leaf text-secondary mr-2"></i> 平台介绍
            </h3>
            <p class="text-gray-400 text-sm">
              可信碳数据服务平台是专业的碳数据综合服务平台，致力于为企业提供碳数据查询、查证、托管、交易匹配等一站式服务，助力实现“双碳”目标。
            </p>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">联系方式</h3>
            <ul class="text-gray-400 text-sm space-y-2">
              <li class="flex items-center">
                <i class="fa fa-phone mr-2 text-secondary"></i> 400-123-4567
              </li>
              <li class="flex items-center">
                <i class="fa fa-envelope mr-2 text-secondary"></i>
                service@carbonplat.com
              </li>
              <li class="flex items-center">
                <i class="fa fa-map-marker mr-2 text-secondary"></i>
                江苏省南京市鼓楼区低碳科技园A座
              </li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">备案信息</h3>
            <ul class="text-gray-400 text-sm space-y-2">
              <li>苏ICP备12345678号</li>
              <li>苏公网安备32010602012345号</li>
              <li>碳服务资质证书编号：CTS-2025-001</li>
            </ul>
          </div>
          <div>
            <h3 class="text-lg font-semibold mb-4">帮助中心</h3>
            <ul class="text-gray-400 text-sm space-y-2">
              <li>
                <a href="#" class="hover:text-secondary transition-colors"
                  >使用指南</a
                >
              </li>
              <li>
                <a href="#" class="hover:text-secondary transition-colors"
                  >常见问题</a
                >
              </li>
              <li>
                <a href="#" class="hover:text-secondary transition-colors"
                  >隐私政策</a
                >
              </li>
              <li>
                <a href="#" class="hover:text-secondary transition-colors"
                  >用户协议</a
                >
              </li>
            </ul>
          </div>
        </div>
        <div
          class="border-t border-gray-700 pt-6 text-center text-gray-500 text-sm"
        >
          <p>
            © 2025 全国可信碳信息网 版权所有 | 主办单位：江苏省低碳产业协会
          </p>
        </div>
      </div>
    </footer>

  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      currentBanner: 0,
      bannerInterval: null,
      totalBanners: 2
    }
  },
  mounted() {
    this.startBannerRotation();
    
    // 鼠标悬停时暂停轮播
    const bannerSlider = this.$el.querySelector('.banner-slider');
    if (bannerSlider) {
      bannerSlider.addEventListener('mouseenter', () => {
        clearInterval(this.bannerInterval);
      });
      
      bannerSlider.addEventListener('mouseleave', () => {
        this.startBannerRotation();
      });
    }
  },
  beforeUnmount() {
    clearInterval(this.bannerInterval);
  },
  methods: {
    startBannerRotation() {
      this.bannerInterval = setInterval(() => {
        this.nextBanner();
      }, 3000);
    },
    nextBanner() {
      this.currentBanner = (this.currentBanner + 1) % this.totalBanners;
    },
    prevBanner() {
      this.currentBanner = (this.currentBanner - 1 + this.totalBanners) % this.totalBanners;
    },
    setBanner(index) {
      clearInterval(this.bannerInterval);
      this.currentBanner = index;
      this.startBannerRotation();
    }
  }
}
</script>
<style>

</style>