---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import MathFormula from '../components/common/MathFormula.astro';
import GlassTable from '../components/common/GlassTable.astro';
import CodeBlock from '../components/common/CodeBlock.astro';
import ImageViewer from '../components/common/ImageViewer.astro';
---

<BaseLayout 
  title="组件示例 - Jiao77" 
  description="展示数学公式、表格和代码高亮组件的使用示例"
  type="navigation"
>
  <Header />
  
  <main class="demo-main">
    <div class="container mx-auto px-4 py-12">
      
      <!-- 页面标题 -->
  <section class="hero-section" data-reveal data-reveal-distance="48px">
        <h1 class="demo-title">公用组件示例</h1>
        <p class="demo-subtitle">展示数学公式、磨砂玻璃表格和代码高亮组件</p>
      </section>

      <!-- 数学公式示例 -->
  <section class="demo-section" data-reveal>
        <h2 class="section-title">📐 数学公式组件</h2>
        
        <div class="examples-grid">
          <div class="example-card" data-reveal data-reveal-delay="0s">
            <h3>行内公式</h3>
            <p>这是一个行内公式：<MathFormula formula="E = mc^2" display={false} />，展示了质能方程。</p>
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.08s">
            <h3>块级公式</h3>
            <MathFormula 
              formula="\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" 
              display={true}
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.16s">
            <h3>复杂公式 (薛定谔方程)</h3>
            <MathFormula 
              formula="\\frac{\\partial}{\\partial t} \\Psi(x,t) = -\\frac{i}{\\hbar} \\hat{H} \\Psi(x,t)" 
              display={true}
            />
          </div>
        </div>
      </section>

      <!-- 表格示例 -->
  <section class="demo-section" data-reveal>
        <h2 class="section-title">📊 磨砂玻璃表格组件</h2>
        
        <div class="examples-grid">
          <div class="example-card" data-reveal data-reveal-delay="0s">
            <h3>基础表格</h3>
            <GlassTable 
              caption="AI算法性能对比"
              headers={["算法", "准确率", "速度", "内存使用"]}
              rows={[
                ["YOLO v8", "92.3%", "45 FPS", "256MB"],
                ["ResNet-50", "94.1%", "30 FPS", "512MB"],
                ["EfficientNet", "93.8%", "60 FPS", "128MB"]
              ]}
              striped={true}
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.08s">
            <h3>技术规格表</h3>
            <GlassTable 
              caption="GPU性能参数"
              headers={["型号", "显存", "核心数", "价格"]}
              rows={[
                ["RTX 4090", "24GB", "16384", "$1599"],
                ["RTX 4080", "16GB", "9728", "$1199"],
                ["RTX 4070", "12GB", "5888", "$799"]
              ]}
              bordered={true}
            />
          </div>
        </div>
      </section>

      <!-- 代码块示例 -->
  <section class="demo-section" data-reveal>
        <h2 class="section-title">💻 磨砂玻璃代码块组件</h2>
        
        <div class="examples-grid">
          <div class="example-card" data-reveal data-reveal-delay="0s">
            <h3>JavaScript 代码</h3>
            <CodeBlock 
              title="React Hook 示例"
              language="javascript"
              showLineNumbers={true}
              code={`import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
  }, [url]);

  return { data, loading, error };
}`}
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.08s">
            <h3>Python 代码</h3>
            <CodeBlock 
              title="深度学习模型"
              language="python"
              showLineNumbers={true}
              code={`import torch
import torch.nn as nn
import torch.nn.functional as F

class ConvNet(nn.Module):
    def __init__(self, num_classes=10):
        super(ConvNet, self).__init__()
        self.conv1 = nn.Conv2d(3, 32, 3, padding=1)
        self.conv2 = nn.Conv2d(32, 64, 3, padding=1)
        self.pool = nn.MaxPool2d(2, 2)
        self.fc1 = nn.Linear(64 * 8 * 8, 512)
        self.fc2 = nn.Linear(512, num_classes)
        self.dropout = nn.Dropout(0.5)
    
    def forward(self, x):
        x = self.pool(F.relu(self.conv1(x)))
        x = self.pool(F.relu(self.conv2(x)))
        x = x.view(-1, 64 * 8 * 8)
        x = F.relu(self.fc1(x))
        x = self.dropout(x)
        x = self.fc2(x)
        return x`}
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.16s">
            <h3>CSS 样式</h3>
            <CodeBlock 
              title="磨砂玻璃效果"
              language="css"
              code={`.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.glass-effect:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}`}
            />
          </div>
        </div>
      </section>

      <!-- 图片展示组件演示 -->
  <section class="demo-section" data-reveal>
        <h2 class="section-title">🖼️ 图片展示组件 (ImageViewer)</h2>
        <p class="section-desc">支持点击放大的响应式图片组件</p>
        
        <div class="examples-grid">
          <div class="example-card" data-reveal data-reveal-delay="0s">
            <h3>基础图片展示</h3>
            <ImageViewer
              src="https://picsum.photos/600/400?random=1"
              alt="示例图片"
              caption="点击图片可以放大查看，支持键盘ESC关闭"
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.08s">
            <h3>固定宽高比</h3>
            <ImageViewer
              src="https://picsum.photos/800/450?random=2"
              alt="16:9宽高比图片"
              caption="16:9 宽高比的图片展示"
              aspectRatio="16/9"
            />
          </div>
          
          <div class="example-card" data-reveal data-reveal-delay="0.16s">
            <h3>网格布局</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
              <ImageViewer
                src="https://picsum.photos/400/300?random=3"
                alt="图片3"
                caption="风景照片"
                aspectRatio="4/3"
              />
              <ImageViewer
                src="https://picsum.photos/400/300?random=4"
                alt="图片4"
                caption="城市夜景"
                aspectRatio="4/3"
              />
            </div>
          </div>
        </div>
      </section>

      <!-- 混合使用示例 -->
  <section class="demo-section" data-reveal>
        <h2 class="section-title">🎯 综合示例</h2>
        
  <div class="example-card" data-reveal data-reveal-delay="0s">
          <h3>算法分析报告</h3>
          <p>下面展示了一个完整的算法分析，包含数学公式、性能数据表格和实现代码：</p>
          
          <h4>算法复杂度</h4>
          <p>该算法的时间复杂度为：</p>
          <MathFormula 
            formula="T(n) = O(n \log n)"
            display={true}
          />
          
          <h4>性能测试结果</h4>
          <GlassTable 
            caption="不同数据规模下的性能表现"
            headers={["数据规模 (n)", "执行时间 (ms)", "内存使用 (MB)", "准确率"]}
            rows={[
              ["1,000", "12", "8", "99.2%"],
              ["10,000", "156", "64", "99.1%"],
              ["100,000", "1,834", "512", "98.9%"],
              ["1,000,000", "23,456", "4,096", "98.7%"]
            ]}
            striped={true}
          />
          
          <h4>核心实现</h4>
          <CodeBlock 
            title="快速排序算法"
            language="javascript"
            showLineNumbers={true}
            code={`function quickSort(arr, low = 0, high = arr.length - 1) {
  if (low < high) {
    // 分区操作，返回枢轴位置
    const pivotIndex = partition(arr, low, high);
    
    // 递归排序枢轴左侧和右侧
    quickSort(arr, low, pivotIndex - 1);
    quickSort(arr, pivotIndex + 1, high);
  }
  return arr;
}

function partition(arr, low, high) {
  const pivot = arr[high]; // 选择最后一个元素作为枢轴
  let i = low - 1; // 较小元素的索引
  
  for (let j = low; j < high; j++) {
    if (arr[j] <= pivot) {
      i++;
      [arr[i], arr[j]] = [arr[j], arr[i]]; // 交换元素
    }
  }
  
  [arr[i + 1], arr[high]] = [arr[high], arr[i + 1]];
  return i + 1;
}`}
          />
        </div>
      </section>

    </div>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  .demo-main {
    min-height: 100vh;
    background: transparent;
    color: #374151;
  }
  
  .hero-section {
    text-align: center;
    padding: 3rem 0;
    margin-bottom: 3rem;
  }
  
  .demo-title {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
  }
  
  .demo-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    font-weight: 500;
  }
  
  .demo-section {
    margin-bottom: 4rem;
  }
  
  .section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .examples-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  @media (min-width: 768px) {
    .examples-grid {
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    }
  }
  
  .example-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    transition: all 0.3s ease;
  }
  
  .example-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
  
  .example-card h3 {
    color: #3b82f6;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }
  
  .example-card h4 {
    color: #1e40af;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
  }
  
  .example-card p {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  
  .container {
    max-width: 1200px;
  }
  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
</style>