<template>
  <view class="consult-apply-container">
    <view class="apply-card">
      <view class="apply-left">
        <view class="icon-wrapper">
          <image 
            class="icon-img" 
            src="/static/homepage/chat-icon.png" 
            mode="aspectFit" 
          />
        </view>
        <view class="apply-content">
          <text class="apply-title">聊天咨询</text>
          <text class="apply-desc">团队协作，高效沟通！</text>
        </view>
      </view>
      <view class="apply-right">
        <button class="btn-apply" @click="handleApply">咨询申请</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['apply']);

const handleApply = () => {
  emit('apply');
};
</script>

<style scoped lang="scss">
.consult-apply-container {
  width: 100%;
  padding: 20rpx 32rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.apply-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.apply-left {
  display: flex;
  align-items: center;
  gap: 24rpx;
  flex: 1;
}

.icon-wrapper {
  width: 96rpx;
  height: 96rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-img {
  width: 56rpx;
  height: 56rpx;
}

.apply-content {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.apply-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.apply-desc {
  font-size: 24rpx;
  color: #999;
}

.apply-right {
  flex-shrink: 0;
}

.btn-apply {
  padding: 0 32rpx;
  background-color: #1890ff;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.btn-apply:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.btn-apply::after {
  border: none;
}
</style>
