'use client';

/* eslint-disable @typescript-eslint/no-unused-vars */
import React from "react";
import { motion } from "framer-motion";
import {
  CheckCircle2, Users, Clock, Calendar, Star, Mic, Globe, Briefcase,
  GraduationCap, Target, Zap, ChevronDown, Shield, TrendingUp,
  MessageCircle, ArrowRight, Award, Sparkles, BadgeCheck, BookOpen,
  Video, FileText, Building2, Search, DollarSign, Network, PenLine,
} from "lucide-react";
import { CountryCodeDropdown } from "@/components/ui/CountryCodeDropdown";

function IeltsFaqSection({ context }) {
  const { PRIMARY_BTN, SESSION_OPTIONS, NEXT_SESSION, FALLBACK_SESSIONS, form, setForm, sessions, selectedSessionLabel, hasSessions, expanded, setExpanded, submitted, setSubmitted, submitting, formError, error, handleSubmit, benefits, audience, videoTestimonials, certPath, employmentBenefits, matchedVideoTestimonials, matchedEmploymentBenefits, faqs } = context;

  return (
    <section className="py-20 bg-[#FDFAF7]">
            <div className="max-w-2xl mx-auto px-4 sm:px-6">
              <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-10">
                <h2 className="text-3xl font-black text-[#4A141E]">Frequently Asked Questions</h2>
              </motion.div>
              <div className="space-y-3">
                {faqs.map((faq, i) => (
                  <motion.div key={i}
                    initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }} transition={{ delay: i * 0.05 }}
                    className="rounded-xl bg-white border-2 border-[#C9A96E] overflow-hidden"
                  >
                    <button onClick={() => setExpanded(expanded === i ? null : i)}
                      className="w-full px-6 py-5 flex items-center justify-between text-left gap-4"
                    >
                      <span className="font-bold text-[#4A141E] text-sm">{faq.q}</span>
                      <ChevronDown className={`w-5 h-5 text-[#C9A96E] flex-shrink-0 transition-transform duration-300 ${expanded === i ? "rotate-180" : ""}`} />
                    </button>
                    <div className={`px-6 pb-5 border-t border-[#E6D3B1]/30 ${expanded === i ? "" : "hidden"}`}>
                      <p className="pt-4 text-[#4A141E]/65 leading-relaxed text-sm">{faq.a}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </section>
  );
}

function TesolFaqSection({ context }) {
  const { PRIMARY_BTN, SESSION_OPTIONS, NEXT_SESSION, FALLBACK_SESSIONS, form, setForm, sessions, selectedSessionLabel, hasSessions, expanded, setExpanded, submitted, setSubmitted, submitting, formError, error, handleSubmit, benefits, audience, videoTestimonials, certPath, employmentBenefits, matchedVideoTestimonials, matchedEmploymentBenefits, faqs } = context;

  return (
    <section className="py-20 bg-[#FDFAF7]">
            <div className="max-w-2xl mx-auto px-4 sm:px-6">
              <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-10">
                <h2 className="text-3xl font-black text-[#4A141E]">Frequently Asked Questions</h2>
              </motion.div>
              <div className="space-y-3">
                {faqs.map((faq, i) => (
                  <motion.div key={i}
                    initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }} transition={{ delay: i * 0.05 }}
                    className="rounded-xl bg-white border-2 border-[#C9A96E] overflow-hidden"
                  >
                    <button onClick={() => setExpanded(expanded === i ? null : i)}
                      className="w-full px-6 py-5 flex items-center justify-between text-left gap-4"
                    >
                      <span className="font-bold text-[#4A141E] text-sm">{faq.q}</span>
                      <ChevronDown className={`w-5 h-5 text-[#C9A96E] flex-shrink-0 transition-transform duration-300 ${expanded === i ? "rotate-180" : ""}`} />
                    </button>
                    <div className={`px-6 pb-5 border-t border-[#E6D3B1]/30 ${expanded === i ? "" : "hidden"}`}>
                      <p className="pt-4 text-[#4A141E]/65 leading-relaxed text-sm">{faq.a}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </section>
  );
}

function VoiceAccentFaqSection({ context }) {
  const { PRIMARY_BTN, SESSION_OPTIONS, NEXT_SESSION, FALLBACK_SESSIONS, form, setForm, sessions, selectedSessionLabel, hasSessions, expanded, setExpanded, submitted, setSubmitted, submitting, formError, error, handleSubmit, benefits, audience, videoTestimonials, certPath, employmentBenefits, matchedVideoTestimonials, matchedEmploymentBenefits, faqs } = context;

  return (
    <section className="py-20 bg-[#FDFAF7]">
            <div className="max-w-2xl mx-auto px-4 sm:px-6">
              <motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-10">
                <h2 className="text-3xl font-black text-[#4A141E]">Frequently Asked Questions</h2>
              </motion.div>
              <div className="space-y-3">
                {faqs.map((faq, i) => (
                  <motion.div key={i}
                    initial={{ opacity: 0, y: 8 }} whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }} transition={{ delay: i * 0.05 }}
                    className="rounded-xl bg-white border-2 border-[#C9A96E] overflow-hidden"
                  >
                    <button onClick={() => setExpanded(expanded === i ? null : i)}
                      className="w-full px-6 py-5 flex items-center justify-between text-left gap-4"
                    >
                      <span className="font-bold text-[#4A141E] text-sm">{faq.q}</span>
                      <ChevronDown className={`w-5 h-5 text-[#C9A96E] flex-shrink-0 transition-transform duration-300 ${expanded === i ? "rotate-180" : ""}`} />
                    </button>
                    <div className={`px-6 pb-5 border-t border-[#E6D3B1]/30 ${expanded === i ? "" : "hidden"}`}>
                      <p className="pt-4 text-[#4A141E]/65 leading-relaxed text-sm">{faq.a}</p>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </section>
  );
}

const variants = {
  "ielts": IeltsFaqSection,
  "tesol": TesolFaqSection,
  "voice-and-accent": VoiceAccentFaqSection,
};

export function FaqSection({ course, context }) {
  const Component = variants[course] || variants.ielts;
  return <Component context={context} />;
}