import React, { useState } from "react";
import Link from "next/link";
import Vdoimg1 from "../../../public/assets/images/resources/experience-img-1.jpg";
import Vdoimg2 from "../../../public/assets/images/resources/experience-img-2.jpg";
import Vdoimg3 from "../../../public/assets/images/resources/experience-img-3.jpg";
import Vdoimg4 from "../../../public/assets/images/resources/experience-img-4.jpg";
import Vdoimg5 from "../../../public/assets/images/resources/experience-img-5.jpg";
import Vdoimgone from "../../../public/assets/images/resources/video-one-img.jpg";

function VideoOne() {
  const [show, setshow] = useState(false);

  return (
    <div>
      <section className="video-one">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-xl-5 col-lg-12 col-md-12 col-sm-12">
              <div className="video-one-left">
                <div
                  className="section-three-title wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="section-three-title-title">
                    <h2>The Digital Marketing Company In USA</h2>
                  </div>
                </div>
                <div
                  className="section-three-details wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <p>
                    Sed perspiciatis unde omnis natus volupta accusantiuc
                    doloremue laudantium totamem aperiam
                  </p>
                </div>
                <div
                  className="video-one-left-clients-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="500ms"
                >
                  <ul className="video-one-left-clients-list">
                    <li>
                      <img src={Vdoimg1.src} alt="experience-img-1" />
                    </li>
                    <li>
                      <img src={Vdoimg2.src} alt="experience-img-2" />
                    </li>
                    <li>
                      <img src={Vdoimg3.src} alt="experience-img-3" />
                    </li>
                    <li>
                      <img src={Vdoimg4.src} alt="experience-img-4" />
                    </li>
                    <li>
                      <img src={Vdoimg5.src} alt="experience-img-4" />
                    </li>
                  </ul>
                  <p>Trusted by 1M+ people around the globe</p>
                </div>
              </div>
            </div>
            <div className="col-xl-7 col-lg-12 col-md-12 col-sm-12">
              <div className="video-one-right">
                <div
                  className="video-one-video-box wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                  onClick={() => setshow(true)}
                >
                  <div className="video-one-video-img">
                    <div className="scroll_item_select_img">
                      <img src={Vdoimgone.src} alt="" />
                    </div>
                  </div>
                  <div className="video-one-video-btn">
                    <Link href="#" className="video-popup">
                      <i className="fas fa-play" />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {show && (
        <div className="YouTubePopUp-Wrap">
          <div className="YouTubePopUp-Content" onClick={() => setshow(false)}>
            <span
              className="YouTubePopUp-Close"
              onClick={() => setshow(false)}
            />
            <iframe
              src="https://www.youtube.com/embed/rzfmZC3kg3M?autoplay=1"
              allowFullScreen=""
            />
          </div>
        </div>
      )}
    </div>
  );
}

export default VideoOne;
