"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 justify-content-center">
                    <div className="col-lg-8">
                        <div className="section-title-wrapper text-center mb-60">
                            <span className="section-subtitle">
                                <img src="/assets/img-app/fav-icon.webp" alt="" className="subtitle-icon" /> FAQ
                            </span>
                            <h2 className="section-title">Frequently Asked Questions</h2>
                            <p className="section-desc">
                                Transparent answers to the most common questions about our agency, development process, and partnership models.
                            </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>

            <style jsx>{`
                .faq-page-section {
                    background: #f8fbff;
                    padding: 80px 0;
                }
                .section-subtitle {
                    color: #3779b9;
                    font-weight: 700;
                    margin-bottom: 15px;
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                    font-size: 14px;
                }
                .subtitle-icon {
                    width: 20px;
                    height: 20px;
                    object-fit: contain;
                }
                .section-title {
                    font-size: 48px;
                    font-weight: 800;
                    color: #1a1f2b;
                    margin-bottom: 20px;
                }
                .section-desc {
                    color: #64748b;
                    max-width: 600px;
                    margin: 0 auto;
                    font-size: 16px;
                    margin-bottom: 40px;
                }
                .faq-item {
                    background: #fff;
                    border-radius: 12px;
                    border: 1px solid #e2e8f0;
                    margin-bottom: 15px;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
                }
                .faq-item.active {
                    border-color: #3779b9;
                    box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
                }
                .faq-question {
                    width: 100%;
                    padding: 18px 25px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: none;
                    border: none;
                    text-align: left;
                    cursor: pointer;
                    outline: none;
                }
                .question-text {
                    font-size: 15px;
                    font-weight: 700;
                    color: #1a1f2b;
                    line-height: 1.4;
                }
                .faq-item.active .question-text {
                    color: #3779b9;
                }
                .faq-icon {
                    width: 28px;
                    height: 28px;
                    min-width: 28px;
                    background: #f1f5f9;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                    color: #64748b;
                    transition: all 0.3s ease;
                }
                .faq-item.active .faq-icon {
                    background: #3779b9;
                    color: #fff;
                    transform: rotate(180deg);
                }
                .faq-answer {
                    max-height: 0;
                    overflow: hidden;
                    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                }
                .faq-answer.show {
                    max-height: 300px;
                }
                .answer-inner {
                    padding: 0 25px 20px;
                    color: #64748b;
                    line-height: 1.6;
                    font-size: 14px;
                }
                .faq-center-image-wrap {
                    padding: 0 15px;
                }
                .main-faq-img {
                    width: 100%;
                    max-width: 400px;
                    border-radius: 20px;
                    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
                }
                @media (max-width: 991px) {
                    .col-lg-4 {
                        margin-bottom: 30px;
                    }
                    .faq-center-image-wrap {
                        order: -1;
                        margin-bottom: 40px;
                    }
                    .section-title {
                        font-size: 36px;
                    }
                }
                .cta-box h3 {
                    font-size: 32px;
                    font-weight: 800;
                    color: #1a1f2b;
                    margin-bottom: 15px;
                }
                .cta-box p {
                    color: #64748b;
                    font-size: 18px;
                    margin-bottom: 30px;
                }
            `}</style>
        </section>
    );
};

export default FaqPageSection;
