"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { ServiceType } from "@/types";
import { ourServices } from "@/utils/data";
import "@/components/web-development-service/style.css";

interface ServiceDetailsProps {
    service: ServiceType;
}

const ServiceDetails: React.FC<ServiceDetailsProps> = ({ service }) => {
    const [activeIndex, setActiveIndex] = useState<number | null>(0);

    const toggleAccordion = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };

    useEffect(() => {
        const init = () => {
            if (typeof window !== "undefined" && (window as any).initMetatron && (window as any).jQuery) {
                (window as any).initMetatron();
            } else {
                setTimeout(init, 100);
            }
        };
        init();
    }, []);

    return (
        <section className="service-details section-space">
            <div className="container">
                <div className="row gutter-y-30">
                    <div className="col-md-12 col-lg-4">
                        <div className="service-sidebar">
                            <div className="service-sidebar__single">
                                <h3 className="service-sidebar__title">All Services</h3>
                                <ul className="list-unstyled service-sidebar__nav">
                                    {ourServices.slice(0, 6).map((item) => (
                                        <li key={item.id} className={item.slug === service.slug ? "active" : ""}>
                                            <Link href={`/services-digital-solutions/${item.slug}`}>
                                                {item.title}
                                                <i className="fa-solid fa-chevron-right"></i>
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
                            </div>

                            <div className="service-sidebar__single">
                                <div className="service-sidebar__contact">
                                    <div className="service-sidebar__contact-bg" style={{ backgroundImage: "url(/assets/imgs/resources/service-sidebar-contact-bg.jpg)" }}></div>
                                    <div className="service-sidebar__contact-icon">
                                        <i className="fa-solid fa-phone-volume"></i>
                                    </div>
                                    <h3 className="service-sidebar__contact-title">Free for This <br /> First Contact Now</h3>
                                    <p className="service-sidebar__contact-phone">
                                        <a href="tel:+11234751328">+11234 751 328</a>
                                    </p>
                                    <div className="service-sidebar__contact-btn">
                                        <Link href="/contact" className="theme-btn">
                                            CALL NOW
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12 col-lg-8">
                        <div className="service-details__content">
                            <div className="service-details__thumbnail">
                                <img src={service.bigImage} alt={service.title} />
                            </div>

                            {service.content && (
                                <div
                                    className="service-details__dynamic-content"
                                    dangerouslySetInnerHTML={{ __html: service.content }}
                                />
                            )}

                            {service.faq && service.faq.length > 0 && (
                                <div className="service-details__faq-wrapper mt-40">
                                    <div className="sec-title mb-40">
                                        <div className="sec-title__shape"></div>
                                        <h6 className="sec-title__tagline">Service FAQ</h6>
                                        <h3 className="sec-title__title" style={{ fontSize: '34px' }}>Frequently Asked Questions</h3>
                                    </div>
                                    <div className="faq-one__accordion pelocis-accrodion">
                                        {service.faq.map((item, index) => (
                                            <div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
                                                <div className="accrodion-title" onClick={() => toggleAccordion(index)}>
                                                    <div className="accrodion-title__shape"></div>
                                                    <div className="accrodion-title__icon">
                                                        <i className="fa fa-check"></i>
                                                    </div>
                                                    <h4 style={{ fontSize: '24px' }}>
                                                        {item.question}
                                                        <i className="icon-right-arrow-white"></i>
                                                    </h4>
                                                </div>
                                                <div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
                                                    <div className="inner">
                                                        <p style={{ fontSize: '18px', color: '#444', lineHeight: '1.8' }} dangerouslySetInnerHTML={{ __html: item.answer }} />
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>


                </div>
            </div>

        </section>
    );
};

export default ServiceDetails;
