"use client";

import Image from "next/image";
import { featuresData } from "@/data/home/featuresData";
import { useState } from "react";
import VideoPopup from "@/components/shared/VideoPopup";

export default function FeaturesSection() {
  const [isVideoOpen, setIsVideoOpen] = useState(false);
  const [currentVideoUrl, setCurrentVideoUrl] = useState("");

  const handleVideoClick = (videoUrl: string) => {
    setCurrentVideoUrl(videoUrl);
    setIsVideoOpen(true);
  };

  const closeVideoPopup = () => {
    setIsVideoOpen(false);
    setCurrentVideoUrl("");
  };
  return (
    <section className="feature-sec space">
      <div className="carousel-container">
        <div className="sec-title">
          <span
            className="sub-title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={500}
          >
            {featuresData.subtitle}
          </span>
          <h2
            className="title"
            data-aos="fade-up"
            data-aos-duration={900}
            data-aos-delay={500}
          >
            {featuresData.title}
          </h2>
          <p data-aos="fade-up" data-aos-duration={1000} data-aos-delay={600}>
            {featuresData.description}
          </p>
        </div>
        <div className="row">
          {featuresData.features.map((feature, index) => (
            <div
              key={feature.id}
              className={`col-lg-${feature.variant === "v2" ? "12" : "6"}`}
            >
              <div
                className={`feature-card ${feature.variant || ""}`}
                data-aos={
                  index % 2 === 0
                    ? feature.variant === "v2"
                      ? "fade-up"
                      : "fade-right"
                    : "fade-left"
                }
                data-aos-duration={900}
                data-aos-delay={500}
              >
                <div className="feature-content">
                  <span>{feature.number}</span>
                  <h4 className="title">{feature.title}</h4>
                  <p>{feature.description}</p>
                  {feature.features && (
                    <ul className="feature-list">
                      {feature.features.map((item, idx) => (
                        <li key={idx}>
                          <Image
                            src="/assets/images/icon/check.svg"
                            alt="Check icon"
                            width={16}
                            height={16}
                          />{" "}
                          {item}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
                <div className="feature-img">
                  {feature.videoLink ? (
                    <a
                      href="#"
                      className="video-box"
                      data-video={feature.videoLink}
                      onClick={(e) => {
                        e.preventDefault();
                        if (feature.videoLink) {
                          handleVideoClick(feature.videoLink);
                        }
                      }}
                    >
                      <Image
                        src={feature.images.light}
                        alt="Feature demo video thumbnail"
                        width={600}
                        height={400}
                        className="light"
                      />
                      <Image
                        src={feature.images.dark}
                        alt="Feature demo video thumbnail dark mode"
                        width={600}
                        height={400}
                        className="dark"
                      />
                    </a>
                  ) : (
                    <>
                      <Image
                        src={feature.images.light}
                        alt={feature.images.alt}
                        width={600}
                        height={400}
                        className="light"
                      />
                      <Image
                        src={feature.images.dark}
                        alt={`${feature.images.alt} dark mode`}
                        width={600}
                        height={400}
                        className="dark"
                      />
                    </>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <VideoPopup
        videoUrl={currentVideoUrl}
        isOpen={isVideoOpen}
        onClose={closeVideoPopup}
      />
    </section>
  );
}