MetatronLatestWebsite/src/components/web-development-service/FAQ.tsx

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

const leftFAQs = [
    {
        q: "How long does it take to build a website?",
        a: "Typically 2–6 weeks depending on complexity.",
    },
    {
        q: "Will my website be mobile-friendly?",
        a: "Yes, all our websites are fully responsive.",
    },
    {
        q: "Do you provide SEO services?",
        a: "Yes, we offer SEO optimization during development and advanced SEO packages.",
    },
    {
        q: "Can you integrate payment gateways?",
        a: "Yes, we integrate Razorpay, Stripe, PayPal and more.",
    },
    {
        q: " Do you offer support after launch?",
        a: "Yes, we provide maintenance and support packages.",
    },
];

const rightFAQs = [
    {
        q: "What platform do you use for website development?",
        a: "We work with WordPress, Shopify, custom HTML, React, and other platforms depending on your business needs.",
    },
    {
        q: "Can I update the website myself after launch?",
        a: "Yes. We build user-friendly websites and provide basic training so you can update content easily.",
    },
    {
        q: "Do you provide hosting and domain services?",
        a: "Yes, we can help you purchase domain, set up hosting, and manage everything technically.",
    },
    {
        q: "Will my website be secure?",
        a: "Absolutely. We implement SSL, security plugins, firewall protection, and regular updates to ensure your website is protected.",
    },
    {
        q: "Do you build websites for specific industries?",
        a: "Yes. We develop websites for healthcare, education, real estate, finance, e-commerce, startups, and many more industries.",
    },
];

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 = ({ faqData }: { faqData?: { question: string; answer: string }[] }) => {
    const [openId, setOpenId] = useState<string | null>("left-0");

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

    // If no faqData provided, use empty arrays
    // const faqs = faqData || [];
    // const half = Math.ceil(faqs.length / 2);
    // const leftFAQs = faqs.slice(0, half);
    // const rightFAQs = faqs.slice(half);

    // if (faqs.length === 0) return null;

    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="/favicon.ico" alt="" /></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>
                    </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: 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/9.webp"
                                    alt="FAQ Section"
                                />
                            </div>
                        </div>
                    </div>

                    {/* ===== RIGHT: FAQs ===== */}
                    <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;