import React from 'react';
import { scroller } from 'react-scroll';

const Nav: React.FC = () => {
  return (
    <div className="home-nav">
      <div className="nav-bar">
        <div className="navbar-brand">
          <div className="logo">HIPO 高潜</div>
        </div>
        <div className="navbar-collapse">
          <div className="navbar-content">
            <a className="link">首页</a>
            <a className="link" href="/about">
              关于我们
            </a>
            <a
              className="link"
              onClick={() => {
                scroller.scrollTo('service', {
                  smooth: false,
                });
              }}
            >
              业务介绍
            </a>
            <a
              className="link"
              onClick={() => {
                scroller.scrollTo('consultant', {
                  smooth: false,
                });
              }}
            >
              顾问介绍
            </a>
            <a className="link" href="/caseList">
              经典案例
            </a>
            <a className="link" href="/contactUs">
              联系我们
            </a>
          </div>
          <div className="navbar-login">
            <a className="link" href={'/user/login'}>
              登录
            </a>
          </div>
          <div className="navbar-register">
            <a className="link" href={'/user/register'}>
              注册
            </a>
          </div>
        </div>
      </div>
      <div className="nav-container">
        <div className="main-content">
          <div className="content1">高潜咨询</div>
          <div className="content2">助力中国高潜企业加速发展</div>
          <div className="line"></div>
          <br />
          <div className="content4">
            聚焦战略、组织、人才，提供定制化的、可落地的解决方案，帮助高潜力的企业及个人加速成长
          </div>
        </div>
      </div>
      <div>
        <div className="nav-background"></div>
        <img
          src="https://hi-po.oss-cn-beijing.aliyuncs.com/img/web/cover2.jpg"
          className="nav-cover"
        />
      </div>
    </div>
  );
};

export default Nav;
