import { useEffect, useRef } from "react";
import ThumbDev1 from "../../../../public/assets/imgs/thumb/products/e-learning/hero-1.jpg";
import ThumbDev2 from "../../../../public/assets/imgs/thumb/products/e-learning/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-Learning 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>
                    Empower your teaching with an all-in-one e-learning platform that simplifies course creation, student engagement, and performance tracking. Designed for educators of all levels, this platform streamlines the teaching process while enhancing the learning experience.
                  </p>
                  <p>
                    From course creation to student interactions and analytics, every tool is crafted to help you teach more efficiently and effectively. Whether you’re running live classes, managing assessments, or tracking student progress, everything is just a click away.
                  </p>
                </div>
                <ul>
                  <li>+ Course Creation</li>
                  <li>+ Multimedia Support</li>
                  <li>+ Live Sessions</li>
                  <li>+ Automated Grading</li>
                  <li>+ Real-Time Analytics</li>
                  <li>+ Personalized Learning</li>
                  <li>+ Flexible Formats</li>
                  <li>+ Payment Integration</li>
                  <li>+ Platform Branding</li>
                  <li>+ Multi-Language</li>
                  <li>+ Online Booking</li>
                  <li>+ Support System</li>
                  <li>+ Course Organization</li>
                  <li>+ Quizzes & Certificates</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;