"use client";
import Accordion from 'react-bootstrap/Accordion';
import React, { useState } from "react";
import Link from "next/link";
import ConsenHead from '@/src/ConsenHead';
import SubCard from '../AboveFooter';
import SubCardNew from '../Website-development-service/web-sub-card';

const Faq = () => {
    // First 5 FAQs
    const faqDataPart1 = [
        { id: 1, title: "How long does it take to build a website?", content: "The timeline depends on your requirements. A simple business website can take 2–3 weeks, while an advanced e-commerce or custom site may take 6–8 weeks.", animationDelay: ".5s" },
        { id: 2, title: "Do you make mobile-friendly designs?", content: "Yes! All our websites are fully responsive and optimized for mobile, tablet, and desktop devices.", animationDelay: ".5s" },
        { id: 3, title: "Can you redesign my existing site? ", content: "Absolutely. We can revamp your current website with a modern look, improved performance, and better user experience.", animationDelay: ".5s" },
        { id: 4, title: "What’s the cost of a new website? ", content: "It varies based on features, design, and functionality. We provide customized packages to fit your budget.", animationDelay: ".5s" },
        { id: 5, title: " Do you provide hosting & domain support?", content: "Yes, we help you choose the right domain and hosting plan, and we can set it up for you.", animationDelay: ".5s" },
    ];

    // Next 5 FAQs
    const faqDataPart2 = [
        { id: 6, title: "Will I get a CMS to manage content?", content: "Of course! We build websites with CMS (like WordPress, Shopify, or custom CMS) so you can easily update text, images, and products.", animationDelay: ".5s" },
        { id: 7, title: "Can you build e-commerce stores?", content: "Yes, we specialize in building secure and user-friendly e-commerce websites with payment gateways and product management.", animationDelay: ".5s" },
        { id: 8, title: "Do you handle SEO & digital marketing too?", content: "Yes, we provide on-page SEO, performance optimization, and digital marketing services to help you grow online.", animationDelay: ".5s" },
        { id: 9, title: "Do you offer ongoing support?", content: "Yes, we provide maintenance and support packages to keep your website running smoothly.", animationDelay: ".5s" },
        { id: 10, title: "How do I get started?", content: "Just fill out our inquiry form or book a free consultation. Our team will guide you through the next steps.", animationDelay: ".5s" },
    ];

    const [activeLeft, setActiveLeft] = useState(faqDataPart1[0].id);
    const [activeRight, setActiveRight] = useState(faqDataPart2[0].id);

    return (
        <>
            <ConsenHead
                title="Web & App Development, SEO, Marketing FAQs | Metatroncube"
                description="Explore FAQs about Web & App Development, SEO, digital marketing, and graphic design. Uncover expert insights and solutions with Metatroncube."
            />

            <div className="faq pb-90">
                <div className="container">
                    <div className="text-center mb-5">
                        <h2>
                            Frequently Asked <span>Questions</span>
                        </h2>
                    </div>

                    <div className="row">
                        {/* Left Column - First 5 FAQs */}
                        <div className="col-md-6">
                            <Accordion defaultActiveKey={faqDataPart1[0].id.toString()} as="ul" className="accordion">
                                {faqDataPart1.map((faq) => (
                                    <li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
                                        <Accordion.Toggle
                                            as="a"
                                            eventKey={faq.id.toString()}
                                            onClick={() => setActiveLeft(faq.id === activeLeft ? null : faq.id)}
                                            className={faq.id === activeLeft ? "active" : ""}
                                        >
                                            <span>{faq.title}</span>
                                        </Accordion.Toggle>
                                        <Accordion.Collapse eventKey={faq.id.toString()}>
                                            <p>{faq.content}</p>
                                        </Accordion.Collapse>
                                    </li>
                                ))}
                            </Accordion>
                        </div>

                        {/* Right Column - Next 5 FAQs */}
                        <div className="col-md-6">
                            <Accordion defaultActiveKey={faqDataPart2[0].id.toString()} as="ul" className="accordion">
                                {faqDataPart2.map((faq) => (
                                    <li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
                                        <Accordion.Toggle
                                            as="a"
                                            eventKey={faq.id.toString()}
                                            onClick={() => setActiveRight(faq.id === activeRight ? null : faq.id)}
                                            className={faq.id === activeRight ? "active" : ""}
                                        >
                                            <span>{faq.title}</span>
                                        </Accordion.Toggle>
                                        <Accordion.Collapse eventKey={faq.id.toString()}>
                                            <p>{faq.content}</p>
                                        </Accordion.Collapse>
                                    </li>
                                ))}
                            </Accordion>
                        </div>
                    </div>
                </div>
            </div>
            <div className="sub">
                <div className="container">
                    <SubCardNew />
                </div>
            </div>
        </>
    );
};

export default Faq;