import Accordion from "react-bootstrap/Accordion";
import React, { useState, useEffect } 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";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";



const Faq = () => {
    // First 4 FAQs from original faqsData
    const faqsDataPart1 = [
        { id: 1, title: "How long does it take to build a custom website?", content: "The timeline depends on the complexity of the project. A simple business website may take 2–4 weeks, while an advanced eCommerce or enterprise-level site can take 8–12 weeks. At MetatronCube India, we follow an agile process that ensures faster delivery without compromising quality or scalability.", animationDelay: ".5s" },
        {
            id: 2,
            title: "What’s the difference between Native, Hybrid, and Cross-platform apps?",
            content: (
                <ul>
                    <li>
                        <strong>Native apps</strong> are built specifically for one platform (Android or iOS) for the best performance.
                    </li>
                    <li>
                        <strong>Hybrid apps</strong> use a single codebase to run across multiple platforms, reducing cost and time.
                    </li>
                    <li>
                        <strong>Cross-platform apps</strong> (like Flutter or React Native) deliver near-native performance with the advantage of working on both Android and iOS.
                    </li>
                    <li>
                        Our experts help you choose the right approach based on your budget, goals, and target audience.
                    </li>
                </ul>
            ),
            animationDelay: ".5s",
        },
        { id: 3, title: "Why is SEO a long-term investment?", content: " Unlike paid ads that stop when the budget ends, SEO builds lasting visibility. With consistent optimization, content creation, and link-building, your website ranks higher, attracts organic traffic, and continues to generate leads for months - even years. SEO is about building authority and trust, which pays off with compounding results over time.", animationDelay: ".5s" },
        { id: 4, title: "How does UI/UX design impact business growth?", content: " A well-designed interface goes beyond looks - it improves user experience, reduces bounce rates, and increases conversions. Whether it’s a website or a mobile app, intuitive UI/UX design ensures that customers stay longer, engage more, and are more likely to buy. At MetatronCube, our design-first approach ensures every digital product is both functional and delightful to use.", animationDelay: ".5s" },
    ];

    // Remaining 5 FAQs from original faqsData
    const faqsDataPart2 = [
        { id: 5, title: "Can digital marketing really boost sales for small businesses?", content: " Absolutely. With the right mix of SEO, PPC, social media marketing, and content strategies, small businesses can compete with larger players. Digital marketing allows precise audience targeting, so every rupee you spend reaches potential customers who are most likely to convert. We create data-driven campaigns tailored to your industry, ensuring measurable growth.", animationDelay: ".5s" },
        { id: 6, title: "Do you provide eCommerce website development services?", content: "Yes, MetatronCube India specializes in custom eCommerce website development that is scalable, secure, and designed to drive sales. From product catalogs and secure payment gateways to inventory management and order tracking, we create responsive online stores that enhance the shopping experience and improve customer retention.", animationDelay: ".5s" },
        { id: 7, title: "What technologies do you use for web development and mobile app development?", content: "Our team works with the latest tools to deliver high-performance digital solutions. For website development, we use ReactJS, AngularJS, Node.js, PHP, and Laravel. For mobile app development, we build Android apps (Java/Kotlin), iOS apps (Swift), and cross-platform apps with Flutter and React Native. This ensures every project is scalable, secure, and future-ready.", animationDelay: ".5s" },
        { id: 8, title: "How do you measure the success of a digital marketing campaign?", content: " At MetatronCube India, success is defined by measurable results. We track KPIs like organic traffic, keyword rankings, lead generation, conversion rates, ROI, and engagement metrics. Using advanced tools such as Google Analytics, Search Console, and ad performance dashboards, we ensure every digital marketing campaign delivers data-driven growth for your business.", animationDelay: ".5s" },
        { id: 9, title: "Do you offer SEO content writing services?", content: "Yes, our SEO services include content writing tailored for higher rankings and engagement. From keyword-rich blogs and articles to persuasive landing page copy and optimized product descriptions, we craft content that improves search visibility and converts visitors into customers. Our goal is to make your brand authoritative and discoverable online.", animationDelay: ".5s" },
    ];

    // First 5 FAQs from original faqData
    const faqDataPart1 = [
        { id: 1, title: "How do you ensure website security and app protection?", content: " Security is at the core of our web development and app development services. We implement SSL certificates, advanced data encryption, multi-factor authentication, secure payment gateways, and regular security audits. By following the latest cybersecurity standards, we protect your digital platforms from vulnerabilities while ensuring a safe and trustworthy experience for your users. ", animationDelay: ".5s" },
        { id: 2, title: "Why is UI/UX design important for websites and mobile apps?", content: "UI/UX design plays a vital role in how users interact with your digital platforms. A well-designed interface improves user engagement, reduces bounce rates, and boosts conversions. At MetatronCube India, our UI/UX design services focus on creating intuitive, visually appealing, and user-friendly experiences that align with your brand and drive business growth.", animationDelay: ".5s" },
        { id: 3, title: "What are the advantages of cross-platform mobile app development?", content: " Cross-platform development allows businesses to launch apps for both Android and iOS simultaneously using a single codebase. This reduces development time and cost while maintaining high performance. At MetatronCube India, we use Flutter and React Native to build scalable, secure, and responsive cross-platform mobile apps that deliver a seamless user experience across devices.", animationDelay: ".5s" },
        { id: 4, title: "How can PPC advertising help my business grow faster?", content: " Pay-Per-Click (PPC) advertising provides instant visibility on search engines and social platforms. Unlike organic SEO, PPC campaigns generate immediate traffic, leads, and conversions. Our digital marketing services include highly targeted Google Ads and social media ads designed to maximize ROI by reaching the right audience at the right time.", animationDelay: ".5s" },
        { id: 5, title: "What are the benefits of local SEO services for small businesses?", content: "Local SEO ensures your business shows up when nearby customers search for products or services. By optimizing your Google Business Profile, local keywords, and map listings, we help you attract foot traffic, phone calls, and local leads. Our local SEO services are ideal for restaurants, clinics, retail shops, and service providers looking to dominate their neighborhood market.", animationDelay: ".5s" },
    ];

    // Remaining 5 FAQs from original faqData
    const faqDataPart2 = [
        { id: 6, title: "Do you provide website maintenance and support services?", content: "Yes, we offer ongoing website maintenance and technical support to keep your site secure, updated, and optimized. Our services include bug fixes, performance monitoring, plugin updates, content updates, and security enhancements. With MetatronCube India as your partner, you can focus on growing your business while we ensure your website runs smoothly 24/7.", animationDelay: ".5s" },
        { id: 7, title: "How does custom website development differ from using templates?", content: "Template-based websites are quick but limited in scalability and features. Custom website development, on the other hand, is tailored to your business goals, ensuring unique design, optimized performance, and advanced functionality. At MetatronCube India, we build custom, responsive, and SEO-friendly websites that grow with your business.", animationDelay: ".5s" },
        { id: 8, title: "Do you also develop enterprise mobile applications?", content: "Yes, we provide enterprise mobile app development services designed for large-scale businesses that need secure, high-performance apps with advanced features. From employee management systems to customer portals, our apps are built for scalability, data security, and seamless integration with your existing infrastructure.", animationDelay: ".5s" },
        { id: 9, title: "How does content marketing complement SEO?", content: "SEO identifies what your audience is searching for, and content marketing provides valuable answers. Together, they boost rankings and engagement. Our SEO content writing services focus on keyword-rich blogs, landing pages, and product descriptions that not only rank but also convert visitors into paying customers.", animationDelay: ".5s" },
        { id: 10, title: "Can social media marketing improve brand awareness and sales?", content: " Absolutely. Social media is a powerful tool to connect with your audience, build brand authority, and drive conversions. At MetatronCube India, our social media marketing services include content creation, paid campaigns, and community management to help your brand stand out and generate measurable results.", animationDelay: ".5s" },
        { id: 11, title: "What industries do you provide digital solutions for?", content: "We work with a wide range of industries, including eCommerce, startups, healthcare, education, restaurants, retail, finance, and IT services. Our expertise in web development, mobile app development, SEO, and digital marketing allows us to create industry-specific solutions that address unique challenges and deliver business growth.", animationDelay: ".5s" },
    ];


    const [active, setActive] = useState(faqsDataPart1[0].id);
    const [data, setData] = useState(faqDataPart1[0].id);

    // ------------------ CONTACT FORM LOGIC ------------------
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        phone: "",
        service: "",
        message: "",
    });
    const [formErrors, setFormErrors] = useState({});
    const [captchaToken, setCaptchaToken] = useState(null);
    const [alert, setAlert] = useState({ show: false, type: "", message: "" });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleCaptchaChange = (token) => {
        setCaptchaToken(token);
    };

    const handleSubmit = async (e) => {
        e.preventDefault();

        const errors = {};
        if (!formData.name.trim()) errors.name = "Name is required.";
        if (!formData.email.trim()) errors.email = "Email is required.";
        if (!formData.phone.trim()) errors.phone = "Phone is required.";
        if (!formData.service.trim()) errors.service = "Please select a service.";
        if (!formData.message.trim()) errors.message = "Message is required.";
        if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";
        setFormErrors(errors);

        if (Object.keys(errors).length > 0) return;

        const emailData = {
            name: formData.name,
            email: formData.email,
            phone: formData.phone,
            subject: formData.web || "FAQ Contact Form",
            message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
            to: "info@metatroncubesolutions.com",
            senderName: "Metatroncube FAQ Page",
            recaptchaToken: captchaToken,
        };

        try {
            const res = await axios.post(
                "https://mailserver.metatronnest.com/send",
                emailData,
                { headers: { "Content-Type": "application/json" } }
            );

            setAlert({
                show: true,
                type: "success",
                message: res?.data?.message || "Message sent successfully!",
            });

            setFormData({
                name: "",
                email: "",
                phone: "",
                service: "",
                message: "",
            });
            setCaptchaToken(null);
            setFormErrors({});
        } catch (error) {
            setAlert({
                show: true,
                type: "danger",
                message: "Failed to send message. Please try again later.",
            });
        }
    };

    useEffect(() => {
        if (alert.show) {
            const timer = setTimeout(() => {
                setAlert((prev) => ({ ...prev, show: false }));
            }, 5000);
            return () => clearTimeout(timer);
        }
    }, [alert.show]);




    return (
        <>
            <ConsenHead title="Contact MetatronCube India - Best Web, App & SEO Services"
                description="Find answers to FAQs on website development, mobile apps, SEO, digital marketing, UI/UX, and design services from MetatronCube India." />
            <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>
                                        Frequently Asked Questions (FAQs):
                                        <span className='d-block'> Web Development, SEO & Digital Growth</span>
                                    </h2>
                                    <p>
                                        Welcome to MetatronCube’s Knowledge Hub, your go-to space for clarity on all things digital. Here, we unpack the complexities of web and app development, simplify the essentials of search engine optimization, and break down effective online marketing strategies.
                                    </p>
                                    <p>
                                        Our purpose is simple - to give you clear, practical answers that help you make confident decisions for your business. Whether you’re exploring website design, planning a mobile app, or searching for ways to strengthen your digital marketing efforts, you’ll find valuable insights that guide your journey toward success.
                                    </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 Collaborate</h6>
                                    <h3 className="meta">Reach Out to MetatronCube India</h3>
                                    <h6>We value your thoughts & queries.</h6>
                                </div>

                                {alert.show && (
                                    <div className={`alert alert-${alert.type}`}>{alert.message}</div>
                                )}

                                <form onSubmit={handleSubmit}>
                                    <div className="row">
                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input
                                                    type="text"
                                                    name="name"
                                                    placeholder="Full Name"
                                                    value={formData.name}
                                                    onChange={handleChange}
                                                    className="form-control"
                                                />
                                                {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                            </div>
                                        </div>

                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input
                                                    type="email"
                                                    name="email"
                                                    placeholder="Email Address"
                                                    value={formData.email}
                                                    onChange={handleChange}
                                                    className="form-control"
                                                />
                                                {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                            </div>
                                        </div>

                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <input
                                                    type="text"
                                                    name="phone"
                                                    placeholder="Phone Number"
                                                    value={formData.phone}
                                                    onChange={handleChange}
                                                    className="form-control"
                                                />
                                                {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                            </div>
                                        </div>

                                        <div className="col-lg-6">
                                            <div className="form_box mb-3">
                                                <select
                                                    name="service"
                                                    value={formData.service}
                                                    onChange={handleChange}
                                                    className="form-control"
                                                >
                                                    <option value="">Select Service</option>
                                                    <option value="Website Development">Website Development</option>
                                                    <option value="Mobile Application Development">Mobile Application Development</option>
                                                    <option value="Graphic Designing">Graphic Designing</option>
                                                    <option value="UI / UX Designing ">UI / UX Designing </option>
                                                    <option value="SEO & Content Writing">SEO & Content Writing</option>
                                                    <option value="Digital Marketing">Digital Marketing</option>
                                                </select>
                                                {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
                                            </div>
                                        </div>

                                        <div className="col-lg-12">
                                            <div className="form_box mb-3">
                                                <textarea
                                                    name="message"
                                                    placeholder="Write Message"
                                                    value={formData.message}
                                                    onChange={handleChange}
                                                    className="form-control"
                                                />
                                                {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                            </div>
                                        </div>

                                        <div className="col-lg-12 mb-3">
                                            <ReCAPTCHA
                                                sitekey="6LcBJdorAAAAABmF4XUvViMIy9zBw1_BY3CPmOcs"
                                                onChange={handleCaptchaChange}
                                            />
                                            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
                                        </div>

                                        <div className="quote_button text-center col-lg-12">
                                                <button className="btn btn-primary" type="submit">
                                                    Send A Message
                                                </button>
                                            </div>
                                    </div>
                                </form>
                            </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">
                                        Unlock Your Path to Digital Success Schedule a session
                                        <span className="sub-title d-block">with our expert team today
                                            Schedule free Consultation
                                        </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;