"use client";

import { useState } from "react";

const faqData = [
  {
    id: 1,
    question: "What is Radio Brite?",
    answer:
      "Radio Brite is an online streaming radio born from the passion to voice creativity, entertainment.",
  },
  {
    id: 2,
    question: "What can listeners find on the Radio Brite website?",
    answer:
      "On the Radio Brite website, visitors can explore the Home page, News page, Program List.",
  },
  {
    id: 3,
    question: "Who are the target listeners of Radio Brite?",
    answer:
      "Radio Brite is designed for audiences aged 15-45 years old, from energetic teenagers to professionals.",
  },
  {
    id: 4,
    question: "Why choose Radio Brite?",
    answer:
      "Because Radio Brite is more than just a radio station it unites music, news, entertainment, and opportunities.",
  },
];

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-[#F8F0E3] 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]"
                        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]"
                        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 ${
                    openFaq === faq.id ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
                  }`}
                >
                  <div className="pb-4">
                    <p className="text-gray-700 text-base">{faq.answer}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}