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="title-1-en">Contact us</div>
          <div className="subTitle-1-cn">联系我们</div>
        </div>

        <div className="grid grid-cols-2 gap-x-[100px] pb-12">
          {data.map((i, index) => (
            <div className="item" key={index}>
              <div className="content-1-cn">{i.location}</div>
              <div className=" sub-title-cn">{i.tel}</div>
            </div>
          ))}
        </div>
        <div className="item">
          <div className="content-1-cn">邮箱</div>
          <div className="sub-title-cn">support@33.cn</div>
        </div>
        <div className="locations flex  items-start  gap-x-[100px] pt-12">
          <div className="item flex-col  content-1-cn">
            <div className='sub-title-cn'>杭州西湖区办公室</div>
            <div className='py-3 content-1-cn'>
              <div>浙江省杭州市西湖区</div>
              <div>文三路90号</div>
              <div>东部软件园科技大厦7楼</div>
            </div>
          </div>
          <div className="item flex-col  content-1-cn">
            <div className='sub-title-cn'>杭州滨江办公室</div>
            <div className='py-3'>
              <div>浙江省杭州市滨江区</div>
              <div>东方通信科技城</div>
            </div>
          </div>
        </div>
      </div>
    </AppContianer>
  );
};
