import { services2 } from "@/utils/data";

const ServiceTabSection = () => {
    const tabData = [
        { id: "modified-roofing", icon: "icon-2.png" },
        { id: "roof-installation", icon: "icon-3.png" },
        { id: "roof-cornering", icon: "icon.png" },
        { id: "roof-renovation", icon: "icon-2.png" }
    ];

    return (
        <section className="service-tab-section section-space bg-color-1 p-relative">
            <div className="bg-image" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-35.png)" }}></div>
            <div className="bg-shape-1" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-33.png)" }}></div>
            <div className="bg-shape-2" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-34.png)" }}></div>
            <div className="small-container">
                <div className="service-tab-title-area mb-70">
                    <div className="title-box wow fadeInLeft" data-wow-delay=".5s">
                        <span className="section-sub-title">SERVICES WE’RE OFFERING</span>
                        <h3 className="section-title mt-10 text-white p-relative">Exclusive IT Services</h3>
                    </div>
                    <a className="primary-btn-4 btn-hover mt-20" href="/services">
                        all services &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                        <span className="btn-hover-span"></span>
                    </a>
                </div>
                <div className="row">
                    <div className="col-xxl-4 col-xl-4 col-lg-4">
                        <div className="service-tab-btn-area wow fadeInLeft" data-wow-delay="500ms">
                            <ul className="nav nav-tabs" id="myTab" role="tablist">
                                {services2.map((service, i) => (
                                    <li key={service.id} className="nav-item" role="presentation">
                                        <a href="javascript:void(0)" className={`nav-link ${i === 0 ? 'active' : ''}`} id={`${tabData[i].id}-tab`} data-bs-toggle="tab" data-bs-target={`#${tabData[i].id}-tab-pane`} role="tab">
                                            <div className="icon-box">
                                                <img src={`/assets/imgs/icon/${tabData[i].icon}`} alt="img" />
                                            </div>
                                            {service.title}
                                        </a>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>
                    <div className="col-xxl-8 col-xl-8 col-lg-8">
                        <div className="service-tab-details-area">
                            <div className="tab-content" id="myTabContent">
                                {services2.map((service, i) => (
                                    <div key={service.id} className={`tab-pane fade ${i === 0 ? 'show active' : ''}`} id={`${tabData[i].id}-tab-pane`} role="tabpanel">
                                        <div className="service-tab-content p-relative">
                                            <div className="tab-bg-shape" style={{ backgroundImage: "url(/assets/imgs/shapes/shape-32.png)" }}></div>
                                            <figure className="image p-relative">
                                                <img src="/assets/imgs/resources/service-tab-1.jpg" alt="" />
                                            </figure>
                                            <div className="content p-relative">
                                                <h4>{service.title}</h4>
                                                <p className="pt-15 pb-10">{service.description}</p>
                                                <ul className="tab-list-content">
                                                    <li>Accurate Testing Processes</li>
                                                    <li>100% Satisfaction Guarantee</li>
                                                    <li>Award Winning Company</li>
                                                </ul>
                                                <a className="primary-btn-1 btn-hover mt-20" href="/services">
                                                    Read more &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                                    <span className="btn-hover-span"></span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default ServiceTabSection;