const svg=<svg width="50px" height="50px" className="mb-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><path fill="#664dc980" d="M1 7v35c0 3.31 8.95 6 20 6a57.677 57.677 0 0 0 10.65-.93L38.5 35.9l2.5-4.07V7Z" /><path fill="#684fc9e6" d="M41 15v9c0 3.31-8.95 6-20 6S1 27.31 1 24v-9c0 3.31 8.95 6 20 6s20-2.69 20-6zm-2.5 20.9-6.85 11.17A57.677 57.677 0 0 1 21 48C9.95 48 1 45.31 1 42v-9c0 3.31 8.95 6 20 6 7.53 0 14.09-1.25 17.5-3.1z" /><ellipse cx="21" cy="7" fill="#664dc999" rx="20" ry="6" /><path fill="#38cb89cc" d="M58.561 46.62v.007a3.2 3.2 0 0 0-.409 2.06 3.205 3.205 0 0 1-1.243 3 3.2 3.2 0 0 0-1.17 1.749 3.205 3.205 0 0 1-2.293 2.292 3.2 3.2 0 0 0-1.748 1.17 3.2 3.2 0 0 1-3 1.243 3.207 3.207 0 0 0-2.061.409h-.006a3.21 3.21 0 0 1-3.24 0h-.007a3.2 3.2 0 0 0-2.06-.409 3.205 3.205 0 0 1-3-1.243 3.2 3.2 0 0 0-1.749-1.17 3.205 3.205 0 0 1-2.292-2.293 3.2 3.2 0 0 0-1.17-1.748 3.2 3.2 0 0 1-1.243-3 3.207 3.207 0 0 0-.409-2.061v-.006a3.21 3.21 0 0 1 0-3.24v-.007a3.2 3.2 0 0 0 .409-2.06 3.205 3.205 0 0 1 1.243-3 3.2 3.2 0 0 0 1.17-1.749 3.205 3.205 0 0 1 2.293-2.292 3.2 3.2 0 0 0 1.748-1.17 3.2 3.2 0 0 1 3-1.243 3.207 3.207 0 0 0 2.061-.409h.006a3.21 3.21 0 0 1 3.24 0h.007a3.2 3.2 0 0 0 2.06.409 3.205 3.205 0 0 1 3 1.243 3.2 3.2 0 0 0 1.749 1.17 3.205 3.205 0 0 1 2.292 2.293 3.2 3.2 0 0 0 1.17 1.748 3.2 3.2 0 0 1 1.243 3 3.207 3.207 0 0 0 .409 2.061v.006a3.21 3.21 0 0 1 0 3.24Z" /><circle cx="45" cy="45" r="9" fill="#38cb89" /><path fill="#fff" d="M43 49a1 1 0 0 1-.707-.293l-1-1a1 1 0 0 1 1.414-1.414l.293.293 4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 43 49Z" /></svg>

const svg1= <svg width="50px" height="50px" className="mb-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
    <path fill="#664dc999" d="M58.93 12a1.973 1.973 0 0 0-.6-.99L48.02 1.54A2.1 2.1 0 0 0 46.63 1H13.37a2.1 2.1 0 0 0-1.39.54L1.67 11.01a2.066 2.066 0 0 0-.23 2.78l23.69 30.26L48.7 26.38l9.86-12.59a2.046 2.046 0 0 0 .37-1.79Z" /><path fill="#684fc9e6" d="m27.75 42.08-2.62 1.97L1.44 13.79A2.046 2.046 0 0 1 1.07 12H18zm30.81-28.29L48.7 26.38 33.69 37.63 42 12h16.93a2.046 2.046 0 0 1-.37 1.79z" />
<path fill="#664dc980" d="M47.42 1.16 42 12 30 1h16.63a1.925 1.925 0 0 1 .79.16zM30 1 18 12 12.58 1.16a1.925 1.925 0 0 1 .79-.16zM42 12l-8.31 25.63-5.94 4.45L18 12h24z" /><circle cx="42" cy="42" r="17" fill="#38cb89cc" /><path fill="#fff" d="M38 49a1.99 1.99 0 0 1-1.414-.586l-2-2a2 2 0 0 1 2.828-2.828l.586.585 8.586-8.585a2 2 0 0 1 2.828 2.828l-10 10A1.99 1.99 0 0 1 38 49Z" /></svg>

const svg2=<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="50px" height="50px" className="mb-3">
<path fill="#664dc980" d="M41 3v30l-8 14-23 2.88L9 50V2l1-1h29a2.006 2.006 0 0 1 2 2Z" />
<path fill="#664dc9e6" d="M10 1v48.88L1 51V5a4 4 0 0 1 4-4Z" />
<path fill="#664dc9" d="M1 16a4 4 0 0 1 4-4 1 1 0 0 0 1-1V7a1 1 0 0 0-1-1 4 4 0 0 0-4 4Z" />
<rect width="21" height="13" x="15" y="8" fill="#664dc9" rx="2" />
<path fill="#664dc980" d="M33 47H5a4 4 0 1 0 0 8h31Z" />
<path fill="#38cb89cc" d="M58.561 46.62v.007a3.2 3.2 0 0 0-.409 2.06 3.205 3.205 0 0 1-1.243 3 3.2 3.2 0 0 0-1.17 1.749 3.205 3.205 0 0 1-2.293 2.292 3.2 3.2 0 0 0-1.748 1.17 3.2 3.2 0 0 1-3 1.243 3.207 3.207 0 0 0-2.061.409h-.006a3.21 3.21 0 0 1-3.24 0h-.007a3.2 3.2 0 0 0-2.06-.409 3.205 3.205 0 0 1-3-1.243 3.2 3.2 0 0 0-1.749-1.17 3.205 3.205 0 0 1-2.292-2.293 3.2 3.2 0 0 0-1.17-1.748 3.2 3.2 0 0 1-1.243-3 3.207 3.207 0 0 0-.409-2.061v-.006a3.21 3.21 0 0 1 0-3.24v-.007a3.2 3.2 0 0 0 .409-2.06 3.205 3.205 0 0 1 1.243-3 3.2 3.2 0 0 0 1.17-1.749 3.205 3.205 0 0 1 2.293-2.292 3.2 3.2 0 0 0 1.748-1.17 3.2 3.2 0 0 1 3-1.243 3.207 3.207 0 0 0 2.061-.409h.006a3.21 3.21 0 0 1 3.24 0h.007a3.2 3.2 0 0 0 2.06.409 3.205 3.205 0 0 1 3 1.243 3.2 3.2 0 0 0 1.749 1.17 3.205 3.205 0 0 1 2.292 2.293 3.2 3.2 0 0 0 1.17 1.748 3.2 3.2 0 0 1 1.243 3 3.207 3.207 0 0 0 .409 2.061v.006a3.21 3.21 0 0 1 0 3.24Z" />
<circle cx="45" cy="45" r="9" fill="#38cb89" />
<path fill="#664dc9" d="M5 38a1 1 0 0 1-1 1 3.009 3.009 0 0 0-3 3v-4a4.941 4.941 0 0 1 3-1 1 1 0 0 1 1 1zm0-7a1 1 0 0 1-1 1 3.009 3.009 0 0 0-3 3v-4a4.941 4.941 0 0 1 3-1 1 1 0 0 1 1 1zm28-3H18a1 1 0 0 1 0-2h15a1 1 0 0 1 0 2zm-2 4H20a1 1 0 0 1 0-2h11a1 1 0 0 1 0 2z" />
<path fill="#fff" d="M43 49a1 1 0 0 1-.707-.293l-1-1a1 1 0 0 1 1.414-1.414l.293.293 4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 43 49Z" />
</svg>
const svg3= <svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons" data-name="Layer 1" viewBox="0 0 98 98"><g fill="#664dc9" className="color000000 svgShape" data-name="&amp;lt;Group&amp;gt;"><polygon points="39.9 71 33 80 64.9 80 58 71 39.9 71" className="color000000 svgShape" data-name="&amp;lt;Path&amp;gt;"></polygon><rect width="77" height="49" x="10" y="18" className="color000000 svgShape" data-name="&amp;lt;Path&amp;gt;" rx="6" ry="6"></rect></g></svg>

const svg4= <svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons" viewBox="0 0 24 24"><path fill="#664dc9" d="m21 5-5-5H5a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5z" className="color2d98d4 svgShape" /><path fill="#010101" d="M19 23.75H5a2 2 0 0 1-2-2V22a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-.25a2 2 0 0 1-2 2z" className="color010101 svgShape" opacity=".1" /><path fill="#664dc9" d="M16 0v3a2 2 0 0 0 2 2h3l-5-5z" className="color0377be svgShape" /><path fill="#fff" d="M16 0H5a2 2 0 0 0-2 2v.25a2 2 0 0 1 2-2h11V0z" className="colorffffff svgShape" opacity=".2" /><path fill="#010101" d="M18 4.75a2 2 0 0 1-2-2V3a2 2 0 0 0 2 2h3l-.25-.25H18z" className="color010101 svgShape" opacity=".05" /><linearGradient id="a" x1="17.781" x2="21.271" y1="3.695" y2="7.185" gradientUnits="userSpaceOnUse"><stop className="stopColor010101 svgShape" offset="0" stopColor="#010101" stopOpacity=".1" /><stop className="stopColor010101 svgShape" offset="1" stopColor="#010101" stopOpacity="0" /></linearGradient><path fill="url(#a)" d="M18 5c-.55 0-1.047-.222-1.409-.581L21 8.827V5h-3z" /><path fill="#fff" d="M6 15h12v1H6zm0-3h12v1H6zm0 6h4.5v1H6zm6-9h6v1h-6zm.5 8.5-1 1 1 1h1l-1-1 1-1zm2-.5h1l-.5 3h-1zm-7-8.5-1 1 1 1h1l-1-1 1-1zm2.5 0 1 1-1 1H9l1-1-1-1zm7 9 1 1-1 1h-1l1-1-1-1z" className="colorffffff svgShape" /><linearGradient id="b" x1=".299" x2="23.085" y1="7.347" y2="17.972" gradientUnits="userSpaceOnUse"><stop className="stopColorffffff svgShape" offset="0" stopColor="#fff" stopOpacity=".2" /><stop className="stopColorffffff svgShape" offset="1" stopColor="#fff" stopOpacity="0" /></linearGradient><path fill="url(#b)" d="m21 5-5-5H5a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5z" /></svg>

const svg5= 
<svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons" viewBox="0 0 32 32"><rect fill="#664dc9" width="10" height="10" x="5" y="5" rx="3" ry="3" /><rect fill="#664dc9" width="10" height="10" x="17" y="5" rx="3" ry="3" /><rect fill="#664dc9" width="10" height="10" x="5" y="17" rx="3" ry="3" /><rect fill="#664dc9" width="10" height="10" x="17" y="17" rx="3" ry="3" /></svg>

const svg6=  <svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 52 52"
//  xml:space="preserve"
><path fill="#664dc9" d="M44.62 37.48c.3.12.66.09.94-.09.27-.19.44-.5.44-.84v-26c0-.4-.24-.76-.61-.92C39.31 7.06 33.11 6.88 27 9.09v28.13c5.79-2.3 11.69-2.21 17.62.26z" /><path fill="#664dc9" d="M49 13.44h-1v23.11c0 .981-.48 1.905-1.285 2.474-.563.363-1.13.529-1.715.529-.388 0-.765-.073-1.122-.215-2.842-1.184-5.674-1.779-8.443-1.779-2.569 0-5.158.512-7.697 1.52l-.738.293-1 .398-1-.398-.738-.293c-2.54-1.008-5.128-1.52-7.696-1.52-2.77 0-5.601.595-8.417 1.768-.383.153-.76.226-1.148.226a2.986 2.986 0 0 1-1.657-.497A3.029 3.029 0 0 1 4 36.551V13.44H3a1 1 0 0 0-1 1v26a1 1 0 0 0 1 1h19.093a3.82 3.82 0 0 0 3.724 3.001 3.82 3.82 0 0 0 3.724-3.002H49a1 1 0 0 0 1-1v-26a1 1 0 0 0-1-1z" /><path fill="#664dc9" d="M6.45 37.39c.27.18.63.21.93.09 5.93-2.47 11.83-2.56 17.62-.26V9.09c-6.11-2.21-12.31-2.03-18.39.54-.37.16-.61.52-.61.92v26c0 .34.17.65.45.84z" /></svg>

const svg7= <svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons mx-auto" viewBox="0 0 48 48"><path fill="#664dc9" d="M30.6.5H6.5v47h35v-36L30.6.5zM24 31.7l-7.7-6.6h4.2v-7.8h6.9v7.8h4.2L24 31.7zm4.5-18.2v-11l11 11h-11z" /></svg>
const svg8=  <svg width="23px" height="23px" xmlns="http://www.w3.org/2000/svg" className="svg-icons" viewBox="0 0 24 24"><path fill="#664dc9" d="M5.5 10.5h-5a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h5A.5.5 0 0 0 6 23V11a.5.5 0 0 0-.5-.5zM24 11c0-1.378-1.122-2.5-2.5-2.5h-6.295c.305-.929.795-2.632.795-4 0-2.169-1.843-4-3-4-1.039 0-1.781.584-1.813.609A.504.504 0 0 0 11 1.5v3.39l-2.88 6.241-.843.421A.503.503 0 0 0 7 12v9c0 .133.053.26.146.354.749.748 2.429 1.146 3.354 1.146h9.25a2.252 2.252 0 0 0 2.015-3.25 2.24 2.24 0 0 0 1-3 2.24 2.24 0 0 0 1.235-2c0-.6-.239-1.161-.65-1.575.415-.452.65-1.044.65-1.675z" /></svg>
interface data {
    id: number
    heading: string
    url: string
    class: string
}
export const data1: data[]=[
    {id:1, heading:'Home', url:'#home', class:'active'},
    {id:2, heading:'About', url:'#About', class:''},
    {id:3, heading:'Features', url:'#Features', class:''},
    {id:4, heading:'Clients', url:'#Clients', class:''},
    {id:5, heading:'Faqs', url:'#Faqs', class:''},
    {id:6, heading:'Pricing', url:'#Pricing', class:''},
    {id:7, heading:'Contact', url:'#Contact', class:''},

]
//Quality
interface code {
    id:number
    heading: string
    data: string
    icon:  JSX.Element
}
export const codes:code[]=[
    {id:1, heading:'Code Quality', data:'Admin code is maintained very cleanly and well-structured with proper comments.', icon:svg},
    {id:2, heading:'Powerful Design', data:'Azea has a unique design that you cannot compare with any other templates.', icon:svg1},
    {id:3, heading:'Change Themes', data:'Azea makes easy to change the theme of the template.', icon:svg2},
]
//Features
interface feature {
    id: number
    icon:JSX.Element
    heading:string
    data: string
}
export const features: feature[]=[
    {id:1, icon:svg3, heading:'Unique Design', data:'Azea has a unique design that you cannot compare with any other templates. It has unique Design'},
    {id:2, icon:svg4, heading:'Quality & Clean Code', data:'The Azea admin code is maintained very cleanly and well-structured with proper comments.'},
    {id:3, icon:svg5, heading:'Modern UI Widgets', data:'Modern widgets are included in this template. Please check out the best option that suits for your projects.'},
    {id:4, icon:svg6, heading:'User Pages', data:'The most advanced "User Pages" are included in this template, like registration, profile, and log-in pages, etc.'},
    {id:5, icon:svg7, heading:'Well Documentation', data:'The documentation provides clear-cut material and is instructed with such a way that every user can understand.'},
    {id:6, icon:svg8, heading:'Validating Forms', data:'Tempor accusam magna ipsum ea et. Sanctus aliquyam ea duo sit consetetur. Labore stet sed. Labore stet sed.'},

]
//pricing
interface price {
    id: number
    icon: string
    badge: string
    class: string
    color: string
    heading: string
    class1:string
    data:string
    data1:string
    data2:string
    class2:string
    color1:string
    color2:string
    icon1: string
  
}
export const pricing: price[]=[
    {id:1, icon:'box', badge:' $13', heading:'Personal', class:'text-muted',class1:'text-muted', color:'primary',data:'',data1:'',data2:'',class2:'text-primary',color1:'dark', color2:'primary-transperant',icon1:'x-circle'},
    {id:2, icon:'zap', badge:'$15', class:'', class1:'',heading:'Premium', color:'white',data:'ribbon ribbon-top-left text-success',data1:'Popular',data2:'bg-success',class2:'bg-primary text-white',color1:'white', color2:'white',icon1:'check-circle'},
    {id:3, icon:'layers', badge:'$12', class:'text-muted', class1:'',heading:'Basic', color:'primary',data:'',data1:'',data2:'',class2:'text-primary',color1:'dark', color2:'primary-transperant',icon1:'check-circle'},
]
//carousel 
interface carousel{
    id: number
    heading: string
    class:string
    data: string
}
export const carousels: carousel[]=[
    {id:1, heading:'Elizabeth', class:'Web Developer', data:' Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore cum accusamus eveniet molestias voluptatum inventore laborios labore sit aspernatur praesentium iste impedit quidem dolor veniam.'},
    {id:2, heading:'williamson', class:'UI Developer', data:'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore.'},
    {id:3, heading:'Sophie Carr', class:'Web Designer', data:' Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.'},
]
import React from 'react';
import { Nav } from "react-bootstrap";
const Navbar1 = () => {
    //Pageclick
    const handleClick = (e: any) => {
        e.preventDefault()
        const target:any = e.currentTarget?.getAttribute('href')
        const location:any = document.querySelector(target)?.offsetTop
        window.scrollTo({
            left: 0,
            top: location - 64,
        })
    }
    // Pagesactive while scrolling
    const pageLink:any = document.querySelectorAll(".side-menu__item");
    pageLink.forEach((Element:any) => {
        Element.addEventListener("click", (_event) => {
            _event.preventDefault();
            let hrefdata: any = Element?.getAttribute("href");
            let elementview: any = document.querySelector(hrefdata);
            elementview.scrollIntoView({
                behavior: "smooth",
                offsetTop: 1 - 60,
            });
        });
    });
    function onScroll() {
        const sections:any = document.querySelectorAll(".side-menu__item");
        const scrollPos:any =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

        sections.forEach((elem:any) => {
            const value: any = elem.getAttribute("href");
            const refElement: any = document.querySelector(`[href=${value}]`);
            const scrollTopMinus = scrollPos + 73;
            if (
                refElement.offsetTop <= scrollTopMinus &&
                refElement.offsetTop + refElement.offsetHeight > scrollTopMinus
            ) {
                elem.classList.add("active");
            } else {
                elem.classList.remove("active");
            }
        })
    }
    window.document.addEventListener("scroll", onScroll);
    return (
        <div>
             <ul className="side-menu">
                                     {data1.map((data:any)=>(
                                    <li className="slide" key={Math.random()}>
                                        <Nav.Link onClick={handleClick} className={`side-menu__item ${data.class}`} href={data.url} ><span
                                                className="side-menu__label">{data.heading}</span></Nav.Link>
                                    </li>
                                     ))}
                                </ul>
        </div>
    )
}

export default Navbar1;
