"use client";

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

const faqs = [
  {
    question: "What is a Google AI Mode Tracker?",
    answer:
      "A Google AI Mode Tracker helps you monitor how your website or brand appears in Google’s AI Mode results. It tracks visibility, rankings, and mentions within AI-generated responses across different queries.",
  },
  {
    question: "What is Google AI Mode?",
    answer:
      "Google AI Mode is an advanced AI-powered search experience where users interact with conversational queries and receive dynamic, AI-generated answers instead of traditional search results.",
  },
  {
    question: "How does the AI Mode Tracker work?",
    answer:
      "The tool analyzes prompts and queries in AI Mode and tracks whether your brand appears in the generated responses. It monitors visibility, mentions, and performance across different queries.",
  },
  {
    question: "Can I track my competitors in AI Mode?",
    answer:
      "Yes, you can track competitor visibility in AI Mode results to understand who appears for specific prompts and identify opportunities to improve your presence.",
  },
  {
    question: "What metrics are available in AI Mode tracking?",
    answer:
      "You can analyze metrics like prompt search volume, estimated traffic, type of mentions (link, citation, or brand mention), and overall visibility trends.",
  },
  {
    question: "How can I improve my visibility in Google AI Mode?",
    answer:
      "You can improve visibility by creating high-quality, intent-focused content, structuring your information clearly, and ensuring your brand is referenced in authoritative sources used by AI models.",
  },
];

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