import React from 'react'

function HeaderSection() {
  return (
    <header id="site-header" className="main-header main-header-overlay" data-sticky-header="true" data-sticky-values-measured="false" data-sticky-options='{"disableOnMobile" :true, "stickyTrigger": "first-section"}'>
        <div className="lqd-head-sec-wrap relative lqd-hide-onstuck pt-20 px-45 pb-10 md:hidden">
            <div className="lqd-head-sec container flex items-stretch p-0">
                <div className="lqd-head-col lg:w-75percent">
                    <div className="header-module">
                        <div className="iconbox iconbox-side iconbox-custom items-center">
                            <div className="iconbox-icon-wrap">
                                <span className="iconbox-icon-container text-13 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M64 208.1L256 65.9 448 208.1v47.4L289.5 373c-9.7 7.2-21.4 11-33.5 11s-23.8-3.9-33.5-11L64 255.5V208.1zM256 0c-12.1 0-23.8 3.9-33.5 11L25.9 156.7C9.6 168.8 0 187.8 0 208.1V448c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V208.1c0-20.3-9.6-39.4-25.9-51.4L289.5 11C279.8 3.9 268.1 0 256 0z"/></svg>
                                </span>
                            </div>
                            <h3 className="text-13 text-white">{process.env.REACT_APP_EMAIL}</h3>
                        </div>
                    </div>
                    <div className="header-module py-10 ml-25">
                        <div className="iconbox iconbox-side iconbox-custom items-center">
                            <div className="iconbox-icon-wrap">
                                <span className="iconbox-icon-container text-13 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 320 512"><path d="M16 144a144 144 0 1 1 288 0A144 144 0 1 1 16 144zM160 80c8.8 0 16-7.2 16-16s-7.2-16-16-16c-53 0-96 43-96 96c0 8.8 7.2 16 16 16s16-7.2 16-16c0-35.3 28.7-64 64-64zM128 480V317.1c10.4 1.9 21.1 2.9 32 2.9s21.6-1 32-2.9V480c0 17.7-14.3 32-32 32s-32-14.3-32-32z"/></svg>
                                </span>
                            </div>
                            <h3 className="text-13 text-white">{process.env.REACT_APP_ADDRESS}</h3>
                        </div>
                    </div>
                    <div className="header-module py-10 ml-25">
                        <div className="iconbox iconbox-side iconbox-custom items-center">
                            <div className="iconbox-icon-wrap">
                                <span className="iconbox-icon-container text-13 text-white">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>
                                </span>
                            </div>
                            <h3 className="text-13 text-white">Call us: {process.env.REACT_APP_PHONE_NUMBER_1}</h3>
                        </div>
                    </div>
                </div>
                <div className="lqd-head-col justify-end lg:w-25percent">
                    <div className="header-module py-10 module-button">
                        <a href="#contact" className="btn btn-naked text-14 text-black" data-localscroll="true">
                            <span className="btn-txt" data-text="Contact">Contact</span>
                        </a>
                    </div>
                    <div className="header-module py-10 ml-25">
                        <div className="ld-dropdown-menu flex relative" role="menubar">
                            <span className="ld-module-trigger transition-color" role="button" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#dropdown-language" aria-controls="dropdown-language" aria-expanded="false" data-bs-toggle-options='{"type": "hoverFade"}'>
                                <span className="ld-module-trigger-txt text-14 text-black">🇺🇸 English <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i></span>
                            </span>
                            <div className="ld-module-dropdown left collapse absolute" id="dropdown-language" aria-expanded="false" role="menuitem">
                                <div className="ld-dropdown-menu-content lint-text-14 link-black">
                                    <ul>
                                        <li>
                                            <a href="#" target="_blank">🇬🇧 English (British)</a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank">🇪🇸 Spanish</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div className="lqd-head-sec-wrap relative solid-row md:hidden">
            <div className="lqd-head-sec container flex items-stretch p-0 bg-white rounded-4">
                <div className="col lqd-head-col ml-25">
                    <div className="header-module module-logo no-rotate navbar-brand-plain pt-20 pb-25">
                        <a className="navbar-brand text-18 h-auto" href="./" rel="home">
                            <span className="navbar-brand-inner">
                                <img className="logo-default" src="./assets/images/logo.png" alt="Hub Theme" />
                            </span>
                        </a>
                    </div>
                </div>
                <div className="col col-auto lqd-head-col">
                    <div className="header-module module-primary-nav static flex-col p-0">
                        <div className="navbar-collapse lqd-submenu-cover flex items-stretch h-auto flex-col" id="main-header-collapse" aria-expanded="false" role="navigation">
                            <ul id="primary-nav" className="main-nav lqd-menu-counter-right main-nav-hover-fade-inactive lg:items-stretch reset-ul flex items-stretch link-15" data-submenu-options='{"toggleType": "fade", "handler": "mouse-in-out"}' data-localscroll="true" data-localscroll-options='{"itemsSelector":">li > a", "trackWindowScroll": true}'>
                                <li className="is-active items-center">
                                    <a className="text-black" href="#banner">Home</a>
                                </li>
                                <li className="items-center">
                                    <a className="text-black" href="#about">
                                        About
                                        <span className="link-icon right-icon">
                                            <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i>
                                        </span>
                                    </a>
                                </li>
                                <li className="items-center">
                                    <a className="text-black" href="#insurance">Insurance</a>
                                </li>
                                <li className="menu-item-has-children">
                                    <a className="text-black" href="#services">
                                        Services
                                        <span className="submenu-expander"></span>
                                        <span className="link-icon right-icon">
                                            <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i>
                                        </span>
                                    </a>
                                </li>
                                <li className="items-center">
                                    <a className="text-black" href="#help">
                                        Help Center
                                        <span className="link-icon right-icon">
                                            <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i>
                                        </span>
                                    </a>
                                </li>
                                <li className="items-center">
                                    <a className="text-black" href="#contact">Contact</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div className="header-module py-10 module-button ml-25">
                        <a href="#contact-modal" className="btn btn-solid btn-sm btn-icon-custom-size btn-icon-circle btn-icon-solid font-medium leading-1/5em text-15 text-green-500 bg-green-100 border-0 rounded-5em" data-lity="#contact-modal">
                            <span className="btn-txt" data-text="Contact Us">Contact Us</span>
                            <span className="btn-icon bg-green-200 text-13 w-30 h-30">
                                <i className="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div className="lqd-stickybar-wrap lqd-stickybar-right items-end pointer-events-none md:hidden">
            <div className="h-full relative flex vertical-rl overflow-visible">
                <div className="w-full max-w-full flex items-stretch justify-end text-end flex-grow-1">
                    <div className="header-module flex-col horizontal-tb rotate-180 py-10">
                        <a href="#contact-modal" className="btn btn-solid border-0 btn-icon-left btn-icon-custom-size btn-icon-circle btn-icon-solid no-rotate text-start font-normal text-14 leading-1/5em bg-white text-green-500 rounded-5em horizontal-tb text-start pointer-events-auto" data-lity="#contact-modal">
                            <span className="inline-flex items-center py-1/15em px-2/1em">
                                <span className="btn-txt" data-text="[ld_strong]0123 267 8901[/ld_strong][ld_span]Free Consultation[/ld_span]">
                                    <strong>{process.env.REACT_APP_PHONE_NUMBER_2}</strong>
                                    <span>Free Consultation</span>
                                </span>
                                <span className="btn-icon mr-10 bg-green-200 w-40 h-40 text-22">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"/></svg>
                                </span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div className="lqd-mobile-sec">
            <div className="lqd-mobile-sec-inner navbar-header flex items-stretch">
                <div className="lqd-mobile-modules-container"></div>
                <button type="button" className="navbar-toggle collapsed nav-trigger style-mobile border-none flex items-center justify-end bg-transparent p-0" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#lqd-mobile-sec-nav" aria-expanded="false" data-toggle-options='{"changeClassnames": {"html": "mobile-nav-activated"} }'>
                    <span className="sr-only">Menu</span>
                    <span className="bars inline-block">
                        <span className="bars-inner w-full h-full flex flex-col">
                            <span className="bar"></span>
                            <span className="bar"></span>
                            <span className="bar"></span>
                        </span>
                    </span>
                </button>
                <a className="navbar-brand flex items-center justify-start" href="./">
                    <span className="navbar-brand-inner">
                        <img className="logo-default" src="./assets/images/demo/insurance/logo/logo.svg" alt="Hub Theme" />
                    </span>
                </a>
            </div>
            <div className="lqd-mobile-sec-nav absolute w-full z-10">
                <div className="mobile-navbar-collapse navbar-collapse" id="lqd-mobile-sec-nav" aria-expanded="false" role="navigation">
                    <ul id="mobile-primary-nav" className="lqd-mobile-main-nav main-nav nav">
                        <li className="menu-item-home current-menu-item">
                            <a href="#wrap">Home</a>
                        </li>
                        <li>
                            <a href="#about">
                                <span>About</span>
                                <span className="link-icon right-icon">
                                    <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#insurance">Insurance</a>
                        </li>
                        <li className="menu-item-has-children">
                            <a href="#services">
                                <span>Services</span>
                                <span className="submenu-expander absolute"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#help">
                                Help Center
                                <span className="link-icon right-icon">
                                    <i className="lqd-icn-ess icon-ion-ios-arrow-down"></i>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#contact">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
  )
}

export default HeaderSection