import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";


interface ContactType extends IProps {

}

const Tels = () => {
  const telInfo = [
    {
      location: '成都总部',
      tel: '0571-8167-1366'
    },
    {
      location: '成都总部',
      tel: '0571-8167-1366'
    },
    {
      location: '成都总部',
      tel: '0571-8167-1366'
    }
  ]
  return (
    <div className=" grid grid-cols-2">
      {telInfo.map((tel, index) => {
        return (
          <div key={index}>
            <div>{tel.location}</div>
            <div>{tel.tel}</div>
          </div>
        )
      })}
    </div>
  )
}

const data = [
  {
    location: '杭州总部',
    tel: '0571-8167-1366'
  },
  {
    location: '广州分部',
    tel: '17706425022'
  },
  {
    location: '上海分部',
    tel: '135-8800-1627'
  },
  {
    location: '南京分部',
    tel: '135-5811-2690'
  }
]

export const Contact = () => {
  return (
    <AppContianer className='flex items-center justify-center'>
      <div className='-translate-x-[5vw]'>
      <div className="py-12">
        <div className="hero-title">Contact us</div>
        <div className="sub-title-cn">联系我们</div>
      </div>

      <div className='grid grid-cols-2 gap-[2rem] pb-12'>
        {
          data.map((i,index)=>(
          <div className='item' key={index}>
            <div>{i.location}</div>
            <div className=' text-2xl font-extrabold'>{i.tel}</div>
          </div>
          ))
        }
      </div>
      <div>
      <div className='item'>
            <div>邮箱</div>
            <div className=' text-2xl font-extrabold'>support@33.cn</div>
          </div>
      </div>
      </div>
    </AppContianer>
  )
}