"use client";

import React, { useState } from "react";

const FaqPageSection = () => {
    const [activeId, setActiveId] = useState<number | null>(1);

    const toggleAccordion = (id: number) => {
        setActiveId(activeId === id ? null : id);
    };

    const leftFaqs = [
        {
            id: 1,
            question: "How does Metatron Cube ensure project success?",
            answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
        },
        {
            id: 2,
            question: "What tech stacks do you specialize in?",
            answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
        },
        {
            id: 3,
            question: "How do you handle intellectual property (IP)?",
            answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
        },
        {
            id: 4,
            question: "Can you work with our existing in-house team?",
            answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
        },
        {
            id: 5,
            question: "What is your communication model during development?",
            answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
        }
    ];

    const rightFaqs = [
        {
            id: 6,
            question: "How do you maintain code quality and standards?",
            answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
        },
        {
            id: 7,
            question: "What are your post-launch support options?",
            answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
        },
        {
            id: 8,
            question: "How quickly can you start a new project?",
            answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
        },
        {
            id: 9,
            question: "Do you provide UI/UX design services?",
            answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
        },
        {
            id: 10,
            question: "How do you handle security and data protection?",
            answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
        }
    ];

    const leftFaqs2 = [
        {
            id: 11,
            question: "How does Metatron Cube ensure project success?",
            answer: "We follow a rigorous discovery process, Agile development cycles, and continuous quality assurance to ensure every project meets client goals on time and within budget."
        },
        {
            id: 12,
            question: "What tech stacks do you specialize in?",
            answer: "Our expertise spans modern frameworks including React, Next.js, Node.js, and Python, along with specialized platforms like Shopify and custom ERP solutions."
        },
        {
            id: 13,
            question: "How do you handle intellectual property (IP)?",
            answer: "Upon project completion and final payment, full ownership and IP rights of the source code and assets are transferred to the client, as stipulated in our standard agreements."
        },
        {
            id: 14,
            question: "Can you work with our existing in-house team?",
            answer: "Absolutely. We offer staff augmentation and dedicated team models that integrate seamlessly with your internal workflows and communication tools."
        },
        {
            id: 15,
            question: "What is your communication model during development?",
            answer: "We use Slack, Jira, and regular Zoom check-ins to provide transparent updates. You'll have a dedicated project manager acting as your primary point of contact."
        }
    ];

    const rightFaqs2 = [
        {
            id: 16,
            question: "How do you maintain code quality and standards?",
            answer: "Our developers follow strict linting rules, conduct peer code reviews, and implement automated testing to maintain a clean, scalable, and bug-free codebase."
        },
        {
            id: 17,
            question: "What are your post-launch support options?",
            answer: "We offer tiered maintenance packages that include security patches, performance monitoring, regular backups, and feature enhancements to keep your platform running smoothly."
        },
        {
            id: 18,
            question: "How quickly can you start a new project?",
            answer: "Depending on the scope and resource availability, we can typically kick off a project within 1 to 2 weeks after the discovery phase and agreement signing."
        },
        {
            id: 19,
            question: "Do you provide UI/UX design services?",
            answer: "Yes, our design-led approach ensures that every project starts with a focus on user experience, creating intuitive and visually stunning interfaces."
        },
        {
            id: 20,
            question: "How do you handle security and data protection?",
            answer: "We implement industry-standard encryption, secure API protocols, and regular security audits to protect your data and ensure compliance with global standards."
        }
    ];

    return (
        <section className="faq-page-section">
            <div className="container">
                <div className="row align-items-end mb-60">
                    <div className="col-lg-6">
                        <div className="section-title-wrapper">
                            <span className="section-subtitle">
                                Digital Mastery Unlocked
                            </span>
                            <h2 className="section-title" style={{ margin: 0 }}>Metatroncube FAQs: Web-Apps, SEO, & Digital Marketing</h2>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div className="section-desc-wrapper">
                            <p className="section-desc" style={{ margin: 0, paddingLeft: '20px' }}>
                                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>

                {/* Section 1: 3-Column with Image */}
                <div className="row align-items-center mb-40">
                    {/* Left Side FAQs */}
                    <div className="col-lg-4 col-md-12">
                        <div className="accordion-custom">
                            {leftFaqs.map((faq) => (
                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
                                        <span className="question-text">{faq.question}</span>
                                        <span className="faq-icon">
                                            <i className="fa-solid fa-chevron-down"></i>
                                        </span>
                                    </button>
                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
                                        <div className="answer-inner">{faq.answer}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Center Image */}
                    <div className="col-lg-4 col-md-12 text-center">
                        <div className="faq-center-image-wrap">
                            <img src="/assets/img-app/home/section9/faq.webp" alt="FAQ Center" className="main-faq-img" />
                        </div>
                    </div>

                    {/* Right Side FAQs */}
                    <div className="col-lg-4 col-md-12">
                        <div className="accordion-custom">
                            {rightFaqs.map((faq) => (
                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
                                        <span className="question-text">{faq.question}</span>
                                        <span className="faq-icon">
                                            <i className="fa-solid fa-chevron-down"></i>
                                        </span>
                                    </button>
                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
                                        <div className="answer-inner">{faq.answer}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>

                {/* Section 2: 2-Column Standard Layout */}
                <div className="row section-space-top">
                    <div className="col-lg-6 col-md-12">
                        <div className="accordion-custom">
                            {leftFaqs2.map((faq) => (
                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
                                        <span className="question-text">{faq.question}</span>
                                        <span className="faq-icon">
                                            <i className="fa-solid fa-chevron-down"></i>
                                        </span>
                                    </button>
                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
                                        <div className="answer-inner">{faq.answer}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                    <div className="col-lg-6 col-md-12">
                        <div className="accordion-custom">
                            {rightFaqs2.map((faq) => (
                                <div key={faq.id} className={`faq-item ${activeId === faq.id ? "active" : ""}`}>
                                    <button className="faq-question" onClick={() => toggleAccordion(faq.id)}>
                                        <span className="question-text">{faq.question}</span>
                                        <span className="faq-icon">
                                            <i className="fa-solid fa-chevron-down"></i>
                                        </span>
                                    </button>
                                    <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
                                        <div className="answer-inner">{faq.answer}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </div>

        </section>
    );
};

export default FaqPageSection;