import Accordion from 'react-bootstrap/Accordion';
import React, { useState } from "react";
import Layout from "@/src/layout/Layout";
import Link from "next/link";

import Ffaq from "@/src/components/services-details-banner/ffaq.js";
import SubCard from '@/src/components/AboveFooter';
import ConsenHead from '@/src/ConsenHead';



const Faq = () => {
    // First 4 FAQs from original faqsData
    const faqsDataPart1 = [
        { id: 1, title: "What is digital transformation, and why is it important for traditional businesses?", content: "Digital transformation involves integrating digital technology into all areas of a business, fundamentally changing how you operate and deliver value to customers. It's crucial for staying competitive and relevant in the ever-evolving digital landscape.", animationDelay: ".5s" },
        { id: 2, title: "How can we transition to digital without losing the essence of our brand?", content: "We focus on understanding your brand’s core values and message to ensure that your digital presence reflects your brand's unique identity. This involves creating a consistent brand voice and imagery across all digital platforms.", animationDelay: ".5s" },
        { id: 3, title: "What are the benefits of effective online marketing for restaurants?", content: "Online marketing can significantly increase your restaurant's visibility, attract new customers, and enhance customer engagement through social media, online reviews, and a strong online presence.", animationDelay: ".5s" },
        { id: 4, title: "How can Metatroncube help in managing negative online reviews?", content: "We provide strategies for proactive review management, encouraging positive reviews, and professionally responding to negative feedback, turning challenges into opportunities to showcase excellent customer service.", animationDelay: ".5s" },
    ];

    // Remaining 5 FAQs from original faqsData
    const faqsDataPart2 = [
        { id: 5, title: "Can digital lead generation truly benefit real estate agents?", content: "Absolutely. Digital lead generation, through targeted online ads and local SEO, can significantly increase your visibility to potential clients, helping you stand out in the competitive real estate market.", animationDelay: ".5s" },
        { id: 6, title: "What strategies do you recommend for real estate agents to improve their online presence?", content: "We recommend a combination of an updated, user-friendly website, active social media engagement, and targeted digital marketing campaigns to enhance your online presence and attract potential clients.", animationDelay: ".5s" },
        { id: 7, title: "How can mortgage agents build a trustworthy online brand?", content: "Building a trustworthy online brand involves creating consistent, valuable content, showcasing client testimonials, and engaging with your audience to establish credibility and authority in your field.", animationDelay: ".5s" },
        { id: 8, title: "How can small businesses manage social media effectively?", content: "Small businesses can manage social media effectively by maintaining a consistent posting schedule, creating engaging and relevant content, and actively interacting with their audience to build a loyal community.", animationDelay: ".5s" },
        { id: 9, title: "What are the key elements of a successful e-commerce platform for physical stores?", content: "A successful e-commerce platform should offer an easy-to-navigate layout, mobile optimization, secure payment options, and a seamless shopping experience that mirrors the in-store experience.", animationDelay: ".5s" },
    ];

    // First 5 FAQs from original faqData
    const faqDataPart1 = [
        { id: 1, title: "How can Metatroncube assist in setting up an e-commerce site for my store?", content: " We can help by designing a user-friendly e-commerce website, ensuring mobile optimization, and integrating secure payment gateways to provide a smooth online shopping experience for your customers.", animationDelay: ".5s" },
        { id: 2, title: "What's the importance of content marketing for service-based businesses?", content: "Content marketing helps establish your business as an industry authority, increases engagement, and drives lead generation. It's a vital tool for building long-term relationships with your audience.", animationDelay: ".5s" },
        { id: 3, title: "How can I ensure my content marketing strategy is effective?", content: "Your strategy should focus on creating valuable, relevant content that addresses your audience's needs and interests. Storytelling and regular engagement are key to connecting with potential clients.", animationDelay: ".5s" },
        { id: 4, title: "How does Metatroncube address the challenges faced by businesses in digital transformation?", content: "We offer tailored solutions that simplify the digital transition, provide comprehensive support throughout the process, and create strategies that align with your business objectives.", animationDelay: ".5s" },
        { id: 5, title: "Can digital marketing strategies be cost-effective for small businesses?", content: "Yes, digital marketing offers cost-effective solutions with measurable results. We focus on strategies that provide the best ROI, tailored to fit the budget and goals of small businesses.", animationDelay: ".5s" },
    ];

    // Remaining 5 FAQs from original faqData
    const faqDataPart2 = [
        { id: 6, title: "How can we measure the success of our digital marketing efforts?", content: "Success can be measured using various metrics such as website traffic, engagement rates, conversion rates, and ROI. We also provide detailed analytics to track and optimize your digital marketing campaigns.", animationDelay: ".5s" },
        { id: 7, title: "What kind of support does Metatroncube offer for maintaining an online presence?", content: "We offer ongoing support in website maintenance, content creation, social media management, and digital marketing strategies to ensure your online presence remains strong and effective.", animationDelay: ".5s" },
        { id: 8, title: "How often should we update our digital marketing strategies?", content: "The digital landscape is constantly evolving, so it's important to regularly review and update your strategies. We recommend a quarterly review to stay ahead of trends and adjust tactics as needed.", animationDelay: ".5s" },
        { id: 9, title: "What makes Metatroncube unique in digital marketing services?", content: "Our approach is client-centric, focusing on customized solutions that align with your specific business goals. Our team stays updated with the latest trends to ensure innovative and effective strategies.", animationDelay: ".5s" },
        { id: 10, title: "How can we start working with Metatroncube for our digital needs?", content: "Getting started is easy. Simply contact us for a consultation, and we'll discuss your business needs, goals, and how we can assist in achieving your digital transformation objectives.", animationDelay: ".5s" },
    ];


    const [active, setActive] = useState(faqsDataPart1[0].id);
    const [data, setData] = useState(faqDataPart1[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." />
            <Layout header={3} footer={3}>
                <Ffaq pageName={" FAQS"} />
                <div className="process pt-90 pb-90">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-lg-6 col-md-12 mb-4 mb-lg-0">
                                <div className="consen-section-title pr-50">
                                    <h5 className="mt-0">Digital Mastery Unlocked</h5>
                                    <h2>
                                        Metatroncube FAQs:
                                        <span className='d-block'> Web-Apps, SEO, & Digital Marketing</span>
                                    </h2>
                                    <p>
                                        Welcome to Metatroncube’s FAQ page, where we delve into the intricacies of Web-App Development, the nuances of SEO, and the dynamics of Digital Marketing. Our goal is to address your queries and provide insightful answers that empower your digital journey, whether you’re navigating website design, mobile app development, or looking for effective digital marketing strategies.
                                    </p>
                                </div>
                            </div>
                            <div className="col-lg-6 col-md-12 text-center">
                                <div className="process-text">
                                    <img
                                        src="/assets/images/faq/1 .webp"
                                        alt="Metatroncube FAQs:
                                    web-apps, SEO, & digital marketing"
                                        className="img-fluid"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="faq pb-90 pt-90 color-bg">
                    <div className="container">
                        <div className="row">
                            {/* Content First on Mobile, Second on Desktop */}
                            <div className="col-md-6 order-1 order-md-2">
                                <div id="tab1" className="tab_content">
                                    <Accordion defaultActiveKey={faqsDataPart1[0].id.toString()} as="ul" className="accordion">
                                        {faqsDataPart1.map((faq) => (
                                            <li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
                                                <Accordion.Toggle
                                                    as="a"
                                                    eventKey={faq.id.toString()}
                                                    onClick={() => setActive(faq.id === active ? null : faq.id)}
                                                    className={faq.id === active ? "active" : ""}
                                                >
                                                    <span>{faq.title}</span>
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={faq.id.toString()}>
                                                    <p>{faq.content}</p>
                                                </Accordion.Collapse>
                                            </li>
                                        ))}
                                    </Accordion>
                                </div>
                            </div>

                            {/* Image Second on Mobile, First on Desktop */}
                            <div className="col-md-6 order-2 order-md-1 d-flex align-items-center justify-content-center">
                                <img
                                    src="/assets/images/faq/3.webp"
                                    alt="Metatroncube FAQs:
                                    web-apps, SEO, & digital marketing"
                                    className="img-fluid"
                                />
                            </div>
                        </div>
                    </div>
                </div>


                <div className="faq pb-90 pt-90 color-bg">
                    <div className="container">
                        <div className="row">
                            {/* Left Column - FAQ */}
                            <div className="col-md-6">
                                <div id="tab2" className="tab_content">
                                    <Accordion defaultActiveKey={faqsDataPart2[0].id.toString()} as="ul" className="accordion">
                                        {faqsDataPart2.map((faq) => (
                                            <li key={faq.id} className="wow fadeInUp" data-wow-delay={faq.animationDelay}>
                                                <Accordion.Toggle
                                                    as="a"
                                                    eventKey={faq.id.toString()}
                                                    onClick={() => setActive(faq.id === active ? null : faq.id)}
                                                    className={faq.id === active ? "active" : ""}
                                                >
                                                    <span>{faq.title}</span>
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={faq.id.toString()}>
                                                    <p>{faq.content}</p>
                                                </Accordion.Collapse>
                                            </li>
                                        ))}
                                    </Accordion>
                                </div>
                            </div>
                            <div className="col-md-6 d-flex align-items-center justify-content-center">
                                <img
                                    src="/assets/images/faq/5.webp"
                                    alt="Metatroncube FAQs:
                                    web-apps, SEO, & digital marketing"
                                    className="img-fluid"
                                />
                            </div>
                        </div>
                    </div>
                </div>


                <div className="faq pb-90 pt-90">
                    <div className="container">
                        <div className="row">
                            <div className="col-md-6 order-1 order-md-2">
                                <div id="tab3" className="tab_content">
                                    <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={() => setData(faq.id === data ? null : faq.id)}
                                                    className={faq.id === data ? "active" : ""}
                                                >
                                                    <span>{faq.title}</span>
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={faq.id.toString()}>
                                                    <p>{faq.content}</p>
                                                </Accordion.Collapse>
                                            </li>
                                        ))}
                                    </Accordion>
                                </div>
                            </div>

                            <div className="col-md-6 order-2 order-md-1 d-flex align-items-center justify-content-center">
                                <img
                                    src="/assets/images/faq/6.webp"
                                    alt="Metatroncube FAQs:
                                    web-apps, SEO, & digital marketing"
                                    className="img-fluid"
                                />
                            </div>
                        </div>
                    </div>
                </div>


                <div className="faq pb-90 pt-90">
                    <div className="container">
                        <div className="row">
                            {/* Left Column - FAQ */}
                            <div className="col-md-6">
                                <div id="tab4" className="tab_content">
                                    <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={() => setData(faq.id === data ? null : faq.id)}
                                                    className={faq.id === data ? "active" : ""}
                                                >
                                                    <span>{faq.title}</span>
                                                </Accordion.Toggle>
                                                <Accordion.Collapse eventKey={faq.id.toString()}>
                                                    <p>{faq.content}</p>
                                                </Accordion.Collapse>
                                            </li>
                                        ))}
                                    </Accordion>
                                </div>
                            </div>
                            <div className="col-md-6 d-flex align-items-center justify-content-center">
                                <img
                                    src="/assets/images/faq/4.webp"
                                    alt="Metatroncube FAQs:
                                    web-apps, SEO, & digital marketing"
                                    className="img-fluid"
                                />
                            </div>
                        </div>
                    </div>
                </div>



                <div className="contact justify-content-center color-bg pb-90 pt-90">
                    <div className="container">
                        <div className="row align-items-center">
                            <div className="col-sm-12 col-md-6 mb-4 mb-md-0">
                                <img src="/assets/images/faq/2.webp" className="img-fluid" alt="Get in touch with metatroncube" />
                            </div>
                            <div className="col-sm-12 col-md-6 pl-50">
                                <div className="contact_title pb-4 text-center">
                                    <h6>Let's Connect</h6>
                                    <h3 className="meta">Get In Touch With Metatroncube</h3>
                                    <h6>Your Questions and Ideas Matter to Us</h6>
                                </div>
                                <form onSubmit={(e) => e.preventDefault()} method="POST" id="dreamit-form">
                                    <div className="row">
                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input type="text" name="name" placeholder="Full Name" className="form-control" />
                                            </div>
                                        </div>
                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input type="email" name="email" placeholder="Email Address" className="form-control" />
                                            </div>
                                        </div>
                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input type="text" name="phone" placeholder="Phone Number" className="form-control" />
                                            </div>
                                        </div>
                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input type="text" name="web" placeholder="Subject" className="form-control" />
                                            </div>
                                        </div>
                                        <div className="col-lg-12">
                                            <div className="form_box mb-3">
                                                <textarea
                                                    name="message"
                                                    id="message"
                                                    cols={30}
                                                    rows={5}
                                                    placeholder="Write Message"
                                                    className="form-control"
                                                />
                                            </div>
                                            <div className="quote_button text-center">
                                                <button className="btn btn-primary" type="submit">
                                                    Send A Message
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                                <div id="status" />
                            </div>
                        </div>


                        {/* <div className="color-bg pb-90 pt-90">
                        <div className="container">
                            <div className="row sub-bgmn align-items-center change-bg">
                                <div className="col-lg-4 col-md-6 p-0">
                                    <div className="sub-left-thumb justify-content-center align-items-center">
                                        <img src="assets/images/faq/schedule-consultation.webp" className="myImage" alt="Newsletter" />
                                    </div>
                                </div>
                                <div className="col-lg-6 col-md-6">
                                    <div className="subscribe-right-bx">
                                        <h4 className="mb-3 text-center card-color ml-5 myText">
                                            Take the First Step Towards Digital Excellence. Book Your Personalized Consultation with Our Experts Today.
                                        </h4>

                                        <div className="col-lg-12">
                                            <div className="service-bottom-text pt-0 pb-0">
                                                <p>
                                                    {" "}


                                                    <Link legacyBehavior href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05">
                                                        <a className="mt-4 border">Schedule Consultation</a>
                                                    </Link>

                                                </p>



                                            </div>
                                        </div>
                                        <div id="status" />
                                    </div>
                                </div>
                                <div className="col-lg-2" />
                            </div>
                        </div>
                    </div> */}
                    </div>
                </div>

                <div className="call-do-action-section">
                    <div className="container">
                        <div className="row">
                            <div className="col-lg-12 pl-5 pr-5">
                                <div className="call-do-action-content text-center">
                                    <h2 className="text-white">
                                        Take the First Step Towards Digital Excellence.
                                        <span className="sub-title d-block">Book Your Personalized Consultation with Our Experts Today.</span>
                                    </h2>
                                    <div className="btn-common btn-cda mt-40">
                                        <Link legacyBehavior href="https://calendly.com/metatroncubeswsolutions/request-consultation?month=2025-05">
                                            <a>Schedule Consultation</a>
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="sub pt-5">
                        <div className="container">
                            <SubCard />
                        </div>
                    </div>
                </div>



            </Layout>
        </>
    );
};

export default Faq;