"use client";

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

const faqs = [
  {
    question: "What is a Website Audit Tool?",
    answer:
      "A Website Audit Tool analyzes your website to identify technical SEO issues, on-page problems, and performance gaps. It provides actionable insights to improve your site’s health and search engine rankings.",
  },
  {
    question: "What does the SEO audit check?",
    answer:
      "Our SEO audit performs 115+ checks including site speed, broken links, meta tags, mobile usability, crawlability, indexability, and overall technical SEO performance.",
  },
  {
    question: "How often should I run a website audit?",
    answer:
      "It’s recommended to run a website audit regularly, especially after major updates or content changes. Monthly audits help maintain optimal SEO performance and quickly detect issues.",
  },
  {
    question: "Can I fix issues directly from the audit report?",
    answer:
      "Yes, the audit report provides clear, actionable recommendations and step-by-step guidance to help you fix issues and improve your website’s SEO performance.",
  },
  {
    question: "Will a website audit improve my rankings?",
    answer:
      "Yes, identifying and fixing technical and on-page issues can significantly improve your website’s visibility, crawlability, and overall search engine rankings.",
  },
  {
    question: "Does the tool analyze competitors as well?",
    answer:
      "While the primary focus is your website, the tool also provides insights that help you benchmark against competitors and identify opportunities to outperform them.",
  },
];

const WebsiteAuditFAQs = () => {
  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 WebsiteAuditFAQs;