---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Container from '../components/Container.astro';
import ReportSection from '../components/report/ReportSection.astro';
import MetricsGrid from '../components/report/MetricsGrid.astro';
import MetricCard from '../components/report/MetricCard.astro';
import AnimatedElement from '../components/AnimatedElement.astro';
---

<BaseLayout title="数据报告 - Jiao77" description="网站数据统计与分析报告" type="report">
  <Header />
  
  <main class="report-main">
    <Container variant="glass-dark" size="full" padding="xl" className="report-container">
      <AnimatedElement animation="fadeInDown" delay={100}>
        <div class="report-header">
          <h1 class="report-title">数据分析报告</h1>
          <p class="report-subtitle">2024年度网站运营数据概览</p>
        </div>
      </AnimatedElement>
      
      <AnimatedElement animation="fadeInUp" delay={300} trigger="scroll">
        <MetricsGrid title="核心指标" columns={4}>
          <MetricCard
            title="总访问量"
            value="125,847"
            change="+12.5%"
            changeType="positive"
            icon="fas fa-users"
            color="primary"
          />
          <MetricCard
            title="页面浏览量"
            value="342,156"
            change="+18.2%"
            changeType="positive"
            icon="fas fa-eye"
            color="success"
          />
          <MetricCard
            title="平均停留时间"
            value="3m 24s"
            change="-2.1%"
            changeType="negative"
            icon="fas fa-clock"
            color="warning"
          />
          <MetricCard
            title="跳出率"
            value="32.4%"
            change="-5.8%"
            changeType="positive"
            icon="fas fa-sign-out-alt"
            color="info"
          />
        </MetricsGrid>
      </AnimatedElement>
      
      <AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
        <ReportSection title="访问趋势分析" subtitle="过去30天的访问数据变化" level={2}>
          <p>本月网站访问量呈现稳步增长趋势，峰值出现在周末时段。移动端访问占比持续提升，达到68.3%，较上月增长4.2个百分点。</p>
          
          <div class="trend-highlights">
            <div class="highlight-item">
              <h4>🚀 增长亮点</h4>
              <ul>
                <li>移动端访问量增长 <strong>24.5%</strong></li>
                <li>新用户占比提升至 <strong>42.8%</strong></li>
                <li>社交媒体引流增长 <strong>35.7%</strong></li>
              </ul>
            </div>
            
            <div class="highlight-item">
              <h4>📊 关键数据</h4>
              <ul>
                <li>平均加载时间: <strong>1.2秒</strong></li>
                <li>用户满意度: <strong>4.8/5.0</strong></li>
                <li>转化率: <strong>8.3%</strong></li>
              </ul>
            </div>
          </div>
        </ReportSection>
      </AnimatedElement>
      
      <AnimatedElement animation="fadeInUp" delay={500} trigger="scroll">
        <ReportSection title="用户行为洞察" subtitle="深入了解用户偏好和使用习惯" level={2}>
          <div class="behavior-grid">
            <div class="behavior-card">
              <h4>🔥 热门页面</h4>
              <ol>
                <li>首页 - 34.2%</li>
                <li>项目展示 - 22.8%</li>
                <li>技术博客 - 18.5%</li>
                <li>工具集合 - 14.9%</li>
                <li>联系页面 - 9.6%</li>
              </ol>
            </div>
            
            <div class="behavior-card">
              <h4>🌍 地区分布</h4>
              <ol>
                <li>中国大陆 - 45.3%</li>
                <li>香港地区 - 12.7%</li>
                <li>台湾地区 - 8.9%</li>
                <li>美国 - 7.8%</li>
                <li>其他地区 - 25.3%</li>
              </ol>
            </div>
            
            <div class="behavior-card">
              <h4>📱 设备统计</h4>
              <ol>
                <li>移动设备 - 68.3%</li>
                <li>桌面电脑 - 28.4%</li>
                <li>平板设备 - 3.3%</li>
              </ol>
            </div>
          </div>
        </ReportSection>
      </AnimatedElement>
      
      <AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
        <ReportSection title="技术性能报告" subtitle="网站技术指标和优化建议" level={2}>
          <p>网站整体性能表现优良，核心Web指标均达到Google推荐标准。建议继续优化图片压缩和缓存策略。</p>
          
          <div class="performance-metrics">
            <div class="metric-item">
              <span class="metric-label">LCP (最大内容绘制)</span>
              <span class="metric-value good">1.2s</span>
            </div>
            <div class="metric-item">
              <span class="metric-label">FID (首次输入延迟)</span>
              <span class="metric-value good">45ms</span>
            </div>
            <div class="metric-item">
              <span class="metric-label">CLS (累积布局偏移)</span>
              <span class="metric-value good">0.08</span>
            </div>
          </div>
        </ReportSection>
      </AnimatedElement>
    </Container>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  .report-main {
    min-height: 100vh;
    padding-top: 6rem;
    padding-bottom: 2rem;
  }
  
  .report-container {
    margin: 0 auto;
    max-width: 1200px !important;
  }
  
  .report-header {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .report-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #F4F1E8;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #F4F1E8, #E8DCC0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  
  .report-subtitle {
    font-size: 1.1rem;
    color: #C7B8A1;
    margin: 0;
    opacity: 0.9;
  }
  
  .trend-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .highlight-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  
  .highlight-item h4 {
    color: #F4F1E8;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
  }
  
  .highlight-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .highlight-item li {
    color: #C7B8A1;
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
  }
  
  .highlight-item li::before {
    content: "•";
    color: #A68B7B;
    position: absolute;
    left: 0;
  }
  
  .behavior-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .behavior-card {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  
  .behavior-card h4 {
    color: #F4F1E8;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
  }
  
  .behavior-card ol {
    color: #C7B8A1;
    padding-left: 1.2rem;
  }
  
  .behavior-card li {
    margin-bottom: 0.5rem;
  }
  
  .performance-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
  }
  
  .metric-label {
    color: #C7B8A1;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  .metric-value {
    font-size: 1.5rem;
    font-weight: 700;
  }
  
  .metric-value.good {
    color: #10B981;
  }
  
  @media (max-width: 768px) {
    .report-title {
      font-size: 2rem;
    }
    
    .trend-highlights {
      grid-template-columns: 1fr;
    }
    
    .behavior-grid {
      grid-template-columns: 1fr;
    }
    
    .performance-metrics {
      grid-template-columns: 1fr;
    }
  }
</style>