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

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

export const ImageGrid1Example = () => {
    const images = [
        '/images/avatar/avatar-6.jpg',
        '/images/avatar/avatar-8.jpg',
        '/images/avatar/avatar-10.jpg',
        '/images/avatar/avatar-11.jpg',
        '/images/avatar/avatar-12.jpg',
        '/images/avatar/avatar-13.jpg',
        '/images/avatar/avatar-14.jpg'
    ]
    return (
        <section className="py-md-14 py-8 bg-white">
            <Container>
                <Row className="align-items-center">
                    <Col xl={6} lg={6} xs={12}>
                        <div className="mb-5  ">
                            <h1 className="display-3 mb-4 fw-bold "> Join the team, we’re growing fast! </h1>
                            <p className="lead mb-4 pe-xl-12 ">
                                We’re looking for incredible people to build on our strong momentum. Help us power the brands you know and love.
                            </p>
                            <Link href="#position" className="btn btn-primary"> See All Open Positions </Link>
                            <p className=" mt-4 mb-0">
                                69 open positions across and <Link href="#">all offices</Link> and <Link href="#">all teams</Link>.
                            </p>
                        </div>
                    </Col>
                    <Col lg={6} xs={12}>
                        <HeroCollageGallery images={images} />
                    </Col>
                </Row>
            </Container>
        </section>
    );
}

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

export const ImageGrid2Example = () => {
    const images = [
        '/images/avatar/avatar-1.jpg',
        '/images/avatar/avatar-3.jpg',
        '/images/avatar/avatar-2.jpg',
        '/images/avatar/avatar-4.jpg',
        '/images/avatar/avatar-5.jpg',
        '/images/avatar/avatar-7.jpg',
        '/images/avatar/avatar-6.jpg',
        '/images/avatar/avatar-8.jpg',
        '/images/avatar/avatar-10.jpg',
        '/images/avatar/avatar-11.jpg',
        '/images/avatar/avatar-12.jpg',
        '/images/avatar/avatar-13.jpg',
        '/images/avatar/avatar-14.jpg'
    ]
    return <CollageGallery images={images} />
}

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

export const ImageGrid3Example = () => {
    const GalleryImages = [
        { id: 1, image: '/images/about/geeksui-img-1.jpg' },
        { id: 2, image: '/images/about/geeksui-img-2.jpg' },
        { id: 3, image: '/images/about/geeksui-img-3.jpg' },
        { id: 4, image: '/images/about/geeksui-img-4.jpg' },
        { id: 5, image: '/images/about/geeksui-img-5.jpg' },
        { id: 6, image: '/images/about/geeksui-img-6.jpg' }
    ];
    return <JustifiedGallery images={GalleryImages} />;
}

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

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

export const ImageGrid4Example = () => {
    const images = [
        { image: '/images/job/jpg/job-gallery-img-1.jpg' },
        { image: '/images/job/jpg/job-gallery-img-2.jpg' },
        { image: '/images/job/jpg/job-gallery-img-3.jpg' },
        { image: '/images/job/jpg/job-gallery-img-4.jpg' },
        { image: '/images/job/jpg/job-gallery-img-5.jpg' },
        { image: '/images/job/jpg/job-gallery-img-6.jpg' },
        { image: '/images/job/jpg/job-gallery-img-7.jpg' },
        { image: '/images/job/jpg/job-gallery-img-8.jpg' }
    ]
    return (
        <Row className="mt-6">
            {images.map((item, index) => {
                return (
                    <Col lg={3} md={4} xs={12} key={index}>
                        <div className="mb-4">
                            <GKLightbox image={item.image} />
                        </div>
                    </Col>
                )
            })}
        </Row>
    );
}