---
/**
 * 技术报告简化模板
 * 适用于快速创建基础技术报告
 * 
 * 使用说明:
 * 1. 修改下方配置信息
 * 2. 添加你的报告章节
 * 3. 替换示例内容
 */
import BaseLayout from '../../../layouts/BaseLayout.astro';
import Header from '../../../components/Header.astro';
import Footer from '../../../components/Footer.astro';
import ReportSection from '../../../components/report/ReportSection.astro';
import Container from '../../../components/Container.astro';
import AnimatedElement from '../../../components/AnimatedElement.astro';
import ReportSidebar from '../../../components/report/ReportSidebar.astro';

// 报告配置 - 请修改以下信息
const reportConfig = {
  title: "技术报告标题",
  subtitle: "报告副标题描述",
  description: "报告的详细描述，用于SEO",
  date: "2025年XX月XX日",
  actionText: "开始阅读 ↓"
};
---

<BaseLayout 
  title={`${reportConfig.title} - Jiao77`}
  description={reportConfig.description}
  type="report"
>
  <Header />
  
  <main class="report-main">
    <div class="report-layout container mx-auto px-4">
      <ReportSidebar title="报告目录" toggleLabel="目录" />
      <div class="report-content" data-report-content>
      
      <!-- 报告标题 -->
      <section id="intro" class="report-header scroll-mt-16">
        <AnimatedElement animation="fadeInUp" delay={200} trigger="load">
          <Container variant="glass" size="full" padding="xl" className="text-center mb-12 mt-24">
            <h1 class="report-title">{reportConfig.title}</h1>
            <p class="report-subtitle">{reportConfig.subtitle}</p>
            <div class="report-meta">
              <span class="report-date">报告日期：{reportConfig.date}</span>
              <span class="report-type">技术报告</span>
            </div>
            <div class="report-action">
              <a href="#overview" class="bg-[#27797f] text-white font-bold py-3 px-8 rounded-full hover:bg-[#1e6066] transition duration-300">
                {reportConfig.actionText}
              </a>
            </div>
          </Container>
        </AnimatedElement>
      </section>

      <!-- 概述章节 -->
      <AnimatedElement animation="fadeInUp" delay={400} trigger="scroll">
        <section id="overview">
          <ReportSection title="📖 概述" subtitle="报告的主要内容和背景介绍" level={2}>
            <div class="space-y-6">
              <div class="content-section">
                <h3 class="section-heading">背景介绍</h3>
                <p>在这里描述报告的背景和研究动机...</p>
              </div>
              <div class="content-section">
                <h3 class="section-heading">主要内容</h3>
                <ul class="content-list">
                  <li>主要内容点一</li>
                  <li>主要内容点二</li>
                  <li>主要内容点三</li>
                </ul>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 技术分析章节 -->
      <AnimatedElement animation="fadeInUp" delay={600} trigger="scroll">
        <section id="analysis">
          <ReportSection title="🔬 技术分析" subtitle="核心技术和方法的详细分析" level={2}>
            <!-- 🎨 子容器延迟动画示例 -->
            <div class="space-y-8">
              <AnimatedElement animation="fadeInUp" delay={700} trigger="scroll">
                <div class="analysis-card">
                  <h3 class="card-title">技术要点一</h3>
                  <p class="card-description">详细描述第一个技术要点的内容和实现方法...</p>
                </div>
              </AnimatedElement>
              <AnimatedElement animation="fadeInUp" delay={800} trigger="scroll">
                <div class="analysis-card">
                  <h3 class="card-title">技术要点二</h3>
                  <p class="card-description">详细描述第二个技术要点的内容和实现方法...</p>
                </div>
              </AnimatedElement>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 实施方案章节 -->
      <AnimatedElement animation="fadeInUp" delay={800} trigger="scroll">
        <section id="implementation">
          <ReportSection title="⚙️ 实施方案" subtitle="具体的实施步骤和方法" level={2}>
            <!-- 🎨 实施步骤的子容器延迟动画示例 -->
            <div class="implementation-steps">
              <AnimatedElement animation="fadeInUp" delay={900} trigger="scroll">
                <div class="step-item">
                  <div class="step-number">1</div>
                  <div class="step-content">
                    <h4 class="step-title">第一步：准备阶段</h4>
                    <p class="step-description">描述第一步的具体内容和要求...</p>
                  </div>
                </div>
              </AnimatedElement>
              <AnimatedElement animation="fadeInUp" delay={1000} trigger="scroll">
                <div class="step-item">
                  <div class="step-number">2</div>
                  <div class="step-content">
                    <h4 class="step-title">第二步：实施阶段</h4>
                    <p class="step-description">描述第二步的具体内容和要求...</p>
                  </div>
                </div>
              </AnimatedElement>
              <AnimatedElement animation="fadeInUp" delay={1100} trigger="scroll">
                <div class="step-item">
                <div class="step-number">3</div>
                <div class="step-content">
                  <h4 class="step-title">第三步：验证阶段</h4>
                  <p class="step-description">描述第三步的具体内容和要求...</p>
                </div>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>

      <!-- 总结章节 -->
      <AnimatedElement animation="fadeInUp" delay={1000} trigger="scroll">
        <section id="conclusion">
          <ReportSection title="📋 总结" subtitle="报告内容总结和后续计划" level={2}>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div class="summary-card">
                <h3 class="summary-title">🎯 关键成果</h3>
                <ul class="summary-list">
                  <li>成果一：具体描述</li>
                  <li>成果二：具体描述</li>
                  <li>成果三：具体描述</li>
                </ul>
              </div>
              <div class="summary-card">
                <h3 class="summary-title">📅 后续计划</h3>
                <ul class="summary-list">
                  <li>计划一：具体内容</li>
                  <li>计划二：具体内容</li>
                  <li>计划三：具体内容</li>
                </ul>
              </div>
            </div>
          </ReportSection>
        </section>
      </AnimatedElement>
      
      </div>
    </div>
  </main>
  
  <Footer />
</BaseLayout>

<style>
  /* 基础样式 */
  .report-main {
    min-height: 100vh;
    padding-bottom: 2rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    color: #333d4b;
    position: relative;
  }
  
  .report-main::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, 
      rgba(174, 206, 221, 0.1) 0%, 
      rgba(177, 217, 212, 0.05) 25%, 
      rgba(178, 197, 213, 0.03) 50%, 
      rgba(155, 181, 200, 0.05) 75%, 
      rgba(122, 153, 176, 0.1) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* 布局 */
  .report-layout {
    --report-sidebar-width: clamp(var(--report-sidebar-min-width), 22vw, var(--report-sidebar-max-width));
    display: flex;
    flex-direction: column;
    gap: var(--report-sidebar-gap);
    position: relative;
    width: 100%;
  }

  .report-content {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0 auto;
  }
  
  .container {
    max-width: 1200px;
    width: 100%;
  }
  
  .container {
    max-width: var(--max-content-width);
    width: 100%;
  }

  :global(:root) {
    --max-content-width: 1200px;
    --report-sidebar-min-width: 260px;
    --report-sidebar-base-width: 300px;
    --report-sidebar-max-width: 320px;
    --report-sidebar-gap: 2.5rem;
    --report-content-padding: 1rem;
  }
  
  .mx-auto { margin: 0 auto; }
  .px-4 { padding: 0 1rem; }

  /* 标题区域 */
  .report-header {
    padding: 4rem 0 2rem 0;
    text-align: center;
  }
  
  .report-title {
    font-size: 3rem;
    font-weight: 800;
    color: #3b82f6;
    margin: 0 0 1rem 0;
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }
  
  .report-subtitle {
    font-size: 1.25rem;
    color: #2c4a6b;
    margin: 0 0 2rem 0;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .report-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 1.5rem 0;
  }
  
  .report-date, .report-type {
    background: rgba(91, 119, 142, 0.1);
    color: #011a2d;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
  }
  
  .report-action {
    margin-top: 2rem;
  }

  /* 内容样式 */
  .content-section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #3b82f6;
    margin: 0 0 1rem 0;
  }
  
  .content-list {
    list-style: none;
    padding: 0;
  }
  
  .content-list li {
    background: rgba(91, 119, 142, 0.05);
    border-left: 4px solid #5b778e;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 0 0.5rem 0.5rem 0;
  }

  /* 分析卡片 */
  .analysis-card {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(14, 116, 144, 0.12));
    padding: 1.5rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(59, 130, 246, 0.35);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(16px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .analysis-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  }
  
  .card-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #3b82f6;
  }
  
  .card-description {
    color: #4b5563;
    line-height: 1.6;
  }

  /* 实施步骤 */
  .implementation-steps {
    space-y: 2rem;
  }
  
  .step-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .step-number {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  
  .step-content {
    flex: 1;
  }
  
  .step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #3b82f6;
    margin: 0 0 0.5rem 0;
  }
  
  .step-description {
    color: #4b5563;
    line-height: 1.6;
  }

  /* 总结卡片 */
  .summary-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(91, 119, 142, 0.2);
    border-radius: 1rem;
    padding: 2rem;
  }
  
  .summary-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
    margin: 0 0 1rem 0;
  }
  
  .summary-list {
    list-style: none;
    padding: 0;
  }
  
  .summary-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(91, 119, 142, 0.1);
    color: #4b5563;
  }
  
  .summary-list li:last-child {
    border-bottom: none;
  }

  /* 响应式 */
  @media (max-width: 768px) {
    .report-title { font-size: 2rem; }
    .report-subtitle { font-size: 1.1rem; }
    .report-meta { 
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
    .step-item { flex-direction: column; text-align: center; }
    .grid { grid-template-columns: 1fr !important; }
  }

  @media (min-width: 1280px) {
    .report-main {
      padding-left: clamp(
        calc(var(--report-sidebar-base-width) + var(--report-sidebar-gap)),
        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
        calc(var(--report-sidebar-max-width) + 3rem)
      );
      padding-right: clamp(
        var(--report-content-padding),
        calc((100vw - var(--max-content-width)) / 2 + var(--report-content-padding)),
        2rem
      );
    }
    .report-layout { max-width: var(--max-content-width); margin: 0 auto; }
    .report-content { max-width: 100%; width: 100%; }
    .container {
      padding-left: var(--report-content-padding);
      padding-right: var(--report-content-padding);
    }
  }

  /* 工具类 */
  .grid { display: grid; }
  .grid-cols-1 { grid-template-columns: 1fr; }
  @media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  }
  .gap-8 { gap: 2rem; }
  .space-y-6 > * + * { margin-top: 1.5rem; }
  .space-y-8 > * + * { margin-top: 2rem; }
</style>