import React, {useState} from 'react';
import icMenu from './asset/ic_menu.png';
import {scroller} from "react-scroll";

const NavMobile: React.FC = () => {
  const [showMenu, setShowMenu] = useState('');

  return (
    <>
      <div className="nav-fixed">
        <div
          className="header"
          onClick={() => {
            if (showMenu == '' || showMenu == 'hide') {
              setShowMenu('show');
            } else {
              setShowMenu('hide');
            }
          }}
        >
          <div className="logo">HIPO 高潜</div>
          <img src={icMenu} className="menu"/>
        </div>
        <div className={showMenu} style={{overflow: 'hidden', height: 0}}>
          <div className="nav-sub">
            <a href="#home">
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                首页
              </div>
            </a>
            <a href="/about">
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                关于我们
              </div>
            </a>
            <a onClick={() => {
              scroller.scrollTo("service", {
                smooth: false,
              });
            }}>
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                业务介绍
              </div>
            </a>
            <a onClick={() => {
              scroller.scrollTo("consultant", {
                smooth: false,
              });
            }}>
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                顾问介绍
              </div>
            </a>
            <a href="/caseList">
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                经典案例
              </div>
            </a>
            <a href="/contactUs">
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                联系我们
              </div>
            </a>
            <a href={'/user/login'}>
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                登录
              </div>
            </a>
            <a href={'/user/register'}>
              <div
                className="item"
                onClick={() => {
                  setShowMenu('hide');
                }}
              >
                注册
              </div>
            </a>
          </div>
        </div>
      </div>
      <div className="nav">
        <div className="content">
          <img
            src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
            className="nav-cover"
          />
          <div className="nav-bg"></div>
          <div className="text-content">
            <div className="content1">
              高潜咨询
            </div>
            <div className="content2">
              助力中国高潜企业加速发展
            </div>
            <div className="content4">
              聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default NavMobile;
