import { useEffect, useRef } from "react";
import ThumbDev1 from "../../../../public/assets/imgs/thumb/products/healthcare/hero-1.jpg";
import ThumbDev2 from "../../../../public/assets/imgs/thumb/products/healthcare/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}>
                  Healthcare 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>
                    Revolutionize patient care with a comprehensive healthcare platform that enables efficient patient management, seamless appointment scheduling, and real-time analytics. Designed for healthcare professionals, this platform simplifies daily operations while enhancing patient satisfaction.
                  </p>
                  <p>
                    From managing patient records to facilitating telehealth consultations and providing data-driven insights, every feature is crafted to support quality healthcare delivery. Experience streamlined workflows and a user-friendly interface tailored for healthcare environments.
                  </p>
                </div>
                <ul>
                  <li>+ Patient Management</li>
                  <li>+ Appointment Scheduling</li>
                  <li>+ Telehealth Capabilities</li>
                  <li>+ Electronic Health Records (EHR)</li>
                  <li>+ Real-Time Analytics</li>
                  <li>+ Secure Data Management</li>
                  <li>+ Customizable Reports</li>
                  <li>+ Billing Integration</li>
                  <li>+ Mobile Access</li>
                  <li>+ Multi-Language Support</li>
                  <li>+ Automated Reminders</li>
                  <li>+ Support System</li>
                  <li>+ Patient Engagement Tools</li>
                  <li>+ Health Monitoring Integrations</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;