import React from 'react'
import { View, Text, ScrollView } from '@tarojs/components'

definePageConfig({
  navigationBarTitleText: '关于我们',
})

const AboutPage: React.FC = () => {
  return (
    <ScrollView scrollY className='min-h-screen bg-gray-50'>
      {/* 头部品牌区 */}
      <View className='bg-white py-10 flex flex-col items-center'>
        <View className='w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg mb-4'>
          <Text className='text-white text-4xl font-bold'>鑫</Text>
        </View>
        <Text className='text-xl font-bold text-gray-800'>玉林市玉州区鑫龙家电经营部</Text>
        <Text className='text-sm text-gray-400 mt-1'>鑫龙家电 v1.0.0</Text>
      </View>

      {/* 公司简介 */}
      <View className='bg-white mx-3 mt-3 rounded-xl p-4' style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
        <Text className='text-base font-medium text-gray-800 mb-3 block'>公司简介</Text>
        <Text className='text-sm text-gray-600 leading-relaxed'>
          玉林市玉州区鑫龙家电经营部是一家专注于家用电器销售、安装及维修服务的本地经营部。
          我们提供冰箱、洗衣机、空调、电视、厨房电器、生活小家电等多种品类，涵盖售前咨询、
          售后安装、维护保养及故障维修等一站式家电服务。
        </Text>
        <Text className='text-sm text-gray-600 leading-relaxed mt-2'>
          经营部秉承"诚信经营、服务至上"的理念，以优质的产品和贴心的服务赢得了本地客户的信赖。
          我们致力于让每一位顾客都能买得放心、用得安心，享受便捷的家电生活体验。
        </Text>
      </View>

      {/* 核心业务 */}
      <View className='bg-white mx-3 mt-3 rounded-xl p-4' style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
        <Text className='text-base font-medium text-gray-800 mb-3 block'>核心业务</Text>
        {[
          { icon: '📺', title: '家电零售', desc: '电视、冰箱、洗衣机等全品类家电销售' },
          { icon: '❄️', title: '空调服务', desc: '空调销售、安装、加氟、清洗及维修' },
          { icon: '🍳', title: '厨房电器', desc: '油烟机、燃气灶、热水器等厨卫电器' },
          { icon: '🛠️', title: '安装维修', desc: '专业师傅上门安装、检测及故障维修' },
          { icon: '🔧', title: '保养维护', desc: '定期清洗保养，延长家电使用寿命' },
          { icon: '✅', title: '品质保障', desc: '正品货源、透明报价、售后无忧' },
        ].map((item, idx) => (
          <View
            key={idx}
            className={`flex items-start gap-3 py-3 ${idx < 5 ? 'border-b border-gray-50' : ''}`}
          >
            <Text className='text-2xl mt-0.5'>{item.icon}</Text>
            <View className='flex-1'>
              <Text className='text-sm font-medium text-gray-700'>{item.title}</Text>
              <Text className='text-xs text-gray-400 mt-0.5'>{item.desc}</Text>
            </View>
          </View>
        ))}
      </View>

      {/* 联系我们 */}
      <View className='bg-white mx-3 mt-3 rounded-xl p-4' style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
        <Text className='text-base font-medium text-gray-800 mb-3 block'>联系我们</Text>
        <View className='flex flex-col gap-2'>
          {[
            { label: '经营部名称', value: '玉林市玉州区鑫龙家电经营部' },
            { label: '经营地址', value: '大新里南718号' },
            { label: '联系电话', value: '13260472256' },
            { label: '营业时间', value: '9:00 ~ 18:00' },
          ].map((item, idx) => (
            <View key={idx} className='flex items-start justify-between'>
              <Text className='text-sm text-gray-500 flex-shrink-0'>{item.label}</Text>
              <Text className='text-sm text-gray-700 text-right ml-2'>{item.value}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* 底部版权 */}
      <View className='flex flex-col items-center py-8'>
        <Text className='text-xs text-gray-400'>Copyright © 2024 玉林市玉州区鑫龙家电经营部</Text>
        <Text className='text-xs text-gray-400 mt-1'>All Rights Reserved</Text>
      </View>
    </ScrollView>
  )
}

export default AboutPage
