"use client";

import { useState } from "react";

const faqData = [
  {
    id: 1,
    question:
      "How does Brite News ensure the accuracy of its news and avoid hoaxes?",
    answer:
      "Every article goes through source verification and internal fact-checking, with data confirmed by related parties to ensure valid and trustworthy information.",
  },
  {
    id: 2,
    question: "Who is Brite News’ main target audience?",
    answer:
      "Brite News targets young adults and professionals interested in business, media, and technology, presented in a clear and engaging style.",
  },
  {
    id: 3,
    question:
      "Does Brite News only focus on national news?",
    answer:
      "No. Brite News covers both national and international stories related to digital development and the creative industry in Indonesia and around the world.",
  },
];

export default function FaqClient() {
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const toggleFaq = (id: number) => {
    setOpenFaq(openFaq === id ? null : id);
  };

  return (
    <section className="w-full bg-[#F8C8C8] py-16 px-4 sm:px-6 lg:px-8">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-[#000432] leading-tight">
              Frequently asked questions
            </h2>
          </div>

          <div className="space-y-4">
            {faqData.map((faq) => (
              <div key={faq.id} className="border-b border-gray-300 pb-4">
                <button
                  onClick={() => toggleFaq(faq.id)}
                  className="w-full flex justify-between items-center text-left py-4 focus:outline-none group"
                >
                  <span className="text-lg font-semibold text-[#000432] pr-4 group-hover:text-[#111852] transition-colors">
                    {faq.question}
                  </span>
                  <div className="flex-shrink-0 w-6 h-6 flex items-center justify-center">
                    {openFaq === faq.id ? (
                      <svg
                        className="w-5 h-5 text-[#000432] transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    ) : (
                      <svg
                        className="w-5 h-5 text-[#000432] transition-transform"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M12 4v16m8-8H4"
                        />
                      </svg>
                    )}
                  </div>
                </button>

                <div
                  className={`overflow-hidden transition-all duration-300 ease-in-out ${
                    openFaq === faq.id
                      ? "max-h-96 opacity-100"
                      : "max-h-0 opacity-0"
                  }`}
                >
                  <div className="pb-4">
                    <p className="text-gray-700 leading-relaxed text-base">
                      {faq.answer}
                    </p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}