import Link from "next/link";
import Pincode from "./location/Pincode";

import Logo from "./logo/Logo";
import NavMenu from "./navMenu/NavManu";
import styles from "./navMenu/navMenu.module.scss";
import cx from "classnames";
import Marquee from "react-fast-marquee";
import React, { FC } from "react";

const Header:FC<any>= (props) => {
  return (
    <>
      {/* Top Support Banner - matches screenshot */}
      <div
        style={{
          width: "100%",
          background: "linear-gradient(90deg, #F3465F 0%, #C5374C 50%, #FF7BA5 100%)",
          color: "#fff",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "8px 24px",
          fontSize: "18px",
          fontWeight: 400,
        }}
      >
        <span style={{ fontSize: "16px",fontWeight:'400' }}>24/7 Customer Support</span>
        <span style={{ fontSize: "16px",fontWeight:'400' }}>
          For any query, email us at <a href="mailto:contact@indispare.com" style={{ color: "#fff", textDecoration: "underline" }}>contact@indispare.com</a> or call us on <a href="tel:+918977028189" style={{ color: "#fff", textDecoration: "underline" }}>+91 8977028189</a>
        </span>
      </div>
      {/* <Marquee style={{fontSize:"16px",fontWeight:"800",color:"#f4475f"}}> Website Under Construction!</Marquee> */}
      <div className={cx("flex flex-row items-center my-2", styles.tabHeader)}>
        <Link href={"/"} passHref>
          <a>
            <Logo />
          </a>
        </Link>
        {/* <Pincode  page="home" stateArray={props?.stateArray}/> */}
        <NavMenu stateArray={props?.stateArray}/>
      </div>
    </>
  );
};

export default Header;