// components/landing/FAQ.tsx
"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Minus, HelpCircle, Briefcase, Users, MessageSquare } from "lucide-react";

type Category = "companies" | "jobseekers";

interface FAQItem {
  id: number;
  question: string;
  answer: string;
}

export default function FAQ() {
  const [activeTab, setActiveTab] = useState<Category>("companies");
  const [openId, setOpenId] = useState<number | null>(1); // Default first one open

  const companiesData: FAQItem[] = [
    {
      id: 1,
      question: "How do I post a job on PKI?",
      answer: "Posting a job on PKI is simple. Click on the 'Post Job' button, fill in the job details including title, description, requirements, and deadline. Once reviewed, your job will be live within 24 hours."
    },
    {
      id: 2,
      question: "What is the cost to post a job?",
      answer: "Basic job postings are free. For premium features like highlighted listings and featured positions, we offer flexible plans starting at $49/month."
    },
    {
      id: 3,
      question: "How can I find qualified candidates?",
      answer: "Our platform uses smart matching algorithms to connect you with professionals based on skills, experience, and values alignment."
    },
    {
      id: 4,
      question: "Can I edit or remove a job posting?",
      answer: "Yes, you can manage all your postings from your dashboard. Edits are reflected instantly, and you can archive positions at any time."
    }
  ];

  const jobSeekersData: FAQItem[] = [
    {
      id: 101,
      question: "How do I create a professional profile?",
      answer: "Register and complete your profile by adding your experience, skills, and portfolio. A complete profile significantly increases your visibility to top employers."
    },
    {
      id: 102,
      question: "Is it free to apply for jobs?",
      answer: "Yes, PKI is completely free for professionals. You can apply to unlimited positions and save jobs for later without any cost."
    },
    {
      id: 103,
      question: "How do I track my applications?",
      answer: "Your personal dashboard provides real-time updates on your applications, including when they've been viewed or if an employer has sent a message."
    },
    {
      id: 104,
      question: "What types of roles are available?",
      answer: "We feature a wide range of roles across Technology, Finance, Creative, and Operations, specifically focusing on impact-driven organizations."
    }
  ];

  const currentData = activeTab === "companies" ? companiesData : jobSeekersData;

  return (
    <section className="bg-slate-50/50 py-24 sm:py-32">
      <div className="max-w-4xl mx-auto px-6">
        {/* Header */}
        <div className="text-center mb-16">
          <motion.div
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-sky-50 border border-sky-100 mb-6"
          >
            <HelpCircle className="w-3.5 h-3.5 text-sky-600" />
            <span className="text-[10px] font-bold tracking-[0.2em] text-sky-700 uppercase">Support</span>
          </motion.div>
          
          <motion.h2 
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-4xl font-black text-slate-900 mb-4 tracking-tight"
          >
            Everything you need to know
          </motion.h2>
          
          <motion.p 
            initial={{ opacity: 0, y: 10 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-slate-500 text-lg"
          >
            Common questions about the PKI platform and our community.
          </motion.p>
        </div>

        {/* Custom Tab Switcher */}
        <div className="flex justify-center mb-12">
          <div className="relative p-1 bg-slate-100 rounded-2xl flex items-center">
            <button
              onClick={() => { setActiveTab("companies"); setOpenId(companiesData[0].id); }}
              className={`relative z-10 flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-bold transition-all duration-300 ${
                activeTab === "companies" ? "text-sky-600" : "text-slate-500 hover:text-slate-700"
              }`}
            >
              <Briefcase className="w-4 h-4" />
              For Companies
              {activeTab === "companies" && (
                <motion.div
                  layoutId="activeTab"
                  className="absolute inset-0 bg-white shadow-sm rounded-xl -z-10"
                  transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                />
              )}
            </button>
            <button
              onClick={() => { setActiveTab("jobseekers"); setOpenId(jobSeekersData[0].id); }}
              className={`relative z-10 flex items-center gap-2 px-8 py-3 rounded-xl text-sm font-bold transition-all duration-300 ${
                activeTab === "jobseekers" ? "text-sky-600" : "text-slate-500 hover:text-slate-700"
              }`}
            >
              <Users className="w-4 h-4" />
              For Professionals
              {activeTab === "jobseekers" && (
                <motion.div
                  layoutId="activeTab"
                  className="absolute inset-0 bg-white shadow-sm rounded-xl -z-10"
                  transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
                />
              )}
            </button>
          </div>
        </div>

        {/* FAQ List */}
        <div className="space-y-4">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, x: 10 }}
              animate={{ opacity: 1, x: 0 }}
              exit={{ opacity: 0, x: -10 }}
              transition={{ duration: 0.3 }}
              className="space-y-4"
            >
              {currentData.map((item) => {
                const isOpen = openId === item.id;
                return (
                  <motion.div
                    key={item.id}
                    layout
                    className={`group border transition-all duration-300 rounded-2xl overflow-hidden ${
                      isOpen 
                        ? "bg-white border-sky-200 shadow-xl shadow-sky-900/5" 
                        : "bg-white/50 border-slate-200 hover:border-slate-300"
                    }`}
                  >
                    <button
                      onClick={() => setOpenId(isOpen ? null : item.id)}
                      className="w-full px-8 py-6 flex items-center justify-between text-left"
                    >
                      <span className={`text-base font-bold transition-colors duration-300 ${
                        isOpen ? "text-sky-600" : "text-slate-700 group-hover:text-slate-900"
                      }`}>
                        {item.question}
                      </span>
                      <div className={`p-1.5 rounded-full transition-all duration-300 ${
                        isOpen ? "bg-sky-50 text-sky-600" : "bg-slate-100 text-slate-400 group-hover:bg-slate-200"
                      }`}>
                        {isOpen ? <Minus className="w-4 h-4" /> : <Plus className="w-4 h-4" />}
                      </div>
                    </button>
                    
                    <AnimatePresence>
                      {isOpen && (
                        <motion.div
                          initial={{ height: 0, opacity: 0 }}
                          animate={{ height: "auto", opacity: 1 }}
                          exit={{ height: 0, opacity: 0 }}
                          transition={{ duration: 0.3, ease: "easeInOut" }}
                        >
                          <div className="px-8 pb-6 text-slate-500 text-[15px] leading-relaxed border-t border-slate-50 pt-4">
                            {item.answer}
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </motion.div>
                );
              })}
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Footer Link */}
        <motion.div 
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          className="mt-16 text-center"
        >
          <div className="inline-flex items-center gap-4 p-6 bg-white rounded-3xl border border-slate-100 shadow-sm">
            <div className="w-10 h-10 rounded-2xl bg-sky-50 flex items-center justify-center">
              <MessageSquare className="w-5 h-5 text-sky-600" />
            </div>
            <div className="text-left">
              <p className="text-sm font-bold text-slate-900">Still have questions?</p>
              <p className="text-xs text-slate-500">We're here to help you get started.</p>
            </div>
            <a 
              href="#contact" 
              className="ml-4 px-6 py-2 bg-slate-900 text-white text-xs font-bold rounded-xl hover:bg-slate-800 transition-colors"
            >
              Contact Support
            </a>
          </div>
        </motion.div>
      </div>
    </section>
  );
}