"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import Link from "next/link";
import FaqVideoModal from "./FaqVideoModal";

export default function FaqIntroPanel() {
  const [isVideoOpen, setIsVideoOpen] = useState(false);

  useEffect(() => {
    if (!isVideoOpen) {
      return;
    }

    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setIsVideoOpen(false);
      }
    };

    window.addEventListener("keydown", handleEscape);
    document.body.style.overflow = "hidden";

    return () => {
      window.removeEventListener("keydown", handleEscape);
      document.body.style.overflow = "";
    };
  }, [isVideoOpen]);

  return (
    <div
      className="faq-content"
      data-aos="fade-right"
      data-aos-duration="900"
      data-aos-delay="300"
    >
      <h1 className="title">Have Any Questions on your minds!</h1>
      <p>
        We know choosing the right software can raise a lot of questions.
        That&apos;s why we&apos;ve put together answers to the most common ones
      </p>
      <Link href="/contact" className="btn-style1 v2">
        Get A Quote
        <span>
          <Image
            src="/assets/images/icon/arrow.svg"
            alt="Arrow icon"
            width={16}
            height={16}
          />
        </span>
      </Link>
      <div className="video-box">
        <Image
          src="/assets/images/event/video-box.png"
          alt="FAQ help video thumbnail"
          width={490}
          height={300}
        />
        <button
          type="button"
          className="video-trigger"
          onClick={() => setIsVideoOpen(true)}
          aria-label="Play intro video"
        >
          ▶
        </button>
      </div>

      <FaqVideoModal
        isOpen={isVideoOpen}
        onClose={() => setIsVideoOpen(false)}
        videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
        title="FAQ intro video"
      />
    </div>
  );
}