<template>
  <div class="plaza-page">
    <div class="floating-orb orb-1"></div>
    <div class="floating-orb orb-2"></div>
    <div class="floating-orb orb-3"></div>
    <div class="floating-orb orb-4"></div>

    <section class="hero-section">
      <div class="hero-glow glow-blue"></div>
      <div class="hero-glow glow-cyan"></div>
      <div class="hero-glow glow-warm"></div>
      <div class="particle-layer">
        <span v-for="item in 30" :key="item" :style="getParticleStyle(item)"></span>
      </div>

      <div class="hero-inner">
        <h1>供需<span>广场</span></h1>
        <p>
          围绕云资源、算力、网络服务、模型及应用，企业可灵活发布资源供给或业务需求，
          通过精准匹配打破信息壁垒，助力企业降本增效
        </p>
        <div class="hero-actions">
          <button type="button" class="primary-btn" @click="sendInfo('2')">
            <i class="el-icon-plus"></i>
            发布需求
          </button>
          <button type="button" class="secondary-btn" @click="scrollToList">
            <i class="el-icon-search"></i>
            浏览产品
          </button>
          <!-- <button type="button" class="secondary-btn" @click="sendInfo('1')">
            <i class="el-icon-s-goods"></i>
            发布商品
          </button> -->
        </div>
      </div>
    </section>



    <section id="demand-list" class="list-section">
      <div class="section-head">
        <h2>热门<span>产品</span></h2>
        <p>AI 行业应用领域，开元云为您提供完善的产品服务</p>
      </div>

      <div class="toolbar">
        <div class="search-box">
          <i class="el-icon-search"></i>
          <input v-model.trim="keyword" type="text" placeholder="搜索产品..." @input="handleSearch">
        </div>
      </div>

      <div class="tab-row">
        <button
          v-for="tab in plazaTabs"
          :key="tab.value"
          type="button"
          :class="['tab-btn', { active: currentPlazaTab === tab.value }]"
          :data-color="tab.color"
          @click="switchPlazaTab(tab.value)"
        >
          {{ tab.label }}
        </button>
      </div>

      <div v-if="filteredPlazaDemandList.length" class="card-grid">
        <article v-for="item in filteredPlazaDemandList" :key="item.title" class="demand-card">
          <div class="card-top">
            <span class="type-tag" :style="getTypeStyle(item)">{{ item.type }}</span>
          </div>
          <h4>{{ item.title }}</h4>
          <p>{{ item.desc }}</p>
          <div class="tag-list">
            <span v-for="tag in item.tags" :key="tag" :style="getTypeStyle(item)">{{ tag }}</span>
          </div>
          <!-- <div class="card-foot static-card-foot">
            <button type="button">
              查看详情
              <span>→</span>
            </button>
          </div> -->
        </article>
      </div>

      <div v-else class="empty-box">
        <img src="./img/empty.svg" alt="暂无数据">
        <p>暂无匹配的需求信息</p>
      </div>

      <!-- 原接口返回产品区域先保留，按需求隐藏不删除 -->
      <div class="interface-product-block is-hidden">
        <div class="tab-row">
        <button
          type="button"
          :class="['tab-btn', { active: !activeFirstId }]"
          data-color="blue"
          @click="selectFirstCategory('')"
        >
          全部
        </button>
        <button
          v-for="category in firstCategories"
          :key="category.id"
          type="button"
          :class="['tab-btn', { active: activeFirstId === category.id }]"
          :data-color="getTabColor(category)"
          @click="selectFirstCategory(category.id)"
        >
          {{ getCategoryName(category) }}
        </button>
        </div>

        <div v-if="secondCategories.length" class="sub-tab-row">
        <button
          type="button"
          :class="['sub-tab-btn', { active: !activeSecondId }]"
          @click="selectSecondCategory('')"
        >
          全部品类
        </button>
        <button
          v-for="category in secondCategories"
          :key="category.id"
          type="button"
          :class="['sub-tab-btn', { active: activeSecondId === category.id }]"
          @click="selectSecondCategory(category.id)"
        >
          {{ getCategoryName(category) }}
        </button>
        </div>

        <div class="publish-type-row">
        <button type="button" :class="{ active: publish_type === '1' }" @click="changePublishType('1')">企业商品</button>
        <button type="button" :class="{ active: publish_type === '2' }" @click="changePublishType('2')">企业需求</button>
        </div>

        <div v-if="filteredProductList.length" class="card-grid">
        <article v-for="item in filteredProductList" :key="item.id" class="demand-card">
          <div class="card-top">
            <span class="type-tag" :style="getTypeStyle(item)">{{ getItemType(item) }}</span>
            <span v-if="item.favorite === '1'" class="favorite-tag">已收藏</span>
          </div>
          <h4>{{ item.product_name || item.name || '未命名产品' }}</h4>
          <p>{{ item.requirement_summary || item.description || '暂无描述' }}</p>
          <div v-if="item.company_name || item.company_type" class="meta-line">
            <span v-if="item.company_name">{{ item.company_name }}</span>
            <span v-if="item.company_type">{{ item.company_type }}</span>
          </div>
          <div class="tag-list">
            <span v-for="tag in getItemTags(item)" :key="tag" :style="getTypeStyle(item)">{{ tag }}</span>
          </div>
          <div class="card-foot">
            <span class="price">{{ getPriceText(item) }}</span>
            <!-- <button type="button" @click="openDetail(item)">
              查看详情
              <i v-if="loadingStates[item.id]" class="el-icon-loading"></i>
              <span v-else>→</span>
            </button> -->
          </div>
        </article>
        </div>

        <div v-else class="empty-box">
        <img src="./img/empty.svg" alt="暂无数据">
        <p>暂无匹配的需求信息</p>
        </div>

        <el-pagination
        v-if="total > page_size"
        class="plaza-pagination"
        :current-page.sync="current_page"
        :page-size="page_size"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        />
      </div>
    </section>

    <section class="cta-section">
      <div class="cta-card">
        <div class="cta-bg"></div>
        <div class="cta-content">
          <h2>打破信息壁垒，助力降本增效</h2>
          <p>发布需求，精准匹配，与行业伙伴共建云服务生态</p>
          <!-- <div>
            <button type="button" class="primary-btn" @click="sendInfo('2')">
              <i class="el-icon-plus"></i>
              发布需求
            </button>
            <button type="button" class="secondary-btn" @click="sendInfo('1')">
              <i class="el-icon-office-building"></i>
              企业入驻
            </button>
          </div> -->
        </div>
      </div>
    </section>

    <div v-if="publishDemandVisible" class="modal-overlay active" @click.self="closePublishDemand">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>发布需求</h3>
          <button type="button" class="modal-close" @click="closePublishDemand">
            <i class="el-icon-close"></i>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-item">
            <label>所属类别 <span>*</span></label>
            <el-cascader 
              v-model="demandForm.product_category"
              class="demand-category-cascader"
              :options="demandCategoryOptions"
              placeholder="请选择所属类别"
              @change="handleDemandCategoryChange"
            ></el-cascader>
          </div>
          <div class="form-item">
            <label>应用场景</label>
            <input v-model.trim="demandForm.scenario" class="form-input" type="text" placeholder="请描述应用场景，如：智能客服、金融风控、医疗影像等">
          </div>
          <div class="form-item">
            <label>需求标题 <span>*</span></label>
            <input v-model.trim="demandForm.title" class="form-input" type="text" placeholder="请输入需求标题">
          </div>
          <div class="form-item">
            <label>需求描述 <span>*</span></label>
            <textarea v-model.trim="demandForm.desc" class="form-input" placeholder="请详细描述您的需求，包括场景、规模、期望交付方式等"></textarea>
          </div>
          <div class="form-item">
            <label>企业名称 <span>*</span></label>
            <input v-model.trim="demandForm.company" class="form-input" type="text" placeholder="请输入企业名称">
          </div>
          <div class="form-item">
            <label>联系人</label>
            <input v-model.trim="demandForm.contact" class="form-input" type="text" placeholder="请输入联系人姓名">
          </div>
          <div class="form-item">
            <label>联系方式</label>
            <input v-model.trim="demandForm.phone" class="form-input" type="text" placeholder="手机号或邮箱">
          </div>
          <div class="modal-actions">
            <button type="button" class="submit-demand-btn" @click="submitDemand">提交需求</button>
            <button type="button" class="cancel-demand-btn" @click="closePublishDemand">取消</button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="publish_type === '2' ? '发布需求' : '发布商品'"
      width="60vw"
      top="5vh"
      custom-class="publish-dialog"
      :visible.sync="sendProductVisible"
    >
      <sendProduct v-if="publish_type" :isEdit="false" :publish_type="publish_type" @success="sendProductSuccess"></sendProduct>
    </el-dialog>

    <el-dialog title="温馨提示" :visible.sync="showTip" width="30%">
      <span>您还没有完善企业信息，完善企业信息审核通过后您可以发布需求与商品。</span>
      <span slot="footer" class="dialog-footer">
        <span>
          <span class="tip-text">跳转到</span>
          <el-button size="small" type="primary" @click="goInfo">信息完善</el-button>
        </span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqCompanyCategorySearch,
  reqEnterpriseAuditInfoSearch,
  reqGetProductCategorySearch,
  reqGetProductDetail,
  reqGetSupplyAndDemandSquareList,
  reqPublishProductAdd, 
  reqSupplyAndDemandFirstCategory
} from '@/api/ncmatch'
import { buildCaTree } from '@/views/homePage/ncmatch/mainPage/sendProduct/buildCaTree'
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'supplyAndDemandSquare',
  components: {
    sendProduct: () => import('@/views/homePage/ncmatch/mainPage/sendProduct/index.vue')
  },
  data() {
    return {
      page_size: 9,
      current_page: 1,
      publish_type: '1',
      selectedCategory: '',
      selectedCompanies: [],
      companies: [],
      productList: [],
      total: 0,
      firstCategories: [],
      secondCategories: [],
      demandCategoryOptions: [],
      activeFirstId: '',
      activeSecondId: '',
      showTip: false,
      sendProductVisible: false,
      publishDemandVisible: false,
      useStaticPlaza: true,
      keyword: '',
      currentPlazaTab: '全部',
      loadingStates: {},
      demandForm: this.createDemandForm(),
      plazaTabs: [
        { label: '全部', value: '全部', color: 'blue' },
        { label: '大模型', value: '大模型', color: 'orange' },
        { label: '智能体', value: '智能体', color: 'purple' },
        { label: 'AI解决方案', value: '行业解决方案', color: 'green' }
      ],
      plazaDemandData: [
        {
          title: 'AI Ops能源电力监测模型',
          company: '星河能源科技',
          type: '大模型',
          tags: ['能源', '电力监测'],
          desc: '面向能源电力场景的AI运维监测模型，实现设备状态智能预警与故障诊断'
        },
        {
          title: '投资决策分析大模型',
          company: '银河金融科技',
          type: '大模型',
          tags: ['投资', '决策分析'],
          desc: '面向投资场景的决策分析大模型，实现市场趋势预测与风险评估'
        },
        {
          title: '投标智能体',
          company: '鼎盛集团',
          type: '智能体',
          tags: ['投标', '智能分析'],
          desc: '面向投标场景的智能助手，实现投标文件智能生成与合规审查'
        },
        {
          title: '招投标大模型引擎',
          company: '仁济医疗科技',
          type: '大模型',
          tags: ['招投标', '智能引擎'],
          desc: '面向招投标场景的大模型智能引擎，实现标书智能分析与生成'
        },
        {
          title: '教学助手智能体',
          company: '超算数据中心',
          type: '智能体',
          tags: ['教育', '智能体'],
          desc: '面向教育场景的智能教学助手，实现个性化学习辅导与答疑'
        },
        {
          title: '招标评标智能体',
          company: '灵犀AI科技',
          type: '智能体',
          tags: ['招标', '评标'],
          desc: '面向招投标场景的智能评标助手，实现标书智能解析与评分推荐'
        },
        {
          title: 'AI智慧农业',
          company: '精工制造集团',
          type: '行业解决方案',
          tags: ['智慧农业', 'AI'],
          desc: '面向农业场景的AI智慧解决方案，实现农作物监测与精准灌溉'
        }
      ],
      steps: [
        { title: '企业入驻', desc: '完成企业认证，入驻供需广场', icon: 'el-icon-office-building', theme: 'blue' },
        { title: '发布供需', desc: '发布资源供给或业务需求信息', icon: 'el-icon-edit-outline', theme: 'cyan' },
        { title: '精准匹配', desc: 'AI 引擎智能推荐最优合作方', icon: 'el-icon-lightning', theme: 'green' },
        { title: '签约合作', desc: '线上签约，安全高效达成合作', icon: 'el-icon-finished', theme: 'teal' }
      ]
    }
  },
  computed: {
    filteredPlazaDemandList() {
      const keyword = this.keyword.toLowerCase()
      return this.plazaDemandData.filter(item => {
        if (item.isPublishedDemand) return false
        const matchTab = this.currentPlazaTab === '全部' || item.type === this.currentPlazaTab
        const matchSearch = !keyword || [
          item.title,
          item.company,
          item.type,
          item.desc,
          ...(item.tags || [])
        ].some(value => String(value || '').toLowerCase().includes(keyword))
        return matchTab && matchSearch
      })
    },
    filteredProductList() {
      if (!this.keyword) return this.productList
      const keyword = this.keyword.toLowerCase()
      return this.productList.filter(item => {
        return [
          item.product_name,
          item.name,
          item.company_name,
          item.company_type,
          item.requirement_summary,
          item.description
        ].some(value => String(value || '').toLowerCase().includes(keyword))
      })
    },
    isNcmatchHome() {
      return window.location.href.includes('ncmatchHome')
    },
    ...mapGetters(['sidebar', 'avatar', 'device']),
    ...mapState({
      isShowPanel: state => state.product.showHomeNav,
      navIndex: state => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginStateVuex: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew
    }),
    loginState() {
      const userId = sessionStorage.getItem('userId')
      return this.loginStateVuex || (userId !== null && userId !== 'null' && userId !== '')
    }
  },
  created() {
    this.initDemandCategories()
    if (!this.useStaticPlaza) {
      this.initAllData()
    }
  },
  methods: {
    createDemandForm() {
      return {
        type: '',
        product_category: [],
        scenario: '',
        title: '',
        desc: '',
        company: '',
        contact: '',
        phone: ''
      }
    },
    initDemandCategories() {
      return reqGetProductCategorySearch({ url_link: window.location.href, to_page: 'publish' }).then(res => {
        if (res.status) {
          this.demandCategoryOptions = buildCaTree(res.data || [])
        }
        return res
      })
    },
    sendInfo(type) {
      if (!this.loginState) {
        window.dispatchEvent(new Event('kboss-open-login-dialog'))
        return
      }

      reqEnterpriseAuditInfoSearch({
        url_link: window.location.href
      }).then(res => {
        const dataList = res && res.data && res.data.data
        const hasAuditInfo = Array.isArray(dataList) && dataList.length !== 0
        const roles = sessionStorage.getItem('jueseNew')
        const isCustomer = roles ? roles.includes('客户') : true

        if (hasAuditInfo && dataList[0]) {
          const auditStatus = dataList[0].audit_status
          if (auditStatus === 'pending') {
            this.$message.warning('您的审核状态为待审核，请等待审核通过后发布~')
          } else if (auditStatus === 'rejected') {
            this.$message.warning('您的审核状态为驳回，请重新提交~')
          } else {
            this.openPublishByType(type)
          }
        } else if (!isCustomer) {
          this.openPublishByType(type)
        } else {
          this.showTip = true
        }
      })
    },
    openPublishByType(type) {
      this.publish_type = type
      if (type === '2') {
        this.publishDemandVisible = true
      } else {
        this.sendProductVisible = true
      }
    },
    closePublishDemand() {
      this.publishDemandVisible = false
      this.resetDemandForm()
    },
    resetDemandForm() {
      this.demandForm = this.createDemandForm()
    },
    submitDemand() {
      if (!this.demandForm.product_category || !this.demandForm.product_category.length) {
        this.$message.warning('请选择所属类别')
        return
      }
      if (!this.demandForm.title) {
        this.$message.warning('请输入需求标题')
        return
      }
      if (!this.demandForm.desc) {
        this.$message.warning('请输入需求描述')
        return
      }
      if (!this.demandForm.company) {
        this.$message.warning('请输入企业名称')
        return
      }

      const formData = new FormData()
      formData.append('url_link', window.location.href)
      formData.append('publish_type', '2')
      formData.append('product_category', this.demandForm.product_category)
      formData.append('product_name', this.demandForm.title)
      formData.append('requirement_summary', this.demandForm.desc)
      formData.append('company_name', this.demandForm.company)
      formData.append('contact_person', this.demandForm.contact)
      formData.append('phone_number', this.demandForm.phone)
      formData.append('application_scenario', this.demandForm.scenario)
      reqPublishProductAdd(formData).then(res => {
        if (res.status) {
          this.plazaDemandData = this.plazaDemandData.filter(item => {
            return item.title !== this.demandForm.title || item.desc !== this.demandForm.desc
          })
          this.publishDemandVisible = false
          this.resetDemandForm()
          this.$message.success('需求发布成功！')
        } else {
          this.$message.error('需求发布失败')
        }
      }).catch(() => {
        this.$message.error('需求发布失败，请稍后重试')
      })
    },
    handleDemandCategoryChange(value) {
      const lastValue = Array.isArray(value) ? value[value.length - 1] : value
      const node = this.findCategoryNode(this.demandCategoryOptions, lastValue)
      this.demandForm.type = node ? node.label : ''
    },
    findCategoryNode(options, value) {
      for (const item of options || []) {
        if (item.value === value) return item
        const child = this.findCategoryNode(item.children || [], value)
        if (child) return child
      }
      return null
    },
    sendProductSuccess() {
      this.sendProductVisible = false
      this.initData()
    },
    goInfo() {
      this.showTip = false
      this.$router.push('/customer/approve')
    },
    scrollToList() {
      const target = document.getElementById('demand-list')
      if (target) target.scrollIntoView({ behavior: 'smooth' })
    },
    handleSearch() {
      this.current_page = 1
    },
    switchPlazaTab(tab) {
      this.currentPlazaTab = tab
    },
    handleCurrentChange(val) {
      this.current_page = val
      this.initData()
    },
    initAllData() {
      this.init_product_category().then(() => {
        this.init_company_category().then(() => {
          this.initData()
        })
      })
    },
    init_company_category() {
      return reqCompanyCategorySearch({ url_link: window.location.href }).then(res => {
        if (res.status) {
          this.companies = (res.data || []).map(item => ({
            label: item.company_category,
            value: item.company_category
          }))
        }
        return res
      })
    },
    init_product_category() {
      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href }).then(res => {
        if (res.status) {
          this.firstCategories = Array.isArray(res.data) ? res.data : []
          this.activeFirstId = ''
          this.activeSecondId = ''
          this.selectedCategory = ''
          this.secondCategories = []
        }
        return res
      })
    },
    loadSecondCategories(firstId) {
      if (!firstId) {
        this.secondCategories = []
        return Promise.resolve()
      }
      return reqSupplyAndDemandFirstCategory({ to_page: 'show', url_link: window.location.href, first_level_id: firstId }).then(res => {
        this.secondCategories = res.status && Array.isArray(res.data) ? res.data : []
        return res
      })
    },
    selectFirstCategory(id) {
      if (id === this.activeFirstId) return
      this.current_page = 1
      this.activeFirstId = id
      this.activeSecondId = ''
      this.selectedCategory = id || ''
      this.loadSecondCategories(id).then(() => {
        this.initData()
      })
    },
    selectSecondCategory(id) {
      if (id === this.activeSecondId) return
      this.current_page = 1
      this.activeSecondId = id
      this.selectedCategory = id || this.activeFirstId || ''
      this.initData()
    },
    changePublishType(type) {
      if (this.publish_type === type) return
      this.publish_type = type
      this.current_page = 1
      this.initData()
    },
    initData() {
      const payload = {
        product_category: this.selectedCategory,
        to_page: 'square',
        url_link: window.location.href,
        page_size: this.page_size,
        current_page: this.current_page,
        company_type: this.selectedCompanies.length > 0 ? this.selectedCompanies.join(',') : '',
        publish_type: this.publish_type
      }
      reqGetSupplyAndDemandSquareList(payload).then(res => {
        if (res.status) {
          const data = Array.isArray(res.data) ? res.data : []
          const first = data[0] || {}
          this.productList = first.product_list || []
          this.total = Number(first.total_count || 0)
        }
      })
    },
    selectCompany(companyId) {
      const index = this.selectedCompanies.indexOf(companyId)
      if (index > -1) {
        this.selectedCompanies.splice(index, 1)
      } else {
        this.selectedCompanies.push(companyId)
      }
      this.initData()
    },
    openDetail(item) {
      this.$set(this.loadingStates, item.id, true)
      reqGetProductDetail({
        id: item.productid ? item.productid : item.id,
        from: 'f'
      }).then(res => {
        if (res.status) {
          this.$store.commit('SETPRODUCTDETAIL', res.data)
          this.$store.commit('SHOWPRODUCTDETAIL', true)
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.$set(this.loadingStates, item.id, false)
      })
    },
    getCategoryName(category) {
      return category.product_category || category.label || category.name || '未分类'
    },
    getTabColor(category) {
      const name = this.getCategoryName(category)
      if (name.includes('模型')) return 'orange'
      if (name.includes('智能体')) return 'purple'
      if (name.includes('方案') || name.includes('解决')) return 'green'
      return 'blue'
    },
    getItemType(item) {
      return item.type || item.company_type || item.product_category || (this.publish_type === '1' ? '企业商品' : '企业需求')
    },
    getTypeStyle(item) {
      const type = this.getItemType(item)
      const colors = type.includes('模型')
        ? { bg: 'rgba(245,158,11,0.08)', text: '#d97706', border: 'rgba(245,158,11,0.15)' }
        : type.includes('智能体')
          ? { bg: 'rgba(139,92,246,0.08)', text: '#7c3aed', border: 'rgba(139,92,246,0.15)' }
          : type.includes('方案') || type.includes('解决')
            ? { bg: 'rgba(16,185,129,0.08)', text: '#059669', border: 'rgba(16,185,129,0.15)' }
            : { bg: 'rgba(45,91,255,0.08)', text: '#2d5bff', border: 'rgba(45,91,255,0.15)' }
      return {
        background: colors.bg,
        color: colors.text,
        borderColor: colors.border
      }
    },
    getItemTags(item) {
      if (Array.isArray(item.tags)) return item.tags
      const tags = [
        item.company_type,
        item.product_category,
        item.unit,
        item.short_term === '1' ? '可短租' : ''
      ].filter(Boolean)
      return Array.from(new Set(tags)).slice(0, 3)
    },
    getPriceText(item) {
      if (!item.discount_price && item.discount_price !== 0) return '面议'
      return `¥${item.discount_price}${item.unit ? ` / ${item.unit}` : ''}`
    },
    getParticleStyle(index) {
      const size = 2 + (index % 4)
      return {
        width: `${size}px`,
        height: `${size}px`,
        left: `${(index * 23) % 100}%`,
        top: `${(index * 37) % 100}%`,
        animationDelay: `${(index % 8) * 0.4}s`,
        animationDuration: `${6 + (index % 5)}s`
      }
    }
  }
}
</script>

<style scoped lang="scss">
.plaza-page {
  position: relative;
  min-height: 100vh;
  padding-top: 0;
  overflow-x: hidden;
  background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
  color: #1a1a1a;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.floating-orb {
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.08;
  pointer-events: none;
}

.orb-1 {
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: #3b82f6;
  animation: float1 20s ease-in-out infinite;
}

.orb-2 {
  right: -150px;
  bottom: -150px;
  width: 500px;
  height: 500px;
  background: #3b82f6;
  animation: float2 25s ease-in-out infinite;
}

.orb-3 {
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: #ec4899;
  animation: float3 18s ease-in-out infinite;
}

.orb-4 {
  right: 20%;
  bottom: 30%;
  width: 350px;
  height: 350px;
  background: #f59e0b;
  animation: float1 22s ease-in-out infinite reverse;
}

.hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 178px 24px 64px;
}

.hero-glow {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.glow-blue {
  top: 80px;
  left: 80px;
  width: 384px;
  height: 384px;
  background: rgba(59, 130, 246, 0.2);
  filter: blur(120px);
}

.glow-cyan {
  right: 80px;
  bottom: 80px;
  width: 500px;
  height: 500px;
  background: rgba(59, 130, 246, 0.2);
  filter: blur(150px);
}

.glow-warm {
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: rgba(245, 158, 11, 0.1);
  filter: blur(180px);
  transform: translate(-50%, -50%);
}

.particle-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;

  span {
    position: absolute;
    border-radius: 50%;
    background: rgba(45, 91, 255, 0.08);
    animation: particleFloat 8s linear infinite;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;

  h1 {
    margin: 0 0 24px;
    color: #111827;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;

    span {
      background: linear-gradient(135deg, #2d5bff 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  p {
    max-width: 780px;
    margin: 0 auto;
    color: #6b7280;
    font-size: 20px;
    line-height: 1.8;
  }
}

.hero-actions,
.cta-content > div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.primary-btn,
.secondary-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.primary-btn {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(45, 91, 255, 0.3);
  }
}

.secondary-btn {
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;

  &:hover {
    color: #2563eb;
    background: #eff6ff;
    border-color: #93c5fd;
    transform: translateY(-2px);
  }
}

.process-section,
.list-section,
.cta-section {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.section-subtitle {
  margin: 0 0 48px;
  color: #6b7280;
  font-size: 18px;
  text-align: center;
}

.step-list {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.step-wrap {
  display: flex;
  flex: 1;
  align-items: center;
}

.step-card {
  flex: 1;
  min-height: 178px;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(59, 130, 246, 0.12);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.12));
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.06);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15);
    transform: translateY(-6px);
  }

  &.cyan {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(103, 232, 249, 0.12));
  }

  &.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(110, 231, 183, 0.12));
  }

  &.teal {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(94, 234, 212, 0.12));
  }

  h4 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 16px;
    font-weight: 600;
  }

  p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
  }
}

.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  color: #3b82f6;
  font-size: 28px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.1);
}

.step-arrow {
  flex: 0 0 40px;
  color: #60a5fa;
  font-size: 24px;
  text-align: center;
}

.section-head {
  margin-bottom: 40px;
  text-align: center;

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

    span {
      background: linear-gradient(135deg, #2d5bff 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  p {
    margin: 0;
    color: #6b7280;
    font-size: 18px;
  }
}

.toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.search-box {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 672px;
  padding: 12px 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(20px);

  i {
    color: #64748b;
    font-size: 18px;
  }

  input {
    flex: 1;
    color: #333;
    font-size: 14px;
    background: transparent;
    border: none;
    outline: none;

    &::placeholder {
      color: #94a3b8;
    }
  }
}

.tab-row,
.sub-tab-row,
.publish-type-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.tab-btn,
.sub-tab-btn,
.publish-type-row button {
  padding: 8px 20px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;

  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }

  &.active {
    color: #fff;
    background: #2d5bff;
    border-color: #2d5bff;
    box-shadow: 0 2px 8px rgba(45, 91, 255, 0.25);
  }
}

.tab-btn.active[data-color='orange'] {
  background: #f59e0b;
  border-color: #f59e0b;
}

.tab-btn.active[data-color='purple'] {
  background: #8b5cf6;
  border-color: #8b5cf6;
}

.tab-btn.active[data-color='green'] {
  background: #10b981;
  border-color: #10b981;
}

.interface-product-block.is-hidden {
  display: none;
}

.sub-tab-row {
  margin-top: -8px;
}

.sub-tab-btn {
  padding: 6px 16px;
  font-size: 13px;
}

.publish-type-row {
  margin-top: -8px;

  button.active {
    background: #111827;
    border-color: #111827;
  }
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.demand-card {
  padding: 24px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;

  &:hover {
    border-color: rgba(45, 91, 255, 0.15);
    box-shadow: 0 8px 24px rgba(45, 91, 255, 0.08);
    transform: translateY(-3px);
  }

  h4 {
    margin: 0 0 8px;
    color: #1a1a1a;
    font-size: 16px;
    font-weight: 600;
  }

  p {
    display: -webkit-box;
    min-height: 66px;
    margin: 0 0 12px;
    overflow: hidden;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

.card-top,
.card-foot,
.meta-line {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.card-top {
  margin-bottom: 12px;
}

.type-tag,
.favorite-tag,
.tag-list span {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  border-radius: 6px;
}

.favorite-tag {
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.15);
}

.meta-line {
  justify-content: flex-start;
  margin-bottom: 12px;
  color: #6b7280;
  font-size: 12px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 26px;
  margin-bottom: 12px;
}

.card-foot {
  .price {
    color: #ef4444;
    font-size: 14px;
    font-weight: 600;
  }

  button {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 0;
    color: #2d5bff;
    font-size: 13px;
    background: transparent;
    border: none;
  }
}

.static-card-foot {
  justify-content: flex-end;
}

.empty-box {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #7a82a0;
  font-size: 16px;

  img {
    width: 150px;
    height: 150px;
    margin-bottom: 12px;
  }
}

.plaza-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.cta-card {
  position: relative;
  max-width: 1000px;
  padding: 56px;
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  backdrop-filter: blur(20px);

  &::before,
  &::after {
    position: absolute;
    width: 100%;
    height: 2px;
    content: '';
    background: linear-gradient(90deg, transparent, #2d5bff, transparent);
    animation: borderMove 3s linear infinite;
  }

  &::before {
    top: 0;
    left: -100%;
  }

  &::after {
    right: -100%;
    bottom: 0;
    animation-direction: reverse;
  }
}

.cta-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), transparent, rgba(8, 145, 178, 0.1));
}

.cta-content {
  position: relative;
  z-index: 1;

  h2 {
    margin: 0 0 16px;
    color: #111827;
    font-size: 36px;
    font-weight: 700;
  }

  p {
    max-width: 576px;
    margin: 0 auto 32px;
    color: #6b7280;
    font-size: 18px;
  }
}

.tip-text {
  margin-right: 10px;
}

::v-deep .publish-dialog {
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff, #f8faff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);

  .el-dialog__header {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
  }

  .el-dialog__title {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
  }

  .el-dialog__headerbtn {
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
    background: #f3f4f6;
    border-radius: 8px;
    transition: all 0.2s ease;

    &:hover {
      background: #e5e7eb;
    }
  }

  .el-dialog__body {
    max-height: 72vh;
    padding: 24px;
    overflow-y: auto;
  }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;

  &.active {
    visibility: visible;
    opacity: 1;
  }
}

.modal-content {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(135deg, #ffffff, #f8faff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #f3f4f6;

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

.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #9ca3af;
  background: #f3f4f6;
  border: none;
  border-radius: 8px;
  transition: all 0.2s ease;

  &:hover {
    color: #4b5563;
    background: #e5e7eb;
  }
}

.modal-body {
  padding: 24px;
}

.form-item {
  margin-bottom: 20px;

  label {
    display: block;
    margin-bottom: 8px;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;

    span {
      color: #ef4444;
    }
  }
}

.form-input,
.form-select {
  width: 100%;
  padding: 10px 14px;
  color: #333;
  font-size: 14px;
  background: #f5f7fa;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease;

  &:focus {
    border-color: rgba(45, 91, 255, 0.4);
  }

  &::placeholder {
    color: #999;
  }
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.demand-category-cascader {
  width: 100%;

  ::v-deep .el-input__inner {
    height: 42px;
    color: #333;
    background: #f5f7fa;
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;

    &:focus {
      border-color: rgba(45, 91, 255, 0.4);
    }
  }
}

textarea.form-input {
  min-height: 100px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.submit-demand-btn,
.cancel-demand-btn {
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.submit-demand-btn {
  flex: 1;
  color: #fff;
  background: linear-gradient(90deg, #2563eb, #1d4ed8);
  box-shadow: 0 10px 15px rgba(59, 130, 246, 0.2);

  &:hover {
    background: linear-gradient(90deg, #3b82f6, #2563eb);
  }
}

.cancel-demand-btn {
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;

  &:hover {
    background: #e5e7eb;
  }
}

@keyframes float1 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(50px, -50px);
  }
  66% {
    transform: translate(-30px, 30px);
  }
}

@keyframes float2 {
  0%,
  100% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-40px, 40px);
  }
  66% {
    transform: translate(60px, -30px);
  }
}

@keyframes float3 {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  33% {
    transform: translate(calc(-50% + 40px), calc(-50% - 40px));
  }
  66% {
    transform: translate(calc(-50% - 30px), calc(-50% + 30px));
  }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(-20px) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(-200px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-240px) scale(0.5);
  }
}

@keyframes borderMove {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .step-wrap {
    display: block;
  }

  .step-arrow {
    display: none;
  }
}

@media (max-width: 768px) {
  .hero-inner h1 {
    font-size: 48px;
  }

  .hero-inner p {
    font-size: 16px;
  }

  .process-section,
  .list-section,
  .cta-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .card-grid,
  .step-list {
    grid-template-columns: 1fr;
  }

  .cta-card {
    padding: 36px 20px;
  }
}
</style>
