"use client";
import { useState } from "react";
import Link from "next/link";
import GsapReveal from "@/components/common/GsapReveal";

const leftFAQs = [
    {
        q: "How much does app development cost?",
        a: "The cost depends on features, platform, and complexity. Contact us for a customized quote.",
    },
    {
        q: "How long does it take to build an app?",
        a: "Typically 6–12 weeks depending on project requirements.",
    },
    {
        q: "Do you publish the app on App Store & Play Store?",
        a: "Yes, we assist with full deployment and approval process.",
    },
    {
        q: "Will my app be scalable?",
        a: "Absolutely. We build apps with scalable architecture to support future growth.",
    },
    {
        q: "Do you provide post-launch support?",
        a: "Yes, we offer ongoing maintenance and support packages.",
    },
];

const rightFAQs = [
    {
        q: "Can you help refine my app idea?",
        a: "Yes. If you have an idea but are unsure about features or structure, our team will help you validate, refine, and plan your app strategically before development begins.",
    },
    {
        q: "Will I own the complete source code?",
        a: "Absolutely. Once the project is completed and payment terms are fulfilled, you receive full ownership of the source code and intellectual property.",
    },
    {
        q: "How do you ensure app security?",
        a: "We implement secure coding standards, data encryption, authentication protocols, and regular testing to ensure your app is protected against vulnerabilities.",
    },
    {
        q: "Can you integrate third-party services or APIs?",
        a: "Yes. We can integrate payment gateways, CRM systems, chat systems, analytics tools, maps, and other third-party APIs based on your business requirements.",
    },
    {
        q: "What happens if I need new features after launch?",
        a: "No problem. We offer ongoing maintenance and upgrade services, allowing you to add new features and scale your app as your business grows.",
    },
];

const AccordionItem = ({
    faq,
    isOpen,
    onToggle,
    align,
}: {
    faq: { q: string; a: string };
    isOpen: boolean;
    onToggle: () => void;
    align: "left" | "right";
}) => (
    <div
        className={`faqv2-item${isOpen ? " faqv2-item-open" : ""} faqv2-item-${align}`}
    >
        <button className="faqv2-question" onClick={onToggle} aria-expanded={isOpen}>
            <span className="faqv2-q-text">{faq.q}</span>
            <span className={`faqv2-icon${isOpen ? " faqv2-icon-open" : ""}`}>
                <i className="fa-solid fa-chevron-down"></i>
            </span>
        </button>
        <div
            className="faqv2-answer"
            style={{
                display: isOpen ? "block" : "none",
                padding: "0 20px 18px 20px",
            }}
        >
            <p>{faq.a}</p>
        </div>
    </div>
);

const FAQ = () => {
    const [openId, setOpenId] = useState<string | null>("left-0");

    const toggleFaq = (id: string) => {
        setOpenId(prev => prev === id ? null : id);
    };

    return (
        <section className="ztc-faq-section sp1" id="faq">
            {/* Section Header */}
            <div className="container">
                <div className="row">
                    <div className="col-lg-7 m-auto text-center">
                        <div className="space-margin60">
                            <GsapReveal y={20}>
                                <h5 className="faqv2-subtitle">
                                    <span><img src="/assets/img/fav-icon.webp" alt="" style={{ width: '20px', height: '20px', objectFit: 'contain' }} /></span>
                                    FAQ
                                </h5>
                            </GsapReveal>
                            <div className="space20"></div>
                            <GsapReveal y={20} delay={0.2}>
                                <h2 className="text-anime-style-3 faqv2-title">Frequently Asked Questions</h2>
                            </GsapReveal>
                            {/* <div className="space16"></div>
                            <GsapReveal y={20} delay={0.3}>
                                <p className="faqv2-desc" style={{ color: '#343a40' }}>
                                    Everything you need to know about our IT services. Can&apos;t find the answer you&apos;re looking for? <Link href="/pages/contact" style={{ color: '#3779b9', fontWeight: 600 }}>Talk to our team.</Link>
                                </p>
                            </GsapReveal> */}
                        </div>
                    </div>
                </div>
            </div>

            {/* 3-Column Layout: Left FAQs | Center Image | Right FAQs */}
            <div className="container faqv2-grid" style={{ paddingTop: '20px' }}>
                <div className="row align-items-start" style={{ rowGap: '32px' }}>

                    {/* ===== LEFT: 5 FAQs ===== */}
                    <div className="col-lg-4 col-md-12 faqv2-col-left">
                        <div className="faqv2-accordion">
                            {leftFAQs.map((faq, idx) => (
                                <AccordionItem
                                    key={idx}
                                    faq={faq}
                                    isOpen={openId === `left-${idx}`}
                                    onToggle={() => toggleFaq(`left-${idx}`)}
                                    align="left"
                                />
                            ))}
                        </div>
                    </div>

                    <div className="col-lg-4 col-md-12 faqv2-col-center">
                        <div className="faqv2-center-wrap">
                            <div className="faqv2-main-img">
                                <img
                                    src="/assets/img/home/section9/faq.webp"
                                    alt="FAQ Section"
                                />
                            </div>
                        </div>
                    </div>

                    <div className="col-lg-4 col-md-12 faqv2-col-right">
                        <div className="faqv2-accordion">
                            {rightFAQs.map((faq, idx) => (
                                <AccordionItem
                                    key={idx}
                                    faq={faq}
                                    isOpen={openId === `right-${idx}`}
                                    onToggle={() => toggleFaq(`right-${idx}`)}
                                    align="right"
                                />
                            ))}
                        </div>
                    </div>

                </div>
            </div>
        </section>
    );
};

export default FAQ;
