import React, { useState } from 'react';
import logo1 from './asset/logo1.png';
import logo2 from './asset/logo2.png';
import logo3 from './asset/logo3.png';
import logo4 from './asset/logo4.png';
import logo5 from './asset/logo5.png';
import logo6 from './asset/logo6.png';
import logo7 from './asset/logo7.png';
import logo8 from './asset/logo8.png';
import logo9 from './asset/logo9.png';
import phone from './asset/ic_phone.png';
import email from './asset/ic_eamil.png';
import adress from './asset/ic_adress.png';

const Contact: React.FC = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const logoTabData = [
    {
      title: '生产制造',
      logoList: logo1,
    },
    {
      title: 'IT通信',
      logoList: logo2,
    },
    {
      title: '工程/地产/基础设施',
      logoList: logo3,
    },
    {
      title: '消费品',
      logoList: logo4,
    },
    {
      title: '金融/保险',
      logoList: logo5,
    },
    {
      title: '医疗/医药',
      logoList: logo6,
    },
    {
      title: '航空/物流',
      logoList: logo7,
    },
    {
      title: '多元化集团',
      logoList: logo8,
    },
    {
      title: '创新创业型公司',
      logoList: logo9,
    },
  ];

  return (
    <div className="influence">
      <div className="influence-container">
        <div className="title">高潜影响力</div>
        <div className="logo-tab-wrapper">
          {logoTabData.map((item, index) => {
            return (
              <div
                key={item.id || index}
                className={
                  currentIndex == index ? 'logo-tab-checked' : 'logo-tab-normal'
                }
                onClick={() => {
                  setCurrentIndex(index);
                }}
              >
                <div>{item.title}</div>
                <div className={'line'} hidden={currentIndex != index}></div>
              </div>
            );
          })}
        </div>
        <div className="logo-list">
          <img
            className="logo-list-img"
            src={logoTabData[currentIndex].logoList}
          />
        </div>
      </div>
      <a id="contactUs" />
      <div className="contact-container">
        <div className="title">联系我们</div>
        <div className="contact">
          <div className="item">
            <img src={adress} />
            地址: 北京市朝阳区东三环富力双子座A座601
          </div>
          <div className="item">
            <img src={phone} />
            联系电话: 李女士 13810542631
          </div>
          <div className="item">
            <img src={email} />
            联系邮箱: hipo@hi-po.com.cn
          </div>
        </div>
      </div>
    </div>
  );
};

export default Contact;
