import React from 'react';
import Link from 'next/link';
import Logo from "../../public/svg/logo";

import { useRouter, withRouter } from "next/router";

export default function Header(){
const router = useRouter()
   const click=(ourRoute)=>{
    router.push(ourRoute)
    }
    return(
            <header className="header" id="header">
                <div className="header-top">
                    <div className="wrapper">
                       
                        <div className="phone-item">
                            <div className="footer-phone__item">
                                <i className="icon-phone"></i><a href="tel:+982141087179">+۹۸ ۲۱ ۴۱۰۸۷۱۷۹</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="wrapper">
                    <div className="nav-logo" onClick={()=>click("/" )}>
                        
                    <Link href='/'>
                    <a>
                      <Logo/>  
                        </a>    
                    </Link>
                    </div>
                    <div className="header-right-style" >
                        <div id="mainNav" className="menu-box">
                            <nav className="nav-inner">
                                <ul className="main-menu js-menu" id="mainMenu">
                                    <li onClick={()=>click("/#services" )}>
                                        <Link href={"/#services"} style={{textDecoration:'none'}} >خدمات</Link>
                                    </li>
                                    <li onClick={()=>click("/#about")}>
                                        <Link href={"/#about"} >همکاری با جیب جیب؟</Link>
                                    </li>
                                    <li onClick={()=>click("/#install")}>
                                        <Link href={"/#install"} >نصب جیب جیب</Link>
                                    </li>   
                                    <li onClick={()=>click("/#steps")}>
                                        <Link href={"/#steps"} >پشتیبانی</Link>
                                    </li>
                                                   
                                    <li onClick={()=>click('/#blog')}>
                                        <Link href={"/#blog"} >وبلاگ</Link>
                                    </li>
                                </ul>
                            </nav>
                            
                            <div className="phone-item">
                                <div className="footer-title footer-title_phone"></div>
                                <div className="footer-phone__item">
                                    <i className="icon-phone"></i><a href="tel:+982141087179">+۹۸ ۲۱ ۴۱۰۸۷۱۷۹</a>
                                </div>
                            </div>
                        </div>
                        {/* <div onClick={()=>click("/#consultation" )} style={{display:'flex', alignItems:'center'}}>
                        <a href="#formOrder" className="btn-2 btn_started-header js-fancybox m-100" >نصب جیب جیب</a>
                        </div> */}
                    </div>
                    <div className="bars-mob js-button-nav">
                        <div className="hamburger">
                            <span></span><span></span><span></span>
                        </div>
                        <div className="cross">
                            <span></span><span></span>
                        </div>
                    </div>
                </div>
            </header>
    )
}