import animationCharCome from "@/lib/utils/animationCharCome";
import Link from "next/link";
import React, { useEffect, useRef } from "react";

const ServiceElementV5 = () => {
  const charAnim = useRef();
  useEffect(() => {
    animationCharCome(charAnim.current);
  }, []);
  return (
    <div>
      <section className="portfolio__service service-v5 pt-140 pb-140">
        <div className="container">
          <div className="row">
            <div className="col-xxl-5 col-xl-5 col-lg-6 col-md-6">
              <h2 className="sec-title animation__char_come" ref={charAnim}>
                {" "}
                Our AI Integrated Products
              </h2>
            </div>
            <div className="col-xxl-7 col-xl-7 col-lg-6 col-md-6">
              <div className="sec-text">
                <p>
                  Unlock efficiency, innovation, and growth with AI-driven solutions that simplify operations, enhance user experiences, and drive measurable results
                </p>
              </div>
            </div>
          </div>
          <div className="portfolio__service-list">
            <div className="row">
              <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/products/healthcare">
                    <h3 className="ps-title">
                      Healthcare <br /> System
                    </h3>
                    <ul>
                      <li>+ Patient satisfaction</li>
                      <li>+ Faster diagnoses</li>
                      <li>+ Error reduction</li>
                    </ul>
                  </Link>
                </div>
              </div>
              <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/products/e-commerce">
                    <h3 className="ps-title">
                      E-Commerce <br /> Platform
                    </h3>
                    <ul>
                      <li>+ Customer retention</li>
                      <li>+ Reduced overhead</li>
                      <li>+ Boosted revenue</li>
                    </ul>
                  </Link>
                </div>
              </div>
              <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/products/erp">
                    <h3 className="ps-title">
                      ERP
                      <br /> System
                    </h3>
                    <ul>
                      <li>+ Resource optimization</li>
                      <li>+ Cost reduction</li>
                      <li>+ Time savings</li>
                    </ul>
                  </Link>
                </div>
              </div>
            </div>
            <div className="row">
             <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/products/e-learning">
                    <h3 className="ps-title">
                      E-Learning
                      <br /> Platform
                    </h3>
                    <ul>
                      <li>+ Performance tracking</li>
                      <li>+ Knowledge retention</li>
                      <li>+ Training efficiency
                      </li>
                    </ul>
                  </Link>
                </div>
              </div>
              {/* <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/products/virtual-tour">
                    <h3 className="ps-title">
                      Virtual Tour
                      <br /> Builder
                    </h3>
                    <ul>
                      <li>+ Customer attraction</li>
                      <li>+ Higher conversion</li>
                      <li>+ Lasting impact</li>
                    </ul>
                  </Link>
                </div>
              </div> */}
              {/* <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
                <div className="portfolio__service-item">
                  <Link href="/service-details">
                    <h3 className="ps-title">
                      Android
                      <br /> Developemnt
                    </h3>
                    <ul>
                      <li>+ WordPress</li>
                      <li>+ Python</li>
                      <li>+ PHP & Laravel</li>
                    </ul>
                  </Link>
                </div>
              </div> */}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default ServiceElementV5;