"use client";

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

const faqs = [
  {
    question: "What is Local Marketing Software?",
    answer:
      "Local Marketing Software helps businesses manage and improve their visibility in local search results. It includes tools for local SEO, listing management, review monitoring, and location-based performance tracking.",
  },
  {
    question: "How does local SEO help my business?",
    answer:
      "Local SEO helps your business appear in search results when customers nearby are looking for your products or services. This increases visibility, foot traffic, and conversions from local audiences.",
  },
  {
    question: "Can I manage multiple business locations?",
    answer:
      "Yes, you can manage multiple locations from a single dashboard. The tool allows you to track performance, update listings, and monitor reviews for all your business locations.",
  },
  {
    question: "Does the tool help with Google Business Profile optimization?",
    answer:
      "Yes, you can optimize your Google Business Profile by managing business details, updating information, and tracking performance to improve local rankings.",
  },
  {
    question: "Can I track local keyword rankings?",
    answer:
      "Yes, the software allows you to track keyword rankings based on specific locations, helping you understand how your business performs in local search results.",
  },
  {
    question: "How does review management work?",
    answer:
      "You can monitor, manage, and respond to customer reviews across platforms. This helps build trust, improve reputation, and enhance your local SEO performance.",
  },
];

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