import Image from "next/image";
import { integrationToolsData, type Tool } from "@/data/home/integrationTools";

export default function IntegrationTools() {
  return (
    <section className="tools-sec2" id="Integration">
      <div className="carousel-container">
        <div className="tools-info2 space">
          <div className="sec-title">
            <span
              className="sub-title"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="300"
            >
              Integration Tools
            </span>
            <h2
              className="title"
              data-aos="fade-up"
              data-aos-duration="900"
              data-aos-delay="400"
            >
              Connect With 100+ Tools
            </h2>
            <p data-aos="fade-up" data-aos-duration="700" data-aos-delay="300">
              Supercharge your workflow by connecting with over 100+ popular
              tools and services including CRMs, marketing platforms, cloud
              storage, analytics
            </p>
          </div>
          <div className="tools-content2">
            {integrationToolsData.map((tool: Tool, index) => (
              <div
                key={index}
                data-aos="fade-up"
                data-aos-duration="900"
                data-aos-delay={tool.delay}
              >
                <div className="tools-block2">
                  <Image
                    src={tool.icon}
                    alt={`${tool.name} logo`}
                    width={40}
                    height={40}
                  />
                  <h3 className="title">{tool.name}</h3>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}