import { useEffect, useRef } from "react";
import ThumbERP1 from "../../../../public/assets/imgs/thumb/products/erp/hero-1.png";
import ThumbERP2 from "../../../../public/assets/imgs/thumb/products/erp/hero-2.png";
import Image from "next/image";
import animationCharCome from "@/lib/utils/animationCharCome";

const HeroSection = () => {
  const charAnim = useRef();
  useEffect(() => {
    animationCharCome(charAnim.current);
  }, []);
  return (
    <>
      <section className="development__area">
        <div className="container g-0 line pt-130 pb-150">
          <div className="line-3"></div>
          <div className="row">
            <div className="col-xxl-5 col-xl-5 col-lg-5 col-md-5">
              <div className="sec-title-wrapper">
                <h1 className="sec-title animation__char_come" ref={charAnim}>
                  ERP System
                </h1>
              </div>
            </div>
            <div className="col-xxl-7 col-xl-7 col-lg-7 col-md-7">
              <div className="development__wrapper">
                <div className="development__content">
                  <p>
                    Optimize every aspect of your business with our comprehensive ERP solution. From managing clients and leads to tracking projects and automating finances, our ERP system empowers your team to work more efficiently and effectively.
                  </p>
                  <p>
                    Designed to unify and streamline operations, our ERP offers modules for project management, employee tracking, invoicing, and more, giving you the tools needed to grow and scale with confidence.
                  </p>
                </div>
                <ul>
                  <li>+ Client & Lead Management</li>
                  <li>+ Project Tracking & Reporting</li>
                  <li>+ HR & Payroll</li>
                  <li>+ Invoicing & Payments</li>
                  <li>+ Real-Time Analytics</li>
                  <li>+ Inventory Management</li>
                  <li>+ Task Automation</li>
                  <li>+ Customizable Workflows</li>
                  <li>+ Integration with Payment Gateways</li>
                  <li>+ Role-Based Access Control</li>
                  <li>+ E-Signatures for Contracts</li>
                  <li>+ Support & Ticketing System</li>
                  <li>+ KPI Tracking & Insights</li>
                  <li>+ Multi-Language Support</li>
                </ul>
              </div>
            </div>
            <div className="col-xxl-8 col-xl-8 col-lg-8 col-md-8">
              <div className="development__img">
                <Image
                  priority
                  style={{ width: "auto", height: "auto" }}
                  src={ThumbERP1}
                  alt="ERP Image"
                  data-speed="auto"
                />
              </div>
            </div>
            <div className="col-xxl-4 col-xl-4 col-lg-4 col-md-4">
              <div className="development__img">
                <Image
                  priority
                  style={{ width: "auto", height: "auto" }}
                  src={ThumbERP2}
                  alt="ERP Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default HeroSection;