'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { dataStore, type FAQ } from '@/lib/dataStore';

export default function FAQPage() {
  const [openFAQ, setOpenFAQ] = useState<number | null>(null);
  const [faqs, setFaqs] = useState<FAQ[]>([]);

  useEffect(() => {
    setFaqs(dataStore.getFAQs().sort((a, b) => a.order - b.order));
  }, []);

  const toggleFAQ = (id: number) => {
    setOpenFAQ(openFAQ === id ? null : id);
  };

  return (
    <div className="min-h-screen bg-[#003366]">
      <Header />

      <main className="pt-32 pb-16">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Başlık */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">
              Sıkça Sorulan Sorular
            </h1>
            <p className="text-lg text-[#F8F9FA] max-w-2xl mx-auto">
              A2 Metro Hattı projesi hakkında merak ettiğiniz soruların cevapları
            </p>
          </div>

          {/* SSS Listesi */}
          <div className="space-y-4">
            {faqs.map((faq) => (
              <div
                key={faq.id}
                className="bg-white rounded-xl shadow-lg overflow-hidden"
              >
                <button
                  onClick={() => toggleFAQ(faq.id)}
                  className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors"
                >
                  <h3 className="text-lg font-semibold text-[#004B87] pr-4">
                    {faq.question}
                  </h3>
                  <svg
                    className={`w-6 h-6 text-[#00B4D8] transform transition-transform duration-200 ${
                      openFAQ === faq.id ? 'rotate-180' : ''
                    }`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>
                </button>

                {openFAQ === faq.id && (
                  <div className="px-6 pb-4">
                    <div className="border-t border-gray-200 pt-4">
                      <p className="text-gray-700 leading-relaxed">
                        {faq.answer}
                      </p>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* İletişim CTA */}
          <div className="mt-12 text-center">
            <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
              <h3 className="text-xl font-bold text-white mb-4">
                Başka Sorunuz Mu Var?
              </h3>
              <p className="text-[#F8F9FA] mb-6">
                Yukarıdaki sorular dışında merak ettiğiniz konular için bizimle iletişime geçebilirsiniz.
              </p>
              <Link
                href="/#iletisim"
                className="inline-block bg-[#00B4D8] text-white px-8 py-3 rounded-lg font-semibold hover:bg-[#0099B8] transition-colors"
              >
                İletişime Geç
              </Link>
            </div>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}