"use client";

import React, { useState } from "react";
import { ChevronDown } from "lucide-react";
import { useRouter } from "next/navigation";

const faqs = [
  {
    question: "What is White Label SEO Software?",
    answer:
      "White Label SEO Software allows you to offer SEO services under your own brand. You can generate reports, dashboards, and audits with your logo and branding, making it appear as your own platform.",
  },
  {
    question: "Can I customize reports with my brand?",
    answer:
      "Yes, you can fully customize reports with your logo, brand colors, and domain. This helps you deliver professional SEO reports that match your agency’s identity.",
  },
  {
    question: "Who should use white label SEO software?",
    answer:
      "White label SEO software is ideal for agencies, freelancers, and marketing professionals who want to provide SEO services to clients without building their own tools.",
  },
  {
    question: "Can I manage multiple clients?",
    answer:
      "Yes, you can manage multiple clients and projects from a single dashboard, making it easy to track performance and deliver reports for each client.",
  },
  {
    question: "Does the software support automated reporting?",
    answer:
      "Yes, you can automate report generation and schedule regular reports to be sent to your clients, saving time and improving efficiency.",
  },
  {
    question: "Can clients access their own dashboards?",
    answer:
      "Yes, you can provide clients with access to their own branded dashboards where they can view SEO performance, reports, and insights in real time.",
  },
];

const WhiteLabelFAQs = () => {
  const router = useRouter();
  const [activeIndex, setActiveIndex] = useState(null);

  const toggle = (index) => {
    setActiveIndex(activeIndex === index ? null : index);
  };

  return (
    <section className="py-16 px-4 sm:px-6 lg:px-16 text-center">
      <h2 className="text-3xl md:text-4xl font-semibold text-[#3B3B3B]">
        Frequently Asked Questions
      </h2>

      <p className="mt-4 text-[#676767] max-w-2xl mx-auto">
        Got questions? We've got answers. If you can't find what you're looking
        for, feel free to contact us.
      </p>

      <div className="mt-10 max-w-3xl mx-auto space-y-4 text-left">
        {faqs.map((item, index) => (
          <div
            key={index}
            className="border rounded-xl bg-white border-[#DDDDDD]"
          >
            <button
              onClick={() => toggle(index)}
              className="w-full flex items-center justify-between px-5 py-4 text-left text-[#3B3B3B] font-medium text-sm lg:text-base"
            >
              {item.question}
              <ChevronDown
                size={20}
                className={`text-[#794AFF] transition-transform duration-300 ${
                  activeIndex === index ? "rotate-180" : ""
                }`}
              />
            </button>

            <div
              className={`px-5 overflow-hidden transition-all duration-300 ${
                activeIndex === index ? "max-h-40 pb-4" : "max-h-0"
              }`}
            >
              <p className="text-sm lg:text-base text-[#3B3B3B]">
                {item.answer}
              </p>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-10">
        <p className="text-[#676767]">Still have questions?</p>
        <button
          onClick={() => router.push("/contact")}
          className="mt-2 text-[#794AFF] font-medium underline flex items-center justify-center gap-1 mx-auto hover:opacity-80 transition"
        >
          Contact our team →
        </button>
      </div>
    </section>
  );
};

export default WhiteLabelFAQs;