// import React from 'react'
// import useToggle from '../../Hooks/useToggle';
// import Drawer from '../Mobile/Drawer';
// import HomeOneHeader from '../HomeOne/HomeOneHeader';
// import FooterHomeOne from '../HomeOne/FooterHomeOne';
// import BackToTop from '../BackToTop';
//
//
// function Lnd() {
//     const [drawer, drawerAction] = useToggle(false);
//
//     return (
//         <>
//             <Drawer drawer={drawer} action={drawerAction.toggle} />
//             {/* <StickyHeaderNav action={drawerAction.toggle} /> */}
//             <HomeOneHeader action={drawerAction.toggle} />
//             <div className='min-vh-100 d-flex flex-column justify-content-center align-items-center'>
//                 <p>Dummy Empty Page</p>
//             </div>
//             <FooterHomeOne />
//             <BackToTop />
//         </>
//     );
// }
//
// export default Lnd


import React , {useState, useEffect} from 'react'
import Image from 'next/image'
//import { HashLink as Link } from 'react-router-hash-link';
import Design from './LndParts/Design/Main'
import Work from './LndParts/Work/Main'
//import Testimonial from './LndParts/Testimonial/Main'
import AboutApp from './LndParts/AboutApp/Main'
// import Trusted from './LndParts/Trusted/Main'
// import Pricing from './LndParts/Pricing/Main'
import Faq from './LndParts/Faq/Main'
// import Interface from './LndParts/Interface/Main'
import Download from './LndParts/Download/Main'
import Story from './LndParts/Story/Main'

import localImgLoad from '../../lib/localImgLoad'


const Lnd = ({setnavbar,setfooter,setbrdcum}) => {

    const [ytShow , setytShow] = useState (false)
    useEffect(() => {
        // setfooter({f2 : true})
        // setnavbar({n3 : true})
        // setbrdcum({b2 : true})
        localStorage.setItem("navbar","darkhome")

    }, [])


    return (
        <>


            {/* <div className="home-dark-block">
        <header style={{position : "fixed"}}>
            <div className="container">
                <nav className="navbar navbar-expand-lg">
                    <Link to="/" className="navbar-brand">
                        <Image width='auto' height='auto' src="assets/images/logo.png" alt="image" />
                    </Link>
                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <div className={`toggle-wrap ${mobile && "active"}`} onClick = {() => setmobile(true)}>
                            <span className="toggle-bar" onClick = {() => setmobile(false)}></span>
                        </div>
                    </button>

                    <div className={`collapse navbar-collapse ${mobile && "show"}`}>
                        <ul className="navbar-nav ml-auto">
                            <li className="nav-item has_dropdown">
                                <Link to="#" className="nav-link" >Home</Link>
                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
                                <div className="sub_menu">
                                <ul>
                                    <li><Link to="/">Home Defoult</Link></li>
                                    <li><Link to="/home-dark">Home Dark Hero</Link></li>
                                    <li><Link to="/home-wave">Home Wave </Link></li>
                                    <li><Link to="/home-gredient">Home Gredient</Link></li>
                                    <li><Link to="/home-video">Home Video</Link></li>
                                    <li><Link to="/home-video2">Home Video 2</Link></li>
                                </ul>
                                </div>
                            </li>
                            <li className="nav-item">
                                <Link smooth to="#features" className="nav-link">Features</Link>
                            </li>
                            <li className="nav-item">
                                <Link smooth to="#how_it_work" className="nav-link">How it works</Link>
                            </li>
                            <li className="nav-item has_dropdown">
                                <Link to="#" className="nav-link">Pages</Link>
                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
                                <div className="sub_menu">
                                    <ul>
                                        <li><Link to="/about">About Us</Link></li>
                                        <li><Link to="/review">Reviews</Link></li>
                                        <li><Link to="/contact">Contact Us</Link></li>
                                        <li><Link to="/faq">Faq</Link></li>
                                        <li><Link to="/sign-in">Sign In</Link></li>
                                        <li><Link to="/sign-up">Sign Up</Link></li>
                                        <li><Link to="/blog">Blog List</Link></li>
                                        <li><Link to="/blog-single">Blog Single</Link></li>
                                    </ul>
                                </div>
                            </li>
                            <li className="nav-item">
                                <Link to="/pricing" className="nav-link">Pricing</Link>
                            </li>
                            <li className="nav-item has_dropdown">
                                <Link to="#" className="nav-link">Blog</Link>
                                <span className="drp_btn"><i className="icofont-rounded-down"></i></span>
                                <div className="sub_menu">
                                <ul>
                                    <li><Link to="/blog">Blog List</Link></li>
                                    <li><Link to="/blog-single">Blog Single</Link></li>
                                </ul>
                                </div>
                            </li>
                            <li className="nav-item">
                                <Link to="/contact" className="nav-link" >Contact</Link>
                            </li>
                            <li className="nav-item">
                                <Link to="/contact" className="nav-link dark_btn">GET STARTED</Link>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
        </div>  */}
            <section className="banner_section homedark-banner min-vh-100">
                <div className="container">
                    <div className="row position-relative">
                        <span className="position-absolute banner_shape1"> <Image height='auto' src={localImgLoad('images/banner-shape-one1.png')} width='10px' alt="image" /> </span>
                        <span className="position-absolute banner_shape2"> <Image height='auto' src={localImgLoad('images/banner-shape2two.png')} width='10px' alt="image" /> </span>
                        <span className="position-absolute banner_shape3"> <Image height='auto' src={localImgLoad('images/banner-shapethree3.png')} width='10px' alt="image" /> </span>

                        <div className="col-12 col-lg-6 mx-auto text-center"  data-aos="fade-right" data-aos-duration="1500">
                            <div className="banner_text my-3 p-4">
                                <h1 className='text-white my-2'>Best way to manage your customers easily.</h1>
                                <p className='text-white my-2'>Lorem Ipsum is simply dummy text of the printing and setting indus orem Ipsum has been the industrys standard dummy text ever.</p>
                            </div>
                            <div className="yt_video" data-aos="fade-in" data-aos-duration="1500">
                                <div className="thumbnil">
                                    <a className="popup-youtube play-button" onClick = {() => setytShow(true)} data-url="#" data-toggle="modal" data-target="#myModal" title="XJj2PbenIsU">
                                        {/* <span className="play_btn position-relative">
                                            <Image src={localImgLoad('images/play_icon.png')} className='position-relative' width='30px' height='30px' alt="image" />
                                            <div className="waves-block">
                                                <div className="waves wave-1"></div>
                                                <div className="waves wave-2"></div>
                                                <div className="waves wave-3"></div>
                                            </div>
                                        </span> */}
                                        <span className="play_btn position-relative rounded-circle d-flex justify-content-center align-items-center">
                                            <Image src={localImgLoad('images/play_icon.png')} className='p-1 position-relative rounded-circle' width='30px' height='30px' alt="image" />
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="container-fluid p-3 p-lg-5"  data-aos="fade-in" data-aos-duration="1500">
                    <div className="banner_images">
                        <div className="img-con d-block d-sm-flex justify-content-around align-items-center gap-5">
                            <div className="col-lg-2 d-none d-lg-block">
                                <div className="banner_screen screen1 text-center">
                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-5.png')} alt="image" />
                                </div>
                            </div>

                            <div className="col-12 col-sm-4 col-lg-2">
                                <div className="banner_screen screen2 text-center">
                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-4.png')} alt="image" />
                                </div>
                            </div>

                            <div className="my-4 my-md-0 col-12 col-sm-4 col-lg-3">
                                <div className="banner_screen screen3 text-center">
                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-1.png')} alt="image" />
                                </div>
                            </div>

                            <div className="col-12 col-sm-4 col-lg-2">
                                <div className="banner_screen screen4 text-center">
                                    <Image width='auto' height='auto' className="moving_animation" src={localImgLoad('images/hero-image-2.png')} alt="image" />
                                </div>
                            </div>
                            <div className="col-lg-2 d-none d-lg-block">
                                <div className="banner_screen screen5 text-center">
                                    <Image width='auto' height='auto' className="moving_position_animatin" src={localImgLoad('images/hero-image-3.png')} alt="image" />
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </section>
            <section className="row_am download_section homedark-download">
                <div className="container">
                    <ul className="app_btn" data-aos="fade-in" data-aos-duration="1500">
                        <li>
                            <a href="#" className="app_store">
                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/appstore_blue.png')} alt="image" />
                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/appstore_white.png')} alt="image" />
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <Image width='auto' height='auto' className="blue_img" src={localImgLoad('images/googleplay_blue.png')} alt="image" />
                                <Image width='auto' height='auto' className="white_img" src={localImgLoad('images/googleplay_white.png')} alt="image" />
                            </a>
                        </li>
                    </ul>
                </div>
            </section>
            <section className="row_am statistic_section">
                <div className="container">
                    <ul className="app_statstic" id="counter" >
                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12" data-aos="fade-up" data-aos-duration="1000">
                            <li>
                                <div className="icon">
                                    <Image width='auto' height='auto' src={localImgLoad('images/download-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="17">0</span><span>M+</span></p>
                                    <p>Download</p>
                                </div>
                            </li>
                        </div>

                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1200">
                            <li>
                                <div className="icon">
                                    <Image width='auto' height='auto' src={localImgLoad('images/followers-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="08">0 </span><span>M+</span></p>
                                    <p>Followers</p>
                                </div>
                            </li>
                        </div>

                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1400">
                            <li>
                                <div className="icon">
                                    <Image width='auto' height='auto' src={localImgLoad('images/reviews-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="2300">1500</span><span>+</span></p>
                                    <p>Reviews</p>
                                </div>
                            </li>
                        </div>

                        <div className="col-md-3 col-lg-3 col-sm-6 col-xs-12 " data-aos="fade-up" data-aos-duration="1600">
                            <li>
                                <div className="icon">
                                    <Image width='auto' height='auto' src={localImgLoad('images/countries-dark.png')} alt="image" />
                                </div>
                                <div className="text">
                                    <p><span className="counter-value" data-count="150">0</span><span>+</span></p>
                                    <p>Countries</p>
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>
            </section>
            <section className="row_am features_section homedark-features" id="features">
                <div className="container">
                    <div className="features_inner">
                        <div className="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
                            <h2><span>Features</span> that makes app different!</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy</p>
                        </div>
                        <div className="features_block">
                            <div className="row">
                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1500">
                                        <div className="image">
                                            <Image width='auto' height='auto' src={localImgLoad('images/features1.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Secure data</h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1700">
                                        <div className="image">
                                            <Image width='auto' height='auto' src={localImgLoad('images/features2.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Automate everything</h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="col-md-4">
                                    <div className="feature_box" data-aos="fade-up" data-aos-duration="1900">
                                        <div className="image">
                                            <Image width='auto' height='auto' src={localImgLoad('images/features3.png')} alt="image" />
                                        </div>
                                        <div className="text">
                                            <h4>Secure data</h4>
                                            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br/> indus orem Ipsum has beenthe standard dummy.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
            </section>
            < AboutApp dark = {true}/>
            <Design />
            <Work dark = {true}/>
            {/*<Testimonial />*/}
            {/*<Trusted />*/}
            {/*<Pricing />*/}
            <Faq/>
            {/*<Interface/>*/}
            <Download />
            <Story />
            {ytShow &&
                <>
                    <div className="modal fade youtube-video show" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-modal="true" style={{paddingRight: "17px", display: "block"}}>
                        <div className="modal-dialog" role="document">
                            <div className="modal-content">
                                <button id="close-video" type="button" className="button btn btn-default text-right" data-dismiss="modal">
                                    <i className="icofont-close-line-circled" onClick={() => setytShow(false)}></i>
                                </button>
                                <div className="modal-body">
                                    <div id="video-container" className="video-container">
                                        <iframe id="youtubevideo" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&amp;mute=1" width="640" height="360" frameborder="0" allowfullscreen=""></iframe>
                                    </div>
                                </div>
                                <div className="modal-footer">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="purple_backdrop"></div>
                </>}
        </>
    )
}

export default Lnd