import React from 'react'
import Taro from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import {
  Phone,
  Message
} from '@nutui/icons-react-taro'
import './ContactSection.scss'

const ContactSection: React.FC = () => {
  const handleCallPhone = () => {
    Taro.showModal({
      title: '拨打电话',
      content: '是否拨打联系电话 13367810229？',
      confirmText: '拨打',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          Taro.makePhoneCall({
            phoneNumber: '13367810229',
            success: () => {
              console.log('拨打电话成功')
            },
            fail: (err) => {
              console.error('拨打电话失败:', err)
              Taro.showToast({title: '拨打电话失败', icon: 'none'})
            }
          })
        }
      }
    })
  }


  return (
    <View className={'px-2'}>
      <View className="contact-section">
        {/* 顶部引言区 */}
        <View className="contact-section__intro">
          <Text className="block text-2xl font-bold text-white mb-1">联系我们</Text>
          <Text className="block text-base text-white">
            随时为您提供专业的门窗定制咨询服务
          </Text>
        </View>

        {/* 操作按钮 — 全宽醒目 */}
        <View className="contact-section__actions">
          <View className="contact-section__action contact-section__action--primary" onClick={handleCallPhone}>
            <Phone size={22} color="#ffffff"/>
            <View className="contact-section__action-text">
              <Text className="text-17 font-semibold text-white">电话咨询</Text>
              <Text className="text-sm text-white">13367810229</Text>
            </View>
          </View>

          <button className="contact-section__action contact-section__action--secondary" open-type="contact">
            <Message size={22} color="#3b82f6"/>
            <View className="contact-section__action-text">
              <Text className="text-17 font-semibold text-white">在线咨询</Text>
              <Text className="text-sm text-white">点击立即咨询</Text>
            </View>
          </button>
        </View>

        {/* 底部信息 */}
        <View className="contact-section__footer">
          <Text className="block text-sm text-white mb-1">
            营业时间：周一至周日 8:30 - 18:00
          </Text>
          <Text className="block text-xs text-white">
            节假日照常营业，欢迎随时咨询
          </Text>
        </View>
      </View>
    </View>
  )
}

export default ContactSection
