"use client";
import Link from "next/link";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

const swiperOptions = {
    modules: [Autoplay, Pagination, Navigation],
    spaceBetween: 30,
    loop: true,
    autoplay: {
        delay: 6000,
    },
    // Navigation arrows
    navigation: {
        nextEl: ".project-button-next",
        prevEl: ".project-button-prev",
    },
};

export default function Project3() {
    return (
        <>
            <section
                className="project__area-three project__bg-three"
                data-background="/assets/img/bg/h3_project_bg.jpg"
            >
                <div className="container">
                    <div className="row justify-content-center">
                        <div className="col-xl-7 col-lg-8">
                            <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
                                <span className="sub-title">
                                    COMPANIES <span className="title-color">WE'VE WORKED WITH</span>
                                </span>
                                <h2 className="title tg-element-title">Some of Our Most Recent Clients</h2>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-12">
                            <div className="swiper-container project-active">
                                <Swiper {...swiperOptions} className="swiper-wrapper">
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/the-spark-coffee">The Spark Coffee</Link>
                                                </h2>
                                                <p>
                                                    Mobile coffee business offering on-the-go food and beverage services
                                                    and catering to people across the United States.
                                                </p>
                                                <Link href="/portfolio/the-spark-coffee" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-1.jpg" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/atlas-aviation">Atlas Aviation</Link>
                                                </h2>
                                                <p>
                                                    Fully certified pilot training and aircraft rental company based in
                                                    Tampa, Florida.
                                                </p>
                                                <Link href="/portfolio/atlas-aviation" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-2.jpg" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/social-celebrity">Social Celebrity</Link>
                                                </h2>
                                                <p>
                                                    Social Media Enhancement company providing marketing services for
                                                    Facebook, Instagram, TikTok, Twitter, Youtube and more.
                                                </p>
                                                <Link href="/portfolio/social-celebrity" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-4.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/multi-group-automotive">
                                                        Multi Group Automotive
                                                    </Link>
                                                </h2>
                                                <p>
                                                    Dealership based in Doraville, GA providing vehicles for a wide
                                                    range of different preferences and budgets.
                                                </p>
                                                <Link href="/portfolio/multi-group-automotive" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-6.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/discord-center">Discord Center</Link>
                                                </h2>
                                                <p>
                                                    Server Listing Website utilized by millions of users of the popular
                                                    communicaton platform - "Discord" which specializes in growing
                                                    Discord servers.
                                                </p>
                                                <Link href="/portfolio/discord-center" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-3.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/hytale-server-hosting">
                                                        Hytale Server Hosting
                                                    </Link>
                                                </h2>
                                                <p>
                                                    Server Hosting company for the upcoming, highly anticipated
                                                    videogame - Hytale, being developed by Tencent, the parent-company
                                                    for TikTok & Riot Games.
                                                </p>
                                                <Link href="/portfolio/hytale-server-hosting" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-5.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/water-main-line-replacement">
                                                        Water Main Line Replacement LLC
                                                    </Link>
                                                </h2>
                                                <p>
                                                    A water main line replacement company in Atlanta, Georgia that
                                                    handles the installation and repair of essential water pipelines.
                                                </p>
                                                <Link
                                                    href="/portfolio/water-main-line-replacement"
                                                    className="btn btn-two"
                                                >
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-7.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/taqueria-del-mar">Taqueria del Mar</Link>
                                                </h2>
                                                <p>
                                                    Latin American eatery in Atlanta, Georgia that specializes in
                                                    Mexican cuisine with a modern twist.
                                                </p>
                                                <Link href="/portfolio/taqueria-del-mar" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-8.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/jenni-bg-plumbing">Jenni BG Plumbing</Link>
                                                </h2>
                                                <p>
                                                    Plumbing company in Peachtree Corners, Georgia that fixes and
                                                    installs pipes, fixtures, and other systems that carry water and
                                                    waste in homes and businesses.
                                                </p>
                                                <Link href="/portfolio/jenni-bg-plumbing" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-9.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                    <SwiperSlide>
                                        <div className="project__item-three shine-animate-item">
                                            <div className="project__content-three">
                                                <h2 className="title">
                                                    <Link href="/portfolio/the-gurvey-law-group">
                                                        The Gurvey Law Group
                                                    </Link>
                                                </h2>
                                                <p>
                                                    A law firm in Brookhaven, Georgia that specializes in investments,
                                                    purchases, and sales.
                                                </p>
                                                <Link href="/portfolio/the-gurvey-law-group" className="btn btn-two">
                                                    View Case Study
                                                </Link>
                                            </div>
                                            <div className="project__thumb-three shine-animate">
                                                <img src="/assets/img/custom/project-10.png" alt="" />
                                            </div>
                                        </div>
                                    </SwiperSlide>
                                </Swiper>
                                <div className="project__nav-wrap">
                                    <div className="project-button-prev">
                                        <i className="flaticon-right-arrow" />
                                    </div>
                                    <div className="project-button-next">
                                        <i className="flaticon-right-arrow" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="project__shape-wrap-three">
                    <img
                        src="/assets/img/project/h3_project_shape01.png"
                        alt=""
                        data-aos="fade-left"
                        data-aos-delay={400}
                    />
                    <img src="/assets/img/project/h3_project_shape02.png" alt="" className="alltuchtopdown" />
                </div>
            </section>
        </>
    );
}