"use client";

import React, { useState } from "react";

const faqData = [
    {
        category: "General Inquiries",
        items: [
            { id: 1, question: "What is Metatron Cube Software Solutions?", answer: "Metatron Cube is a premier IT consulting and software development agency specializing in tailored business solutions, digital transformation, and high-performance technology management." },
            { id: 2, question: "How can I start a project with you?", answer: "Starting a project is simple. You can reach out through our contact form, email us directly, or schedule a free discovery call to discuss your business requirements." },
            { id: 3, question: "Where is your company located?", answer: "We are headquartered in a modern tech hub, serving clients globally with our distributed team of expert developers and consultants." },
            { id: 4, question: "Do you offer free consultations?", answer: "Yes, we provide a complimentary initial consultation to understand your needs and determine how our solutions can best drive your business growth." },
            { id: 5, question: "What industries do you specialize in?", answer: "We have extensive experience in Fintech, Healthcare, E-commerce, Logistics, and Enterprise Resource Planning (ERP) sectors." }
        ]
    },
    {
        category: "Services & Solutions",
        items: [
            { id: 6, question: "What software development services do you provide?", answer: "We offer full-cycle development including web applications, mobile apps (iOS/Android), custom ERP systems, and API integrations." },
            { id: 7, question: "Do you provide UI/UX design services?", answer: "Absolutely. Our design team focuses on creating user-centric, intuitive, and visually stunning interfaces that enhance user engagement and brand value." },
            { id: 8, question: "Can you help migrate our legacy system to the cloud?", answer: "Yes, we specialize in cloud migration strategies for AWS, Azure, and Google Cloud, ensuring zero data loss and minimal downtime." },
            { id: 9, question: "Do you offer dedicated developer teams?", answer: "Yes, we provide staff augmentation and dedicated teams that integrate seamlessly with your in-house workflow to accelerate development." },
            { id: 10, question: "What is your typical development methodology?", answer: "We primarily follow Agile and Scrum methodologies to ensure transparency, flexibility, and rapid delivery of high-quality software." }
        ]
    },
    {
        category: "Support & Maintenance",
        items: [
            { id: 11, question: "How do you handle software security?", answer: "Security is built into our dev process. We perform regular code audits, penetration testing, and follow industry standard compliance like GDPR or HIPAA where applicable." },
            { id: 12, question: "Do you provide 24/7 technical support?", answer: "We offer various support tiers, including 24/7 critical incident response and proactive system monitoring to ensure your operations never stop." },
            { id: 13, question: "What happens after the project is launched?", answer: "After launch, we provide a warranty period followed by optional maintenance packages to handle updates, scaling, and feature enhancements." },
            { id: 14, question: "How do you manage data backups?", answer: "We implement automated daily backups with redundant storage across different geographic locations to ensure data recoverability under any circumstances." },
            { id: 15, question: "Can you provide training for our staff?", answer: "Yes, we provide comprehensive documentation and training sessions to ensure your team is fully equipped to manage the new system efficiently." }
        ]
    },
    {
        category: "Consulting & Strategy",
        items: [
            { id: 16, question: "How do you help businesses with digital transformation?", answer: "We analyze your current processes, identify bottlenecks, and implement digital solutions that automate workflows and improve overall efficiency." },
            { id: 17, question: "Do you provide IT infrastructure consulting?", answer: "Yes, we advise on server architecture, network security, and infrastructure scaling to support your business's future growth." },
            { id: 18, question: "How do you measure project success?", answer: "We define clear KPIs at the start, such as performance metrics, user adoption rates, and ROI, and track them throughout the lifecycle." },
            { id: 19, question: "Can you help us with technology stack selection?", answer: "Our consultants evaluate your project needs to recommend the most scalable, cost-effective, and future-proof tech stack (e.g., React, Node.js, Python)." },
            { id: 20, question: "Do you work with startups?", answer: "Yes, we love working with startups to build MVPs (Minimum Viable Products) quickly and efficiently to help them secure funding and market traction." }
        ]
    }
];

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

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

    return (
        <section className="faq-page-section section-space">
            <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">
                                <i className="fa-solid fa-circle-question"></i> HELP KNOWLEDGE BASE
                            </span>
                            <h2 className="section-title">Frequently Asked Questions</h2>
                            <p className="section-desc">
                                Find answers to common questions about our services, processes, and how we can help your business thrive in the digital age.
                            </p>
                        </div>
                    </div>
                </div>

                <div className="faq-content-wrapper">
                    {faqData.map((category, catIndex) => (
                        <div key={catIndex} className="faq-category-block mb-50">
                            <h3 className="category-header">
                                <span className="category-count">0{catIndex + 1}</span> {category.category}
                            </h3>
                            <div className="accordion-custom">
                                {category.items.map((faq) => (
                                    <div
                                        key={faq.id}
                                        className={`faq-item ${activeId === faq.id ? "active" : ""}`}
                                    >
                                        <button
                                            className="faq-question"
                                            onClick={() => toggleAccordion(faq.id)}
                                            aria-expanded={activeId === faq.id}
                                        >
                                            <span className="question-text">{faq.question}</span>
                                            <span className="faq-icon">
                                                {activeId === faq.id ? <i className="fa-solid fa-minus"></i> : <i className="fa-solid fa-plus"></i>}
                                            </span>
                                        </button>
                                        <div className={`faq-answer ${activeId === faq.id ? "show" : ""}`}>
                                            <div className="answer-inner">
                                                {faq.answer}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>

                <div className="faq-cta text-center mt-80">
                    <div className="cta-box">
                        <h3>Still have questions?</h3>
                        <p>If you couldn't find the answer you were looking for, feel free to contact us. Our team is ready to help you!</p>
                        <a href="/contact" className="primary-btn-1 mt-20">
                            Contact Support &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>

            <style jsx>{`
                .faq-page-section {
                    background: #f8fafc;
                    padding: 80px 0;
                }
                @media (max-width: 767px) {
                    .faq-page-section {
                        padding: 60px 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;
                }
                .section-title {
                    font-size: 48px;
                    font-weight: 800;
                    color: #0f172a;
                    margin-bottom: 20px;
                }
                .section-desc {
                    color: #64748b;
                    max-width: 700px;
                    margin: 0 auto;
                    font-size: 16px;
                }
                .faq-content-wrapper {
                    max-width: 900px;
                    margin: 0 auto;
                }
                .category-header {
                    font-size: 24px;
                    font-weight: 700;
                    color: #0f172a;
                    margin-bottom: 25px;
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    padding-bottom: 15px;
                    border-bottom: 2px solid #e2e8f0;
                }
                .category-count {
                    color: #3779b9;
                    font-size: 14px;
                    background: rgba(60, 114, 252, 0.1);
                    padding: 4px 10px;
                    border-radius: 4px;
                }
                .accordion-custom {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                }
                .faq-item {
                    background: #fff;
                    border-radius: 12px;
                    border: 1px solid #e2e8f0;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }
                .faq-item.active {
                    border-color: #3779b9;
                    box-shadow: 0 10px 30px rgba(60, 114, 252, 0.08);
                }
                .faq-question {
                    width: 100%;
                    padding: 22px 30px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: none;
                    border: none;
                    text-align: left;
                    cursor: pointer;
                    outline: none;
                }
                .question-text {
                    font-size: 18px;
                    font-weight: 700;
                    color: #1e293b;
                    transition: all 0.3s ease;
                }
                .faq-item:hover .question-text {
                    color: #3779b9;
                }
                .faq-item.active .question-text {
                    color: #3779b9;
                }
                .faq-icon {
                    width: 32px;
                    height: 32px;
                    background: #f1f5f9;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    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: 500px;
                }
                .answer-inner {
                    padding: 0 30px 25px;
                    color: #64748b;
                    line-height: 1.7;
                    font-size: 16px;
                }
                @media (max-width: 991px) {
                    .section-title {
                        font-size: 36px;
                    }
                    .faq-question {
                        padding: 18px 20px;
                    }
                    .question-text {
                        font-size: 16px;
                        padding-right: 15px;
                    }
                }
                .faq-cta {
                    padding-top: 60px;
                    border-top: 1px solid #e2e8f0;
                }
                .cta-box h3 {
                    font-size: 32px;
                    font-weight: 800;
                    color: #0f172a;
                    margin-bottom: 15px;
                }
                .cta-box p {
                    color: #64748b;
                    font-size: 18px;
                    margin-bottom: 30px;
                }
            `}</style>
        </section>
    );
};

export default FaqPageSection;
