import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'
import {
  ShieldCheck,
  People,
  Star
} from '@nutui/icons-react-taro'
import './TrustSection.scss'

const TrustSection: React.FC = () => {
  const trustItems = [
    {
      icon: <ShieldCheck size={28} color="#ffffff" />,
      title: '品质保障',
      highlight: '20年',
      description: '质保承诺(整窗)',
      subDescription: '德国进口五金配件',
      bg: 'linear-gradient(135deg, #3b82f6, #2563eb)',
    },
    {
      icon: <People size={28} color="#ffffff" />,
      title: '专业团队',
      highlight: '15年',
      description: '安装经验',
      subDescription: '全员持证上岗',
      bg: 'linear-gradient(135deg, #10b981, #059669)',
    },
    {
      icon: <Star size={28} color="#ffffff" />,
      title: '客户好评',
      highlight: '98%',
      description: '满意度',
      subDescription: '10万+家庭信赖之选',
      bg: 'linear-gradient(135deg, #f59e0b, #d97706)',
    }
  ]

  return (
    <View className="trust-section">
      <View className="trust-section__header">
        <Text className="text-xs font-semibold text-gray-400 tracking-wider uppercase mb-1">WHY CHOOSE US</Text>
        <Text className="text-xl font-bold text-gray-900">为什么选择南南佐顿</Text>
      </View>

      <ScrollView
        className="trust-section__scroll"
        scrollX
        enhanced
        showScrollbar={false}
      >
        <View className="trust-section__track">
          {trustItems.map((item, index) => (
            <View key={index} className="trust-section__card" style={{background: item.bg}}>
              <View className="trust-section__card-icon">
                {item.icon}
              </View>
              <Text className="text-17 font-semibold text-white mb-2">{item.title}</Text>
              <View className="trust-section__card-highlight-row">
                <Text className="text-4xl font-extrabold leading-none text-white">{item.highlight}</Text>
                <Text className="text-base text-white">{item.description}</Text>
              </View>
              <Text className="text-xs text-white mt-1">{item.subDescription}</Text>
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  )
}

export default TrustSection
