import { useEffect, useRef } from "react";
import ThumbDev1 from "../../../../public/assets/imgs/thumb/products/e-commerce/hero-1.png";
import ThumbDev2 from "../../../../public/assets/imgs/thumb/products/e-commerce/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}>
                  E-Commerce Platform
                </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>
                    Our eCommerce system is packed with advanced features that empower your business to excel online. Every tool is crafted to maximize efficiency, drive sales, and enhance customer satisfaction.
                  </p>
                  <p>
                    From streamlined inventory management to engaging digital marketing tools, this system provides everything you need to boost revenue and build lasting customer relationships.
                  </p>
                </div>
                <ul>
                  <li>+ Inventory Management</li>
                  <li>+ Product Variants</li>
                  <li>+ Digital Products</li>
                  <li>+ Campaigns & Coupons</li>
                  <li>+ Order Tracking</li>
                  <li>+ Sales Insights</li>
                  <li>+ POS Integration</li>
                  <li>+ Products Suggestions</li>
                  <li>+ Customer Dashboard</li>
                  <li>+ Product Compare</li>
                  <li>+ GDPR Compliance</li>
                  <li>+ Visitor Analytics</li>
                  <li>+ Social Sharing</li>
                  <li>+ Tax Management</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={ThumbDev1}
                  alt="Development 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={ThumbDev2}
                  alt="Development Image"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default HeroSection;