<template>
  <div class="decision-case-page" :class="{ 'has-fixed-tabs': isTabsFixed }">
    <div class="decor decor--blue"></div>
    <div class="decor decor--purple"></div>
    <div class="decor decor--deep-blue"></div>
    <div class="decor decor--deep-purple"></div>

    <section class="case-hero">
      <img class="case-hero__bg" :src="bannerImg" alt="">
      <div class="case-container">
        <div class="case-hero__content">
          <h1>投策智能体</h1>
          <p>
            面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告。帮助企业快速梳理核心信息，预判市场走向，辅助降低决策偏差，提升投资方案的科学性与可行性。
          </p>
        </div>
      </div>
    </section>

    <section ref="caseTabs" class="case-tabs" :class="{ 'is-fixed': isTabsFixed }">
      <div class="case-container">
        <button
          v-for="tab in tabs"
          :key="tab.id"
          type="button"
          class="tab-item"
          :class="{ 'tab-active': activeTab === tab.id }"
          @click="scrollToSection(tab.id)"
        >
          {{ tab.label }}
        </button>
      </div>
    </section>

    <main class="case-main">
      <section id="scenarios" class="case-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>应用场景</h2>
            <p>覆盖企业投资决策全链路</p>
          </div>
          <div class="scenario-grid">
            <article v-for="item in scenarios" :key="item.title" class="feature-card">
              <div class="feature-card__head">
                <div class="icon-gradient">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                  </svg>
                </div>
                <h3>{{ item.title }}</h3>
              </div>
              <p>{{ item.desc }}</p>
            </article>
          </div>
        </div>
      </section>

      <section id="solution" class="case-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>企业决策的困境与解决方案</h2>
            <p>聚焦数据收集、研报撰写、知识管理、智能应用四大维度</p>
          </div>
          <div class="solution-grid">
            <article class="problem-card">
              <h3>
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
                困境：数据丰富，洞察贫乏
              </h3>
              <div class="list-block">
                <div v-for="item in problems" :key="item.title" class="list-item list-item--danger">
                  <div class="list-icon">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                    </svg>
                  </div>
                  <div>
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.desc }}</p>
                  </div>
                </div>
              </div>
            </article>

            <article class="solution-card">
              <h3>
                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                解决方案：E决策平台核心能力
              </h3>
              <p class="solution-card__intro">
                聚焦“数据收集、研报撰写、知识管理、智能应用”四大维度，帮助企业构建专属知识体系，赋能科学决策。
              </p>
              <div class="ability-list">
                <div v-for="item in abilities" :key="item.title" class="ability-item">
                  <div class="ability-icon icon-gradient">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                    </svg>
                  </div>
                  <div>
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.desc }}</p>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>

      <section id="highlights" class="case-section">
        <div class="case-container">
          <div class="section-heading">
            <h2>项目亮点</h2>
            <p>一次研究，双格式交付</p>
          </div>
          <div class="highlight-grid">
            <article v-for="item in highlights" :key="item.title" class="feature-card">
              <div class="feature-card__head">
                <div class="icon-gradient">
                  <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="item.icon" />
                  </svg>
                </div>
                <h3>{{ item.title }}</h3>
              </div>
              <p>{{ item.desc }}</p>
            </article>
          </div>
        </div>
      </section>
    </main>

    <section class="case-cta">
      <div class="case-container case-cta__inner">
        <h2>开始使用投策智能体</h2>
        <p>让AI赋能您的投资决策，一次研究，双格式交付</p>
        <button type="button" @click="handleContact">联系销售</button>
      </div>
    </section>

  </div>
</template>

<script>
export default {
  name: 'DecisionCase',
  data() {
    return {
      activeTab: 'scenarios',
      isTabsFixed: false,
      tabsOriginTop: 0,
      tabs: [
        { id: 'scenarios', label: '应用场景' },
        { id: 'solution', label: '解决方案' },
        { id: 'highlights', label: '项目亮点' }
      ],
      scenarios: [
        {
          title: '投资可行性研究',
          desc: '自动收集行业数据、市场趋势、政策信息，生成专业的投资可行性分析报告，辅助决策者快速评估项目价值与风险。',
          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
        },
        {
          title: '市场调研分析',
          desc: '整合多维度市场数据，自动分析市场规模、竞争格局、发展趋势，生成详实的市场调研报告，支撑业务决策。',
          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
        },
        {
          title: '竞品分析',
          desc: '自动收集竞品信息，分析产品特性、市场策略、用户反馈，生成竞品对比分析报告，帮助企业制定差异化竞争策略。',
          icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
        }
      ],
      problems: [
        {
          title: '数据孤岛严重',
          desc: '数据分散在不同业务系统中、或者网站信源中，难以打通整合，阻碍全面分析与决策。',
          icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
        },
        {
          title: '知识沉淀难',
          desc: '关键业务知识与专家经验主要存在于个人头脑中，随人员流动而流失。',
          icon: 'M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'
        },
        {
          title: '报告撰写耗时费力',
          desc: '手工整理数据、制作高质量决策报告过程繁琐，效率低下，难以快速响应需求。',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
        }
      ],
      abilities: [
        {
          title: '数据收集与整合',
          desc: '自动抓取内外部数据源，打破壁垒，统一数据口径',
          icon: 'M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4'
        },
        {
          title: '知识管理与沉淀',
          desc: '将非结构化文档转化为结构化知识图谱，沉淀企业核心资产',
          icon: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253'
        },
        {
          title: '智能应用与问答',
          desc: '支持自然语言提问，快速检索与回答，即问即得关键洞察',
          icon: 'M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z'
        },
        {
          title: 'AI辅助研报撰写',
          desc: '输入主题自动生成内容，支持一键导出PDF/PPT',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
        }
      ],
      highlights: [
        {
          title: '一键生成PDF研究报告',
          desc: '在AI辅助生成研报内容后，系统支持一键导出为格式规范、内容详实的PDF研究报告，满足归档与深度阅读需求。',
          icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
        },
        {
          title: '一键生成PPT演示文稿',
          desc: '除了PDF，系统还支持一键导出为PPT演示文稿，并自动完成逻辑梳理、智能分页和专业排版，即导即用。',
          icon: 'M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
        }
      ],
      bannerImg: require('./img.jpg')
    }
  },
  mounted() {
    this.$nextTick(() => {
      const scroller = this.getScrollContainer()
      this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
      scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
      this.handlePageScroll()
    })
  },
  beforeDestroy() {
    this.getScrollContainer().removeEventListener('scroll', this.handlePageScroll)
  },
  methods: {
    getScrollContainer() {
      return document.getElementById('homeOut') || window
    },
    getScrollOffset() {
      const tabs = this.$el.querySelector('.case-tabs')
      const tabsHeight = tabs ? tabs.offsetHeight : 0
      return tabsHeight + 12
    },
    getElementTopInScroller(element, scroller) {
      if (scroller === window) {
        return element.getBoundingClientRect().top + window.pageYOffset
      }
      return element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
    },
    getScrollerTop(scroller) {
      return scroller === window ? window.pageYOffset : scroller.scrollTop
    },
    scrollToSection(sectionName) {
      this.activeTab = sectionName
      const element = this.$el.querySelector(`#${sectionName}`)
      if (element) {
        const scroller = this.getScrollContainer()
        const offset = this.getScrollOffset()
        const top = this.getElementTopInScroller(element, scroller) - offset
        scroller.scrollTo({ top, behavior: 'smooth' })
      }
    },
    handlePageScroll() {
      const scroller = this.getScrollContainer()
      const scrollerTop = this.getScrollerTop(scroller)
      this.isTabsFixed = scrollerTop >= this.tabsOriginTop
      const offsetTop = scrollerTop + this.getScrollOffset() + 24
      const currentTab = this.tabs
        .map(tab => {
          const element = this.$el.querySelector(`#${tab.id}`)
          return element ? { id: tab.id, top: this.getElementTopInScroller(element, scroller) } : null
        })
        .filter(Boolean)
        .reverse()
        .find(tab => offsetTop >= tab.top)

      if (currentTab) {
        this.activeTab = currentTab.id
      }
    },
    handleContact() {
      this.$message.info('感谢您的关注，我们将尽快与您联系')
    }
  }
}
</script>

<style scoped>
.decision-case-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.decision-case-page *,
.decision-case-page *::before,
.decision-case-page *::after {
  box-sizing: border-box;
}

.case-container {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 24px;
}

.decor {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
  opacity: 0.1;
  pointer-events: none;
}

.decor--blue {
  top: 80px;
  left: 40px;
  width: 256px;
  height: 256px;
  background: linear-gradient(135deg, #60a5fa, #a855f7);
}

.decor--purple {
  top: 384px;
  right: 80px;
  width: 320px;
  height: 320px;
  background: linear-gradient(135deg, #c084fc, #3b82f6);
}

.decor--deep-blue {
  top: 1200px;
  left: 25%;
  width: 288px;
  height: 288px;
  background: linear-gradient(135deg, #3b82f6, #9333ea);
}

.decor--deep-purple {
  top: 2000px;
  right: 33%;
  width: 384px;
  height: 384px;
  background: linear-gradient(135deg, #a855f7, #2563eb);
}

.case-hero {
  position: relative;
  height: min(446px, calc(100vw * 446 / 1551));
  min-height: 260px;
  padding: 0;
  overflow: hidden;
  background: #f8fafc;
}

.case-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.case-hero__content {
  position: relative;
  z-index: 1;
  max-width: 672px;
  padding-top: clamp(46px, 5.2vw, 82px);
}

.case-hero h1 {
  margin: 0 0 24px;
  color: #111827;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.case-hero p {
  margin: 0;
  color: #4b5563;
  font-size: 20px;
  line-height: 1.625;
}

.case-tabs {
  position: sticky;
  top: 0;
  z-index: 80;
  background: #fff;
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.case-tabs.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.decision-case-page.has-fixed-tabs .case-main {
  padding-top: 60px;
}

.case-tabs .case-container {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 100%;
}

.tab-item {
  height: 100%;
  padding: 12px 16px;
  color: #374151;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.tab-item:hover,
.tab-active {
  color: #3b82f6;
  background: #eff6ff;
}

.case-main {
  padding-bottom: 80px;
}

.case-section {
  position: relative;
  padding: 64px 0;
}

.section-heading {
  margin-bottom: 48px;
  text-align: center;
}

.section-heading h2 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 40px;
  font-weight: 700;
}

.section-heading p {
  margin: 0;
  color: #4b5563;
  font-size: 20px;
}

.scenario-grid,
.solution-grid,
.highlight-grid {
  display: grid;
  gap: 32px;
}

.scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.highlight-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1024px;
  margin: 0 auto;
}

.feature-card,
.problem-card,
.solution-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.feature-card {
  padding: 32px;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.feature-card h3 {
  margin: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 700;
}

.highlight-grid .feature-card h3 {
  font-size: 24px;
}

.feature-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.625;
}

.icon-gradient {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border-radius: 12px;
}

.icon-gradient svg {
  width: 20px;
  height: 20px;
}

.problem-card,
.solution-card {
  padding: 32px;
  border-left: 4px solid;
}

.problem-card {
  border-left-color: #ef4444;
}

.solution-card {
  border-left-color: #3b82f6;
}

.problem-card h3,
.solution-card h3 {
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 700;
}

.problem-card h3 {
  color: #dc2626;
}

.solution-card h3 {
  color: #2563eb;
}

.problem-card h3 svg,
.solution-card h3 svg {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.list-block {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.list-item {
  display: flex;
  align-items: flex-start;
}

.list-icon,
.ability-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 8px;
}

.list-icon {
  width: 48px;
  height: 48px;
  color: #dc2626;
  background: #fee2e2;
}

.list-icon svg,
.ability-icon svg {
  width: 24px;
  height: 24px;
}

.list-item h4,
.ability-item h4 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

.list-item p,
.ability-item p,
.solution-card__intro {
  margin: 0;
  color: #4b5563;
  line-height: 1.6;
}

.solution-card__intro {
  margin-bottom: 24px;
}

.ability-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ability-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #eff6ff;
  border-radius: 8px;
}

.ability-icon {
  width: 40px;
  height: 40px;
}

.ability-item p {
  font-size: 14px;
}

.case-cta {
  padding: 80px 0;
  color: #fff;
  background  : linear-gradient(90deg, #334155, #1e293b);
  /* background: #fff; */
}

.case-cta__inner {
  max-width: 896px;
  text-align: center;
}

.case-cta h2 {
  margin: 0 0 24px;
  font-size: 40px;
  font-weight: 700;
}

.case-cta p {
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
}

.case-cta button {
  padding: 16px 32px;
  color: #2563eb;
  font-size: 18px;
  font-weight: 700;
  background: #fff;
  border: 0;
  border-radius: 8px;
  transition: all 0.2s;
}

.case-cta button:hover {
  background: #eff6ff;
}

@media (max-width: 1024px) {
  .solution-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .case-hero {
    min-height: auto;
    padding: 64px 0;
  }

  .case-hero__content {
    padding-top: 24px;
  }

  .case-hero h1 {
    font-size: 36px;
  }

  .case-hero p,
  .section-heading p,
  .case-cta p {
    font-size: 16px;
  }

  .case-tabs {
    top: 0;
    overflow-x: auto;
  }

  .case-tabs .case-container {
    gap: 12px;
    min-width: max-content;
  }

  .section-heading h2,
  .case-cta h2 {
    font-size: 30px;
  }

  .scenario-grid,
  .highlight-grid {
    grid-template-columns: 1fr;
  }

  .feature-card,
  .problem-card,
  .solution-card {
    padding: 24px;
  }
}
</style>
