"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper";
import "swiper/css";
import { useState } from "react";
import ContactPopup from "./ContactPopup";
import Link from "next/link";
import ConsenHead from "@/src/ConsenHead";

const caseStudies = [
    { id: 1, img: "/assets/images/Mobile-app-development-service/discovery.webp", category: "Discovery & Strategy", title: "Understand your goals", link: "/portfolio-details" },
    { id: 2, img: "/assets/images/Mobile-app-development-service/wireframing.webp", category: "Wireframing & Design", title: "Stunning UI/UX layouts", link: "/portfolio-details" },
    { id: 3, img: "/assets/images/Mobile-app-development-service/coding.webp", category: "Development ", title: "Agile coding & testing", link: "/portfolio-details" },
    { id: 4, img: "/assets/images/Mobile-app-development-service/testing.webp", category: "Launch & Deployment", title: "Go live with confidence", link: "/portfolio-details" },
    { id: 5, img: "/assets/images/Mobile-app-development-service/support.webp", category: " Maintenance & Growth", title: "Continuous support", link: "/portfolio-details" },
];

export default function OurDevelopment() {
    const [showPopup, setShowPopup] = useState(false);

    return (
        <>
            <ConsenHead
                title="Case Studies - Metatroncube Software Solutions | Innovative Tech in Waterloo"
                description="Explore case studies showcasing how Metatroncube Software Solutions delivers innovative, user-centric digital products that drive growth."
            />

            <div className="case-study-area color-bg">
                <div className="container">
                    <div className="row case-study-bg align-items-center mb-40">
                        <div className="col-lg-6 col-md-6">
                            <div className="consen-section-title">
                                <h2>A Proven Process <span> for App Success</span></h2>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-6">
                            <div className="consen-button text-right">
                                <a
                                    href="#"
                                    onClick={(e) => {
                                        e.preventDefault();
                                        setShowPopup(true);
                                    }}
                                >
                                    Start My App Journey
                                </a>
                            </div>
                        </div>
                    </div>

                    <div className="row">
                        <Swiper
                            modules={[Autoplay]}
                            spaceBetween={30}
                            slidesPerView={3}
                            loop={true}
                            loopedSlides={caseStudies.length}  // loop all slides
                            speed={4000}                       // sliding speed
                            autoplay={{
                                delay: 0,                      // no delay, continuous movement
                                disableOnInteraction: false,
                                pauseOnMouseEnter: false,
                            }}
                            allowTouchMove={true}
                            breakpoints={{
                                0: { slidesPerView: 1 },
                                768: { slidesPerView: 3 },
                                1200: { slidesPerView: 3 },
                            }}
                            className="case-study owl-carousel"
                        >
                            {caseStudies.concat(caseStudies).map((item, idx) => (
                                <SwiperSlide key={idx}>
                                    <div className="case-study-single-box" style={{ textAlign: "left" }}>
                                        <div className="case-study-thumb">
                                            <img src={item.img} alt={item.title} />
                                            <div className="case-study-content">
                                                <div className="case-study-title content-new">
                                                    <h6>{item.category}</h6>
                                                    <h3>{item.title}</h3>
                                                </div>
                                                <div className="case-button">
                                                    <Link href={item.link}></Link>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </div>
                </div>
            </div>

            <ContactPopup show={showPopup} onClose={() => setShowPopup(false)} />
        </>
    );
}