// import node module libraries
import Link from 'next/link';
import ModalVideo from 'react-modal-video';
import { useState } from 'react';
import { Col, Row, Container } from 'react-bootstrap';

export const Features1Example = () => {
    const [isOpen, setOpen] = useState(false);
    const [YouTubeURL] = useState('Nfzi7034Kbg');

    return (
        <section className="py-lg-10 py-6 bg-gray-100">
            <Container>
                <Row>
                    <Col xl={{ span: 10, offset: 1 }} md={12} xs={12}>
                        <Row className="align-items-center">
                            <Col lg={5} md={12} xs={12}>
                                <div className="mb-5 mb-lg-0">
                                    <h2 className="display-4 fw-bold mb-3">Learn latest Skills; Advance <u className="text-warning"><span className="text-primary">your  career </span></u> </h2>
                                    <p className="mb-5 lead">Donec sit quam lacinia et sed et. Lectus in pellent esque sed a eget mauris. Tincidunt   tincidunt  sit quisque orci turpis nulla velit.</p>
                                    <Link href="#!" className="btn btn-outline-secondary">Get Started</Link>
                                </div>
                            </Col>
                            <Col lg={{ span: 6, offset: 1 }} md={12} xs={12}>
                                <div className="d-flex justify-content-center position-relative rounded py-17 border-gray-100 border border-4 rounded-3 bg-cover"
                                    style={{ backgroundImage: 'url('/images/education/edu-video-img.jpg')' }}  >
                                    <Link className="popup-youtube icon-shape rounded-circle btn-play icon-xl text-decoration-none"
                                        href="#" scroll={false} onClick={() => setOpen(true)}>
                                        <i className="fe fe-play"></i>
                                    </Link>
                                </div>
                                <ModalVideo channel="youtube" autoplay  isOpen={isOpen}  videoId={YouTubeURL} onClose={() => setOpen(false)} />
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

// import node module libraries
import { Col, Row, Container, Image } from 'react-bootstrap';

// import bootstrap icons
import { PatchCheckFill, Trophy, Star, Nut, ShieldLock } from 'react-bootstrap-icons';

export const Features2Example = () => {
    const programFeatures = [
        {
            id: 1, icon: <Trophy size={20} />, title: 'Learn from Industry Experts',
            description: 'Lorem ipsum dolor sit amet, conse ctetur adipisc amus ac iaculis arcu.'
        },
        {
            id: 2, icon: <Star size={20} />, title: 'Free Resources',
            description: 'Pellentesque sagittis placerat mollii purus onvallis venenatis asapien.'
        },
        {
            id: 3, icon: <ShieldLock size={20} />, title: 'Learn Anytime, Anywhere',
            description: 'Integer ultricies lorem nec erat fau euismod ipsum nislnec leo iaculis.'
        },
        {
            id: 4, icon: <Nut size={20} />, title: 'Skill-based Learning',
            description: 'Duis sed sollicitudin narcu mi, faucibus in sapien non, auctor placerat arcu.'
        }
    ]
    return (
        <section className="pb-lg-14 pb-6">
            <Container>
                <Row>
                    <Col xl={{ offset: 3, span: 6 }} md={12} xs={12} >
                        <div className="text-center mb-lg-10 mb-6">
                            <h2 className="h1 fw-bold">Building strong <u className="text-warning"><span className="text-primary">foundational skills</span></u></h2>
                            <p className="lead mb-0">Online courses certification section design for showcase your certificate program features.</p>
                        </div>
                    </Col>
                </Row>
                <Row className="align-items-center ">
                    <Col xl={5} lg={6} md={12} xs={12}>
                        <div className="mb-6 mb-lg-0">
                            <div className="mb-2">
                                <Image src='/images/education/certificate.jpg' alt="certificate" className="img-fluid w-100" />
                            </div>
                            <div className="d-flex">
                                <span className='text-primary'> <PatchCheckFill size={12} /> </span><span className="ms-2">Completion certificate awarded on every course completion</span>
                            </div>
                        </div>
                    </Col>
                    <Col xl={{ offset: 1, span: 6 }} lg={6} md={12} xs={12}>
                        <Row className="row-cols-2">
                            {programFeatures.map((item, index) => {
                                return (
                                    <Col key={index}>
                                        <div className="mb-4 mb-xl-6">
                                            <div className="mb-4 text-primary"> {item.icon} </div>
                                            <div>
                                                <h4> {item.title}</h4>
                                                <p> {item.description}</p>
                                            </div>
                                        </div>
                                    </Col>
                                )
                            })}
                        </Row>
                    </Col>
                </Row>
            </Container>
        </section>
    )
}

// import node module libraries
import Link from 'next/link';
import { Col, Row, Container } from 'react-bootstrap';

// import widget/custom components
import { SectionHeadingLeft3 } from 'widgets';

export const Features3Example = () => {
    const title = 'Culture that drives business results';
    const subtitle = 'Geeks Culture';
    const description = 'Great workplace is one where employees trust the people they work for, have pride in what they do, and enjoy the people they work with.';

    return (
        <section className="py-14">
            <Container>
                <Row>
                    <Col xl={{ offset: 1, span: 10 }} xs={12}>
                        <SectionHeadingLeft3
                            title={title}
                            description={description}
                            subtitle={subtitle}
                            className="display-4"
                        />

                        <div className="mt-8">
                            <Row>
                                <Col lg={6} md={6} xs={12}>
                                    <div className="mb-6 pe-xl-12">
                                        <h3 className="mb-3 fw-bold">Benefits</h3>
                                        <p className="mb-0 fs-4 ">
                                            Our benefits are designed to ensure that you are energized, focused, and thriving, from comprehensive  mental health programs.
                                        </p>
                                    </div>
                                </Col>
                                <Col lg={6} md={6} xs={12}>
                                    <div className="mb-6 pe-xl-12">
                                        <h3 className="mb-3 fw-bold">Growth</h3>
                                        <p className="mb-0 fs-4 ">
                                            Areas of Responsibility empower you to take on big <Link href="#">responsibilities</Link> across the organization that will challenge you in new ways.
                                        </p>
                                    </div>
                                </Col>
                                <Col lg={6} md={6} xs={12}>
                                    <div className="mb-6 pe-xl-12">
                                        <h3 className="mb-3 fw-bold">Values</h3>
                                        <p className="mb-0 fs-4 ">
                                            Our values are at the core of  <Link href="#">who we are</Link>. They guide us on how we show up & work together in order to be our best achieve   our mission.
                                        </p>
                                    </div>
                                </Col>
                                <Col lg={6} md={6} xs={12}>
                                    <div className="mb-6 pe-xl-12">
                                        <h3 className="mb-3 fw-bold">Development</h3>
                                        <p className="mb-0  fs-4 ">
                                            You’ll have access to Conscious Leadership training,  success guides, anti-bias & harassment training, & free  executive coaching.
                                        </p>
                                    </div>
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

// import node module libraries
import { Col, Row, Image, Container } from 'react-bootstrap';

// import MDI icons
import Icon from '@mdi/react';
import { mdiStar, mdiLifebuoy, mdiFileDocument } from '@mdi/js';

// import widget/custom components
import { SectionHeadingLeftBold } from 'widgets';

export const Features4 = () => {
    const title = 'The most powerful design for web projects';
    const subtitle = 'Bullet point Features';
    const description = 'Donec eget enim volutpat punar turpis at elementum neque.';

    const features = [
        { id: 1, icon: mdiStar, title: '5-Star Rating', description: 'Pellentesque ipsum nulla cursus sodales enim non interdum dignissim quam.' },
        { id: 2, icon: mdiLifebuoy, title: 'Dedicated Support', description: 'Nullam sagittis metus ut lorem efficitur in bibendum augue pharetra.' },
        { id: 3, icon: mdiFileDocument, title: 'Quality Documentation <span class="badge bg-light-warning fs-6 text-warning ms-1">coming soon</span>', description: 'Nullam sagittis metus ut lorem efficitur in bibendum augue pharetra.' }
    ];
    return (
        <section className='py-8'>
            <Container>
                <Row className="align-items-center">
                    <Col lg={6} md={12} xs={12}>
                        <div className="pe-lg-6 ps-lg-6">
                            <SectionHeadingLeftBold title={title} description={description} subtitle={subtitle} />
                            <div className="mt-6">
                                {features.map((item, index) => {
                                    return (
                                        <div className="d-flex mb-4" key={index}>
                                            <div> <Icon path={item.icon} size={1} className="text-primary mt-1" /> </div>
                                            <div className="ms-3">
                                                <h3 className="mb-2" dangerouslySetInnerHTML={{ __html: item.title }} ></h3>
                                                <p className="mb-0 fs-4">{item.description}</p>
                                            </div>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </Col>
                    <Col lg={6} md={12} xs={12}>
                        <div className="mt-4 mt-lg-0 bg-gray-200 rounded-4">
                            <Image src='/images/svg/featured-img-2.svg' alt="..." className="img-fluid w-100" />
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

// import node module libraries
import { Col, Row, Image, ListGroup, Container } from 'react-bootstrap';

// import MDI icons
import Icon from '@mdi/react';
import { mdiCheckCircle } from '@mdi/js';

// import widget/custom components
import { SectionHeadingLeftBold } from 'widgets';

export const Features5Example = () => {
    const title = 'Build the sites you want with Geeks UI you love';
    const subtitle = 'Build fast, launch faster';
    const description = 'Mauris interdum leo vel eleifend fringilla nibh elit interdc nunc elementum nisi.';
    const featurescol1 = [
        { content: 'Earnings' },
        { content: 'Conversion Rates' },
        { content: 'Top security' }
    ];
    const featurescol2 = [
        { content: 'High converting' },
        { content: 'Easy to use' },
        { content: '200+ Integrations' }
    ];

    return (
        <section className='py-8'>
            <Container>
                <Row className="align-items-center">
                    <Col lg={6} md={12} xs={12}>
                        <div className="mb-4 mb-lg-0 bg-gray-200 rounded-4 ">
                            <Image src="/images/svg/featured-img-1.svg" alt="..." className="img-fluid w-100" />
                        </div>
                    </Col>
                    <Col lg={6} md={12} xs={12} className="mt-4 mt-lg-0">
                        <div className="ps-lg-7">
                            <SectionHeadingLeftBold title={title} description={description} subtitle={subtitle} />
                            <Row className="mt-5">
                                <Col>
                                    <ListGroup bsPrefix="list-unstyled" className="fs-4 fw-medium">
                                        {featurescol1.map((item, index) => {
                                            return (
                                                <ListGroup.Item key={index} bsPrefix="mb-2" className="d-flex"   >
                                                    <Icon path={mdiCheckCircle} size={0.7} className="text-success mt-1 me-2" />
                                                    {item.content}
                                                </ListGroup.Item>
                                            );
                                        })}
                                    </ListGroup>
                                </Col>
                                <Col>
                                    <ListGroup bsPrefix="list-unstyled" className="fs-4 fw-medium">
                                        {featurescol2.map((item, index) => {
                                            return (
                                                <ListGroup.Item key={index} bsPrefix="mb-2" className="d-flex" >
                                                    <Icon path={mdiCheckCircle} size={0.7} className="text-success mt-1 me-2" />
                                                    {item.content}
                                                </ListGroup.Item>
                                            );
                                        })}
                                    </ListGroup>
                                </Col>
                            </Row>
                        </div>
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

// import MDI icons
import { mdiFlash, mdiLayers, mdiCellphone, mdiInfinity } from '@mdi/js';

// import widget/custom components
import { FeatureTopIcon3 } from 'widgets';

export const Features6 = () => {
    const features = [
        {
            id: 1, icon: mdiFlash, title: 'Easy Setup Process',
            description: 'Vivamus sit amet eros facilisis, suscipit libero eget, elementum diam. Praesent quam.'
        },
        {
            id: 2, icon: mdiLayers, title: 'Quality First',
            description: 'Quality first. All projects are backed by our fanatic support & 100% satisfaction guarantee.'
        },
        {
            id: 3, icon: mdiCellphone, title: 'Customizable',
            description: 'Mauris interdum leo vel eleifend fringilla, nibh elit interdum nisi nec porttitor nunc egestas.'
        },
        {
            id: 4, icon: mdiInfinity, title: 'Unlimited',
            description: 'Excepteur sint occaecat cupidatat non proident, sunt in anim id est laborum velit esse cillum.'
        }
    ];

    return (
        <section className="py-lg-20 py-8">
            <Container>
                <Row>
                    {features.map((item, index) => {
                        return (
                            <Col lg={3} md={6} sm={12} key={index}>
                                <FeatureTopIcon3 item={item} />
                            </Col>
                        );
                    })}
                </Row>
            </Container>
        </section>
    );
}

// import node module libraries
import { Container, Row, Col } from 'react-bootstrap';
import { LightningChargeFill, ChatFill, CloudFill, GridFill } from 'react-bootstrap-icons';

// import widget/custom components
import { FeatureTopIcon2, SectionHeadingLeft2 } from 'widgets';

export const Features7Example = () => {
    const features = [
        {
            id: 1, icon: <LightningChargeFill />, title: 'Fast and intuitive',
            description: 'Duis ac ultrices lacus. Nulla pulvinar justo ac ex pulvinar placerat. Curabitur sit amet sagittis sapienlectus.'
        },
        {
            id: 2, icon: <ChatFill />, title: 'Contextual feedback',
            description: 'Vivamus gravida sem nec nunc euismod, eu facilisis augue congue. Etiam pharetra aliquet interdum.'
        },
        {
            id: 3, icon: <CloudFill />, title: 'Cloud storage',
            description: 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae consequat interdum.'
        },
        {
            id: 4, icon: <GridFill />, title: 'Well-integrated',
            description: 'Praesent dolor velit, porta id pharetra quis, rutrum vitae velit. In ut neque qnas tristique imperdiet porta.'
        }
    ];

    return (
        <section className="py-8 bg-white">
            <Container>
                <Row>
                    <Col xl={{ offset: 2, span: 8 }} sm={12}>
                        <Row>
                            <Col lg={9} md={12} sm={12} className="mb-8">
                                <SectionHeadingLeft2 title="A simple and powerful experience out of the box."
                                    description="Everything you need, customize and extend when you need more."
                                />
                            </Col>
                        </Row>
                        <Row>
                            <Col lg={12} md={12} sm={12}>
                                <Row>
                                    {features.map((item, index) => {
                                        return (
                                            <Col key={index} md={6} sm={12} className="pe-lg-6 mb-lg-6 mb-4"  >
                                                <FeatureTopIcon2 item={item} />
                                            </Col>
                                        );
                                    })}
                                </Row>
                            </Col>
                        </Row>
                        <hr className="mt-6" />
                    </Col>
                </Row>
            </Container>
        </section>
    );
}