import React from "react";
import Link from "next/link";
import Image from "next/image";
import { services2 } from "@/data/services";

export default function Services() {
  return (
    <div className="section tf-spacing-46 pb-0" style={{ backgroundColor: "#fff" }}>
      <div className="tf-container">
        <div className="heading-section d-flex gap_12 justify-content-between align-items-end flex-wrap-md mb_57">
          <div className="left">
            <div className="point text-body-1 mb_7">
              <span className="item" />
              Our Services
            </div>
            <h2 className="heading-title text_primary split-text effect-right">
              Flexible Coverage Options
            </h2>
            <p
              className="text_mono-gray-7 text-body-1 mt_20 wow animate__fadeInUp animate__animated"
              data-wow-delay="0s"
            >
              With our customizable approach, you can select the specific
              coverages that matter most <br />
              to you, avoiding unnecessary expenses
            </p>
          </div>
        </div>
        {/* Updated for 3x2 grid layout */}
        <div className="tf-grid-layout lg-col-3 md-col-2 sm-col-1">
          {services2.map((service, index) => (
            <div
              key={index}
              className={`tf-box-icon style-6 effect-icon ${service.bgColor} wow animate__fadeInRight animate__animated`}
              data-wow-delay={service.delay}
            >
              <div className="icon">
                <Image alt="icon" src={service.icon} width={33} height={32} />
              </div>
              <div className="content">
                <h3 className="text_primary">
                  <Link
                    href={`/service-details/${service.id}`}
                    className="link-white mb_11"
                  >
                    {service.title}
                  </Link>
                </h3>
                <p className="text-body-1 mb_23">{service.description}</p>
                {/* Conditionally render Learn more - disabled for Construction (id: 16) */}
                {service.id !== 16 ? (
                  <Link
                    href={`/service-details/${service.id}`}
                    className="tf-btn-link"
                  >
                    <span> Learn more </span>
                    <i className="icon-arrow-top-right"> </i>
                  </Link>
                ) : (
                  <span className="tf-btn-link disabled" style={{ opacity: 0.5, cursor: 'not-allowed' }}>
                    <span> Learn more </span>
                    <i className="icon-arrow-top-right"> </i>
                  </span>
                )}
              </div>
              <div
                className="item scroll-tranform"
                data-direction="right"
                data-distance="20%"
              >
                <Image
                  alt="item"
                  src="/images/item/ellipse-1.png"
                  width={400}
                  height={400}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}