"use client";
import React, { useState } from "react";
import Image from "next/image";
import styles from "./contact.module.scss";

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

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

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

export default Contact;
