"use client";

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

const faqs = [
  {
    question: "What is a Perplexity Visibility Tracker?",
    answer:
      "A Perplexity Visibility Tracker helps you monitor how your brand appears in Perplexity AI search results. It tracks mentions, citations, and links across different queries and AI-generated answers.",
  },
  {
    question: "How does Perplexity visibility tracking work?",
    answer:
      "The tool analyzes prompts and checks whether your brand is mentioned or cited in Perplexity responses. It also tracks which sources are used and how your visibility changes over time.",
  },
  {
    question: "Can I track my competitors in Perplexity?",
    answer:
      "Yes, you can see which competitors are cited in Perplexity answers for your target queries and compare their visibility with your brand.",
  },
  {
    question: "What metrics can I analyze in Perplexity tracking?",
    answer:
      "You can track metrics like brand mentions, source citations, backlinks, prompt coverage, and visibility trends across different queries.",
  },
  {
    question: "Why is Perplexity visibility important?",
    answer:
      "Perplexity provides AI answers with cited sources. Being mentioned or linked increases your credibility, authority, and chances of attracting traffic from AI-driven search.",
  },
  {
    question: "How can I improve my visibility in Perplexity?",
    answer:
      "You can improve visibility by creating high-quality, authoritative content, earning backlinks from trusted sources, and ensuring your content is frequently referenced in your niche.",
  },
];

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