import { useEffect, useRef } from "react";
import ThumbDev1 from "../../../../public/assets/imgs/thumb/products/virtual-tour/hero-1.jpg";
import ThumbDev2 from "../../../../public/assets/imgs/thumb/products/virtual-tour/hero-2.jpg";
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}>
                  Virtual Tour Builder
                </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>
                    Create immersive virtual experiences with our Virtual Tour Builder. Whether it&apos;s for real estate, museums, retail spaces, or education, our platform allows you to add 360° media, interactive navigation, and much more to your virtual tours.
                  </p>
                  <p>
                    Provide a seamless, interactive experience with customizable points of interest (POIs), live sessions, and the ability to sell products directly on the tour. With features like 3D views, analytics, and e-commerce integration, your virtual tour is ready to engage and convert.
                  </p>
                </div>
                <ul>
                  <li>+ 360° Media</li>
                  <li>+ Live Streaming</li>
                  <li>+ POI Customization</li>
                  <li>+ Room Navigation</li>
                  <li>+ E-commerce Integration</li>
                  <li>+ Interactive Map</li>
                  <li>+ Secure Access</li>
                  <li>+ Visitor Analytics</li>
                  <li>+ Multi-Language</li>
                  <li>+ Live Chat</li>
                  <li>+ 3D View</li>
                  <li>+ Voice Commands</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="Virtual Tour Image 1"
                  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="Virtual Tour Image 2"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

export default HeroSection;