"use client";

import React, { useEffect, useState } from "react";
import Link from "next/link";
import { ServiceType } from "@/types";
import { ourServices } from "@/utils/data";

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="sidebar__call sidebar__single wow fadeInUp animated" data-wow-duration="1500ms" style={{ backgroundImage: 'url("/assets/images/services/details/cta.webp")', visibility: 'visible', animationDuration: '1500ms', animationName: 'fadeInUp' }}>
                                <img src="/favicon.ico" alt="logo" className="sidebar__call__logo" />
                                <div className="sidebar__call__inner">
                                    <span className="sidebar__call__icon">
                                        <i className="fa-solid fa-phone"></i>
                                    </span>
                                    <div className="sidebar__call__content">
                                        <h4 className="sidebar__call__title">Call if Emergency!</h4>
                                        <a href="tel:+6476797651" className="sidebar__call__number">+1-647-679-7651</a>
                                    </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 }}
                                />
                            )}

                        </div>
                    </div>

                    <div className="col-md-12 col-lg-12 mt-20">
                        <div className="service-details__content">
                            {/* <div className="service-details__thumbnail">
                                <img src={service.bigImage} alt={service.title} />
                            </div> */}

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

                        </div>
                    </div>


                </div>

                {/* Two-column FAQ section */}
                {service.faq && service.faq.length > 0 && (
                    <div className="service-details__faq-wrapper mt-40">

                        <div className="row align-items-center">
                            <div className="col-lg-6">
                                <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 className="col-lg-6 mt-4 mt-lg-0">
                                {service.faqImage ? (
                                    <div className="service-details__faq-image ms-lg-4">
                                        <img
                                            src={service.faqImage}
                                            alt="FAQ Support"
                                            className="img-fluid rounded-4"
                                            style={{ width: '100%', objectFit: 'cover' }}
                                        />
                                    </div>
                                ) : (
                                    <div className="service-details__faq-image ms-lg-4">
                                        <img
                                            src="/assets/images/services/details/service-1.webp"
                                            alt="FAQ Placeholder"
                                            className="img-fluid rounded-4"
                                            style={{ width: '100%', objectFit: 'cover' }}
                                        />
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>
                )}
            </div>

        </section>
    );
};

export default ServiceDetails;