"use client";

import React, { useState, useEffect, useRef } from "react";
import Image from "next/image";

const FaqVideoSection = () => {
    const [activeAccordion, setActiveAccordion] = useState<number | null>(1);
    const sectionRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        const elements = entry.target.querySelectorAll(".wow");
                        elements.forEach((el) => {
                            const htmlEl = el as HTMLElement;
                            const delay = htmlEl.dataset.wowDelay || "0ms";
                            setTimeout(() => {
                                htmlEl.classList.add("animated");

                                if (htmlEl.classList.contains("fadeInLeft")) {
                                    htmlEl.classList.add("fadeInLeft");
                                } else if (htmlEl.classList.contains("fadeInRight")) {
                                    htmlEl.classList.add("fadeInRight");
                                } else {
                                    htmlEl.classList.add("fadeInUp");
                                }

                                htmlEl.style.visibility = "visible";
                            }, parseInt(delay));
                        });
                        observer.unobserve(entry.target);
                    }
                });
            },
            { threshold: 0.1 }
        );

        if (sectionRef.current) {
            observer.observe(sectionRef.current);
        }

        return () => observer.disconnect();
    }, []);

    const toggleAccordion = (index: number) => {
        setActiveAccordion(activeAccordion === index ? null : index);
    };

    const faqItems = [
        {
            id: 0,
            title: "Maecenas facilisis erat id odio",
            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
        },
        {
            id: 1,
            title: "Digital data facilisis erat id solution business",
            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
        },
        {
            id: 2,
            title: "We adapt our delivery to the way your solution",
            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
        },
        {
            id: 3,
            title: "Best service facilisis erat id solution business",
            content: "Solution the connection, we create business marketing platforms business Solution as slightly believable now.",
        },
    ];

    return (
        <>
            <section ref={sectionRef} className="faq-two">
                <div
                    className="faq-two__bg jarallax"
                    style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/faq-bg-2.jpg)" }}
                ></div>
                <div className="container">
                    <div className="row">
                        <div className="col-lg-6 wow fadeInLeft" data-wow-delay="0ms" style={{ visibility: "hidden" }}>
                            <div className="faq-two__content">
                                <h2 className="faq-two__content__title">
                                    Frequently Asked Questions For It&apos;s a Section on Documents
                                </h2>
                                <p className="faq-two__content__text">
                                    Business tailored design, management &amp; support services Business
                                    business agency elit, sed do eiusmod tempor &nbsp;majority have
                                    in some we form, by injected humour solution.
                                </p>
                                <ul className="faq-two__content__list">
                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
                                        You solution business will be fully satisfied you are under.
                                    </li>
                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
                                        You solution business will be fully satisfied you are under.
                                    </li>
                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
                                        You solution business will be fully satisfied you are under.
                                    </li>
                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700", marginBottom: "20px" }}>
                                        <div style={{ width: "24px", height: "24px", borderRadius: "50%", backgroundColor: "#3779b9", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: "14px" }}>✓</div>
                                        You solution business will be fully satisfied you are under.
                                    </li>
                                    <li style={{ display: "flex", alignItems: "center", gap: "10px", color: "#fff", fontWeight: "700" }}>
                                        <div style={{ width: "40px", height: "40px", borderRadius: "50%", border: "2px solid #fb8459", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", color: "#fb8459" }}>?</div>
                                        <span>Where Common Question are Answere</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className="col-lg-6 wow fadeInRight" data-wow-delay="200ms" style={{ visibility: "hidden" }}>
                            <div className="faq-two__accordion tolak-accrodion">
                                {faqItems.map((item) => (
                                    <div
                                        key={item.id}
                                        className={`accrodion ${activeAccordion === item.id ? "active" : ""}`}
                                    >
                                        <div
                                            className="accrodion-title"
                                            onClick={() => toggleAccordion(item.id)}
                                        >
                                            <h4>
                                                <i className="fa fa-check-circle" style={{ color: activeAccordion === item.id ? "#fff" : "#fb8459" }}></i>
                                                {item.title}
                                                <span className="accrodion-title__icon"></span>
                                            </h4>
                                        </div>
                                        <div className="accrodion-content">
                                            <div className="inner">
                                                <div className="inner__image">
                                                    <img
                                                        src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
                                                        alt="Logo"
                                                        width={50}
                                                        height={50}
                                                    />
                                                </div>
                                                <p>{item.content}</p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section className="video-three wow fadeInUp" data-wow-delay="400ms">
                <div className="container">
                    <div
                        className="video-three__inner"
                        style={{ backgroundImage: "url(https://tolaklaravel.bracketweb.com/assets/images/backgrounds/video-bg-3.jpg)" }}
                    >
                        <div className="video-three__btn">
                            <div className="video-three__btn__logo-outer"></div>
                            <div className="video-three__btn__logo-inner">
                                <img
                                    src="https://tolaklaravel.bracketweb.com/assets/images/resources/accordian-logo.png"
                                    alt="Rotating Logo"
                                    width={140}
                                    height={140}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};

export default FaqVideoSection;
