"use client";
import React, { useState } from "react";
import Image from "next/image";
import { heroData } from "@/data/home/heroData";
import VideoModal from "@/components/global/VideoModal";

const Hero: React.FC = () => {
  const [isVideoOpen, setIsVideoOpen] = useState(false);
  const {
    subTitle,
    title,
    description,
    btnText,
    btnUrl,
    ratingCount,
    ratingText,
    clutchLogo,
    authorSubTitle,
    authorImg,
    heroImg,
    videoUrl,
  } = heroData;

  return (
    <div className="hero-sec">
      <div className="carousel-container">
        <div className="hero-info">
          <div className="hero-area">
            <div className="row">
              <div className="col-lg-7">
                <div className="hero-content">
                  <span
                    className="sub-title"
                    data-aos="fade-up"
                    data-aos-duration={900}
                    data-aos-delay={300}
                  >
                    {subTitle}
                  </span>
                  <h1
                    className="title"
                    data-aos="fade-up"
                    data-aos-duration={900}
                    data-aos-delay={400}
                  >
                    {title}
                  </h1>
                  <p
                    data-aos="fade-up"
                    data-aos-duration={700}
                    data-aos-delay={300}
                  >
                    {description}
                  </p>
                  <a
                    href={btnUrl}
                    className="btn-style1 v2"
                    data-aos="fade-up"
                    data-aos-duration={900}
                    data-aos-delay={400}
                  >
                    {btnText}
                    <span>
                      <Image
                        src="/assets/images/icon/arrow.svg"
                        alt="Arrow icon"
                        width={18}
                        height={18}
                      />
                    </span>
                  </a>
                </div>
              </div>
              <div className="col-lg-5">
                <div
                  className="rating-box"
                  data-aos="fade"
                  data-aos-duration={900}
                  data-aos-delay={200}
                >
                  <div className="rating-content">
                    <ul className="rating-list">
                      <li>
                        <Image
                          src="/assets/images/icon/rating.svg"
                          alt="Star rating icon"
                          width={150}
                          height={22}
                        />
                      </li>
                      <li>
                        <span>{ratingCount}</span>
                      </li>
                    </ul>
                    <span className="review">{ratingText}</span>
                  </div>
                  <Image
                    src={clutchLogo}
                    alt="Clutch platform rating logo"
                    width={143}
                    height={40}
                  />
                  <div className="auther-info">
                    <span className="sub-title">{authorSubTitle}</span>
                    <Image
                      src={authorImg}
                      alt="Happy client testimonial profile image"
                      width={150}
                      height={45}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="hero-img"
            data-aos="fade"
            data-aos-duration={900}
            data-aos-delay={200}
          >
            <Image
              src={heroImg}
              alt="Digital marketing and branding hero illustration"
              width={1280}
              height={595}
              priority
            />
            <button
              className="video-btn video-trigger"
              onClick={() => setIsVideoOpen(true)}
            >
              <Image
                src="/assets/images/icon/play.svg"
                alt="Play video button"
                width={13}
                height={15}
              />
            </button>
          </div>
        </div>
      </div>
      <VideoModal
        isOpen={isVideoOpen}
        onClose={() => setIsVideoOpen(false)}
        videoUrl={videoUrl}
      />
    </div>
  );
};

export default Hero;