"use client";

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

const faqs = [
  {
    question: "How long does it take to see results from SEO?",
    answer:
      "SEO is a long-term strategy. Most websites start seeing noticeable improvements within 3–6 months, but the exact timeline depends on factors like competition, industry, and your current website performance.",
  },
  {
    question: "What makes your agency different from others?",
    answer:
      "We combine AI-powered insights with proven SEO strategies to deliver measurable and scalable growth. Our approach is fully data-driven and tailored to your business goals.",
  },
  {
    question: "Do you work with businesses in my industry?",
    answer:
      "Yes, we work with businesses across various industries. Our strategies are customized based on your niche, audience, and specific growth objectives.",
  },
  {
    question: "What is your pricing structure?",
    answer:
      "Our pricing is flexible and depends on your business needs, goals, and scope of work. We offer customized plans to ensure maximum ROI for your investment.",
  },
  {
    question: "Can I change my plan later?",
    answer:
      "Absolutely. You can upgrade or adjust your plan at any time based on your evolving business needs and growth requirements.",
  },
  {
    question: "Do you offer refunds?",
    answer:
      "We focus on delivering value and measurable results. Refund policies depend on the service plan—please contact our team for detailed information.",
  },
  {
    question: "Can I get a demo before purchasing?",
    answer:
      "Yes, we offer demos so you can explore our platform and understand how our tools and strategies can benefit your business before making a decision.",
  },
];

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